【WordPress条件分岐タグ】ページごとに読み込むCSS・JSファイルを切り替える方法

Webサイトを構築する際、トップページと下層ページで読み込ませるCSSやJSを分けたい、というようなケースがあります。

WordPressでは条件分岐タグを利用することで、ページごとに読み込ませるファイルを切り替えることができます。

今回はCSS/JSを切り替える際によくある条件分岐パターンについてまとめてみました。

WordPressでページごとに読み込むCSS・JSファイルを切り替える方法

前提として、今回の記述例ではWordPressの設定が以下のようになっています。

ダッシュボード「設定→表示設定→ホームページの表示」で「固定ページ」を選択
カスタム投稿タイプ「custom」を作成し、「custom」のカテゴリー管理のためカスタムタクソノミー「custom_tax」を作成・使用

	<!-- ここからCSSの読み込み -->
	<!-- 条件分岐の前に全ページ共有のCSSを読み込んでおく -->
	<link href="<?php echo get_template_directory_uri(); ?>/assets/css/common.css" rel="stylesheet" />
<?php if( is_front_page() && is_page() ): //フロントページ ?>
	<link href="<?php echo get_template_directory_uri(); ?>/assets/css/front.css" rel="stylesheet" />
<?php elseif( is_page('about') ): //スラッグが「about」の固定ページ ?>
	<link href="<?php echo get_template_directory_uri(); ?>/assets/css/about.css" rel="stylesheet" />
<?php elseif( is_page('contact') ): //スラッグが「contact」の固定ページ ?>
	<link href="<?php echo get_template_directory_uri(); ?>/assets/css/contact.css" rel="stylesheet" />
<?php elseif( is_post_type_archive('custom') || is_tax('custom_tax') ): //カスタム投稿タイプ「custom」のアーカイブページ＆カスタムタクソノミー「custom_tax」ページ ?>
	<link href="<?php echo get_template_directory_uri(); ?>/assets/css/custom.css" rel="stylesheet" />
<?php elseif( is_singular('custom') ): //カスタム投稿タイプ「custom」のシングルページ ?>
	<link href="<?php echo get_template_directory_uri(); ?>/assets/css/custom-single.css" rel="stylesheet" />
<?php elseif( is_home() || is_post_type_archive('post') || is_category() || is_tag() || is_date() || is_search() ): //投稿アーカイブページ ?>
	<link href="<?php echo get_template_directory_uri(); ?>/assets/css/archive.css" rel="stylesheet" />
<?php elseif( is_singular('post') || is_404() ): //投稿シングルページ＆404ページ ?>
	<link href="<?php echo get_template_directory_uri(); ?>/assets/css/single.css" rel="stylesheet" />
<?php endif; ?>

	<!-- ここからJSの読み込み -->
	<!-- 条件分岐の前に全ページ共有のJSを読み込んでおく -->
	<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
	<script defer type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.5.2/jquery-migrate.min.js"></script>
	<script src="<?php echo get_template_directory_uri(); ?>/assets/js/common.js"></script>
	
<?php if( is_front_page() && is_page() ): //フロントページ ?>
	<script src="<?php echo get_template_directory_uri(); ?>/assets/js/front.js"></script>
<?php elseif( is_page('about') ): //スラッグが「about」の固定ページ ?>
	<script src="<?php echo get_template_directory_uri(); ?>/assets/js/about.js"></script>
<?php elseif( is_page('contact') ): //スラッグが「contact」の固定ページ ?>
	<script src="<?php echo get_template_directory_uri(); ?>/assets/js/contact.js"></script>
<?php elseif( is_post_type_archive('custom') || is_tax('custom_tax') ): //カスタム投稿タイプ「custom」のアーカイブページ＆カスタムタクソノミー「custom_tax」ページ ?>
	<script src="<?php echo get_template_directory_uri(); ?>/assets/js/custom.js"></script>
