目次

1. カスタムヘッダーとは
2. カスタムヘッダーを設置する
   1. functions.phpを編集する
   2. デフォルト画像の用意
   3. ダッシュボードのヘッダー設定
   4. header.phpを編集する
3. 関連サイトへのリンク

 

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

カスタムヘッダーとは、サイトに表示する画像のうち１カ所だけ、ダッシュボードから好きな画像に変更できるようにする仕組みです。トップページの画像や、サイトロゴ画像などに使われることが多いようです。

今回は、サイト右上の画像をカスタムヘッダーに対応して、ダッシュボードから好きな画像に差し替えできるようにカスタマイズします。

 

 

2. カスタムヘッダーを設置する

ここでは、以下の順にファイル編集＆設定していきます。

1. functions.php
2. デフォルト画像の用意
3. ダッシュボードのヘッダー設定
4. header.php

 

1. functions.phpを編集する

下記コードをfunctions.phpに挿入します。

functions.php

 

次の関数で、カスタムヘッダー機能が有効になります。

add_theme_support( 'custom-header' );

※補足：WordPress3.3.x以前を利用する場合はadd_custom_image_header()を使います。

カスタムヘッダーの挙動をカスタマイズするには、各オプション値を指定した連想配列を第二引数に指定します。ここでは、次の４点を指定します。

 

default-image：デフォルトで表示する画像ファイルを指定します

画像へのURLを指定します。テーマフォルダに入れた画像を指定するには、テーマフォルダのURLをget_bloginfo()関数で取得し、テーマフォルダから画像への相対パスを連結します。

get_bloginfo('template_url') . '/img/wordpress-logo-hoz-rgb_small.png'

※補足：ドット（.）は、文字列を連結するPHPの演算子です。

 

width, height：カスタムヘッダー画像のサイズを指定する

カスタムヘッダーとして表示する画像のサイズ（ピクセル）を指定します。

 

header-text（false）：文字色カスタマイズ機能をOFFにする

カスタムヘッダーでは文字色も変更することができます。画像に文字が重なる場合は、見やすさを確保するという意味で、画像の色に合わせて文字の色を変える必要があるからです。

今回は文字を重ねないので機能OFFにしておきます。

※補足：header-textを有効にした場合は、header_textcolor() / get_header_textcolor() 関数を使って文字色情報を取り出せます。

 

その他のオプションについては、リファレンスを参照してください。

 

 

2. デフォルト画像の用意

カスタムヘッダーのデフォルト画像準備します。テーマフォルダを開き、add_theme_support()関数の’default-image’で指定したパスで指定した場所に、画像を置いておきます。

デフォルト画像の大きさは、add_theme_support()関数で指定したサイズが好ましいです。最低限、タテxヨコ比が指定サイズと同じもの用意すべきだと思います。

 

3. ダッシュボードのヘッダー設定

ダッシュボードにアクセスして、外観＞ヘッダー を開いて、表示する画像を差し替えてみます。

画面を表示すると、add_theme_support()関数の’default-image’で指定したデフォルト画像が表示されます。

もしも画像が表示されていない場合は、’default-image’のURL指定と、テーマフォルダに入れた画像のパスとの整合性が合っているかどうか確認してみてください。

次に、デフォルト画像から違う画像へ変更してみます。ファイルを選択ボタンを押して画像を選び、アップロードボタンを押します。

プレビューが、新しい画像に変わりました。”変更を保存”ボタンを押して、作業終了です。

新しい画像についても、指定したサイズに合わせて画像を用意するのがベストです。画像をアップロードするときに、画像をトリミングすることはできますが、厳密な調整はできません。

 

4. header.phpを編集する

カスタムヘッダー画像を、サイト出力するためのコードを挿入します。今回の例では、header.phpのエリアに画像を出力するので、header.phpを編集します。

header.php

次のコードを、画像挿入する場所に挿入します。※コードは公式リファレンスから持ってきました。

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

簡単に説明すると、

• header_image()：ヘッダー画像へのURLを出力するWordPress関数
• get_custom_header()：ヘッダー画像情報を持つstdClassオブジェクトを得るWordPress関数

get_custom_header()で得られるオブジェクトには、url, width, height, attachment_idなどのプロパティが含まれます。ここでは画像の縦と横サイズを知りたいので、それぞれ

get_custom_header()->height
get_custom_header()->width

で取得できます。

次にサイト実行して、対応する箇所のソースを確認します。

サイトのソース　※…にはサイトURLが入る

<img src="http://.../wp-content/uploads/2013/02/codeispoetry-rgb_small1.png" height="50" width="220" alt="" />

imgタグが出力されているのが確認できました。

 

3. 関連サイトへのリンク

WordPress公式リファレンス

• カスタムヘッダーについて 英語
• add_theme_support 日本語 英語
• header_image 英語

「index.phpをカスタマイズする」の記事