Espied カスタム:ヘッダーイメージとアイキャッチ

前回、Espiedテーマの子テーマを作成して、ランディングページ用テンプレートを追加しました。

今回から、ちょっと細部をカスタムしていきます。
好き嫌いが分かれてくるトコロだし、個性が出てくるポイントでもあります。

ヘッダーイメージとアイキャッチ

Automattic社のテーマの「あるある」だと思うんだけど、ヘッダーイメージとアイキャッチ画像の使い方があまり好みではありません。

  • ヘッダーイメージをサイトタイトルの背景にします。
  • アイキャッチ画像をページタイトルの背景にします。

CSS、Filterで対応できるならそれがベスト

ヘッダーイメージやサイトタイトルを出力しているのは、どうやら「header.php」のようです。
でもって、個別ページ(シングルページ)でページタイトルを出力しているのは「content.php」です。

Espied テーマにおいて、サイトタイトルやページタイトルのデザインをカスタマイズする場合、header.php や content.php をカスタマイズするのが手っ取り早いといえます。
実際、凝ったカスタマイズを行う場合はそうするしかないでしょう。(子テーマで同ファイル名で作成して差し替える)

でも、できることなら、テーマファイルアップデートの影響を受けにくく配慮するなら、親テーマファイルのオーバーライドはできるだけ避けたいトコロです。具体的には CSS や FILTER を利用して実現できるなら、それにこしたことはありません。

実際にその箇所を見てみましょう

functions.php

47-72行目:かなり力業です。
wp_head にフック(HEAD出力時)して ヘッダーイメージ、アイキャッチの存在を確認し STYLE を挿入しています。

  • 個別ページでアイキャッチがあれば、その投稿の .entry-header の背景に指定
  • ホームページでヘッダーイメージがあれば、#masthead の背景に指定

78-89行目:ヘッダーイメージ、アイキャッチに関するフラグを BODDY に追加しています。これらのクラスをCSSで利用することで、カスタマイズ表示時を判定することができます。

  • 個別ページでアイキャッチがあれば、BODDY に .single-has-post-thumbnail を追加
  • ホームページでヘッダーイメージがあれば、BODDY に .home-has-header-image を追加

style.css:見栄えを調整します。
背景を指定しただけではヒドい状態です。
かなりトリッキーですが、文字とのコントラストを高めるために、半透明の色を敷いています。
上下のセンタリングには display:flex; を利用し、前後にスペーサー(:before, :after で!)を挿入しています。

ポイント

このカスタマイズは、少なくとも親テーマの更新で「壊れる」という状況を回避できます。なぜなら、フィルター自体はテーマの仕様変更とは関係なく実行されるでしょうし、CSS自体は「見栄えをぶっ壊すことはあっても」致命的なエラーにはなりません。
既存のテーマをカスタマイズするとき、まずCSSで実現できるか? あるいは関連する FILTER で加工できるか…というアプローチが良いかと思います。

でも、理想的なビューを突き詰めていくと、CSS や FILTER のみでは難しくなります。このへんはメンテナンス性やシンプルさとのトレードオフなので、ケースバイケースでしょう。

次回は、さらにバランスを見ながら、もっと細かくブラッシュアップしていきます。