最近のWebサイトでよく見かけるのが、トップページのファーストビューに大きな画像を表示するデザインですよね。
WordPressには、このようにメイン画像を管理画面から設定できるカスタムヘッダー機能が備わっています。当記事では、この機能の使い方についてご紹介していきます。
カスタムヘッダーとは？
Webサイトのヘッダー画像を設定・表示できるようにする機能です。カスタムヘッダーを有効化すると以下のような設定がカスタマイザーに追加されるようになります。
ただし、カスタムヘッダーの設定で使用できる画像は1枚だけのため、スライダー等の用途には適していません。（複数の画像をアップロードして、ランダムで1枚表示することは可能）
なお、この機能をカスタマイズすれば、動画を表示させることも可能です。
カスタムヘッダーの使い方
カスタムヘッダーを利用するためには、テーマのPHPファイルに設定と表示に関する記述を追加する必要があります。具体的な使い方を順番にご紹介します。
- カスタムヘッダー機能の有効化
- マークアップを出力
- 設定した画像データの取得
- 動画を表示する方法
カスタムヘッダー機能の有効化
カスタムヘッダー機能を有効化して、テーマカスタマイザーに設定エリアを追加します。以下をfunctions.phpに記入してください。
add_action( 'after_setup_theme', function(){
add_theme_support( 'custom-header' );
} );追記後に外観 > カスタマイズを確認すると「ヘッダー画像」が表示されるようになります。ここでフロントに表示する画像をメディアライブラリから設定できるんですね。
また、第二引数にはいくつかオプションを指定できますので、気になる方は以下をご覧ください。
マークアップを出力
次に設定した画像を簡単に出力する方法についてご紹介します。画像を表示したいテンプレートファイル（front-page.phpなど）に以下を追記してください。
the_custom_header_markup();こちらは以下のマークアップを出力する関数になります。
<div id="wp-custom-header" class="wp-custom-header">
<img … >
</div>サクッと設定した画像を表示する時はこちらをお使いください。
設定した画像データの取得
より柔軟なマークアップを組みたい方は、以下の関数で画像データを取得する方法がオススメです。
get_custom_header();この関数を使えば、設定画像のデータを取得できますので、色々と加工してみてください。
/* 取得できる画像データ */
$custom_header = get_custom_header();
$custom_header->url // 画像URL
$custom_header->width // 画像の横幅
$custom_header->height // 画像の高さ
$custom_header->attachment_id // 画像IDなお、設定された画像ではなく、アップロードした複数の画像データを取得する場合は、以下の関数で実現できます。
/* アップロード済みの画像データを取得 */
$uploaded_header_images = get_uploaded_header_images();
if( ! empty( $uploaded_header_images ) ){
foreach( $uploaded_header_images as $image ){
echo $image['attachment_id']; // 画像ID
echo $image['url']; // 画像URL
}
}配列で複数の画像データを取得できるので、foreachでループしてスライダーなどに利用してもいいですね。
動画を表示する方法
カスタムヘッダー機能では、動画を設定することも可能です。動画を有効化するには「add_theme_support」に第二引数を追加します。
add_action( 'after_setup_theme', function(){
add_theme_support( 'custom-header', array(
'video' => true // 動画設定を有効化
) );
} );動画を有効化すると、カスタマイザーの「ヘッダー画像」が「ヘッダーメディア」に変更され、mp4動画やYouTubeを指定できるようになります。
アップロードした動画のデータは以下の関数で取得できます。
// mp4動画データを配列で取得
$header_video = get_header_video_settings();
// mp4動画のURLだけを取得
$header_video_url = get_header_video_url();get_header_video_url() – Function | Developer.WordPress.org
まとめ
今回は、カスタムヘッダー機能の使い方についてご紹介しました。トップページのメイン画像を管理画面からサクッと変更できるようにするなら、手軽に実装できるのでオススメです。
なお、WordPressには似たような機能に、カスタムロゴ機能が存在します。こちらは画像を設定できるだけのよりシンプルな機能ですので、ぜひこちらも合わせてご覧ください。
自作テーマ開発時に、管理画面からロゴを設定できる機能をサクッと実装したいな〜って時ありますよね。 実はWordPressには、テーマカスタマイザーからロゴ画像を設定できる「カスタムロゴ」機能が備わっています。当記事では、このカスタムロゴ機能の使い方についてご紹介していきます。 WordPre...
コメント