1. TOPTOP
  2. Webサービス

WordPressで子テーマを作成するときはfunctions.phpを使うことがおすすめらしい

|

Wapuu

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番目の方法にしなければならないようですね。

〔参考サイト〕