WordPressで子テーマを作成するときはfunctions.phpを使うことがおすすめらしい
目次
WordPressの子テーマを作成しているときに気付いたことです。子テーマのスタイルシートを読み取るのは、style.cssで良いかと思っていましたが、どうもそうではないらしい…。一応、方法としては2つあるみたいです。
1.style.cssを使う
@import url('../twentysixteen/style.css') h1 { color: blue; }
外部のスタイルシートをインポートする、@importを使います。親テーマのstyle.cssを読み込んだ上で、変更したいスタイルのみ上書きします。
2.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' ); }
見た瞬間に引いてしまいそうな内容ですね…。ただ、このコードをよく見ていると、意味を理解するために抑えるべき点は、2つのWordPress関数にあると思います。関数のそれぞれの意味はWordPress Codexを引用しています
wp_enqueue_scripts
スクリプトファイルがまだインクルードされていない場合、また、すべての依存するスクリプトが登録済みの場合、依存関係に従った適切なタイミングでファイルを生成されたページにリンクします。
関数リファレンス/wp enqueue script(新しいタブで開く)より
wp_enqueue_style
WordPress が生成したページに CSS スタイルファイルを安全に (キューへ) 追加します。
関数リファレンス/wp enqueue style(新しいタブで開く)より
あとはadd_actionでそれぞれの関数が実行されて、子テーマのスタイルシートを読み込まれることが(なんとなく)分かります。
functions.phpを使いましょう
どちらの方法を使っても良さそうな感じがしますが、WordPress Codexにおいて、後者の方法が推奨されています。
最後のステップでは、親テーマと子テーマのスタイルシートをキューに入れます。以前は @import: を使用して親テーマのスタイルシートをインポートしていましたが、これはもはや良い方法ではありませんので注意してください。親テーマのスタイルシートをキューに入れる正しい方法は、子テーマの functions.php で wp_enqueue_script()を使用する方法です。
子テーマ – WordPress Codex 日本語版(新しいタブで開く)より
ちなみに詳細な議論が、こちらのページ(新しいタブで開く)(英語)。子テーマを作成するときは、どうやら2番目の方法にしなければならないようですね。
〔参考サイト〕