カテゴリー
WordPress

【WordPress】子テーマに、管理画面で選択できるヘッダー画像を登録するスマートなやり方♪【register_default_headers】

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 テーマには、ヘッダー画像がありません。本当に、シンプルなテーマです。ですけれどもわたくし、今の本ブログのようにヘッダー画像を付けたいのです。

スクリーンショット 2013-07-04 20.23.46.png

前回作成した 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 子テーマでヘッダー画像を設定する前にポイントを確認!

カスタムヘッダー(管理画面テーマからヘッダー画像を切り替える機能)でのヘッダー候補として表示させる画像を登録させたいのです。本ブログの子テーマ適用前で修正前である今のテーマでもこれが有効になっておりまして、このように表示されております。

スクリーンショット 2013-07-04 22.18.15.png

これを実現させるには、現在のテーマで行なっていることをそのまま、新しい子テーマに書いてやればよいですね。簡単です。

しかも、登録する画像を指定する関数も、この関数を実行させるタイミング、つまりフックポイントもわかっています。

  • 登録する画像を指定する関数は 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 で登録した内容が表示されていますね♪これが確認できたら一安心です。確実にヘッダー画像を設定できるはずです。もしできない場合は、後述したような単純なミスをしているかもしれません。地道にチェックしましょう。

スクリーンショット 2013-07-06 11.20.42.png

デフォルト画像のところで「ランダム」を選び、「変更を保存」をクリックします。これでブログを確認してみますと、おお!ヘッダー画像が表示されました♪何度かページをリロードしてみましたけれども、ランダムに画像が選ばれています!これで完了ですね♪

スクリーンショット 2013-07-06 11.25.04.png

今回のすげーやっちまった大失敗ポイント!!!

ここからは未来に備えまして、反省会です><。

  • function.php ではない、functions.php であります!!!

function「s」.php です。この投稿は実際に作業しながら作成してみているのですけれども、function.php でファイルを作成し、その中に記述した内容が動いてくれません。なぜでしょうとしばらく考え込んでいましたけれども、なんてことはありませんでした。ファイル名が間違っていたのです!!!恥ずかしいですの><。

WordPress のテーマを作る時、処理は functions.php に記述しますけれども、これはなんとなく慣例でこのようなファイル名なのではなく、このファイル名「functions.php」以外では読み込んでくれないルールです♪

じつはこの誤り、以前も一度経験しました><。わたくし進歩ありませんの。でも、次こそは!です。わたくし、がんばります!

おわりに

次の課題のうち、最初の2つが完了しました。

残り3つも引き続き取り組んで行く予定でございます。

楽しみですの♪

以上です。

「【WordPress】子テーマに、管理画面で選択できるヘッダー画像を登録するスマートなやり方♪【register_default_headers】」への1件の返信

コメントを残す