WordPress

WordPress: 特定の記事に特定のCSSを出力する方法

投稿日:2021年9月25日 更新日:

1. はじめに

WordPress サイトにおいて、「特定の記事を表示するときだけ、特定の CSSを出力する」方法を紹介します。

それぞれのページが、なるべく必要最低限のCSS(スタイル)を出力することによって、ページの読み込み&表示速度を改善するのが目的です。

特定の記事だけに対して、特定のCSS(スタイル)を出力します

2. 特定の記事を表示するときだけ、特定のCSSを出力する方法

2-1. 概要

いろいろなやり方があるとは思いますが、本記事では以下の方法を紹介します。

  1. 特定のページのみが必要とするCSSを、1つのファイルに切り出しておく。
  2. functions.phpファイルに、「記事IDが○○な記事ページを表示するのであれば、△△というCSSファイルを出力する処理」を記述する。
    • このとき、CSSファイルの中身を <style>タグ内にインライン展開する。

2-2. 具体的な手順

(1) まず、A という記事だけが必要とするCSS(スタイル)を記述した .css ファイルを、テーマディレクトリ直下に配置します。ここでは、a.css というファイル名にします。

(2) 記事 A の ID番号を調べます。

これは、記事A を編集する際のURLに入っています。?post=XXXXX という部分の XXXXX が ID番号です。

ここでは、記事AのIDは「1111」だとします。

(3) テンプレートの functions.php ファイルに以下を記述します。

add_action( 'wp_enqueue_scripts', function() {
	global $post;
	$post_id = $post->ID;
	$ary_post_id = array(1111, 2222, 3333); // CSSを出力する記事IDの配列です

	if (in_array($post_id, $ary_post_id)) {
		wp_register_style( 'a-style', false, array(), '1' );
		$css = file_get_contents( get_theme_file_path('a.css'), true);
		wp_add_inline_style( 'a-style', $css );
		wp_enqueue_style( 'a-style');
	}
} );
  • 今後、記事A以外のいくつかのページからでも a.css ファイルが使えるように、記事IDを配列にしています(例として 2222 と 3333 という記事IDも記述しておきました)。表示しようとしている記事のIDが、この中のどれかに一致すれば CSSファイルを出力(インラインで)します。
  • プログラム内で a.css ファイルを識別するための名前(識別名)を、”a-style” としています。これは任意の名前で構いません。
  • wp_enqueue_style() 関数を使って CSS を出力することによって、<style> タグに id 属性がセットされます。id 属性の値は、先程の識別名 + “-inline-css” という文字列です。このように、予測可能な id属性値がセットされるので、この <style> タグに対して、JavaScript で処理を行いやすくなります。
  • functions.php ファイルではなく、Code Snippets などのプラグインを利用して記述することもできます。
  • CSSを圧縮した状態(必要のない空白文字や改行文字を削除したりなど)で出力したい場合は、a.css を事前に圧縮して配置しておくか、上記のコード内で圧縮する処理を追記します。

手順は以上です。

3. おわりに

1つのCSSファイルにどんどんスタイルを記述していき、それを全てのページから読み込んでいると、そのWebサイトはどんどん遅くなっていきます。一度大きくなってしまった CSSファイルを、後から分割するのは大変ですが、確実に把握している部分から少しずつ分割することをお勧めします。

📂-WordPress
-,

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

WordPress

WordPressの記事ページ上で、投稿ID/ページIDを取得するブックマークレット

WordPressの記事ページ上で、記事IDを取得するブックマークレットを作りました。

WordPress

WordPress: サイトヘルスの特定のチェック項目を無効にする方法

WordPress: サイトヘルスの特定のチェック項目を無効にする方法について説明します。

WordPress

WordPress 5.4 以降で記事にリンクを貼る際のオプション

WordPress 5.4 以降で、記事にリンクを貼る際のオプションについて説明します。

WordPress

WordPressのマルチサイトでサイトを判別するPHPコード

WordPress では マルチサイトといって 1つのWordPress内に複数のサイトを作成する機能があります。(詳しくは、ネットワークの作成 – WordPress Codex 日本語 …

WordPress

WordPressのカスタムHTMLブロックで ‘&gt;’ などを記述する場合の問題点 (未解決)

WordPressのカスタムHTMLブロックで ‘>’ などを記述する場合の問題点 (未解決)