WordpressのTwenty Twenty-Oneテーマを子テーマに対応させた話し

WordPressのTwenty Twenty-Oneテーマを子テーマに対応させた話し

このブログはWordpressのTwenty Twenty-Oneのテーマを使っています。Twenty Twenty-Oneのテーマは見出しが異常に大きいとか、細かい所で惜しいバグがあるとかありますので、いろいろとカスタマイズしています。

最初は、子テーマでの対応の方法がわからなくて、外観のCSS編集でCSSの上書きをしましたが、いろいろ大変で心が折れました。次にTwenty Twenty-OneテーマのSCSSを直接修正していましたが、Twenty Twenty-Oneテーマがアップデートするたびに元に戻ってしまいます。そこで、何とか子テーマでの対応をしてみました。

最初に参考にしたサイトは、次のサイトです。

WordPress【Twenty Twenty-One】の子テーマを作成する方法

そのものずばりのタイトルなのですが、このままコピペしてみると、親テーマのTwenty Twenty-Oneテーマのstyle.cssが優先になって子テーマのほうのstyle.cssを適用してくれません。

今回は、親テーマのTwenty Twenty-OneテーマのSCSSを子テーマにコピーし、そのSCSSを編集してstyle.cssを生成していきますので、親テーマのTwenty Twenty-Oneテーマのstyle.cssは不要となります。

そこで、親テーマのTwenty Twenty-Oneテーマのfunction.phpにある

wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) );

を無効にしなければいけません。この文をコメントアウトすればいいのですが、これではwenty Twenty-Oneテーマがアップデートしたときに、また元に戻ってしまいます。

おそらく、CSSの適用はWordpressではキューに入れてからまとめで、HTMLファイルに出力しているようですので、だったらキューから該当するCSSを登録しているキューから削除してしまえ、ということと勝手に理解しました。

そこで、wp_enqueue_style（）関数の反対の動作をする関数を探します。

wpdocs.osdn.jp

関数リファレンス/wp enqueue style – WordPress Codex 日本語版

~~https://wpdocs.osdn.jp/関数リファレンス/wp_enqueue_style~~

関数リファレンスの関連項目からwp dequeue script()という関数を目星をつけます。

wpdocs.osdn.jp

関数リファレンス/wp dequeue script – WordPress Codex 日本語版

~~https://wpdocs.osdn.jp/関数リファレンス/wp_dequeue_script~~

しかし、単純に

wp_dequeue_style( 'twenty-twenty-one-style');

とやっても、Twenty Twenty-Oneテーマのstyle.cssが追加されたままです。いろいろ調べてみると、次に見つけたサイトは以下のサイトです。

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

イベントを実行するキューには当たり前ですが順番があります。キューを実行する優先順位を指定してあげないといけないようです。

最後に、以下のようなコードをfunction.phpに書いてあげると、親テーマのTwenty Twenty-Oneテーマのstyle.cssを出力せずに子テーマのstyle.cssだけをHTMLの<head>に書き出してくれるようになりました。

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

function remove_enqueue_parent_style() {
  $name = 'twenty-twenty-one-style';
  if( wp_style_is( $name ) ) { wp_dequeue_style( $name ); }}
add_action( 'wp_enqueue_scripts', 'remove_enqueue_parent_style', 11);

add_action()の第3パラメータの”11”が今回の記事の肝です。このパラメータが優先度で、デフォルトが”10”ですので、優先度が低くなりますのでこちらが最後に実行されます。デフォルトのwp_enqueue_scriptsイベントより早く実行されると、上書きされて追加されたままになります。

これで、親テーマのTwenty Twenty-Oneテーマがアップデートされても、子テーマを適用している本ブログには影響がなくなりました。