前の記事 「カスタムヘッダーを表示する – [1]」 で
header.php にヘッダー画像やブログタイトル、ブログ説明文を表示するようにしました。
今回は、これらを WordPress の管理画面で変更できるカスタムヘッダーとして
利用するための処理を function.php に記述していきます。
まず、function.php のファイルを作成してください。
WordPress の 文字エンコーディングは UTF-8 で書かれていますので、
index.php 等と同様に、function.php も UTF-8 で用意しましょう。
内容は、以下のようになります。
<?php
//--- カスタムヘッダー追加
/* カスタムヘッダー パラメータを指定して追加 */
add_theme_support('custom-header', array(
'default-image' => get_template_directory_uri() . '/images/header_photo-sky.jpg', // デフォルトヘッダー画像
'random-default' => false, // ヘッダー画像をランダム表示するか
'width' => 986, // ヘッダー画像幅
'height' => 150, // ヘッダー画像高
'flex-width' => false, // 画像幅をフレキシブルにするか ･･･true:指定サイズに関係なくトリミング可能 / false:指定サイズに準拠した割合でのみトリミング可能
'flex-height' => false, // 画像高をフレキシブルにするか ･･･true:指定サイズに関係なくトリミング可能 / false:指定サイズに準拠した割合でのみトリミング可能
'default-text-color' => '464646', // ヘッダーテキスト文字色
'header-text' => true, // ヘッダーテキストの表示制御可否
'uploads' => true, // ヘッダー画像アップロード可否
'wp-head-callback' => '', // ユーザ画面ヘッダーで、管理画面でのカスタマイズスタイルを適用するためのコールバック
'admin-head-callback' => '', // 管理画面で、[外観 - カスタマイズ]をプレビューするためのコールバック
'admin-preview-callback' => '' // 管理画面で、[外観 - ヘッダー]をプレビューするためのコールバック
));
?>
さて、解説します。
(見やすいように途中に改行を挟んでいるので複数行にまたがっていますが)
add_theme_support 関数を呼んでいます。
この関数はテーマの機能を設定するためのもので、
第一パラメータに設定したい機能を文字列で指定し、
第二パラメータにはその機能の挙動を決定するオプションを渡します。
( add_theme_support 関数の詳細は
WordPress Codex 日本語版：関数リファレンス/add theme support 参照 )
カスタムヘッダーをサポートさせたい場合は、
第一パラメータに ‘custom-header’ を指定します。
第二パラメータにはカスタムヘッダーの挙動を指定するオプションを
連想配列で指定します。連想配列のキーと内容の意味合いの概要は
ソース中のコメントを参考にしてください。
では、以下に連想配列中のパラメータに関して詳細に説明していきます。
default-image (デフォルトヘッダー画像) のパスの一部に、
get_template_directory_uri 関数を使用しています。
これは、テンプレートのパス (URL) を取得する関数です。
「get_bloginfo(‘template_url’)」 としたり、
「%s」 としても同じ結果が得られます。
ここでは、テーマ (テンプレート) ディレクトリ配下に
images というディレクトリを作成し、そこにデフォルト画像を置いて
そのパス (URL) を指定しています。
ここのパラメータで指定しなくとも、定数定義で
define(‘HEADER_IMAGE’, ‘%s/images/header_photo-sky.jpg’);
としても同じ (であるはず) ですが、今後、WordPress のバージョンアップ等で
定数定義による動作の担保がされるかどうかは分かりませんので、
WordPress 3.4 からの (比較的新しい) サポートである
add_theme_support 関数のパラメータで指定してやる方が望ましいでしょう。
random-default はデフォルト画像を複数枚用意し、
それをランダム表示するかどうかの指定ですが、
そもそも add_theme_support だけでは複数枚のデフォルト画像を
指定してやることはできませんので、ここでは当然 false にしています。
width / height に関しては、ヘッダー画像を表示させる
HTML 上のボックスのサイズに合わせて指定しています。
width / height においても、定数定義で以下のように指定することはできます。
define(‘HEADER_IMAGE_WIDTH’, 986);
define(‘HEADER_IMAGE_HEIGHT’, 150);
ですが、default-image と同様、こちらのパラメータで指定してやる方が望ましいです。
flex-width / flex-height は 「フレキシブルって何？」
てな感じですが、要するにアップロードしたヘッダー画像をトリミングする際に
画像の縦横比関係なくトリミングさせるかどうかの指定になります。
トリミング自体をさせるかどうかの指定ではありませんので、ご注意を。
default-text-color では、ブログタイトルやブログ説明文を表示する
テキストのデフォルト色を指定します。色コードであるを示す「#」 は不要です。
style.css で指定したものと合わせておきましょう。
header-text は管理画面から default-text-color で指定した色を
変更できるようにするかどうかの指定です。
default-text-color / header-text は、定数定義で以下のように指定もできます。
define(‘HEADER_TEXTCOLOR’, ’464646′);
define(‘NO_HEADER_TEXT’, false);
※ header-text と NO_HEADER_TEXT では true / false が反転することに注意！
これらも、default-image と同様、こちらのパラメータで指定してやる方が望ましいです。
ただ、WordPress 3.9 では、default-text-color / header-text の
指定の仕方によっては、WordPress のバグを踏みます。
( WordPress 3.9.1 でも解消されていませんでした )
header-text を true にして管理画面からヘッダー文字色の変更をさせたい場合は、
必ず default-text-color に (カラーコードとして有効な) 値を設定しましょう。
詳細は WordPress のバグ 「【カスタムヘッダー】 JavaScript」 にて。
uploads は、管理画面からヘッダー画像をアップロードして、
それを管理画面から指定して利用できるようにするかどうかのパラメータです。
カスタムヘッダーとするからには、ここは true にして、コードの変更なく
自由にヘッダー画像を入れ替えられるようにしたいですね。
実際に default-text-color で指定した色をブログタイトルやブログ説明文の
文字色として反映させたり、(ヘッダー画像を style.css でボックスの
背景画像として表示させていた場合は) ヘッダー画像を入れ替えたりする処理は
wp-head-callback、admin-head-callback、admin-preview-callback
で指定したコールバック関数内で実装してやる必要があります。
逆に、header-text を false にして管理画面からヘッダー文字色の変更をさせず、
ヘッダー画像を img タグ の src で指定してやっている場合は、
これらのコールバックの指定は必要ないことになります。
ここでは、本来コールバックを指定する必要があるのですが、
そのコールバック関数が動作するタイミングや
関数内の処理の説明が長丁場になりそうですので、
これはまた次回に続く・・・ということで。
SmartStyle