WordPress 子テーマでヘッダー画像を設定するポイント
- 編集するのは functions.php の 1 ファイルのみ
- register_default_headers → 管理画面で選択できる画像を登録する関数
- 子テーマのディレクトリパスは %2$s のプレースホルダーで定義される。親テーマの時の %s ではない。
- add_action で after_setup_theme にフックする
- after_setup_theme にフックする関数名は twentytwelve_setup 以外とする。親テーマのセットアップ関数を上書き（オーバーライド）したくないため。
【WordPress】世界で一番簡単に子テーマを作る方法♪を勉強してオリジナルテーマを作る礎とします！ | oki2a24 の続きとなります。このときは、子テーマのディレクトリを作って、style.css で子テーマの定義をし、同じファイルで親テーマの CSS を読み込んだのでした。続きでございまして、今回で見た目が大きく変わる予定です♪
Twenty Twelve という WordPress テーマには、ヘッダー画像がありません。本当に、シンプルなテーマです。ですけれどもわたくし、今の本ブログのようにヘッダー画像を付けたいのです。
前回作成した style.css ではどうにもなりません。functions.php を使います。
子テーマでの functions.php の注意点！！！
- 親テーマの functions.php ファイルを上書きしない仕様となっている（style.css は親テーマの style.css を上書きする）。テンプレートファイルもオーバーライドするため、親テーマのファイルを上書きしないのは、functions.php といっても良いくらい。
- 子テーマの functions.php に書いた処理は親テーマの functions.php に追加されて読み込まれる。
まず押さえるべきポイントはこの 2 点と思います。
そして 2 点目に重要な補足がございます。同名の関数を子テーマで作成したとしても、親テーマの関数によって上書きされます（←疑心暗鬼中。嘘かもしれません）。つまり、親テーマの関数が実行されてしまいます。
このことは、Twenty Twelve の functions.php に書いてあるのを発見いたしました。
* When using a child theme (see http://codex.wordpress.org/Theme_Development and
* http://codex.wordpress.org/Child_Themes), you can override certain functions
* (those wrapped in a function_exists() call) by defining them first in your child theme’s
* functions.php file. The child theme’s functions.php file is included before the parent
* theme’s file, so the child theme functions would be used.
*
* Functions that are not pluggable (not wrapped in function_exists()) are instead attached
* to a filter or action hook.
簡単に訳してみますと、
「子テーマ使うときは、function_exists()でラップされている関数であればオーバーライドできますよ♪親の前に子の functions.php が読み込まれますので、子テーマの関数が使われます。
プラガブルではない、function_exists()でラップされていない関数は、そうではなくてフィルターや、アクションフックにアタッチされてしまいますの」
ということで大体はよいかと思います。これは、親テーマで気を遣っていない（function_exists()でラップしていない）関数と同じ名前の関数を子テーマで作ったとしても、常に親の関数が実行される、ということでしょうか。
少し調べてみたのですけれども、わたくし疑心暗鬼です。Twenty Twelve の functions.php 内の function_exists()でラップされていない関数をいくつか選んで子テーマの functions.php でオーバーライドしてみました。関数内で echo だけするような、簡単な関数です。
そうしましたら結果、子の関数が実行されてしまいました。親ではなく。。。子の functions.php を「実行」 → 親の functions.php を「実行」するので echo はされる、ひょっとしてこういうことなのでしょうか？
うーむ、わかりません。ひとまず、放っておきます。だって、わたくしが今やりたいのは、WordPress 子テーマでヘッダー画像を設定することですもの。
実際に、WordPress 子テーマでヘッダー画像を設定する前にポイントを確認！
カスタムヘッダー（管理画面テーマからヘッダー画像を切り替える機能）でのヘッダー候補として表示させる画像を登録させたいのです。本ブログの子テーマ適用前で修正前である今のテーマでもこれが有効になっておりまして、このように表示されております。
これを実現させるには、現在のテーマで行なっていることをそのまま、新しい子テーマに書いてやればよいですね。簡単です。
しかも、登録する画像を指定する関数も、この関数を実行させるタイミング、つまりフックポイントもわかっています。
- 登録する画像を指定する関数は register_default_headers
- 子テーマのディレクトリパスは %2$s のプレースホルダーで定義される。親テーマの時の %s ではない。
- フックは after_setup_theme が対象
上記 3 点がポイントですが、なんといっても 2 番めが大事です。%2$s のプレースホルダーを使うのは子テーマの時だけの、独特のやり方だからです！わたくしはこれで随分と時間を使ってしまいました。本家ドキュメントを読んでおきましょうよ！英語だからって尻込みしないで！という気持ちは本当に大事だと思います。
register_default_headers 関数において、プレースホルダーは %s ではなく、子テーマでは %2$s を使う、ドキュメントはこちらです。
実際に、WordPress 子テーマでヘッダー画像を設定します♪
全て子テーマディレクトリ内に対する変更となります。まずは変更前の子テーマディレクトリ内の一覧です。wp-content/themes/ からのパスです。
- oki2a24com-twentytwelve-child/style.css
まず、画像を入れる次のディレクトリを作成します。images/headers/ と、2 つディレクトリを作るところに注意です。ここまでこだわらなくても functions.php でのパスの指定さえ間違わなければどこでも良いのですが、WordPress の共通ルール、おすすめのやり方を積極的に採用したいので、ディレクトリ構造を Twenty Eleven に合わせています。
- oki2a24com-twentytwelve-child/images/headers/
ここにブログに表示するヘッダー画像、そして管理画面でのヘッダー選択時に必要となるサムネイル画像を入れます。Mac からアップロードするのではなく、今のテーマと同じヘッダー画像を使うため、そこからコピーしました。
この画像をカスタムヘッダーで扱えるようにするために、functions.php を作成して、編集します。
- oki2a24com-twentytwelve-child/functions.php
Twenty Eleven をベースにした今の本ブログのテーマは、150 枚以上の画像を使用しているのですが、今は動きを見たいので、3 枚のみとして、プログラムの修正を容易に保つことを優先します。
編集の内容は、次の点です。入れ子構造が結構複雑ですけれども、落ち着いて、そして慣れればそんなに難しくありません。
- セットアップ用の関数を新たに作る（oki2a24_twentytwelve_child_setup）
- その中で管理画面で選択できる画像を登録する関数である register_default_headers を呼び出して引数で images/headers/ ディレクトリに置いた画像を指定する
- フックポイント after_setup_theme のタイミングで、今書いた関数 oki2a24_twentytwelve_child_setup が実行されるようにアクション登録（add_action）する
<?php
/**
* 親テーマ Twenty Twelve のセットアップに追加する処理を定義します。
*/
function oki2a24_twentytwelve_child_setup() {
register_default_headers( array(
'PC292698' => array(
'url' => '%2$s/images/headers/PC292698.JPG',
'thumbnail_url' => '%2$s/images/headers/PC292698-thumbnail.JPG',
/* translators: header image description */
'description' => __( 'PC292698', 'twentyeleven' )
),
'PC292705' => array(
'url' => '%2$s/images/headers/PC292705.JPG',
'thumbnail_url' => '%2$s/images/headers/PC292705-thumbnail.JPG',
/* translators: header image description */
'description' => __( 'PC292705', 'twentyeleven' )
),
'PC292714' => array(
'url' => '%2$s/images/headers/PC292714.JPG',
'thumbnail_url' => '%2$s/images/headers/PC292714-thumbnail.JPG',
/* translators: header image description */
'description' => __( 'PC292714', 'twentyeleven' )
)
) );
}
/**
* 親テーマ Twenty Twelve のセットアップに処理を追加します。
*/
add_action( 'after_setup_theme', 'oki2a24_twentytwelve_child_setup' );
なお、上述いたしましたけれども、「子テーマの register_default_headers 関数ではURL のプレースホルダーとして %2$s を使用する」ことがポイントです。ちなみに、親テーマでのプレースホルダーは %s ですね。
この %2$s プレースホルダー、register_default_headers 関数内だけでなく、他の場所でも子テーマでは一律 %2$s を使うことがルールのような気がいたします。調べていませんので、明言はできませんけれども。
これで作業は完了です。前回ともあわせて、このようなディレクトリ、ファイル構成となりました♪
oki2a24com-twentytwelve-child/ |-- functions.php |-- images | `-- headers | |-- PC292698-thumbnail.JPG | |-- PC292698.JPG | |-- PC292705-thumbnail.JPG | |-- PC292705.JPG | |-- PC292714-thumbnail.JPG | `-- PC292714.JPG `-- style.css 2 directories, 8 files
完成！ WordPress 子テーマを有効化してヘッダー画像の設定を確認します♪
管理画面の「外観 > テーマ」から oki2a24.com, Twenty Twelve Child テーマの「有効化」をクリックします。この時点でブログを確認してもヘッダー画像は設定されておりません。
同じページの「ヘッダー」（もしくは「外観 > ヘッダー」）をクリックします。おお！functions.php で登録した内容が表示されていますね♪これが確認できたら一安心です。確実にヘッダー画像を設定できるはずです。もしできない場合は、後述したような単純なミスをしているかもしれません。地道にチェックしましょう。
デフォルト画像のところで「ランダム」を選び、「変更を保存」をクリックします。これでブログを確認してみますと、おお！ヘッダー画像が表示されました♪何度かページをリロードしてみましたけれども、ランダムに画像が選ばれています！これで完了ですね♪
今回のすげーやっちまった大失敗ポイント！！！
ここからは未来に備えまして、反省会です＞＜。
- function.php ではない、functions.php であります！！！
function「s」.php です。この投稿は実際に作業しながら作成してみているのですけれども、function.php でファイルを作成し、その中に記述した内容が動いてくれません。なぜでしょうとしばらく考え込んでいましたけれども、なんてことはありませんでした。ファイル名が間違っていたのです！！！恥ずかしいですの＞＜。
WordPress のテーマを作る時、処理は functions.php に記述しますけれども、これはなんとなく慣例でこのようなファイル名なのではなく、このファイル名「functions.php」以外では読み込んでくれないルールです♪
じつはこの誤り、以前も一度経験しました＞＜。わたくし進歩ありませんの。でも、次こそは！です。わたくし、がんばります！
おわりに
次の課題のうち、最初の2つが完了しました。
- 子テーマを使う（Complete！）
- ヘッダー画像を設定する（Complete！）
- h2 の見出し、h3 の小見出しを修正するか検討する → WordPressテーマTwenty Elevenの見出し（hタグ）スタイルを修正します！ | oki2a24
- Jetpack 2.0 の無限スクロールを導入する
- moreタグでURL末端に付く #more-xxxx を削除する
残り3つも引き続き取り組んで行く予定でございます。
楽しみですの♪
以上です。
「【WordPress】子テーマに、管理画面で選択できるヘッダー画像を登録するスマートなやり方♪【register_default_headers】」への1件の返信
[…] 【WordPress】子テーマに、管理画面で選択できるヘッダー画像を登録するスマートなやり方♪【register_default_headers】 | oki2a24 […]