受付9:00～18:00 ※土日祝除く
WordPress 特定のページだけにCSS/JSを読み込ませる方法
2025.05.212025.06.02
Web制作 システム
WordPressでサイトを作成していると、特定のページにのみCSSやJSを適用したいことがあります。静的ページであればページ毎に読み込むファイルを簡単にコントロールできますが、WordPressでheader.phpやfooter.phpに直接<link>や<script>を記述してしまうと全てのファイルに適用されてしまいます。制作者としては極力無駄なファイルは読み込ませたくないものです。 特定のページだけにCSS/JSファイルを読み込ませる方法を解説します。
目次
header.phpとfooter.phpに記述する方法
全ページに共通で読み込ませるCSS/JSについてはheader.phpやfooter.phpに記述することが多いと思います。WordPress公式ドキュメントによると、この方法は推奨されていないようですが、静的ページを作る感覚で使えますので実際には採用している制作者も多いと思います。簡単に紹介します。
原則としてCSSファイルはhead要素内に、JSファイルはhead要素内かもしくはbodyの末尾に挿入するのが一般的です。どちらに入れるべきかはJSを読み込ませたい位置によります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>サンプル</title>
<!-- CSS/JSの読み込み -->
<link href="assets/css/style.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<!-- CSS/JSの読み込み -->
</head>
<body>
<header></header>
<div></div>
<footer></footer>
<!-- JSの読み込み -->
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
<!-- JSの読み込み -->
</body>
</html>一般的なWordPressの構成ではheader.php内にheadタグ、footer.php内にbodyの閉じタグが入っていますので、それぞれに追記すれば全ページに反映されます。 下記はheadタグにsample.css/style.css、bodyタグの最後にsample.jsを読み込む例です。
header.phpの例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>サンプル</title>
<!-- CSS/JSの読み込み -->
<link href="assets/css/sample.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<!-- CSS/JSの読み込み -->
</head>
<body>
<header></header>footer.phpの例
<footer></footer>
<!-- JSの読み込み -->
<script src="assets/js/sample.js"></script>
<!-- JSの読み込み -->
</body>
</html>特定のページのみに読み込ませる方法
本題である特定のページのみに読み込ませる方法です。
固定ページでのみsample.cssを読み込ませる
header.phpに下記の記述します。前後は省略します。
<?php if ( is_page() ): ?>
<link href="assets/css/sample.css" rel="stylesheet">
<?php endif; ?>これで全ての固定ページでsample.cssが読み込まれるようになります。特定の固定ページを指定する場合はis_page()の括弧内で指定します。指定にはID、タイトル、スラッグが使用可能です。あえてダブルバイトを使う必要もありませんので、IDかスラッグを使うのが無難です。用途によって使い分けましょう。
//IDで指定 ページID:308を指定する場合
<?php if ( is_page(308) ): ?>
//IDで指定 ページタイトル:プライバシーポリシーを指定する場合
<?php if ( is_page(プライバシーポリシー) ): ?>
//IDで指定 スラッグ:privacyを指定する場合
<?php if ( is_page(privacy) ): ?>お問い合わせページでのみyubinbango.jsを読み込ませる
お問い合わせページのみに郵便番号のjsを読み込ませたい場合は下記のようになります。実務でもよくある例です。スラッグがcontactの場合です。
footer.php
<?php if ( is_page(contact) ): ?>
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
<?php endif; ?>ここではファイルの読み込みのみに限定して説明していますが、scriptタグに直接コードを書き込んでも問題ありません。
固定ページ以外の指定も可能です。home/single/archiveなどWordPressではお馴染みのページを指定できます。
//ホームぺージ
<?php if ( is_home() ): ?>
//フロントページ
<?php if ( is_front_page() ): ?>
//投稿ページ
<?php if ( is_single() ): ?>
//アーカイブ（一覧）ページ
<?php if ( is_archive() ): ?>
//カテゴリーページ
<?php if ( is_category() ): ?>
//固定ページ以外を指定 !を付与
<?php if ( !is_page() ): ?>
//複数の固定ページを指定 ID:1とスラッグ:contactの場合
<?php if ( is_page(array(1,'contact')) ): ?>WordPressの推奨は？
公式のリソースによると、そもそも<link>や<script>のタグを使っての読み込みは非推奨となっています。functions.phpからCSS/JSを読み込む方法が推奨されています。
https://developer.wordpress.org/themes/core-concepts/including-assets/
functions.phpから読み込む方法
functions.phpに記述する方法です。WordPress推奨の方法であり、phpで書くため難易度が上がる半面、下記のようなメリットがあります。結果、ファイル読み込みの重複などを防ぎやすくなります。
●一元管理が可能
function.phpのみに記述するため、他の箇所を触る必要がなくなります。読み込みファイルの増減の管理が楽になります。
●読み込みのタイミングを制御しやすい
headタグに書くのか、bodyタグの末尾に書くのか、など静的ページで起こりがちな読み込みタイミングがコントロールしやすくなります。
固定ページでのみsample.cssを読み込ませる
先の例に則って進めます。固定ページでのみsample.cssを読み込ませたい場合、function.phpへの記述は下記のようになります。
function load_sample_css_only_on_pages() {
if ( is_page() ) {
wp_enqueue_style( 'sample-css', get_template_directory_uri() . '/assets/css/sample.css' );
// 子テーマを使っている場合は下記の行を使ってください：
// wp_enqueue_style( 'sample-css', get_stylesheet_directory_uri() . '/sample.css' );
}
}
add_action( 'wp_enqueue_scripts', 'load_sample_css_only_on_pages' );
専用の関数を使用します。CSSは「wp_enqueue_style()」、JSは「wp_enqueue_script()」を使います。これらの関数は「add_action()」とセットで使用します。今回の例では「wp_enqueue_style()」で設定した内容を「add_action()」の条件で実行しています。
「add_action()」の内容を見てください。「wp_enqueue_scripts」は実行のタイミングを、「load_sample_css_only_on_pages」は実行する内容を指定しています。
「load_sample_css_only_on_pages」は任意の名称です。if文で書かれた部分が実体で、ここまで記事を読んで来ていれば「固定ページでのみsample.cssを読み込む」という内容が読めるかと思います。
アクションフックについて
「wp_enqueue_scripts」はアクションフックと呼ばれるもので、読み込みのタイミングを指定できます。アクションフックには以下のような種類があり、CSS/JSの読み込みには「wp_enqueue_scripts」が適しています。
| フック名 | 主な用途 | 実行タイミング |
| wp_enqueue_scripts | フロントエンド向けCSS/JS登録 | <head>出力前 |
| wp_footer | <footer> 直前で何かを出力したいとき | </body>直前 |
| admin_enqueue_scripts | 管理画面向け | 管理画面の読み込み時 |
| login_enqueue_scripts | ログイン画面向け | ログイン画面の読み込み時 |
URLの指定について
親テーマと子テーマでディレクトリの指定方法が変わります。コメントアウトにあるとおり、子テーマの場合は「get_template_directory_uri()」ではなく「get_stylesheet_directory_uri()」を使用します。
お問い合わせページでのみyubinbango.jsを読み込ませる
お問い合わせページのみに郵便番号のjsを読み込ませたい場合はこうなります。
function load_yubinbango_script_on_contact_page() {
if ( is_page( 'contact' ) ) {
wp_enqueue_script(
'yubinbango-js',
'https://yubinbango.github.io/yubinbango/yubinbango.js',
array(), // 依存スクリプトがあればここに指定
null, // バージョン指定（外部なら通常は null）
true // true でフッターに読み込む
);
}
}
add_action( 'wp_enqueue_scripts', 'load_yubinbango_script_on_contact_page' );
CSSの実装が理解できていれば同じ要領で理解できるかと思います。「wp_enqueue_script()」の引数で「true」を設定することで、HTMLの</body>の直前にスクリプトが読み込まれるようにしています。
読み込みのタイミングと位置について
アクションフックは読み込みのタイミングを操作できると説明しました。そうなると「wp_enqueue_scripts」ではなく「wp_footer」を使用すればよいのでは？という疑問が出てきます。アクションフックは実行の「タイミング」を指定するものであり、「wp_enqueue_script()」の引数で「true」を指定することは読み込みの「位置」を指定するものです。フロントエンドで使用するファイルについては「wp_enqueue_scripts」を使用しておけば間違いありません。
アクションフック「wp_footer」をどうしても使うなら
下記であれば同じことが再現できます。「wp_enqueue_script()」を使用せず、if文とechoで直に記述しています。ですが一般にはwp_enqueue_scripts + trueの組み合わせが良いかと思います。
function print_yubinbango_script_in_footer() {
if ( is_page( 'contact' ) ) {
echo '<script src="https://yubinbango.github.io/yubinbango/yubinbango.js"></script>';
}
}
add_action( 'wp_footer', 'print_yubinbango_script_in_footer' );
お問い合わせCONTACT
株式会社エー・エム・ティーは
印刷物からホームページ制作・更新運用管理までトータルサポート。
企業様の課題解決や企業価値向上のお手伝いをいたします。