このブログは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 dequeue script()という関数を目星をつけます。
しかし、単純に
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”ですので、優先度が低くなりますのでこちらが最後に実行されます。デフォルトのwp_enqueue_scriptsイベントより早く実行されると、上書きされて追加されたままになります。
これで、親テーマのTwenty Twenty-Oneテーマがアップデートされても、子テーマを適用している本ブログには影響がなくなりました。
なんやかんやでWordPressのサイト構築で躓くのは、PHPのプログラミングなのでした。
“WordPressのTwenty Twenty-Oneテーマを子テーマに対応させた話し” への1件のコメント
[…] WordPressのTwenty Twenty-Oneテーマを子テーマに対応させた話し […]