1. TOP
  2. Webサービス
  3. WordPressで子テーマを作成するときはfunctions.phpを使うことがおすすめらしい

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

|
Wapuu

WordPressの子テーマを作成しているときに気付いたことです。子テーマのスタイルシートを読み取るのは、style.cssで良いかと思っていましたが、どうもそうではないらしい…。一応、方法としては2つあるみたいです。

1.style.cssを使う

[php]
@import url(‘../twentysixteen/style.css’)

h1 {
 color: blue;
}
[/php]

外部のスタイルシートをインポートする、@importを使います。親テーマのstyle.cssを読み込んだ上で、変更したいスタイルのみ上書きします。

2.functions.phpを使う

[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’ );
}
[/php]

見た瞬間に引いてしまいそうな内容ですね…。ただ、このコードをよく見ていると、意味を理解するために抑えるべき点は、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番目の方法にしなければならないようですね。

[amazonjs asin=”4798130931″ locale=”JP” title=”一歩先にいくWordPressのカスタマイズがわかる本”]

〔参考サイト〕