WordPressのCSS・JS読み込み｜応用編

ページが増えると、「このCSSはトップページでしか使わないのに」という場面が出てきます。必要なページでだけ読み込めば、サイトを軽く保てます。この記事では、CSSをページごとに出し分ける書き方を紹介します。

ページ別の読み込みで押さえること

この記事では、トップページ・固定ページ・コラム・お知らせがあるサイトを例にします。全ページ共通のCSSを読み込んだうえで、表示中のページに必要なCSSだけを足します。

ファイル名と、投稿タイプの名前（column・news）は例です。自分のサイトに合わせて決めます。

この記事は、CSS・JSを読み込む基本の書き方を知っている人に向けて書いています。

あわせて読みたいWordPressのCSS・JS読み込み｜基本編

コードは、最初に完成形のコードを載せ、その後で部分ごとに解説します。やりたいことが決まっている場合は、次の表から使う関数と、解説している章を探してください。

完成形のコード

functions.phpに貼り付けて使えます。

function mytheme_enqueue_theme_style(                     /* ① */
  $file,
  $deps = ['mytheme-style']
) {
  $path = get_parent_theme_file_path("css/{$file}.css");

  if (!file_exists($path)) {
    return;
  }

  wp_enqueue_style(
    "mytheme-{$file}",
    get_parent_theme_file_uri("css/{$file}.css"),
    $deps,
    filemtime($path)
  );
}

