ワードプレスで子テーマを作成したとき、子テーマにもfunctions.phpやstyle.cssが設置されますが親テーマにも同じ名称のファイルがあります。この際にどちらが読み込まれるのかについて解説いたします。
この記事の目次
子テーマのfunctions.phpと親テーマのfunctions.php
テーマに含まれるfunctions.phpは任意の処理(関数)をページが読み込まれるたびに実行させたい時などに、テーマの機能の補佐的なプログラムが含まれていたり、サイト運用者が独自にプログラムを拡張する際によく使われるプログラムファイルです。
もし子テーマと親テーマにこのfunctions.phpが含まれていて、かつ子テーマが有効になっているとき、Wordpressは親テーマのfunctions.phpを実行し、その後に子テーマのfunctions.phpを実行します。
この為、子テーマと親テーマに同じ機能の関数を記載する必要はなく、同じ名称の関数を作ると２重定義のエラーになったりします。
ワードプレスの子テーマを使っている場合、親テーマと子テーマダブルで実行されるのはこのfunctions.phpのみとお考え下さい。
その他のファイルは子テーマを優先として、親テーマのフォルダ内か子テーマのフォルダ内に存在する方どちらかが実行されます。
子テーマのstyle.cssと親テーマのstyle.css
前述のように、style.cssは親テーマにあっても、子テーマにあるので(必ず必要なファイルです)子テーマの方が読み込まれます。
親テーマのstyle.cssは無視されます。
この為親テーマのstyle.cssのスタイルを継承したい場合は、子テーマのstyle.cssに親テーマのstyle.cssのデザイン指定部分を全部コピーするか、子テーマのfunctions.phpに親テーマのstyle.cssを読み込むPHPコードを記載します。
function parent_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'parent_theme_enqueue_styles' );
子テーマのCSSが読み込まれない場合
子テーマのstyle.cssを設置しても、そのスタイルが読み込まれないことがございます。
この理由は、親テーマが親テーマのスタイルを相対パス的にheader.php等フィルなどで読み込んでいる場合です。
このような場合は、強制的に、子テーマのスタイルを読み込むコードをfunctions.phpに記載します。
function child_theme_enqueue_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );
get_template_directory_uri()とget_stylesheet_directory_uri()
親テーマのスタイルを強制的に読み込むコードではget_template_directory_uri()が使用され、
子テーマのスタイルを強制的に読み込むコードではget_stylesheet_directory_uri()が使用されている事に気づかれた方もいらっしゃるかもしれません。
get_template_directory_uri()は親テーマのディレクトリのURLを返す関数で、get_stylesheet_directory_uri()は子テーマのディレクトリのURLを返す関数です。このURLに/style.cssを付与し、wp_enqueue_styleでワードプレスのヘッダーにスタイルの読み込みコードを出力させることで双方のstyle.cssが読み込めるようになります。
ご参考になりましたら幸いです。
WordPress ワードプレスのテーマやプラグインのカスタマイズ、PHPコーディングのご依頼・ご相談はWPドクターまでお気軽にお送りください
