_s(underscores)にカスタムヘッダー機能を追加する

WordPressにはカスタムヘッダー機能が標準で搭載されています。しかし、_s(underscores)はデフォルト設定では機能しないようにfunctions.php内で該当箇所がコメントアウトしてあります。

今回は_s(underscores)でカスタムヘッダー機能を使えるようにするる方法を試してみようと思います。

そもそもカスタムヘッダーとは

Codexにはこのように書かれています。

Custom Header is a theme feature introduced with Version 2.1. Custom header is an image that is chosen as the representative image in the theme top header section.

和訳するとこのような感じでしょうか。

カスタムヘッダーはWordPress2.1より搭載された機能で、選択された画像をテーマのヘッダー部分にサイトを象徴するイメージとして掲載する機能です。

といった具合でしょうか。

カスタムヘッダー – WordPress Codex 日本語版

functions.phpからカスタムヘッダー機能を有効化する

functions.phpを開いて122行目を確認するとこのような記述があります。

こちらがカスタムヘッダー機能を使えるようにするコードになりますので、コメントアウトを解除してあげましょう。

すると、管理画面から【外観】より【ヘッダー】を選ぶことができるようになります。

custom-header-control

custom-header.phpの中を見てみる

先ほどコメントアウトしたコードにcustom-header.phpファイルがincフォルダ内にあると書いてありました。カスタムヘッダーに関する細かい設定は全てcustom-header.php内で行うことができます。

inc(インクルード)フォルダ内のcustom-header.phpファイルを開いて25行目あたりを見てみましょう。

ここではdefault-text-colorを#000000から#ffffffに、widthを1000から1280に、heightを250から300に変更しておきました。あと、flex-heightはfalseに変更しました。大きな画像を選択した際に自分でトリミング等できるようになります。

その下に管理画面のカスタマイザで【サイトタイトルとキャッチフレーズ】の中の【ヘッダーテキストを表示する】のチェックを入れたり外したりした際に適応されるスタイルシートを記述してある部分があります。

こちらの61行目からのこの部分に注目します。

こちらがヘッダーテキストを表示しない際に適応されるスタイルシートです。が、こちらの機能を使う際には背景画像を入れることを想定しているので、.site-branding部分を一括で表示されないように指定しなおします。クラス名を書き換えてこのようにしておきましょう。

このように記述することによって、サイト名とサイト詳細テキスト部分は【サイトタイトルとキャッチフレーズ】の中の【ヘッダーテキストを表示する】のチェックを外した際に表示されなくなります。のはずなのですが、実はこれだけではだめで、customizer.jsでも同じように設定し直さなければならない箇所があります。

こちらの23行目と28行目をこのように書き換えます。

こうするとによってチェックボタンに切り替えで確実に要素を非表示にするとができます。

カスタムヘッダー画像の挿入設定をする

custom-header.phpファイルの8行目あたりからコメントアウトされているコードがあります。

こちらのコードがカスタムヘッダーの画像を読み込む部分となります。こちらをベースにカスタマイズしていきます。

header.phpファイルを開きます。

24行目の<header>タグ以下に先ほどのコードを埋め込みます。

これで動作確認してみます。ヘッダー画像を登録していないと表示されないので設定しておきましょう。

現状の表示はこのような感じになっています。

custom-header-sample

これはカスタマイズ画面にて【サイトタイトルとキャッチコピー】の【ヘッダーテキストを表示する】にチェックが入っているために、ヘッダー画像もヘッダー部分も表示されててしまっている状態です。

ヘッダー部分の調整

上の画像を見てもらうとわかるように、ヘッダー画像の下側に微妙な空白があったりしているので、マークアップを変更して修正することにします。

header.phpに記載したカスタムヘッダー表示部分を<div>で囲み、.header-imageというクラスを付与します。

次はCSSの修正を行います。

以前こちらでヘッダー用CSSを記述しましたが、同じエリアで問題ないかと思います。こちらのコードを追加します。

.header-image内のimgタグ要素に対して、display: block;margin: 0 auto;を設定しています。こうすることによって、該当するimg要素はブロック要素となり、左右中心に配置されるようになります。

ヘッダー部分のカスタマイズ

いまからヘッダー画像の上にサイト名とサイト詳細テキストが上に乗る形でレイアウトしていきます。

ヘッダー画像は<?php header_image(); ?>で出力されることが、カスタムヘッダー出力のテンプレートからみてもわかるかと思います。ですので、div.site-brandingにこの画像URLをCSSで背景に設定することにします。

背景画像の調整をCSSに記述するために.header-background-imageというクラスを追加しました。そして、このクラスに設定するCSSは以下のようにします。

こうすることによって背景画像がタイル状にならずうまいこと収まってくれます。

header.phpをカスタマイズする

まず先に最終的なコードをこちらに書いてから順次説明していこうと思います。

まず26行目のif文についてです。

この分岐の意味を簡単に言うと「カスタムヘッダー機能を使っていて、尚且つヘッダーテキストを表示する設定になっていない」時を示しています。その場合は画像だけを表示します。

custom-header-sample01

こちらは少し複雑な構造になっています。

if ( get_header_image() && !('blank' == get_header_textcolor()) )は先ほど説明した分岐条件に似ていますが「!」を見落とさないでください。

この場合は「カスタムヘッダー機能を使っていて、尚且つヘッダーテキストを表示する設定になっている」となります。この場合には先ほど試したように背景画像の上にサイト名などを表示する形を採用します。ですので、36行目でdiv要素に任意のクラスを配したコードを出力します。

custom-header-sample02

また、そうでない場合はelse以降に記述されている内容の処理を行います。この場合は「カスタムヘッダー機能を使っておらず、尚且つヘッダーテキストを表示する設定になっている」となります。黄色背景に白文字でサイト名が表示される当初のデザインになります。

custom-header-sample03

まとめ

ちょっと長々と複雑になってしまいましたが、カスタムヘッダー機能を利用する場合は以下の条件にしっかりと対応するようにしておく必要があるようです。

  • カスタムヘッダー機能をそもそも使わない場合
  • カスタムヘッダー機能は使ってもサイト情報テキストは表示させない
  • カスタムヘッダー機能を使い、尚且つサイト情報テキストも表示させる

これらの状況に対応するようにしておく方がユーザーには優しい設計となるでしょう。そして、このような様々な状況に対応するためにもサンプルであげた分岐などを利用してみてください。