wp_enqueue_style / wp_enqueue_script の基本をやさしく解説

WordPressでテーマ開発やカスタマイズを行う際、CSS や JavaScript を正しい手順で読み込むことはとても重要です。特に wp_enqueue_style() と wp_enqueue_script() は、読み込み順の管理、依存関係の解決、重複読み込みの防止など、多くのメリットがあります。この記事では、この2つの関数の基本と、安全に使うためのポイントをまとめます。

内部リンク：スタイルやスクリプトの読み込み場所を理解したい場合は、
[WordPressのis_page()とは？使い方と具体例を解説] などのテンプレート関連記事も参考になります。

wp_enqueue_style() の基本

wp_enqueue_style() は CSS ファイルを読み込むための関数です。主に functions.php 内で使用し、以下のように記述します。

function my_theme_styles() {
    wp_enqueue_style(
        'main-style',                         // ハンドル名（識別子）
        get_template_directory_uri() . '/style.css', // 読み込みURL
        array(),                               // 依存関係
        '1.0.0',                                // バージョン
        'all'                                   // メディア属性
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_styles' );

主な引数の意味

内部リンク：CSS の設計を見直したい場合は、
[強力なパスワード設定のポイント] などセキュリティ関連の記事と合わせて基本を押さえておくと管理がしやすくなります。

wp_enqueue_script() の基本

wp_enqueue_script() は JavaScript を読み込む際に使用します。

function my_theme_scripts() {
    wp_enqueue_script(
        'main-script',                                      // ハンドル名
        get_template_directory_uri() . '/js/main.js',       // URL
        array( 'jquery' ),                                  // 依存関係
        '1.0.0',                                            // バージョン
        true                                                // フッターで読み込むか
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

フッター読み込み（true）のメリット

• ページ表示速度の向上
• DOM構築後にスクリプトが実行されるため安全
• レンダリングブロックを避けられる

内部リンク：JavaScript の読み込みタイミングを理解したい場合は、
[is_single()とis_page()の違いをやさしく解説] など条件分岐の記事と合わせると、表示制御がより分かりやすくなります。

CSS と JS をまとめて読み込む書き方

複数のファイルを読み込む場合でも、1つの関数の中で整理すると見通しがよくなります。

function theme_assets() {
    // CSS
    wp_enqueue_style( 'reset-style', get_template_directory_uri() . '/css/reset.css', array(), '1.0.0' );
    wp_enqueue_style( 'main-style', get_template_directory_uri() . '/css/style.css', array('reset-style'), '1.0.1' );

    // JS
    wp_enqueue_script( 'swiper', 'https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js', array(), '10.0', true );
    wp_enqueue_script( 'theme-script', get_template_directory_uri() . '/js/theme.js', array('swiper'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_assets' );

子テーマの場合の注意点

子テーマでは次の関数を使います。

• get_stylesheet_directory_uri()（子テーマ用）
• get_template_directory_uri()（親テーマ用）

内部リンク：子テーマの構造について復習したい場合は、
[WordPressの子テーマの作り方と基本構造【初心者向け】]
が参考になります。

jQuery の読み込みについて

WordPress には jQuery が同梱されています。依存する場合は次のように書くだけで安全にロードされます。

wp_enqueue_script( 'my-script', get_template_directory_uri() . '/script.js', array('jquery'), '1.0.0', true );

CDN を使う場合のポイント

CDN を使用すると高速に読み込めますが、以下にも配慮します。

• バージョン管理ができる URL を使う
• 公式 CDN や信頼性のあるプロバイダを選ぶ
• ローカルファイルのフォールバックを準備することも検討する

読み込む場所（フック）の基本

通常は以下のフックで読み込みます。

内部リンク：管理画面の制御や権限管理を知りたい場合は、
[current_user_can()の使い方と権限チェックの基本]
も合わせて読むと理解が深まります。

よくある間違いと注意点

・header.php や footer.php に直接 <link> や <script> を書く

→ 依存関係が管理できず不具合の原因になります。

・ハンドル名が重複して上書きされる

→ 識別しやすい命名規則を採用するのが安全です。

・子テーマで親テーマの読み込みタイミングが不適切

→ 優先順位を管理することで解消できます。

まとめ

wp_enqueue_style() と wp_enqueue_script() は、WordPress で安全に CSS・JavaScript を読み込むための基本的な関数です。依存関係、バージョン、読み込み場所、フックなどを適切に設定することで、テーマ全体の管理がしやすくなり、パフォーマンスや保守性も向上します。

テーマカスタマイズの基礎を固めたい場合は、
[WordPressテーマカスタマイズの基本と安全な作業手順]
もあわせてチェックすると理解がより深まります。