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

記事
IT・テクノロジー

1. はじめに

WordPress サイトにおいて、「特定の記事を表示するときだけ、特定の CSSを出力する」方法を紹介します。
それぞれのページが、なるべく必要最低限のCSS(スタイル)を出力することによって、ページの読み込み&表示速度を改善するのが目的です。
2021-09-24_001a1.min.png
特定の記事だけに対して、特定の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ファイルを、後から分割するのは大変ですが、確実に把握している部分から少しずつ分割することをお勧めします。

ラボラジアンでは、Webに関するサービスを出品しております。こちらもよろしくお願い致します。

サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す