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

Pocket

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


スポンサーリンク

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

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

カスタムヘッダーの画像

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


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

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

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

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のカスタムヘッダーの設定は終わりです。
何か質問、誤情報、誤字などがあればコメントでお願いします。

Pocket