WordPressサイトにおいて、特定のページだけにCSSやJS（JavaScript）ファイルを読み込ませることが必要だったり、不要な読み込みをしたくない場合があります。
例えば、メールフォームプログラムをWordPressサイトに組み込む場合、メールフォーム用のCSSやJSファイルはメールフォームが設置されているページでのみ読み込めれば動作します。他のページで読み込むと無駄な処理が増えてしまい、ページの表示速度にも影響します。
このページでは、CSSやJSファイルを特定のページでのみ読み込ませる方法について説明します。
はじめに確認する事
基本的にCSSやJSファイルの読み込みは、htmlのhead要素内に記述する事が一般的です。Wordpressのテーマにはheader.phpというテンプレートファイルがあります。header.php内にhead要素を記述する事ができますので、こちらのファイルに特定のページでのみCSSやJSファイルを読み込むように編集します。
▼head内に記述します
<head>
ここにCSSやJSの読み込みコードを記述する
</head>
固定ページや投稿ページでのみ読み込ませる
読み込ませたいCSSファイルがsample.cssというファイル名だった場合、HTMLのhead要素部には以下のようなコードを記述する必要があります。WordPressサイトではheader.php内に記述すれば、すべてのページで上記コードが出力されることになり、すべてのページでsample.cssが読み込まれます。
<head>
<link rel="stylesheet" href="sample.css" />
</head>
このsample.cssを固定ページでのみ読み込ませたい場合は以下のコードをheader.php内に記述します。この記述で全ての固定ページにsample.cssを読み込ませることになります。
▼固定ページのみ読み込ませる記述
<head>
<?php if ( is_page() ): ?>
<link rel="stylesheet" href="sample.css" />
<?php endif; ?>
</head>
固定ページではなく、投稿ページのみ読み込ませたい場合は「is_page」を「is_single」に変更することで、全ての投稿ページにのみsample.cssを読み込ませることができます。
▼投稿ページのみ読み込ませる記述
<head>
<?php if ( is_single() ): ?>
<link rel="stylesheet" href="sample.css" />
<?php endif; ?>
</head>
特定の固定ページでのみ読み込ませる
全ての固定ページではなくて、特定の固定ページでのみ読み込ませたい場合はスラッグ名かページIDを指定します。例えばスラッグ名が「contact」のページにのみ読み込ませたい場合は以下のような記述になります。
▼スラッグ名が「contact」の固定ページのみ読み込ませる記述
<head>
<?php if ( is_page( 'contact' ) ): ?>
<link rel="stylesheet" href="sample.css" />
<?php endif; ?>
</head>
ページIDが「39」のページにのみ読み込ませたい場合は以下のような記述になります。
▼ページIDが「39」の固定ページのみ読み込ませる記述
<head>
<?php if ( is_page( '39' ) ): ?>
<link rel="stylesheet" href="sample.css" />
<?php endif; ?>
</head>
特定の固定ページではなく、投稿ページのみ読み込ませたい場合は「is_page」を「is_single」に変更することで同じように読み込ますことができます。
複数の固定ページで読み込ませる
例としてスラッグ名が「contact」と「aboutus」の複数の固定ページに読み込ませたい場合は以下のような記述になります。
▼スラッグ名が「contact」と「aboutus」の固定ページのみ読み込ませる記述
<head>
<?php if ( is_page(array( 'contact','aboutus') ) ): ?>
<link rel="stylesheet" href="sample.css" />
<?php endif; ?>
</head>
まとめ
WordPressの条件分岐タグの記述方法についていかがでしたでしょうか？条件分岐タグはこの他にも沢山ありますが、まずは今回ご紹介したよく使うタグを実装してみて使い方を覚えていくのが良いでしょう。