WordPressで特定のページでのみCSSやJSファイルの読み込みをする方法


WordPressサイトで特定のページでのみCSSやJS(JavaScript)ファイルの読み込みをさせたい場合があります。

具体的な例として、当サイトで配布しているメールフォームのプログラムをWordPressサイトに組み込む場合、そのCSSやJSファイルはメールフォームが設置されているページでのみ読み込むことができれば充分です。

つまり、それ以外のページで読み込んでも意味がないですし、そのファイル容量の分だけページの表示速度は遅くなってしまいます。

というように、CSSやJSファイルを特定のページでのみ読み込ませる方法をこのページでは解説します。

CSSやJSファイルの読み込みコードはheader.phpまたはfooter.phpで行う場合がほとんどです

まず基本的な知識として、CSSファイルの読み込みはHTMLのhead要素内に記述するのが普通です。
それに対しJSファイルの読み込みは、head要素内またはbody要素内の最下部あたりに記述されているのが一般的です。

<html>
<head>

ここにCSSやJSの読み込みコード

</head>
<body>


ここにJSの読み込みコード
</body>
</html>

たいていのWordPressテーマの場合、HTMLのhead要素部はheader.phpというテンプレートファイルで管理され、HTMLのbody要素最下部はfooter.phpというテンプレートファイルで管理されるようになっています。(特殊な構成のテーマの場合は除く)

ですので、その部分を編集するにはそれらのファイルを編集することになります。

固定ページや投稿ページでのみ読み込ませる例

例えば、読み込ませたいCSSファイルがsample.cssというファイル名だった場合、HTMLのhead要素部には以下のようなコードを記述する必要があります。

<link rel="stylesheet" type="text/css" href="sample.css" />

WordPressサイトの場合は上記コードをheader.phpの中に記述すれば、すべてのページで上記コードが出力されることとなり、すべてのページでsample.cssが読み込まれることとなります。

もしこれを固定ページでのみ読み込ませたいのであれば、以下のように記述すればOKです。

<?php if ( is_page() ): ?>
<link rel="stylesheet" type="text/css" href="sample.css" />
<?php endif; ?>

固定ページではなく投稿ページでのみ読み込ませたいなら、以下のように記述します。(is_pageis_singleに変更)

<?php if ( is_single() ): ?>
<link rel="stylesheet" type="text/css" href="sample.css" />
<?php endif; ?>

特定の固定ページでのみ読み込ませたい場合

上で解説した通り、固定ページでのみ読み込ませたい場合は以下のようなコードになります。

<?php if ( is_page() ): ?>
ここに固定ページでのみ出力したいHTMLやPHPのコードなど。
<?php endif; ?>

ではもし仮に、固定ページの中でも特に「お問い合わせページ」でのみ読み込ませたい場合、どうするか?
その場合は以下のように記述すればOKです。

<?php if ( is_page( 'ここにその固定ページのスラッグ名' ) ): ?>
ここに固定ページでのみ出力したいHTMLやPHPのコードなど。
<?php endif; ?>

WordPressの固定ページや投稿ページには「スラッグ」という名前を付けておくことができます。
「スラッグ」の設定方法を以下から解説していきます。

スラッグ名の設定方法

WordPres管理画面での固定ページや投稿ページの編集の際、ページ右上に「表示オプション」というタブのようなものがあります。
表示オプション

「表示オプション」のタブをクリックすると以下のように開きますので、その中にある「スラッグ」にチェックを入れます。
表示オプションの中身

すると、そのページ内の下のほうにスラッグの入力欄が現れます。
スラッグの入力欄

上の画像ではすでに「inquiry」というスラッグ名が入力されております。
ですから、この固定ページでのみ読み込ませるコードは以下のようになります。

<?php if ( is_page( 'inquiry' ) ): ?>
ここにスラッグ名が「inquiry」の固定ページでのみ出力したいHTMLやPHPのコードなど。
<?php endif; ?>

もし固定ページではなく投稿ページでスラッグ名を設定した場合は、コードは以下のようになるでしょう。
(is_pageis_singleに変更)

<?php if ( is_single( 'inquiry' ) ): ?>
ここにスラッグ名が「inquiry」の投稿ページでのみ出力したいHTMLやPHPのコードなど。
<?php endif; ?>

上記のような分岐コードはheader.phpやfooter.phpだけでなく、WordPressのすべてのテーマテンプレートファイルで使うことができるので、

・投稿ページでのみ特定のJSファイルを読み込む。
・固定ページでのみ特定の画像を表示。

など、色々な使い方をすることができます。
興味のある方はこのページで解説したis_page関数is_single関数だけでなく、is_404関数is_front_page関数なども調べてみると良いでしょう。
(このようなものを「WordPress関数」と呼びます)

【参考ページ】
is_page関数 (固定ページであるかどうかを判定できます)
is_single関数 (投稿ページであるかどうかを判定できます)
is_404関数 (404ページであるかどうかを判定できます)
is_front_page関数 (フロントページであるかどうかを判定できます)

補足のため追記:スラッグ以外での指定方法について

このページの解説では「スラッグ名」を使用して特定のページを指定しましたが、そこに「ページID」を記入する方法もあります。

<?php if ( is_page( ここにページID ) ): ?>
ここに指定したページIDの固定ページでのみ出力したいHTMLやPHPのコードなど。
<?php endif; ?>

ページIDを知るには、WordPressの管理画面でのURLを確認すれば知ることができます。
「post=●●」となっている部分がそのページのIDを示しています。
固定ページのID
この例ですとページIDは50になりますので、テンプレートファイル内に書くコードは以下のようになります。

<?php if ( is_page( 50 ) ): ?>
ここに指定したページIDが50の固定ページでのみ出力したいHTMLやPHPのコードなど。
<?php endif; ?>

IDによる指定は投稿ページでももちろん使用可能です。
投稿ページを指定する場合のコードは以下のようになります。(is_pageis_singleに変更)

<?php if ( is_single( 50 ) ): ?>
ここに指定したページIDが50の投稿ページでのみ出力したいHTMLやPHPのコードなど。
<?php endif; ?>

スラッグ名で指定するか、またはページIDで指定するかは個人の好みによる面が大きいのですが、私個人としてはスラッグ名を使うほうがおすすめです。
なぜかと言うと、後からテンプレートファイル内のコードを見た際に、どのページを指定しているかが判別しやすいからです。

サポートBBS

サポートBBS

サイト内を検索
アップデート情報

この「アップデート情報」欄はコンテンツ・メーカーを使用して更新・表示しています。

サイト運用事例
提供サポートなど
メールフォーム

ダウンロード一覧へ

カレンダー

これはビジネスカレンダーのサイト組み込みサンプルです。
サンプル管理画面から定休日の変更操作ができます。
ご自由にお試しください。(ユーザ名はtani、パスワードは0000です)

ダウンロード一覧へ

スレッド式BBS

ダウンロード一覧へ

レスポンシブBBS

ダウンロード一覧へ

新着情報欄の更新

ダウンロード一覧へ

その他おすすめ

ダウンロード一覧へ

Web制作のブログ

ブログ記事一覧へ

カテゴリ別