【Wordpress】子テーマでウィジェットエリアを追加する方法

今回はWordpressの子テーマでウィジェットエリアを追加する方法について解説していきます。

ご存知のとおり、Wordpressでは基本的に子テーマが親テーマを上書き（あるいは置換）しますが、function.phpだけは親子両方のファイルが読み込まれるため、内容に矛盾（あるいは重複）があるとエラーになってしまいます。

子テーマでウィジェットエリアを追加する場合においても、親テーマのfunction.phpとの矛盾回避が必要となり、そこが今回のポイントとなります。

親テーマのfunction.phpの記述を確認する
親テーマのウィジェット定義を無効化する
子テーマに親テーマのコードを貼り付ける

親テーマのfunction.phpの記述を確認する

まず最初に、親テーマのfunction.phpを確認していきましょう。

下記のコードは公式テーマTwenty twelveのfunction.phpからコピーしたものです。この部分でウィジェットエリアを定義しています。

function twentytwelve_widgets_init() {
register_sidebar( array(
'name' => __( 'Main Sidebar', 'twentytwelve' ),
'id' => 'sidebar-1',
'description' => __( 'Appears on posts and pages except the optional Front Page template, which has its own widgets', 'twentytwelve' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
（中略）
}
add_action( 'widgets_init', 'twentytwelve_widgets_init' );

Wordpressでは上記の記述により、ウィジェットエリアを定義しています。

単純に親テーマでウィジェットエリアを追加するのであれば、上記の２行目から10行目をコピペし、赤字部分を適当な文字に置き換えれば完了します。

しかし、子テーマのfunction.phpを修正する場合、上記のコードと矛盾（重複）が生じますので、親テーマ側の記述を無効化する必要があります。

ちなみに、はてなブログでシンタックスハイライト風にコードを表示するためのCSSを下記にて公開していますので、興味のある方はあわせてお読みください。

www.nekatsu.com

親テーマのウィジェット定義を無効化する

上でも書いたとおり、子テーマ側でfunction.phpを修正する場合には、親テーマとの矛盾（重複）を回避する必要があります。

今回のケースでは、子テーマのfunction.phpでウィジェットエリアを再定義することとなりますので、親テーマ側の同様の処理を無効化しなくてはなりません。

そこで、子テーマのfunction.phpに以下のコードを記述してください。

function widgets_parent_remove() {
remove_action('widgets_init', 'twentytwelve_widgets_init');
}
add_action('after_setup_theme','widgets_parent_remove');

こちらのコードを記述することにより、親テーマのfunction.phpで定義されたウィジェットエリアが無効になりました。この段階でサイトを表示すると、すべてのウィジェットが消えているはずです。

上記のコードについて若干の解説を加えます。

1行目のwidgets_parent_removeは、今回の処理のために定義した関数名です。既存の関数名と重複しないよう、任意の関数名を記述してください。

2行目のremove_action関数により、親テーマのウィジェットエリアを無効化しています。すこし詳しく説明すると、ウィジェットエリアを生成するためのアクションフック（add_action関数）がremoveするということです。なお、カッコ内の引数は親テーマのfunction.phpからコピーしてください。

4行目のadd_actionは、いったん親テーマを読み込んだ後で、1～4行目の処理を実行するためのアクションフックです。function.phpは子テーマ→親テーマの順番で読み込まれますが、子テーマにもう一度戻ってくるイメージですね。このような回りくどい処理となる理由は、子テーマのfunction.phpが読み込まれる時点では、無効化したい親テーマが読み込まれていないからです。なお、カッコ内のwidgets_parent_removeは1行目で定義した関数名を記述してください。

ちなみに、ここまでの説明を読んで、処理の流れやアクションフックがよく分からないという方は、下記書籍のP237ページ以降を読むと、格段に理解が深まります。

WordPressユーザーのためのPHP入門はじめから、ていねいに。[第2版]

posted with ヨメレバ

水野史土エムディエヌコーポレーション 2017-03-28

Amazon

Kindle

子テーマに親テーマのコードを貼り付ける

さて、最後のステップです。

親テーマのfunction.phpから子テーマへ、ウィジェットエリアの定義部分のコードをコピペしてください。なお、下記のコードは公式テーマTwenty twelveのものです。

function child_twentytwelve_widgets_init() {
register_sidebar( array(
'name' => __( 'Main Sidebar', 'twentytwelve' ),
'id' => 'sidebar-1',
'description' => __( 'Appears on posts and pages except the optional Front Page template, which has its own widgets', 'twentytwelve' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
（中略）
}
add_action( 'widgets_init', 'child_twentytwelve_widgets_init' );