WordPressの子テーマ化をした際にスタイルシートの重複読み込みを回避する方法

WordPressを子テーマした際に、親テーマのfunction.phpの処理によって子テーマのスタイルシートが重複して読み込まれてしまう場合があります。
この重複読み込みを解消する方法をご紹介します。

※今回の記事は前回の続きになりますので、前回の記事もチェックしてみてください。

スタイルシートの重複読み込みを確認

子テーマ化する際に、functions.phpには下記の記述をします。

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?'. date("ymdHis", filemtime( get_stylesheet_directory() . '/style.css')), array('parent-style'));
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

これは「親のスタイルシートと子のスタイルシートを読み込んでね」という記述になります。
実際にブラウザで見てみると、自分のサイトでは下記のようなコードが出力されます。

<link rel="stylesheet" id="parent-style-css" href="https://www.kansuke-prg.com/wp/wp-content/themes/maxwell/style.css?ver=5.1.1" type="text/css" media="all">
<link rel="stylesheet" id="child-style-css" href="https://www.kansuke-prg.com/wp/wp-content/themes/maxwell-child/style.css?190711094905&amp;ver=5.1.1" type="text/css" media="all">
<link rel="stylesheet" id="maxwell-stylesheet-css" href="https://www.kansuke-prg.com/wp/wp-content/themes/maxwell-child/style.css?ver=1.7.2" type="text/css" media="all">

上の二つのコードはidに「parent-style」「child-style」がついているので、子テーマのfunctions.phpに追加したものになります。
ですが、三つ目のスタイルシートを見ると、再度子テーマのスタイルシートを読み込む記述があります。

この三つ目のスタイルシートが二度読み込みの原因になります。

スタイルシートの重複読み込みを解消する

スタイルシートの重複読み込みを解消する方法は下記二点になります。

1. アクションフックを使って親テーマのCSSファイルの読み込みを防ぐ
2. 親テーマのCSSファイルの読み込み記述を削除する

オススメは親テーマを編集しない1の方法になりますが、どちらでも目的は達成できますので、自身のスキルに合った方法をお試しください。

アクションフックを使って親テーマのCSSファイルの読み込みを防ぐ

重複しているスタイルシートは下記になります。

<link rel="stylesheet" id="maxwell-stylesheet-css" href="https://www.kansuke-prg.com/wp/wp-content/themes/maxwell-child/style.css?ver=1.7.2" type="text/css" media="all">

上記スタイルシートは、親テーマの functions.php で下記のような記述で読み込まれています。

// Register and Enqueue Stylesheet.
wp_enqueue_style( 'maxwell-stylesheet', get_stylesheet_uri(), array(), $theme_version );

上記スタイルシートの読み込みを削除するために、子テーマの functions.php に下記のような記述をします。

function remove_enqueue_parent_style() {
   $name = 'maxwell-stylesheet';
   if( wp_style_is( $name ) ) { wp_dequeue_style( $name ); }
 }
 add_action( 'wp_enqueue_scripts', 'remove_enqueue_parent_style', 11);

参考記事： wp_enqueue_styleされたスタイルを削除

上記のように指定することで、’maxwell-stylesheet’としてハンドルされたスタイルシート読み込みの動作を削除できますので、重複読み込みを防ぐことができます。

親テーマのCSSファイルの読み込み記述を削除する

※この方法はWordPressの機能で「テーマの更新」を行った際に編集箇所が消えてしまう場合がありますので、できる限り1の方法で実装することを推奨します。

ページに出力されるスタイルシートを見ると、idに子テーマのfunctions.phpで指定した「parent-style」や「child-style」の文言が入っていることがわかります。
ということは、重複しているスタイルシートも「maxwell-stylesheet」という名前でどこかのファイルにコードが組まれていることが分かります。

ここまでわかってしまえば、あとはテーマファイルを全てダウンロードしてサクラエディタなどの便利エディタでgrep（※文字検索）をファイル単位で実行すれば問題の箇所を突き止めることができます。

自分が使っているテーマ（Maxwell）では、親テーマのfunctions.phpに下記のような記述がありました。

// Register and Enqueue Stylesheet.
wp_enqueue_style( 'maxwell-stylesheet', get_stylesheet_uri(), array(), $theme_version );

上記箇所があることでスタイルシートが重複してしまうので、コメントアウトして無効化します。

// Register and Enqueue Stylesheet.
//wp_enqueue_style( 'maxwell-stylesheet', get_stylesheet_uri(), array(), $theme_version );

これで、スタイルシートの重複読み込みが解消されます。

前回の記事だけではスタイルシートのキャッシュが回避できなかったと思いますが、今回の記事でスタイルシートの重複読み込みを解消できたので、ファイルを更新した場合のみ自動的にファイルを再読み込みする仕組みができたと思います。

WordPressを使う場合は、ここまでやってようやくスタートラインという感じがしますね！

ではまた！