WordPressでstyle.cssを編集してもブラウザで確認すると反映されていない！というストレスありませんか？
主原因はブラウザのキャッシュ。キャッシュを削除すれば変更内容が反映されると思います。ただ、サイトのユーザは更新状況なんて知るよしもありませんから、せっかくカスタマイズしても昔の見た目のまんまということが起こってしまいます。
カスタマイズしたら即時反映。これが理想ですよね。
そこで、子テーマのstyle.cssの更新内容を即時に反映させる方法をご紹介します。
ポイントは、
- 子テーマのstyle.cssにバージョン情報を加える
- 子テーマのstyle.cssの2重読み込みを防止する
子テーマのstyle.cssにバージョンを付与すれば、ブラウザは更新されていることを認識して、キャッシュではなく最新のstyle.cssを読み込んでくれます。
ここでのメインコンテンツは2重読み込み防止。多分、ここでハマっている人が多いのではないかということでメモ。
結論から書きます
子テーマのfunctions.phpに下記を追記すれば、子テーマのstyle.cssへのバージョン付与と、2重読み込み防止ができます。
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'), '1.0.0'); // 最後の引数がバージョン（更新したら変更）
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function remove_style_called_from_parent() {
$name = 'twentyseventeen-style'; // 適宜変更
if( wp_style_is( $name ) ) {
wp_dequeue_style( $name );
wp_deregister_style( $name ); // ここがポイント！
}
}
add_action( 'wp_enqueue_scripts', 'remove_style_called_from_parent', 11 /*priority default:10*/ );
ポイントは11行目の「wp_deregister_style()」これを指定しないと2重読み込みが回避できない場合があります。
ちなみに「wp_deregister_style()」で2重読み込み回避できる場合は、10行目の「wp_dequeue_style()」は不要です。
記述内容の説明
まず、親テーマを読み込んでいます。
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
通常はこれだけで子テーマのstyle.cssが自動的に読み込まれます（親テーマのfunctions.phpで子テーマのstyle.cssが自動的に読み込まれる設定になっています）。
あえて、3行目で子テーマの読み込みを設定しているのは、バージョン情報をブラウザに認識させるため。第4引数がバージョン情報になります（日付など管理しやすい名前をつけても構いません）。
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'), '1.0.0'); // 最後の引数がバージョン（更新したら変更）
ただし、このままでは子テーマstyle.cssが2重読み込みされてしまいます（親テーマからも自動的に読み込まれるので）。
ブラウザで確認するとこんな感じ。
<link rel="stylesheet" id="parent-style-css" href="http://xxxx/wp-content/themes/twentyseventeen/style.css?ver=5.4.1" type="text/css" media="all"> <link rel="stylesheet" id="child-style-css" href="http://xxxx/wp-content/themes/twentyseventeen-child/style.css?ver=1.0.0" type="text/css" media="all"> <link rel="stylesheet" id="twentyseventeen-style-css" href="http://xxxx/wp-content/themes/twentyseventeen-child/style.css?ver=5.4.1" type="text/css" media="all">
idに注目すると、上記のwp_enqueue_styleで指定したスタイル名（第1引数）に”-css”が付与されています。
3つ目のstyle.cssが親テーマから自動的に読み込まれたもの。
つまり、親テーマから自動的に読み込まれたstyle.cssは「twentyseventeen-style」というスタイル名でwp_enqueue_style()されていることが分かります（スタイル名はテーマによって異なります）。
この自動読み込みされたstyle.cssが不要（重複）なので、「 remove_style_called_from_parent()」という関数を作って削除しています。
$nameにはスタイル名、この場合は「twentyseventeen-style」を指定します。
$name = 'twentyseventeen-style'; // 適宜変更
「wp_enqueue_style()」で読み込んだcssは「wp_dequeue_style()」で削除できます。
wp_dequeue_style( $name );
ただし、これで削除できないケースがあります。それは、親テーマでwp_register_style()によってあらかじめ登録されたcssの場合です。
この場合は、「wp_deregister_style()」で削除できます。
wp_deregister_style( $name );
ということで、wp_dequeue_style()で削除できない場合は、「wp_deregister_style()」を試しましょう。