WordPressでテーマの機能拡張をする方法として子テーマを利用する方法があります。ここでは、子テーマの作り方について紹介します。
子テーマとは
既に用意されたテーマをダウンロードして利用していると「ちょっとデザインを変更したいな」と感じるときがあるかと思います。そんなとき、ダウンロードしたテーマを直接編集するのもいいですが、直接編集するとテーマが更新された場合に自動で上書きされてしまいます。
そこで、既存テーマを変更したいときには子テーマを利用することが推奨されています。子テーマを利用する場合は、子テーマ内で「デザインの変更」「機能拡張」をします。そうすると、親テーマが更新されても自分で変更した内容を失わずに済むことができます。
もう少し具体的に説明します。子テーマでは、親テーマと同名のテンプレートファイルが存在する場合に、子テーマのテンプレートファイルが利用されます。なので、例えば親テーマに存在するpage.phpをカスタマイズしたい場合、子テーマ内でpage.phpというテンプレートファイルを作成するだけです。その他の親テーマにしか存在しないテンプレートファイルは、子テーマ内で作成しなくても親テーマのテンプレートファイルが利用されます。
例外として、functions.phpは子テーマ内にあるfunctions.php、親テーマ内にあるfunctions.phpの順で両方とも読み込まれます。
子テーマの利用手順
例として、「Twenty Fourteen」の子テーマを作成してみます。
(1)「wordpress/wp-content/themes」ディレクトリ配下に子テーマ用のフォルダを作成
フォルダ名は何でもいいのですが、ここではtwentyfourteen-childというフォルダを作成します。
(2)「style.css」ファイルを作成
「twentyfourteen-child」フォルダ配下に「style.css」ファイルを作成します。「style.css」ファイルには、次の内容を入力します。
/*
Theme Name: twentyfourteen-child
Template: twentyfourteen
*/Templateには親テーマのフォルダ名を指定してください。
(3) 子テーマの有効化
WordPressの管理画面で子テーマを有効化させます。「外観」-「テーマ」の画面で、今回追加したtwentyfourteen-childを有効化させましょう。以上で、子テーマを利用することができます。
子テーマで親テーマのstyle.cssを読み込む方法
子テーマを「有効化」させると親テーマのスタイルが適用されなくなります。子テーマで親テーマのスタイルを適用させるためには、子テーマ内にfunctions.phpを作成して次の内容を記述してください。
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}子テーマを利用する際の注意点
テーマディレクトリまでのパスを出力する関数として、bloginfo(‘template_url’) があります。これを子テーマ内で利用すると、親テーマディレクトリのパスが出力されます。子テーマディレクトリのパスを出力したい場合は、bloginfo(‘stylesheet_directory’) を利用します。
