【WordPress】カスタムヘッダーの設定

この記事ではWordPressのカスタムヘッダーについて述べてきます。
Webサイトを開設するまでにしたこと【テーマ編】に載せた、私がやってきたことの1つです。

1. カスタムヘッダーとは

カスタムヘッダーとは、サイトの上部に表示する画像を簡単に変更できるようにする機能です。
当サイトの場合は下の画像がカスタムヘッダーとなっています。

この画像の部分をダッシュボード内の外観設定で変更できるようになります。
こちらの機能が実装されていない場合は自分でソースに記述する必要があります。

2. カスタムヘッダーの記述

外観のテーマ編集のfunctions.phpを編集します。
以下のコードをfunctions.phpに追記して下さい（外観メニューにヘッダー設定があれば追記する必要はありません）。

// カスタムヘッダーの設定
add_theme_support( 'custom-header' );

1 2	// カスタムヘッダーの設定 add_theme_support( 'custom-header' );

この記述でダッシュボードの外観に「ヘッダー」という項目が出ますが、これでは画像を表示させる位置が決まっていません。
header.phpの中の画像を表示させたい場所に下記のコードを追加して下さい。

<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" /> //カスタムヘッダーの設定

1	//カスタムヘッダーの設定

img内にクラスを追加して位置の調整をすれば最低限の設定は完了です。
より細やかなことにかんしてはこちらをご確認下さい。

カスタムヘッダー – WordPress Codex 日本語版 https://wpdocs.osdn.jp/%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%98%E3%83%83%E3%83%80%E3%83%BC

3. 動作の確認

上記のコードを記述し、正常に機能している場合はこのように外観の中に「ヘッダー」という項目が出ます。

画像のようになっていたら問題ありません。
設定画面で画像をアップロードして、ヘッダーに画像を表示させてみましょう。
私の場合、そこから自分で調整を加える感じでした。

以上でWordPressのカスタムヘッダーの設定は終わりです。
何か質問、誤情報、誤字などがあればコメントでお願いします。