WordPressでCSSやJSファイルを読み込むには、通常、テーマのfunctions.phpファイルにwp_enqueue_style()またはwp_enqueue_script()関数を記述します。これらの関数は、指定したCSSやJSファイルをページに読み込みます。
しかし、すべてのページで同じCSSやJSファイルを読み込むと、読み込み速度が遅くなったり、不要なファイルが読み込まれたりすることがあります。そこで、特定のページでのみCSSやJSファイルを読み込む方法を紹介します。
functions.phpで条件分岐して読み込む
functions.phpに以下のコードを追加することで、特定のページでのみCSSやJSファイルを読み込むことができます。
// 特定のページでのみCSSファイルを読み込む
function my_enqueue_style() {
if (is_page('指定したページのスラッグ')) {
wp_enqueue_style('my-style', get_template_directory_uri() . '/css/my-style.css');
}
}
add_action('wp_enqueue_scripts', 'my_enqueue_style');
// 特定のページでのみJSファイルを読み込む
function my_enqueue_script() {
if (is_page('指定したページのスラッグ')) {
wp_enqueue_script('my-script', get_template_directory_uri() . '/js/my-script.js');
}
}
add_action('wp_enqueue_scripts', 'my_enqueue_script');このコードでは、is_page()関数を使って、指定したページのスラッグと現在のページのスラッグが一致する場合にのみ、CSSやJSファイルを読み込むようにしています。
ページのカスタムフィールドで読み込むファイル名を指定
ページのカスタムフィールドに読み込むファイル名を指定することで、特定のページでのみCSSやJSファイルを読み込むことができます。
- 管理画面の「外観」→「カスタマイズ」→「カスタムフィールド」から、新しいカスタムフィールドを作成します。
- カスタムフィールドの「タイプ」を「テキスト」に設定します。
- カスタムフィールドの名前を「includeCSS」または「includeJS」にします。
- カスタムフィールドの値に、読み込むファイル名を指定します。
- カスタムフィールドを作成したページを編集します。
- カスタムフィールドの値を、読み込むファイル名に変更します。
この方法では、ページのカスタムフィールドに読み込むファイル名を指定することで、特定のページでのみCSSやJSファイルを読み込むことができます。
どちらの方法を使うかは？
どちらの方法を使うかは、サイトの状況に合わせて選択してください。
functions.phpで条件分岐して読み込む方法は、特定のページでのみCSSやJSファイルを読み込む必要がある場合に適しています。
ページのカスタムフィールドで読み込むファイル名を指定する方法は、ページごとに読み込むCSSやJSファイルを変更する必要がある場合に適しています。
まとめ
WordPressで特定のページでのみCSSやJSファイルを読み込む方法は、2つあります。
- functions.phpで条件分岐して読み込む方法
- ページのカスタムフィールドで読み込むファイル名を指定
どちらの方法を使うかは、サイトの状況に合わせて選択してください。
