Twenty Seventeen カスタム – header、footer、content

header.phpとfooter.phpのカスタムについて。あとcontentについて少し。

headerやfooterにはいろいろスクリプトやcssを読み込んだりしますね。これらを直接headerやfooterに書かず、別ファイルに書いて読み込むのが今どきです。
私は header_plus.php,  footer_plus.php という中間ファイルを作ってそれを読み込んでます。中間ファイルというくらいですから、plusに読み込むそれぞれ(スクリプトやcssやその他部品)もそれぞれにファイル化しています。細かくなりますが後々のメンテでも都合いいですよ。

header.php

headerでは、追加する要素も多くあります。改造したいこともあります。headerに読み込むパーツと言っても、その読み込む場所もいろいろだったりしますから、わりとheader.phpは混沌化しやすいです。きっちりコメントアウトで説明を書きつつ改造を進めたいですね。

シングルの巨大画像を消す

Twenty Seventeenのわずかなデザイン的弱点のうちのひとつ、シングルポストやページに現れる巨大アイキャッチ画像を消したいって誰しも思うでしょう。

single post
巨大画像でシングルページがこんなことになります

最初はsingle.phpかcontent.phpに記述があるかと思ったら、まあ何て事でしょうheader.phpにその記述があったんですねえ。

/*
	 * If a regular post or page, and not the front page, show the featured image.
	 * Using get_queried_object_id() here since the $post global may not be set before a call to the_post().
	 */
	if ( ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) && has_post_thumbnail( get_queried_object_id() ) ) :
		echo '<div class="single-featured-image-header">';
		echo get_the_post_thumbnail( get_queried_object_id(), 'twentyseventeen-featured-image' );
		echo '</div><!-- .single-featured-image-header -->';
	endif;
	?>

「フロントページではなく通常の投稿やページの場合は、おすすめ画像を表示します」とシングルポストにまで巨大な画像を、しかもサイトヘッダのかたまりの直下に表示させてしまうこの部分、こんなの必要ですか?いりませんよね。デカすぎるし、意匠的に場所も悪いし。この部分私はごっそり削除します。

これを削除した代わりに、パンくずリストや普段隠している検索結果を表示するボックスを置いたりしています。

巨大な画像を消したので、content.phpでは the_post_thumbnail を新たに好きなように設置しましょう。

メインメニューに検索ボタン

検索ボタンなんですが、サイドバーに検索ボタンを置いても、スマホ表示では縦に繋がるので長いページの中ほど、探しにくい場所に行ってしまいますよね。ですので検索ボタンはトップに近い場所にあったほうがいい、それは自ずとメインナビゲーション、メニューバーみたいなあの部分になります。誰が一体ひとのサイト内検索などするのかとお思いでしょうが、何と、じぶんがよくやるんです。

検索ボタンをメインナビに入れ込むことはTwenty Sixteenのカスタマイズでもやりました。こちらの記事です。

Twentysixteen カスタマイズ 4 〜 最小限度の改変を見極め実施する

ちょっと見直したいところ、修正するところなどもあるんですが、基本のところは同じことです。仕切り直しも兼ねてTwenty Seventy用にまた書き改めるかもしれません。

ヘッダーのひょこひょこを是正する

随分時が経ってからの追記ですが、ホーム以外で、ヘッダー画像の部分がひょこひょこする現象があります。それを是正する話を書いたのでここからもリンクしておきます。

WordPress twentyseventeen CSS ヘッダーひょこひょこ現象を是正する基本

footer.php

footer.phpはデフォルトの「Proudly powered by WordPress」を書き換えるのが定番でした。Twenty Seventeenではsite-info.phpという部品が供給され、Proudly powered by WordPressはこっちに入ってます。ですのでカスタマイズするのはfooter.phpではなくてsite-info.phpのほうになりますね。自分のサイト名やサブタイトル、コピーライトやその他インフォメーションは全部site-info.phpに書くだけでいいんです。これは簡素でいい感じ。

footer.php に他の変更があるとすればスクリプトやcssの読み込みなどですね。私は footer_plus.php を作ってそっちにまとめています。footer_plus.php を読み込む記述だけ書いて、やや気に入らないcssだけちょいちょい好きなように書き換えれば完了です。簡単footerに乾杯。

content と content-excerpt

index、home、archive、ガワのほうは何使ってもいいとしてその中身です。content-excerptのほうは、まあ一覧の中身として使えるという認識でいいと思います。contentのほうは、じゃあsingle用かというとそうともかぎらず、フルスペックの中身表示用という認識っぽいです。シングルが一覧表示かは問題ではなく、フルで表示するかどうかってことですね。

ブログやサイトによっては、「一覧とシングル」みたいな構成じゃなくてフルページを一覧のように繋げて見せる構成のデザインというのがあります。そんなデザインを含めれば簡単に「single」と名付けることができないのは分かりますね。サイトは一覧とシングルだけに分かれているものではない、人っても男と女の分類だけじゃないという今どきのジェンダーフリーの観点からして、content.phpつっても決してcontent-single.phpてわけじゃないのよという、理解しました。

contentはカスタマイズが盛りだくさん

実際のところテーマ改造は content に尽きます。やることも多いんでさらりと流すことはできません。わりと半汎用的なカスタマイズについて書いているつもりなので、個別に事情がことなり反汎用的なカスタマイズについての話は後の細々とした記事に譲ってここではすっ飛ばします。

Digital Boo Pennguin Iconシリーズ記事の目次はこちらです Twenty Seventeen カスタマイズ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください