カスタムヘッダーを利用する

カスタムヘッダーとは、ヘッダー部分の画像や動画をWordPressの管理画面からカスタマイズできるようにするための機能です。この機能を利用することで、簡単にヘッダー画像を変更したりすることができるようになります。カスタムヘッダーを利用するには「functions.php」で機能を有効にする必要があります。

カスタムヘッダーを有効にする

カスタムヘッダーを利用するに「functions.php」に次のコードを追加して機能を有効化します。

add_theme_support('custom-header');

このコードを追加することで、WordPressの管理画面に「ヘッダー」という項目が表示されるようになります。[ダッシュボード > 外観 > ヘッダー]から項目を選ぶと、ヘッダー画像のカスタマイズページとなるので、そこから画像を追加したり変更したりします。

また、上記のコードに第二引数を指定して「add_theme_support(‘custom-header’, ‘第二引数‘);」のような形にすることでオプションの機能を追加することができます。

利用できるオプション

カスタムヘッダーにオプションを追加することで、次のような機能が使えるようになります。

default-image

デフォルトで表示する画像をURLで指定します。

widthとheight

ヘッダー画像の横幅と縦幅をピクセルで指定します。

flex-widthとflex-height

ヘッダー画像の横幅と縦幅を自由に切り抜きできるかどうかを指定します。初期値は「false」なので、利用したい場合は「true」を指定します。

header-text

ヘッダーのテキストを表示する機能を有効にするかどうかを指定します。初期値は「true」なので、機能を無効にしたい場合は「false」を指定します。

default-text-color

ヘッダーテキストのデフォルト色をカラーコードで指定します。この機能を使用するには「wp-head-callback」を使用して、head内にスタイルを書き出す必要があります。（後術）

video

ヘッダーに動画の使用を許可するかどうかを指定します。初期値は「false」なので、使用を許可する場合は「true」を指定します。

uploads

ファイルのアップロードを許可するかどうかを指定します。初期値は「true」なので、アップロードを制限する場合は「false」を指定します。

random-default

ヘッダー画像をランダムにローテーションする機能を有効化します。初期値は「false」なので、機能を利用するには「true」を指定します。

wp-head-callback

テーマのheadタグ内で呼び出したい関数を指定します。「default-text-color」を使用した場合などは、この機能を使ってhead内にスタイルを書き出します。（後術）

オプションを使ったサンプルコード

上記のオプションを使う場合は、カスタムヘッダーを有効にした「add_theme_support(‘custom-header’);」の第二引数に配列で値を渡します。具体的には次のように記述します。

例１）ヘッダー画像を横1,000ピクセル、縦300ピクセルに指定し、デフォルトで表示する画像を「img/default.png」とする場合

$custom_header = array(
	'width' => 1000,
	'height' => 300,
	'default-image' => get_stylesheet_directory_uri() . '/img/default.png'
);

例２）ヘッダーテキストの色を黒（000）に指定する場合

//heade内に書き出す内容
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 = array(
	'default-text-color' => 000,
	'height' => 300,
	'default-image' => get_stylesheet_directory_uri() . '/img/default.png'
);

ヘッダーテキストの色を指定するには「default-text-color」を使用しますが、これで指定しただけでは表示に反映されません。「wp-head-callback」を使用し、head内にスタイルを書き出す必要があります。具体的には次のように記述します。

カスタムヘッダーの画像を出力する

カスタムヘッダーの機能を使って登録した画像を出力するには、表示したい箇所に「the_custom_header_markup()」または「header_image()」を記述します。

「the_custom_header_markup()」を利用した場合は、自動的にdivタグで囲まれますが、動画にも対応しています。一方、「header_image()」の場合は、タグは表示されず画像のURLしか出力しないので必要に応じてimgタグなどを記述します。

the_custom_header_markup()を使った場合

記述例

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

表示例

<div id=”wp-custom-header” class=”wp-custom-header”>
<img src=”https://example.com/wp/wp-content/ themes/example/img/default.png” width=”1000″ height=”300″ alt=”説明”>
</div>

header_image()を使った場合

記述例

<?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; ?>

表示例

<img src=”https://example.com/wp/wp-content/ themes/example/img/default.png” width=”1000″ height=”300″ alt=”説明”>