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

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ファイルを読み込むことができます。

1. 管理画面の「外観」→「カスタマイズ」→「カスタムフィールド」から、新しいカスタムフィールドを作成します。
2. カスタムフィールドの「タイプ」を「テキスト」に設定します。
3. カスタムフィールドの名前を「includeCSS」または「includeJS」にします。
4. カスタムフィールドの値に、読み込むファイル名を指定します。
5. カスタムフィールドを作成したページを編集します。
6. カスタムフィールドの値を、読み込むファイル名に変更します。

この方法では、ページのカスタムフィールドに読み込むファイル名を指定することで、特定のページでのみCSSやJSファイルを読み込むことができます。

どちらの方法を使うかは？

どちらの方法を使うかは、サイトの状況に合わせて選択してください。

functions.phpで条件分岐して読み込む方法は、特定のページでのみCSSやJSファイルを読み込む必要がある場合に適しています。

ページのカスタムフィールドで読み込むファイル名を指定する方法は、ページごとに読み込むCSSやJSファイルを変更する必要がある場合に適しています。

よくある質問（FAQ）

まとめ

WordPressで特定のページでのみCSSやJSファイルを読み込む方法は、2つあります。

• functions.phpで条件分岐して読み込む方法
• ページのカスタムフィールドで読み込むファイル名を指定

どちらの方法を使うかは、サイトの状況に合わせて選択してください。