<?php elseif( is_singular('custom') ): //カスタム投稿タイプ「custom」のシングルページ ?>
	<script src="<?php echo get_template_directory_uri(); ?>/assets/js/custom-single.js"></script>
<?php elseif( is_home() || is_post_type_archive('post') || is_category() || is_tag() || is_date() || is_search() ): //投稿アーカイブページ ?>
	<script src="<?php echo get_template_directory_uri(); ?>/assets/js/archive.js"></script>
<?php elseif( is_singular('post') || is_404() ): //投稿シングルページ＆404ページ ?>
	<script src="<?php echo get_template_directory_uri(); ?>/assets/js/single.js"></script>
<?php endif; ?>

ダッシュボード「設定→表示設定→ホームページの表示」で「最新の投稿」を選択した場合は、4・5行目は以下のように記述しても大丈夫です。

<?php if( is_front_page() || is_home() ): //フロントページまたはブログ投稿インデックスページ ?>
	<link href="<?php echo get_template_directory_uri(); ?>/assets/css/front.css" rel="stylesheet" />

WordPressデフォルトのjQueryを利用する場合の注意点

上記の記述例ではWordPressデフォルトのjQueryは使用せず、別途CDNで読み込んでいます。

デフォルトjQueryを使用する場合は、上記の記述例よりも先にwp_head()関数を記述するようにしてください。

<?php wp_head(); //先にデフォルトのjQueryとプラグイン用CSSを読み込んでおく ?>

	<!-- ここからCSSの読み込み -->
	<!-- 条件分岐の前に全ページ共有のCSSを読み込んでおく -->
	<link href="<?php echo get_template_directory_uri(); ?>/assets/css/common.css" rel="stylesheet" />
<?php if( is_front_page() && is_page() ): //フロントページ ?>
	<link href="<?php echo get_template_directory_uri(); ?>/assets/css/front.css" rel="stylesheet" />
<?php elseif( is_page('about') ): //スラッグが「about」の固定ページ ?>
	<link href="<?php echo get_template_directory_uri(); ?>/assets/css/about.css" rel="stylesheet" />

...

	<!-- ここからJSの読み込み -->
	<!-- 条件分岐の前に全ページ共有のJSを読み込んでおく -->
	<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
	<script defer type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.5.2/jquery-migrate.min.js"></script>
	<script src="<?php echo get_template_directory_uri(); ?>/assets/js/common.js"></script>
	
<?php if( is_front_page() && is_page() ): //フロントページ ?>
	<script src="<?php echo get_template_directory_uri(); ?>/assets/js/front.js"></script>
<?php elseif( is_page('about') ): //スラッグが「about」の固定ページ ?>
	<script src="<?php echo get_template_directory_uri(); ?>/assets/js/about.js"></script>

...

wp_head()関数とは？: WordPressサイトで、header要素内で使用するタグを出力するものです。
WordPress本体に同梱されているjQueryのほか、各種プラグインで使用するCSS/JSもこの関数で読み込まれます。
そのため自作のJSでjQueryに依存したソースコードがある場合、wp_head()関数より後で読み込まないと動作しません。

固定ページスラッグを取得して自動でCSS/JSを読み込ませる方法

上記の記述例では、固定ページのスラッグを個別に指定してCSS/JSを読み込んでいますが、固定ページの件数が増えてくると個別に分岐させるのが手間になってきます。

その場合は固定ページのスラッグを取得して、自動でCSS/JSが読み込まれるようにしておくと便利です。

<?php if( is_page() ): //固定ページのスラッグ取得 ?>
	<?php $page = get_post( get_the_ID() ); $slug = $page->post_name; ?>
<?php endif; ?>

<link href="<?php echo get_template_directory_uri(); ?>/assets/css/<?php echo $slug; ?>.css" rel="stylesheet" />
<script src="<?php echo get_template_directory_uri(); ?>/assets/js/<?php echo $slug; ?>.js"></script>