WordPressの機能のひとつであるカスタムヘッダーを使うと管理パネルからヘッダー画像とヘッダー文字色を変更できます。カスタムヘッダーを有効にすることでテーマ開発者以外のユーザーも変更可能なヘッダーを用意することができます。
カスタムヘッダーを使う準備
カスタムヘッダーを利用可能な状態にするには2か所のカスタマイズが必要です。
functions.phpで機能を設定し、テンプレートファイルで出力される箇所の編集を行います。
functions.phpでの基本設定
カスタムヘッダーはWordPressが持つ標準機能ですが、利用するためにはfunctions.phpで指定する必要があります。次のように記述することでカスタムヘッダーが有効になり、管理メニューに「外観 > ヘッダー」が表示されます。
add_theme_support( 'custom-header' );
add_theme_support()はWordPressのテーマ機能の有効・無効を設定する関数になります。
テンプレートファイルで表示する箇所を編集
表示するテンプレートファイルもカスタムヘッダーに対応させる必要があります。テンプレートファイル内のヘッダー画像として表示する箇所に次のように記述してください。
<?php the_custom_header_markup(); ?>
カスタムヘッダーの動作確認
ここまででカスタムヘッダーの最低限の準備は終わりです。
管理画面「外観 > ヘッダー」から任意の画像を設定してみてください。the_custom_header_markup()を記述した箇所に指定した画像が次のように出力されます。
<div id="wp-custom-header" class="wp-custom-header"> <img src="http://～～/example.jpg" width="500" height="300" alt="サイト名"> </div>
width, height属性には指定した画像のサイズがそのまま入り、alt属性には「設定 > 一般 > サイトのタイトル」に入力されているものが入ります。
カスタムヘッダーで設定可能なオプション
add_theme_support()のパラメータを指定することでオプションを設定することができます。
オプションの設定値は配列で指定します。
// オプション記述例. $defaults = array( 'default-image' => get_template_directory_uri() . '/images/example.jpg', 'random-default' => false, 'width' => 1200, 'height' => 400, 'flex-width' => true, 'flex-height' => true, 'header-text' => true, 'default-text-color' => '#0000FF', 'uploads' => true, 'video' => true, 'wp-head-callback' => 'custom_header_head', 'admin-head-callback' => '', 'admin-preview-callback' => '', ); add_theme_support( 'custom-header', $defaults );
default-image（文字列：URL）
デフォルトにしたい画像URLを指定します。
上の例ではget_template_directory_uri()を使ってテーマフォルダを参照しています。
random-default（true / false）
ページが読み込まれる度にアップロード済み画像をランダム表示します。
width / height（数値）
表示する画像サイズを数値で指定します。画像をトリミングする場合は縦横比が保たれます。
flex-width / flex-height（true / false）
width、heightのデフォルト数値が指定されている場合に設定可能。trueでは自由にトリミングできるようになり、falseではwidth、heightの数値を基準とした縦横比を保ちつつトリミングします。
header-text（true / false）
「カスタマイズ > サイト基本情報」の設定項目「サイトのタイトルとキャッチフレーズを表示」を有効にする。無効の場合はヘッダーテキスト色の指定も無効になります。
この設定値はdisplay_header_text()で分岐することでテンプレートファイルに反映できます。
次のように記述することでheader-textの設定値に対応した表示が可能になります。
テンプレート側で設定値を判別する
<?php if ( display_header_text() ) { ?>
<p><?php bloginfo( 'name' ); ?></p>
<p><?php bloginfo( 'description' ); ?></p>
<?php } ?>
default-text-color（文字列：色）
ヘッダーテキスト色をカラーコードで指定します。
テンプレートファイルで反映させるためには、get_header_textcolor()で取得した設定値を該当要素にCSSで適用するといった処理が必要になります。
方法としては、スタイルを書き出す関数をfunctions.phpに用意し、後述のwp-head-callbackで関数名を指定することで<head>内で実行されます。
文字色の設定を書き出す関数を用意
function custom_header_head() {
echo '<style type="text/css">' . "\n";
echo '.custom-header__txt { color: #' . esc_html( get_header_textcolor() ) . ' }' . "\n";
echo '</style>' . "\n";
}
次のようにすることで<head>内でcustom_header_head()が実行され、色設定が書き出されます。
wp-head-callback => 'custom_header_head'
uploads（true / false）
video（true / false）
動画ファイルやYoutubeのURLが指定可能になります。
画像も同時に指定した場合、動画読み込み中もしくは何らかの理由で動画が表示されない際に画像が表示されます。画像を指定していない場合は何も表示されません。
wp-head-callback（文字列：関数名）
<head>が書き出される際に実行する関数名を指定します。
admin-head-callback（文字列：関数名）
管理画面で実行する関数名を指定するものですが、執筆時のWordPress（5.x）では動作が確認できませんでした。
admin-preview-callback（文字列：関数名）
管理画面で実行する関数名を指定するものですが、執筆時のWordPress（5.x）では動作が確認できませんでした。
参考リンク
WordPress Codex – カスタムヘッダー()
WordPress Codex – add_theme_support()
WordPress Codex – get_header_textcolor()
