grace-create では、Webサイト制作以外に WordPress のテーマ開発も行っているのですが、テーマを制作するときの注意すべき点として、『子テーマ』のことを考慮して制作しなければならないということが挙げられます。
WordPressで既存のテーマを使ってWebサイトを作るときは、後々のメンテナンスを考えると子テーマを使用した方が良いんです。
なぜならば、親テーマ（元のテーマ）をカスタマイズしてしまうと、バージョンアップした時に取り残されてしまうような焦燥感を感じなければならなかったり、せっかく頑張ってカスタマイズしたテーマに誤って上書きしてしまい、虚無感を味わうはめになったりするからです。
子テーマに関しての詳細は上記ページに書かれていますが、その中に次のような一文があります。
子テーマで必須なのは style.css ファイルだけです。このファイルで親テーマの style.css を上書きし、WordPress が子テーマを認識するためのヘッダー情報を含めます。
で、親テーマを制作する場合、style.css 等のスタイルシートに対しては、get_template_directory_uri() じゃなくて get_stylesheet_directory_uri() を使うべきですよ。
でも、js なんかは get_template_directory_uri() の方がいいと思います というお話を今からやります。
get_stylesheet_directory_uri()
子テーマを使用している場合、子テーマのディレクトリの URI を返します。
function my_styles() {
wp_enqueue_style( 'style', get_stylesheet_directory_uri() . '/style.css', '', '', 'screen' );
}
add_action( 'wp_enqueue_scripts', 'my_styles' );
上記コードを親テーマの functions.php に、もしくは
<?php wp_enqueue_style( 'style', get_stylesheet_directory_uri() . '/style.css', '', '', 'screen' ); ?>を直接<head>内に記述すると、子テーマでは子テーマの style.css が呼び出されることになります。
親テーマの header.php をそのまま子テーマにコピーしたとしても、当然のことながら同じ結果になります。
子テーマの style.css に親テーマのスタイルを継承させるためには、下記のように @import ルールを明示する必要があります。
もしくは、@import ルールを明示せずに、親テーマの style.css の内容をコピーして好きなように書き換えるか、無の状態から作り上げていくこともできます。
/*
Theme Name: 子テーマ名
Author: 作者名
Template: 親テーマ名
*/
@import url(‘../親テーマ/style.css’);
親テーマのスタイルを継承している場合、例えば親テーマの style.css に下記のようなスタイルがあったとします。
aside.parent-class {
width: 100%;
height: auto;
background: #efefef;
border: #ccc 1px solid;
}
これを子テーマで背景のみ白にしたいのならば、子テーマの style.css を
aside.parent-class {
background: #fff;
}
とすればいいわけです。
また、親テーマと子テーマとでは使用する画像が異なると思うので、get_stylesheet_directory_uri() は画像の参照に適しているみたいです。
get_template_directory_uri()
子テーマを使用している場合、親テーマのディレクトリの URI を返します。
function my_styles() {
wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css', '', '', 'screen' );
}
add_action( 'wp_enqueue_scripts', 'my_styles' );
上記コードを親テーマの functions.php に、もしくは
<?php wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css', '', '', 'screen' ); ?>を直接<head>内に記述すると、子テーマでも親テーマの style.css が呼び出されることになります。
したがって、親テーマで get_template_directory_uri() が使われている場合に子テーマで独自のスタイルを反映させるためには、親テーマの header.php を子テーマにコピーして、
<?php wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css', '', '', 'screen' ); ?>
を
<?php wp_enqueue_style( 'style', get_stylesheet_directory_uri() . '/style.css', '', '', 'screen' ); ?>
に書き換えなければいけません。
functions.php に記述してある場合は、子テーマの functions.php に親テーマとは違う関数名で登録します。
親テーマのスタイルを継承する場合は、子テーマの style.css に @import ルールを明示するのを忘れずに。
function my_new_styles() {
wp_enqueue_style( 'style', get_stylesheet_directory_uri() . '/style.css', '', '', 'screen' );
}
add_action( 'wp_enqueue_scripts', 'my_new_styles' );
@import ルールを明示せずに親テーマのスタイルを読み込む方法もあるようです。
親テーマのスタイルシートを削除して再登録し、それを継承するかたちで子テーマのスタイルシートを登録します。
このとき、親テーマより後で起動させるためにアクションフックの第３引数（優先順位）を指定、もしくは第３引数の数値を親テーマよりも大きくする必要があります。
参照：WordPressの子テーマで親テーマのstyle.cssを@importじゃなく読み込みたい
function my_new_styles() {
// 親テーマのスタイルシートを削除
wp_dequeue_style( 'parent-style' );
// 親テーマのスタイルシートを別名で再登録
wp_enqueue_style( 'new-parent-style', get_template_directory_uri() . '/style.css', '', '', 'screen' );
// 親テーマを依存CSSとして、子テーマのスタイルシートを登録
wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'new-parent-style' ), '', 'screen' );
}
// 第３引数を指定、もしくは第３引数の数値を親テーマよりも大きくする
add_action( 'wp_enqueue_scripts', 'my_new_styles', 50 );
style.css と違い、functions.php は同名ファイルでオーバーライドできません。その代わり、親の functions.php に追加して読み込まれます。正確にいうと、親テーマの functions.php の直前に読み込まれます。したがって、もし親テーマの functions.php で favicon_link() という関数があるとき、子テーマのfunctions.php で同名の関数があれば、子テーマの関数が使用されます。
js（jquery）の場合だと、親テーマの functions.php に下記のように記述すれば、子テーマでも親テーマの js が呼び出されることになります。
function my_scripts() {
wp_enqueue_script( 'parent', get_template_directory_uri() . '/js/parent.js', array( 'jquery' ), '', true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
新たに js が必要ならば、子テーマ内で get_stylesheet_directory_uri() を使って追加すればいいです。
<?php wp_enqueue_script( 'child', get_stylesheet_directory_uri() . '/js/child.js', array( 'jquery' ), '', true ); ?>
まとめ
そんなわけで、get_template_directory_uri() を使用すると、良くも悪くも親とそっくりの子どもが生まれることになります。
優秀な遺伝子（js）は受け継いだ方がいいのでしょうが、子どもの個性（cssやimage）をスムーズに伸ばしてあげたいのならば get_stylesheet_directory_uri() を使うべきではないでしょうか？