WordPressで特定のページにのみcssを適用する方法

WordPressで指定したページにのみcssを適用する方法について。方法は大きく２つ。

1. functions.phpで設定する
2. 共通のヘッダーで設定する

どちらも条件分岐を使って、指定したページのみで指定したスタイルシートを読み込むようにする。

functions.phpで設定する

例えば、front-page.phpにfront-style.cssを適用する場合は以下のようになる。

スタイルシートの作成

テンプレートのディレクトリ配下にスタイルシートを作成する。

html > wp-content > themes > テーマ名 > front-style.css

functions.phpの編集

functions.phpに以下コードを追記する。

function addtional_styles() {
  if( is_front_page() ){
    wp_enqueue_style( 'front-css', get_template_directory_uri() . '/front-style.css' );
  }
}
add_action( 'wp_enqueue_scripts', 'additional_styles' );

(1) wp_enqueue_style(‘スタイル名’, テンプレートのURI)
wp_enqueue_styleは指定したスタイルシートに任意の名前（スタイル名）をつける関数。

登録できるスタイル名は重複できないので、プラグインなどで既に使われている名前を使わないように注意が必要。

関数の中で複数のwp_enqueue_styleを設置することが可能。上から順に読み込まれる。

(2) get_template_directory_uri()
現在のテンプレートのURIを表示する。末尾に「/」はつかない。PHPなので、「.」を使えば文字列や変数と連結できる。

▼呼び出し結果の例（get_template_directory_uri()単体）

https://ドメイン/wp-content/themes/my-theme

(3) add_action( ‘wp_enqueue_scripts’, ‘関数名’ );
add_action使って、wp_enqueue_scriptsフックのタイミングで、指定したスタイルシートをheadタグ内で読み込む。

(4) is_front_page()
フロントページの場合にtrueを返す。他にもページを判断する関数には、is_page(‘フラッグ名 or ID番号’) などが使える。

条件分岐タグ – WordPress Codex 日本語版

読み込み結果

<link rel="stylesheet" id="front-css-css" href="http://ドメイン名/wp-content/themes/my-theme/front-style.css?ver=5.7.1" type="text/css" media="all">

以上で完了。

header.phpで読み込む場合

条件分岐を使ってheadタグ内で読み込むことも可能。ただしWPの推奨はfunctions.phpを使う方法。

以下をheader.phpのheadタグ内に追記する。

    <?php if ( is_front_page() ): ?>
      <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/front-style.css">
    <?php endif; ?>

以上。