フロントページが固定ページのとき、専用のCSSを読み込む方法

はじめに

固定ページでフロントページを作成した際、そのデザインに合わせてスキンを一部変更したいと感じることがあるかと思います。

フロントページだけであれば、固定ページ内に直接CSSを埋め込む方法でも対応可能です。

しかし、他のページの見出しやレイアウトも統一して変更したい場合には、子テーマのCSSに変更箇所を定義する必要があります。
また、複数のデザインを固定ページで作成して都度変更する場合、子テーマのCSSを更新する手間が発生します。

そこで、固定ページ専用のCSSを別途読み込ませます。

この記事では、この方法について説明します。

完成イメージ

• cocoon-child-master
  • page-css
    • page-ID.css
    • :
  • style.css

page-cssフォルダ下に、固定ページに対応したCSSを複数格納します。
外観→カスタマイズ→ホームページ設定→ホームページの表示「固定ページ」で、例えば固定ページID=123を設定します。
このとき、page-123.cssが追加されます。

結果として、CSSは表1に示す順で適用されます。

実装手順

以下のコードをfunctions.phpに追加します。

add_action('wp_enqueue_scripts', function () {
  $pageID = get_option('page_on_front');
  if (!$pageID) {
    return;
  }

  $css_path = '/front-css/front-' . $pageID . '.css';
  $css_file = get_stylesheet_directory() . $css_path;
  if (!file_exists($css_file)) {
    return;
  }

  wp_enqueue_style('my-page-css', get_stylesheet_directory_uri() . $css_path);
}, 999);

さいごに

今回紹介した方法を使えば、固定ページのフロントページ専用にCSSを簡単に管理できるようになります。
子テーマのCSSを変更する手間を省き、特定の固定ページに合わせたデザインを柔軟に適用できるのが大きなポイントです。