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

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

最初は、子テーマでの対応の方法がわからなくて、外観のCSS編集でCSSの上書きをしましたが、いろいろ大変で心が折れました。次にTwenty Twenty-OneテーマのSCSSを直接修正していましたが、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()関数の反対の動作をする関数を探します。

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

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

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

しかし、単純に

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

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

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

最後に、以下のようなコードを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ですので、優先度が低くなりますので最後に実行されます。

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

なんやかんやでWordPressのサイト構築で躓くのは、PHPのプログラミングなのでした。

続きはこちらから