カスタムヘッダーの使い方

カスタムヘッダー機能を有効にする方法と使い方の紹介。

初期値

add_theme_support( 'custom-background', array(
	'default-image'          => '',
	'width'                  => 0,
	'height'                 => 0,
	'flex-width'             => false,
	'flex-height'            => false,
	'uploads'                => true,
	'random-default'         => false,
	'header-text'            => true,
	'default-text-color'     => '',
	'video'                  => false,
	'wp-head-callback'       => '',
	'admin-head-callback'    => '',
	'admin-preview-callback' => '',
) );

パラメータ	説明
default-image	デフォルトで表示する画像のURL
width	横幅
height	縦幅
flex-width	縦幅を自由に切り取れるかどうか(true / false)
flex-height	横幅を自由に切り取れるかどうか(true / false)
uploads	ファイルのアップロードの許可(true / false)
random-default	ランダムにローテーションするか(true / false)
header-text	ヘッダーテキストを表示選択機能を使うか(true / false)
default-text-color	デフォルトのヘッダーテキストの色
video	動画ヘッダーを許可するか(true / false)
wp-head-callback	テーマのheadタグ内に呼び出したいコードが書かれた関数を指定
admin-head-callback	カスタムヘッダーページのheadタグ内に呼び出したいコードが書かれた関数を指定
admin-preview-callback	カスタムヘッダーページのプレビュー部分に表示したいコードが書かれた関数を指定(関数名)

有効にする

テーマセットアップで有効にする事で使えるようになります。
書き方は、テーマの基本設定を行い機能を実装します。add_theme_support()を参考に。

add_theme_support( 'custom-header', array(
	'width'                  => 1200,
	'height'                 => 300,
) );

※この場合、トリミングの際の縦横比が固定になります。

表示側

header.phpなどに表示用のコードを埋め込む。

the_custom_header_markup()の場合

<?php if ( get_custom_header_markup() ) : ?>
	<?php the_custom_header_markup(); ?>
<?php endif; ?>

生成されるHTMLにdivが自動でつきます。

<div id="wp-custom-header" class="wp-custom-header">
	<img src="https://example.com/wp/wp-content/uploads/cropped-dsc20040724_152504.jpg" width="1200" height="300" alt="説明">
</div>

header_image()の場合

動画を使わない場合は、こちらの方法でもOK

<?php if ( get_header_image() ) : ?>
	<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
<?php endif; ?>

生成されるHTML

<img src="https://example.com/wp/wp-content/uploads/cropped-dsc20040724_152504.jpg" width="1200" height="300" alt="説明">

使い方

管理画面の、外観＞カスタマイズとすすみ、
ヘッダー画像またはヘッダーメディアに進みます。

動画を許可している場合、ヘッダーメディアとなり、MP4形式の動画やYouTubeを指定できます。

サイト基本情報のサイトのタイトルとキャッチフレーズを表示にチェックする事で、色でヘッダーテキスト色を選択できるようになります。

私の検証環境だけかもしれませんが・・・
以前は、header-textをfalseにする事で、[サイトのタイトルとキャッチフレーズを表示]が表示されなくなっていたと思いますが、WP5.2現在は[サイトのタイトルとキャッチフレーズを表示]は常に表示されており、チェックを入れても[ヘッダーテキスト色]の選択項目が出てこないようです。
※後日検証してみます

カスタム例

トリミングの指定 flex-width / flex-height

それぞれの設定の挙動について。
デフォルトでは、ともにfalseとなっています。
ともにfalseの場合、縦横比が固定になります。

flex-widthのみtrueの場合
幅は自由に設定でき、高さはheightで指定された高さの範囲内で自由に変更できます。

flex-heightのみtrueの場合
好きなサイズでトリミングできます。

flex-width / flex-height 両方trueの場合
好きなサイズでトリミングできます。

widthでサイズを指定する事で、トリミングウィンドウで表示される際に、クロップされます。
widthサイズより大きい場合はリサイズされ、小さい場合は拡大されて幅は自動で指定サイズになります。
そのため、flex-heightのみtrueの場合とflex-widthもtrueにした場合の違いがない状態になっています。

header-textの有無

header-textの有無で条件分岐する場合

<?php
	if( display_header_text() ) {
?>
	<?php bloginfo( 'name' ); ?>
<?php
	}
?>

YouTubeや動画ファイルを使えるようにする

WP4.7以降で使えます。

add_theme_support( 'custom-header', array(
	'width'                  => 1200,
	'height'                 => 300,
	'video'                  => true,
) );

表示用のコードは必ずこちらになります。

<?php if ( get_custom_header_markup() ) : ?>
	<?php the_custom_header_markup(); ?>
<?php endif; ?>

動画を使用した場合、JSによって再生/停止ボタンが追加されます。
追加されるボタンのHTMLは下記のコードになるので、CSSで非表示にするか装飾します。

<button type="button" id="wp-custom-header-video-button" class="wp-custom-header-video-button wp-custom-header-video-play">停止</button>
<button type="button" id="wp-custom-header-video-button" class="wp-custom-header-video-button wp-custom-header-video-pause">再生</button>

初期値