前の記事 「カスタムヘッダーを表示する – [2]」 で
WordPress の管理画面で変更できるカスタムヘッダーを利用できるよう、
function.php を作成しました。
ですが、実は前回までの内容だけでは、管理画面で
ブログタイトルやブログ説明文の文字色を指定することはできても、
実際にブログページの画面表示にそれが反映されません。
今回は、default-text-color で指定した色を、実際に
ブログタイトルやブログ説明文の文字色として反映させるための処理を
コールバックとして実装していきます。
( ヘッダー画像を style.css でボックスの背景画像として表示させていた場合は
ヘッダー画像を入れ替えたりする処理もコールバック内で実装する必要があります )
<?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' => 'header_style', // ユーザ画面ヘッダーで、管理画面でのカスタマイズスタイルを適用するためのコールバック
'admin-head-callback' => 'admin_header_style', // 管理画面で、[外観 - カスタマイズ]をプレビューするためのコールバック
'admin-preview-callback' => 'admin_header_preview' // 管理画面で、[外観 - ヘッダー]をプレビューするためのコールバック
));
?>
まず、15・16・17行目で、
wp-head-callback、admin-head-callback、admin-preview-callback
のそれぞれにコールバック関数名を指定してやります。
そもそも「コールバックってなに？」てな方のために・・・
コールバック関数とは、メインの制御処理からあらかじめ決められたタイミングで
呼び出してもらえる関数のことです。
「大多数の場合このタイミングでなにかしら処理をする必要があるんだけど、
その処理の内容はまちまちだよね・・・」てな場合に、メイン制御側でそこを考慮し、
「まちまちな」処理を呼び出すプログラム的構造を用意します。
WordPress では、メインの制御処理がなんだかよく分からないぐらい
隠蔽 (してるつもりはないんだろうけど) されてて、
しかもメインの制御処理を改造したとしても、
本体がアップデートされるとその改造が吹っ飛んでしまう恐れがあるので、
(WordPress 本体の) メイン制御処理側で
「コールバック関数を指定してくれてれば、このタイミングで呼んであげるよ」
てな感じで配慮してくれてるわけです。
友達に電話でワン切りしておくと、折り返し電話がもらえるような感じですな。
ここから転じてコールバック (Callback) と言うそうな・・・
コールバック関数を利用するためのお作法として、
2. コールバック関数として、その関数名 (実際は関数のアドレス) を指定する
が必要になります。
2 のコールバック関数の指定を先にしてしまったので、
ちょいと順序が入れ違ってしまいましたが、次にコールバックとして動作する
関数を作成して、function.php に追記します。
/* ユーザ画面ヘッダーで、管理画面でのカスタマイズスタイルを適用するためのコールバック */
function header_style() {
?>
<!-- support for custom-header -->
<style type="text/css">
<?php if (!display_header_text()) : ?>
#header #header-text {
display: none;
}
<?php elseif (strlen(get_header_textcolor()) > 0) : ?>
#header #header-text .sitename,
#header #header-text .sitename a,
#header #header-text .descr {
color: #<?php header_textcolor(); ?>;
}
<?php endif; ?>
</style>
<!-- /support for custom-header -->
<?php
}
PHP デミリタが途中に幾度となく入っていて少し見辛いのですが、
wp-head-callback に指定した header_style 関数です。
このコールバックは、(ユーザ表示用の) ブログ画面が表示される際に
呼び出されます。
ここで表示した内容は、wp_head 関数で出力され、
head タグ内に表示されることになります。
さて、これは CSS を出力しているわけですが、その処理内容を解説します。
6行目の display_header_text 関数は、ヘッダーテキストを表示するかどうか
の設定を true / false で返します。
ヘッダーテキストを表示しない設定の場合、HTML 上に既に描写されている
ヘッダーテキストを表示するボックス #header-text を
「display: none」 で非表示にしています。
10・14行目の get_header_textcolor 関数は、カスタムヘッダーの
テキスト色カラーコード (# は含まれない) を取得します。
ですので、これで取得した値を、ブログタイトルやブログ説明文である
.sitename や .descr の color プロパティに指定して
文字色を変更してやっています。
/* 管理画面で、[外観 - カスタマイズ]をプレビューするためのコールバック */
function admin_header_style() {
header_style();
}
admin-head-callback に指定した admin_header_style 関数です。
このコールバックは、管理画面の [外観 - カスタマイズ] で
ブログ画面のプレビューが表示される際に呼び出されます。
実は、管理画面 [外観 - カスタマイズ] でプレビューされる画面は、
ユーザ向けのブログ画面を、そのままフレーム内に表示しているだけです。
当然、head タグ内にここでの出力内容が表示されることになります。
ですので、処理すべき内容は header_style 関数と同じ問題ないですね。
全く同じ内容を書くのはナンセンスなので、header_style 関数を
呼び出しています。
wp-head-callback と admin-head-callback で出力している
CSS スタイルは、header.php に直接記述してやっても
同じように動作します。ここでの出力は、wp_head 関数によって
結局は head タグ内に表示されるわけですから。
/* 管理画面で、[外観 - ヘッダー]をプレビューするためのコールバック */
function admin_header_preview() {
$colorText = get_header_textcolor();
if ($colorText == '') $colorText = get_theme_support('custom-header', 'default-text-color');
?>
<style type="text/css" id="smartstyle-admin-header-css">
#header-image {
font-family: arial, helvetica, osaka, "MS PGothic", sans-serif;
width: <?php echo get_custom_header()->width; ?>px;
height: <?php echo get_custom_header()->height; ?>px;
background-image: url(<?php header_image(); ?>);
}
#header-text {
padding: 15px 0px 0px 12px;
display: <?php if (display_header_text()) : ?>block<?php else : ?>none<?php endif; ?>;
}
#header-text #name {
font-size:30px;
font-weight: bold;
line-height:30px;
text-decoration: none;
color: #<?php echo $colorText; ?>;
margin-bottom:10px;
}
#header-text #desc {
font-size: 12px;
font-weight: normal;
line-height: 20px;
color: #<?php echo $colorText; ?>;
}
</style>
<div id="header-image">
<div id="header-text">
<p><a id="name" href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></p>
<h1 id="desc"><?php bloginfo('description'); ?></h1>
</div>
</div>
<?php
}
admin-preview-callback に指定した admin_header_preview 関数です。
このコールバックは、管理画面の [外観 - ヘッダー] で
ヘッダー画像のプレビューが表示される際に呼び出されます。
管理画面 [外観 - カスタマイズ] とは違い、なぜかここだけ
プレビューのためのHTML要素が管理画面内の一部分だけに埋め込まれるので
埋め込むべき HTML 要素を (同じように見えるよう) 別に作成し、
本コールバックで表示してやる必要があるんですね orz
同じようなことをやるのに、何だよこの糞仕様・・・
2行目の get_header_textcolor 関数でカスタムヘッダーのテキスト色を取得し、
3行目では、その設定がなかった場合にテーマのデフォルトで指定された
ヘッダーテキスト文字色を get_theme_support 関数で取得して
表示文字色として保管しています。
get_theme_support 関数はテーマの機能を取得するためのもので、
テーマの機能を設定する add_theme_support 関数のほぼ逆だと思ってください。
ちなみに、WordPress Codex 日本語版 では (日本語未翻訳ということか)
この関数についてのリファレンスはありません。 orz
英語版のリファレンスはココ ↓
WordPress Codex : Function Reference/get theme support
ここでは、get_theme_support 関数の第一パラメータに ‘custom-header’ を
指定、第二パラメータに ‘default-text-color’ を指定して、
(add_theme_support 関数で設定してあるであろう)
ヘッダーテキストのデフォルト色を取得しています。
あとは、今までの記事で出てきたテンプレートタグや関数を使用して、
ヘッダー画像を表示する HTML ブロック要素と、それに適用する
CSS のスタイルを出力しているわけですね。
【ちなみに・・・】
私もカスタムヘッダーへ対応させようと (知識が薄いときに) 色々Webで調べましたが、
他の方達が書かれているこれらのコールバックの説明は、
→ ヘッダーをスタイリングするためのコールバック
admin-head-callback
→ 管理画面でヘッダープレビューをスタイリングするためのコールバック
admin-preview-callback
→ 管理画面でヘッダープレビューを表示するために使用するコールバック
と説明されている方が如何に多いことか・・・
「スタイリング」 と 「プレビュー」 という単語が多発して何のことだか
私にはさっぱり分かりません。
どのコールバックもプレビューするために動作するんですけど。
しかも何でこんななんのこっちゃか分からない説明が複数のサイトで
多発しているのか！ (おそらくとしか言えないですが) どなたか最初の方が
自分の表現で説明されたものを、(日本語リファレンスがないので、
追っかけるつもりがないのか、追っかけることができなかったのか)
実際はどういうタイミングでどうやって動くのかしっかり理解しないまま、
単純にコピペして転記してる方がもしかしたらいるのではないかと。
もしそうであれば、それは如何なものかと思いますよね (怒)
自分の記事が転載されているわけではないですけど、少なくとも、
転記したり引用したりする場合は引用元のサイトを明記すべきですよね。
それが礼儀でもありますし、場合によっては著作権に絡むようなことも
あるかもしれません。
もしプログラムや Webデザインに携わる方であったなら、
(そうでなかったとしても) とてつもなく残念です。
少し話が横道にそれましたが、
ここまでで 本当はカスタムヘッダーを利用するための記述は
一通り終わりのハズです。
終わりのハズ と言ったのは、
WordPress 3.9 の場合は、WordPress 本体のバグのために、
管理画面 [外観 - ヘッダー] で PHP Argument の Warning が出ます。
次回は、これを解消するためのコードを function.php に追記します。
では。
SmartStyle