function mytheme_enqueue_assets() {                       /* ② */
  $fonts_url = 'https://fonts.googleapis.com/css2'        /* ③ */
    . '?family=Noto+Sans:wght@400;700'
    . '&family=Noto+Sans+JP:wght@400;700'
    . '&display=swap';

  wp_enqueue_style(
    'mytheme-google-fonts',
    $fonts_url,
    [],
    null
  );

  mytheme_enqueue_theme_style('reset', []);               /* ④ */
  mytheme_enqueue_theme_style(
    'style',
    ['mytheme-reset', 'mytheme-google-fonts']
  );

  $main_js = get_parent_theme_file_path('js/main.js');
  if (file_exists($main_js)) {                            /* ⑤ */
    wp_enqueue_script(
      'mytheme-main',
      get_parent_theme_file_uri('js/main.js'),
      [],
      filemtime($main_js),
      ['in_footer' => true]
    );
  }

  if (is_front_page()) {                                  /* ⑥ */
    mytheme_enqueue_theme_style('front-page');
  }

  $page_styles = [                                        /* ⑦ */
    'about'   => ['about'],
    'service' => ['service'],
    'contact' => ['contact', 'form'],
    'entry'   => ['contact', 'form'],
  ];
  foreach ($page_styles as $slug => $files) {
    if (!is_page($slug)) {
      continue;
    }
    foreach ($files as $file) {
      mytheme_enqueue_theme_style($file);
    }
  }

  if (is_post_type_archive('column')) {                   /* ⑧ */
    mytheme_enqueue_theme_style('column-archive');
  }

  if (is_singular(['column', 'news'])) {                  /* ⑨ */
    mytheme_enqueue_theme_style('article-single');
  }
  if (is_singular('column')) {
    mytheme_enqueue_theme_style('column-single');
    mytheme_enqueue_theme_style(
      'column-sidebar',
      ['mytheme-article-single']
    );
  }

  if (                                                    /* ⑩ */
    is_search()
    && get_query_var('post_type') === 'news'
  ) {
    mytheme_enqueue_theme_style('news-archive');
  }
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_assets');

使うときは、接頭辞（mytheme）、固定ページのスラッグ、投稿タイプ名（column・news）を、自分のサイトに合わせて書き換えてください。

Google Fontsを使わない場合は、③を削除し、④の依存からフォントのハンドル名※1を外します。

※1：ハンドル名…読み込むCSS・JSを識別するための名前。この記事では「mytheme-style」のように、接頭辞とファイル名を組み合わせて付けています。

共通化：読み込み処理を関数にまとめる

CSSが増えるたびに、同じ読み込みのコードを書くのは大変です。

ファイル名だけで読み込める関数を作る

CSSを1つ読み込む処理を、1つの関数にまとめます。ファイルがあるかを確かめ、更新日時をバージョンにして読み込む処理です。

cssフォルダ内のファイル名（拡張子なし）を渡すだけで、読み込めるようになります。この関数は、mytheme_enqueue_assets関数の外（上）に書きます。

function mytheme_enqueue_theme_style(                     /* ① */
  $file,                                                  /* ② */
  $deps = ['mytheme-style']                               /* ③ */
) {
  $path = get_parent_theme_file_path("css/{$file}.css");  /* ④ */

  if (!file_exists($path)) {                              /* ⑤ */
    return;
  }

  wp_enqueue_style(
    "mytheme-{$file}",                                    /* ⑥ */
    get_parent_theme_file_uri("css/{$file}.css"),
    $deps,
    filemtime($path)                                      /* ⑦ */
  );
}

使うときは、mytheme_enqueue_assets関数の中で次のように書きます。

mytheme_enqueue_theme_style('reset', []);   /* 依存なし */
mytheme_enqueue_theme_style('front-page');  /* style.cssの後 */

依存の初期値を共通CSSにしているため、2つ目を省略したCSSは、必ず共通CSSの後に読み込まれます。例えば、新しくfront-page.cssを追加したいときも、1行書くだけで済みます。

出し分け：必要なページでだけ読み込む

必要なページでだけ読み込むと、全ページですべてのCSSを読み込むより軽くなります。

ページの種類を判定する

表示中のページの種類は、条件分岐タグで判定します。よく使うのは次の5つです。

条件に合うページでだけCSSを読み込む

条件分岐タグで判定し、当てはまるときだけ共通関数を呼び出します。次の例では、トップページ・コラムの一覧・コラムの記事ページで、それぞれ別のCSSを読み込みます。

if (is_front_page()) {                            /* ① */
  mytheme_enqueue_theme_style('front-page');
}
if (is_post_type_archive('column')) {             /* ② */
  mytheme_enqueue_theme_style('column-archive');
}
if (is_singular('column')) {                      /* ③ */
  mytheme_enqueue_theme_style('column-single');
}

このコードも、mytheme_enqueue_assets関数の中に書きます。この後のコードも同じです。

固定ページとCSSの対応を配列で管理する

固定ページが多い場合は、スラッグとCSSの対応を配列にまとめると管理しやすくなります。ページが増えても、配列に1行足すだけで済みます。

$page_styles = [                             /* ① */
  'about'   => ['about'],
  'service' => ['service'],
  'contact' => ['contact', 'form'],          /* ② */
  'entry'   => ['contact', 'form'],
];

foreach ($page_styles as $slug => $files) {
  if (!is_page($slug)) {                     /* ③ */
    continue;
  }
  foreach ($files as $file) {
    mytheme_enqueue_theme_style($file);
  }
}

contactとentryで同じCSSを指定していますが、ハンドル名が同じなので二重には読み込まれません。

検索結果ページで投稿タイプを判定する

特定の投稿タイプに絞った検索結果ページでだけ読み込みたい場合は、is_search()とget_query_var('post_type')を組み合わせます。

if (                                            /* ① */
  is_search()
  && get_query_var('post_type') === 'news'
) {
  mytheme_enqueue_theme_style('news-archive');
}

ただし、複数の投稿タイプをまとめて検索すると、get_query_var('post_type')が配列を返すことがあるようです。その場合、この比較では一致しない可能性があります。

順番：読み込む順番を管理する

読み込む順番を決める

共通関数の2つ目に指定したハンドル名のCSSは、先に読み込まれます。この指定を依存関係と呼びます。wp_enqueue_styleでは、3つ目の引数にあたります。

次の例では、コラムとお知らせで共通の記事用CSSを読み込み、コラムだけにサイドバー用CSSを追加しています。

if (is_singular(['column', 'news'])) {            /* ① */
  mytheme_enqueue_theme_style('article-single');
}
if (is_singular('column')) {
  mytheme_enqueue_theme_style(
    'column-sidebar',
    ['mytheme-article-single']                    /* ② */
  );
}

依存先に指定したハンドル名が登録されていないと、そのCSS自体が出力されません。

共通関数は、ファイルがなければ何もせずに終了します。そのため、article-single.cssが見つからないだけで、column-sidebar.cssまで読み込まれなくなります。

WordPress 6.9.1以降では、この状態になると_doing_it_wrongの通知が出ます。WP_DEBUGを有効にしていれば確認できます。

依存関係は出力する時点で解決されるため、コードの順番が逆でも、ファイルがあれば動きます。ただ、「依存先→依存元」の順に書いておくと、読み込み順がひと目でわかります。

Google Fontsなどの外部CSSを読み込む

外部のCSSも、テーマ内のファイルと同じくwp_enqueue_styleで読み込めます。

$fonts_url = 'https://fonts.googleapis.com/css2'  /* ① */
  . '?family=Noto+Sans:wght@400;700'
  . '&family=Noto+Sans+JP:wght@400;700'
  . '&display=swap';

wp_enqueue_style(
  'mytheme-google-fonts',
  $fonts_url,
  [],
  null                                            /* ② */
);

mytheme_enqueue_theme_style(
  'style',
  ['mytheme-reset', 'mytheme-google-fonts']       /* ③ */
);

URLにfamily=が複数ある場合は、バージョンをnullにして付けないようにします。

バージョンを付けると、URL内の同じ名前の値が1つにまとまってしまうため、と言われています。WordPressの内部処理によるもので、詳しい条件は環境によって異なる可能性があります。

さいごに

まとめ

ページ別の読み込みは、「共通化→出し分け→順番の管理」の順に組むと迷わず書けます。

慣れてきたら、完成形のコードを自分のサイトに合わせて組み替えてみてください。

よくある質問

条件分岐を書いたのにCSSが読み込まれません

まず、cssフォルダに指定した名前のファイルが存在するか確認してください。共通関数は、ファイルがないと何もしません。

次に、依存先のハンドル名が登録されているか確認してください。依存先がないと、そのCSS自体が出力されません。

依存先については「読み込む順番を決める」で解説しています。

同じCSSを複数のページで指定しても大丈夫？

大丈夫です。ハンドル名が同じなら、何度指定しても読み込まれるのは1回だけです。

例は「固定ページとCSSの対応を配列で管理する」で紹介しています。

参考にした公式情報

WordPress公式 開発者向けドキュメント

CSSを読み込む関数の引数や、条件分岐タグの仕様を確認できます。

公式ページを開く

どのページも英語ですが、ブラウザの翻訳機能を使えば日本語で読めます。