BTC:--
ETH:--
BCH:--
XRP:--

子テーマを作る時のwp_enqueue_styleの書き方

子テーマを作る時のwp_enqueue_styleの書き方

子テーマを作成する時に、function.phpを使ってwp_enqueue_styleでstyle.cssを読み込ませることで子テーマを有効にします。

しかし、htmlのソースコードを見ると、cssが重複して読み込まれていたり、読み込み順がおかしくて、指定したcssが反映されないことがあります。

基本は下記のように、親テーマのcssを指定して、子テーマのcssを読み込ませていると思います。

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
 function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
 );
}

子テーマでは、style.cssが読み込まれればよいので、重複になっていないか、読み込み順が間違っていないかをソースを見ながら確認した方が、読み込み速度で有利になり、助長なcssを省くことができます。

重複している場合

上記の子テーマの読み込みで、style.cssが重複表示される場合、親テーマで子テーマのstyle.cssを読み込むような記述が追加されている可能性があります。

子テーマのfunction.phpに書いているwp_enqueue_styleのchild-styleは不要なので消してしまいましょう。

wp_enqueue_styleのparent-styleは必要になる可能性はあるのでチェックしながら調整が必要です。

子テーマのcssが反映されない

cssが反映されない場合は、読み込み順がおかしい場合があります。

ソースを確認して、一番最後のcssのidを確認して、その後ろにstyle.cssを表示するようにします。読み込み順は、wp_enqueue_styleの3番目のパラメーターのarray部分で指定します。array部分に指定したidの次に読み込まれます。

wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('cssの最後のidを指定する'));

※htmlソースコードで表示されるidの最後の「-css」自動で付与されるので、これを取り除いた部分をarrayで指定します。
例:my-hogehoge-cssと表示されていれば、arrayに指定するのはmy-hogehogeです。

メニューを閉じる