WordPressでテーマをカスタマイズする際に用いるのが子テーマです。親テーマへ変更を加えることなくテーマのカスタマイズが可能なことから利用を推薦する記述も多いです。

親テーマのstyle.cssが読み込まれなかった原因

wp_enqueue_style関数の第1引数($handle)が重複していたため親テーマのstyle.cssが読み込まれていなかったようでした。

最初は、以下の様な記述を、子テーマのfunctions.phpに記載していました。

wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' )

この記述では、関数の第1引数には、parent-styleを指定していました。
これでは、親テーマののstyle.cssが読み込まれなかったので、以下の様に変更しました。

wp_enqueue_style( 'parent-style2', get_template_directory_uri() . '/style.css' )

この変更によって、親テーマのstyle.cssが読み込まれるようになりました。

wp_enqueue_style子テーマに最低限必要な2つのファイル

子テーマを利用するには、以下の2つのファイルが最低限必要です。

style.css

1つのファイルは、style.cssです。コメントで、子テーマ情報、親テーマが何かを最低限記述します。WordPressはここを参照し、親テーマとの紐付けを行います。

@charset "utf-8";
/*
        Theme Name: diver_child
        Template: diver
        Description:  Diverの子テーマです。
        Theme URI: http://tan-taka.com/diver/
        Author: Takato Takagi
 */

以下の2つの項目は、最低限記述する必要があります。

  • Theme Name: 子テーマの名前です。通常は、親テーマの名前+childと命名します。
  • Template:親テーマのディレクトリ名

functions.php

2つ目のファイルは、functions.phpです。

<?php
  function theme_enqueue_styles(){
    wp_enqueue_style( 'parent-style2', get_template_directory_uri() . '/style.css' )
  }
  add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

ファイルを読み込む順番が重要

子テーマを利用する場合、子テーマ内のファイルと親テーマ内のファイルの両方が読み込まれることになります。そこで重要になるのがどの順番で読み込まれるのかということです。

style.cssは親テーマ→子テーマ

style.cssについては、子テーマのfunctions.phpにて親テーマのスタイルを読み込むように記述しています。
その際に重要になるのが読み込まれる順番です。

style.cssの読み込まれる順番

親テーマのstyle.css→子テーマのstyle.css

親テーマのstyle.cssのあとに子テーマのstyle.cssが読み込まれるため、子テーマのCSSファイルでカスタマイズするとそれが反映されるわけです。

functions.phpは子テーマ→親テーマ

functions.phpは、子テーマから先に読み込まれます。

functions.phpの読み込まれる順番

子テーマのfunctions.php→親テーマのfunctions.php

wp_enqueue_styleのhandle名

WordPressで安全にCSSやJSを読み込む際に用いられる関数がwp_enqueue_style関数です。

第1引数に、$handleと呼ばれる重複しないユニークな名称を指定できます。このhandle名称によって、仮に同じCSSファイルを読み込む、wp_enqueue_style関数が2回呼び出されても、CSSの読み込みは2回行われません。

今回は、子テーマに記述したwp_enqueue_style関数が読み込まれた際に、そこで読み込まれたhandle名で既にCSSが読み込まれていた可能性がありました。ですので、handle名を変更することで無事に親テーマのstyle.cssも読み込まれるようになりました。

とりあえず今回は対処としては成功したのでよしとします。ただ、親テーマをバージョンアップする前は、handle名が重複することはなかったのでもう少し原因をさぐれればなとは思っています。

PVアクセスランキング にほんブログ村

Twitterでフォローしよう

おすすめの記事