wp_enqueue_scripts でCSS・JSを正しく読み込む方法【WordPress】

こんにちは！コーダーのゆうしです。

WordPressテーマにCSSやJavaScriptを読み込むとき、HTMLに直接 <link> や <script> タグを書いていませんか？それでも動きますが、WordPressでは wp_enqueue_scripts を使って読み込むのが正しいやり方です。この方法を使うことで依存関係の管理や読み込み順の制御が簡単になり、プラグインとの競合も防ぎやすくなります。

wp_enqueue_scriptsとは？
基本的な書き方
各パラメータの解説
1. wp_enqueue_style()
2. wp_enqueue_script()
テーマフォルダ内のファイルを読み込む
特定のページだけ読み込む
躓きやすいポイント
まとめ

wp_enqueue_scriptsとは？

wp_enqueue_scripts はWordPressがCSSやJavaScriptを読み込むためのフックです。functions.php にこのフックを使った関数を登録することで、テーマのスタイルやスクリプトを安全に読み込めます。

基本的な書き方

function my_theme_scripts() {
  // CSSを読み込む
  wp_enqueue_style(
    'my-style',                          // ハンドル名（任意のユニークな名前）
    get_stylesheet_uri(),                // CSSのURL
    [],                                  // 依存するスタイルのハンドル名
    '1.0.0'                              // バージョン番号
  );

  // JSを読み込む
  wp_enqueue_script(
    'my-script',                         // ハンドル名
    get_template_directory_uri() . '/js/main.js', // JSのURL
    ['jquery'],                          // 依存するスクリプト（jQueryに依存）
    '1.0.0',                             // バージョン番号
    true                                 // trueで</body>直前に読み込む
  );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

各パラメータの解説

wp_enqueue_style()

パラメータ	内容
ハンドル名	スタイルを識別するユニークな名前。他と被らない名前をつける
URL	読み込むCSSファイルのURL
依存関係	このスタイルより先に読み込む必要があるスタイルのハンドル名を配列で指定
バージョン	キャッシュ対策に使われる。更新時に変えるとブラウザキャッシュを回避できる

wp_enqueue_script()

パラメータ	内容
ハンドル名	スクリプトを識別するユニークな名前
URL	読み込むJSファイルのURL
依存関係	先に読み込むスクリプトのハンドル名を配列で指定。`['jquery']` でjQuery依存を指定できる
バージョン	キャッシュ対策用のバージョン番号
フッター読み込み	`true` で `</body>` 直前に読み込む。`false` または省略で `<head>` 内に読み込む

テーマフォルダ内のファイルを読み込む

テーマフォルダ内のCSSやJSを読み込む場合は get_template_directory_uri() を使います。

// テーマフォルダ内のCSSを読み込む
wp_enqueue_style(
  'my-style',
  get_template_directory_uri() . '/css/style.css',
  [],
  '1.0.0'
);

// テーマフォルダ内のJSを読み込む
wp_enqueue_script(
  'my-script',
  get_template_directory_uri() . '/js/main.js',
  [],
  '1.0.0',
  true
);

子テーマを使っている場合は get_stylesheet_directory_uri() を使うと子テーマのフォルダを参照できます。

特定のページだけ読み込む

全ページに読み込む必要がないCSSやJSは条件分岐で制御するとページの表示速度改善につながります。

function my_theme_scripts() {
  // トップページのみ読み込む
  if ( is_front_page() ) {
    wp_enqueue_style(
      'top-style',
      get_template_directory_uri() . '/css/top.css',
      [],
      '1.0.0'
    );
  }

  // 投稿ページのみ読み込む
  if ( is_single() ) {
    wp_enqueue_script(
      'single-script',
      get_template_directory_uri() . '/js/single.js',
      [],
      '1.0.0',
      true
    );
  }
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

躓きやすいポイント

CSSやJSが反映されない

ブラウザのキャッシュが残っている場合があります。バージョン番号を変更するか、開発中は filemtime() を使って自動でバージョンを更新する方法も便利です。

wp_enqueue_style(
  'my-style',
  get_template_directory_uri() . '/css/style.css',
  [],
  filemtime( get_template_directory() . '/css/style.css' ) // ファイルの更新日時をバージョンに使う
);