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() ): ?>
ここに固定ページでのみ出力したいコード
<?php endif; ?>

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

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

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

スラッグ名の設定方法

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

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

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

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

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

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

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

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

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

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

サポートBBS

サポートBBS

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

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

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

ダウンロード一覧へ

カレンダー

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

ダウンロード一覧へ

新着情報欄の更新

ダウンロード一覧へ

BBS

ダウンロード一覧へ

その他おすすめ

ダウンロード一覧へ

Web制作のブログ

ブログ記事一覧へ

カテゴリ別
制作者の詳細
  • 谷元博のブログ
  • Google+