LoginSignup
0
0

More than 5 years have passed since last update.

子テーマのstyleが優先されない場合の対処法

Posted at

本記事は備忘録として書きました。
初歩的な内容となっています。
しかし「子テーマ 優先されない」などとググっても、そのものズバリと書いてあるサイトを見つけられませんでした。
何かのお役に立てれば幸いに存じます。

子テーマのstyleが適用されず明示的な記述をしたい場合下記のような記述をお勧めしているサイトをよく見かけます。

functions.php
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() . '/custom-style.css', array('parent-style')//子テーマのスタイル
);

それでもテーマによって(?)、
親テーマ → 子テーマ → 親テーマ
と、親テーマのstyleが再度読み込まれ、子テーマのスタイルが優先されない場合があります。(下図)
image.png
custom-style.css が読み込まれた後に id='baskerville_style-css' で親スタイルが再度読み込まれ上書きされています。

だったら、さらに明示的に baskerville_style-css を先に読み込ませ、子テーマの custom-style.css を後に読み込ませればいいのだと思い、下記のように記述しました。

functions.php
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( 'baskerville_style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/custom-style.css', array('parent-style')
);

結果は子テーマが一番後に読み込まれ、優先されるようになりました。
image.png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0