特定のページ(記事)のみ、style.cssを読み込ませない方法[wordpress/swell]

すごく単純な方法で解決しました。

検索してもなかなかお目当てのページが出なくて、結局chatGPTさんに何回も聞いてたら解決法を提示してくれました。
何回も聞くの大事ですね。

目次

どういう時に必要なのか?

自分の場合は特殊で、見出し用のCSSデザインのツールを作っていて(現在設定されている)見出しCSSの影響を受けない投稿記事の作成に迫られたからです。
なので少し事情が違います@@;

一般的には
サイトのデザインを変えてみたいけど、今のデザインをそのままいじるのは怖い
そんなことはありませんか?

偶には、::first-letterとかも使ったオシャレな投稿記事に憧れたりします、でもサイト全体に使うとイメージ崩れちゃいますからね。
自分ももう少し余裕ができたらチャレンジしてみたいです(多分やらない)。

そんな時に、特定のページだけ現在のデザイン用のCSSを切って、並べて表示して見比べたら便利だと思いませんか?

現在の投稿記事をコピーしてからそのページのデザインをいじってみたりするのに使えると思います。
ちなみにページの複製に関しては、「Yoast Duplicate Post」というプラグインを使うと簡単です。
今回は短い記事なので独立した記事するか迷いましたが、自分と同じように苦労する人もいるかもしれないと思い記事にしました。

注意点としては、今回の方法ではstyle.cssで定義していないcssに関しては制御できません
「外観」⇒「カスタマイズ」⇒「投稿・固定ページ」⇒「コンテンツのデザイン」で設定した見出しデザイン等は対象外です。
style.cssで一括で管理した方が楽なので、これを機に「style.css」でのCSSデザインに切り替えることをオススメします。

方法

functions.phpのバックアップを取る

場所はthemes/使用テーマフォルダの直下にあります。
子テーマを使用している場合は子テーマのfunctions.phpが対象となります。

[重要]functions.phpをいじるので、必ずバックアップを取り、FTP等外部からの復旧を行えるように

functions.phpの修正

脅かしてしまいましたが、修正自体は単純です。

[外観]⇒[テーマファイルエディター]⇒「functions.php」

中身(冒頭)こんな感じになっていると思います。

functions.php

add_action(‘wp_enqueue_scripts’, function() {
       $timestamp = date( ‘Ymdgis’, filemtime( get_stylesheet_directory() . ‘/style.css’ ) );
       wp_enqueue_style( ‘child_style’, get_stylesheet_directory_uri() .’/style.css’, [], $timestamp );
/* その他の読み込みファイルはこの下に記述 */}, 11);

ここでstyle.cssを読み込んでいますので、これを以下のように変更してください。
一部書き換えが必要な部分があるので気を付けてください。

add_action('wp_enqueue_scripts', function() {
	if ( !is_page( 1234)&& !is_page( 1235)) { // 除外したいページのIDを入れる
		$timestamp = date( 'Ymdgis', filemtime( get_stylesheet_directory() . '/style.css' ) );
		wp_enqueue_style( 'child_style', get_stylesheet_directory_uri() .'/style.css', [], $timestamp );
	}
	/* その他の読み込みファイルはこの下に記述 */
}, 11);

このようにすれば、投稿ID1234、1235のページにはstyle.cssが読み込まれません。
対象が1つだけなら&& !is_page( 1235)は必要ないです。対象のページが増えたら同じように追加していって下さい。

分かってしまえば対応はすごく単純なのですが、プラグインを調べたり、別の子テーマを使うなどいろいろな方法に右往左往してしまいました。

コメント

コメントする

目次