WordPressでcssとjQueryを使用する際には、適切な方法でスクリプトを読み込むことが重要です。
本記事では、wp_enqueue_scriptとwp_enqueue_styleを使ってjQueryを正しく読み込む方法を解説します。
依存関係の設定やフッター・ヘッダーでの使い分け、バージョン管理のコツなど、具体的なコード例を交えながらわかりやすく説明します。
- WordPressでjQueryを読み込む際の基本的な方法
- wp_enqueue_scriptの書き方と各引数の意味
- 依存関係の指定方法と注意点
- フッター・ヘッダーでのスクリプト読み込みの使い分け
- バージョン管理の設定方法
wp_enqueue_script/wp_enqueue_styleの使い方。
まず、基本的な記述から記載していきます。
詳しいパラメータの解説や設定方法などは、後述します。
CSSの読み込み方法。
cssの読み込みには、「wp_enqueue_style」を使用します。
wp_enqueue_style( //パラーメータを記載。 );記載した例が、下記になります。
function my_theme_enqueue_styles() {
wp_enqueue_style(
'main-style', // スタイルシートのハンドル名
get_template_directory_uri() . '/css/style.css', // スタイルシートのURL
array(), // 依存関係（他のスタイルシートが必要なら指定）
'1.0.0', // バージョン
'all' // メディアタイプ（例: 'all', 'screen', 'print' など）
);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');以下、各パラメータの説明をしていきます！
各パラメータの説明
| パラメータ等 | 備考 |
| my_theme_enqueue_styles | 任意の関数名を指定します。add_action()で指定しますので、他の関数名と重複しないように注意します。 |
| ハンドル名（main-style） | ファイルを識別するための名前。任意の文字列を指定可能。 |
| スタイルシートのURL | get_template_directory_uri() でテーマディレクトリのURLを取得します。 |
| 依存関係 | 必要な場合は依存するスタイルシートのハンドル名を配列で指定。なければ空の配列 array() を記述。 |
| バージョン（1.0.0） | キャッシュ対策用にファイルのバージョンを指定。ファイル更新時に変更する。 |
| メディアタイプ（all） | スタイルシートが適用されるメディアタイプ。 |
JavaScriptを読み込む方法
JavaScriptを読み込み際は、「wp_enqueue_script」を使用します。
cssとは、違う記述を使用しますので、注意してください。
wp_enqueue_script(
//パラーメータを記載。
);記載した例が、下記になります。
function my_theme_enqueue_scripts() {
wp_enqueue_script( 'custom-script', // スクリプトのハンドル名
get_template_directory_uri() . '/js/script.js', // スクリプトのURL
array('jquery'), // 依存関係（'jquery' を指定している例）
'1.0.0', // バージョン
true // フッターで読み込むかどうか（true: フッター, false: ヘッダー）
);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');各パラメータの説明
| パラメータ等 | 備考 |
| my_theme_enqueue_scripts | 任意の関数名を指定します。add_action()で指定しますので、他の関数名と重複しないように注意します。 |
| ハンドル名（custom-script） | ファイルを識別するための名前。任意の文字列を指定可能。 |
| スクリプトのURL | get_template_directory_uri() でテーマディレクトリのURLを取得します。 |
| 依存関係 | 配列で指定（例: array(‘jquery’)）。指定されたスクリプトが読み込まれた後に実行されます。 |
| バージョン（1.0.0） | キャッシュ対策用にファイルのバージョンを指定。ファイル更新時に変更する。 |
| フッターで読み込むか（true または false） | true: フッターに読み込む（パフォーマンス向上） false: ヘッダーに読み込む（初期読み込み時に必要な場合）。 |
index.phpへwp_head();とwp_footer();を記述する。
下記の記述がそれぞれないと、読み込みが発生しません。
忘れずに記述しましょう！
<head>
<?php wp_head(); ?>
</head>
<body>
<-- 割愛 -->
<?php wp_footer(); ?>
</body>- CSSの読み込み: wp_enqueue_style を使用。
- JavaScriptの読み込み: wp_enqueue_script を使用。
- ハンドル名: ファイル識別用の名前。
- URL: get_template_directory_uri() で取得。
- 依存関係: 必要なスタイルシート/スクリプトのハンドル名。
- バージョン: キャッシュ対策のファイルバージョン。
- フッター読み込み: true（フッター）、false（ヘッダー）。
- メディアタイプ: スタイルシートの適用メディア（例: ‘all’, ‘screen’）。
- wp_head(): 内に。
- wp_footer(): 直前に。
ハンドル名のルールとポイント
ここでは、ハンドル名について深掘りしていきます。
ハンドル名（handle name） は、WordPress内でスタイルシートやスクリプトを一意に識別するための名前です。
同じ名前を使うと上書きされるので、以下のルールに注意して設定するようにしましょう。
ハンドル名のルールとポイント
ハンドル名を決める時に意識した方がいいルールを記載していきます。
また、ポイントを押さえた命名をすることで、管理が楽になります。
命名する際は、ルールとポイントを押さえて管理が楽になるハンドル名をつけましょう。
一意の名前にする
他のプラグインやテーマと衝突しないように、わかりやすく固有の名前を付けましょう。
適当な名前をつけていると、重複して、上書きされてしまい、エラーのもととなります。
規則性をもって、多少長くなっても、重複しないことを意識しましょう。
- mytheme-main-style
- custom-slider-style
関連性のある名前を付ける
規則性を持たせること以外にも意識した方がいいことがあります。
それは、ハンドル名を見ただけで、なんのファイルを読み込ませているのかわかる名前です。
管理が楽になります。
- ページ固有 → contact-page-style
- コンポーネント → header-navigation-style
また、依存関係の指定をする場合にも、ハンドル名が使用されます。
管理しやすい名前をつけることを意識しましょう。
例: わかりやすい命名
wp_enqueue_style(
'mytheme-global-style',
get_template_directory_uri() . '/css/global.css',
array(),
'1.0.0',
'all'
);wp_enqueue_script(
'mytheme-slider-script',
get_template_directory_uri() . '/js/slider.js',
array('jquery'),
'1.0.0',
true
);例: ハンドル名を使う場面
依存関係を指定する場合は、array(‘main-style’) のように記述します。
wp_enqueue_style(
'mytheme-responsive-style',
get_template_directory_uri() . '/css/responsive.css',
array('mytheme-global-style'),
'1.0.0',
'all'
);- main-style は任意で設定可能ですが、意味のある一意の名前にするのがおすすめ！
- 関連性のある名前をつけ、名前をみただけでなんのファイルか分かるようにする。
- 他のコードとの衝突を避けるために、プレフィックスをつける！（例: mytheme-）
依存関係の仕組み
ここでは、依存関係について深掘りしていきます。
WordPressにおける wp_enqueue_script や wp_enqueue_style の 依存関係 は、特定のスクリプトやスタイルが別のファイルを前提として機能する場合に、その関係性を指定する仕組みです。
たとえば、array(‘jquery’) のように配列で指定することで、読み込み順序を制御したり、必須のファイルが先にロードされることを保証できます。
- スクリプトやスタイルを 依存しているファイルが読み込まれた後に実行 させます。
- これにより、依存ファイルがないと動作しないコードが正しく動くようになります。
依存関係の役割の役割は、以下の通りです。
wp_enqueue_script(
'my-custom-script', // ハンドル名
get_template_directory_uri() . '/js/custom.js', // スクリプトのURL
array('jquery'), // 依存関係
'1.0.0', // バージョン
true // フッターで読み込む
);例としてわかりやすいのは、jQueryです。
jQueryを使う際は、あらかじめライブラリを読み込み、そのあとにjQueryを記載したファイルを読み込みます。
ファイルの読み込み順が逆になってしまうと、正しく動作しません。
WordPressdでは、依存関係を使って制御します。
jQueryを依存とする場合
wp_enqueue_script(
'custom-script',
get_template_directory_uri() . '/js/custom.js',
array('jquery'),
'1.0.0',
true
);依存関係が、複数ある場合は以下のように記述します。
wp_enqueue_script(
'dependent-script',
get_template_directory_uri() . '/js/dependent.js',
array('jquery', 'wp-api'),
'1.0.0',
true
);上記の例にあるdependent.js は jQuery と wp-api のスクリプトが読み込まれた後に実行されるようになります。
WordPressでよく使われる依存関係
WordPressにはあらかじめ登録されているハンドル名があります。
それらを依存関係として指定することで、効率的にファイルを読み込むことができます。
以下、よく使用されるハンドル名を記載しておきます。
| ハンドル名 | 概要 |
| jquery | WordPress標準のjQueryライブラリ |
| wp-api | REST API用スクリプト |
| underscore | Underscore.js ライブラリ |
| backbone | Backbone.js ライブラリ |
| wp-i18n | 翻訳用のi18nライブラリ |
- 依存関係を指定することで、正しい順序でファイルが読み込まれるように制御できる。
- WordPress標準のスクリプト（jquery, wp-api など）を活用して効率化できる。
- 必要に応じて複数の依存関係を指定し、エラーや不具合を防ぐように設計するのが重要です。
バージョンの設定とルール
バージョン番号は、スタイルシートやJavaScriptファイルのキャッシュを管理するための識別子です。
この値を変更することで、ブラウザに新しいファイルを読み込ませることができます。
キャッシュは、サイトの表示速度を上げるのに役立ちますが、サイトを更新した際にキャッシュが残っていると、更新の内容が反映されません。
キャッシュの管理は、適切に行いましょう。
基本的なルール
バージョン番号は 任意の値 を設定できますが、以下の形式を使うのが一般的です。
セマンティックバージョニング
- メジャーバージョン: 大きな変更があった場合（例: 1 → 2）
- マイナーバージョン: 小さな変更や機能追加（例: 1.0 → 1.1）
- パッチバージョン: バグ修正や微調整（例: 1.0.1 → 1.0.2）
上記のように、更新の内容によって手動でバージョンを変更します。
開発中のファイルなら適当に変更でもいい。
セマンティックバージョニングだと、手動で管理する必要があるので、少し手間です。
変更を忘れてしまうと、ファイルを更新しても、キャッシュの影響で更新が反映しません。
そこで、開発中は以下の記述に変更することで、手動での変更を回避します。
wp_enqueue_style(
'custom-style',
get_template_directory_uri() . '/css/style.css',
array(),
time(),
'all'
);time() を使用して、現在の時刻を設定することでキャッシュを無効化できます。
本番へアップするときは、セマンティックバージョニングに戻した方がいいです。
ファイルの変更日時を利用
最後は、ファイルが更新されたことを検知したら、ファイルの最終更新日時をバージョンとして利用する方法です。
wp_enqueue_style(
'custom-style',
get_template_directory_uri() . '/css/style.css',
array(),
filemtime(get_template_directory() . '/css/style.css'),
'all'
);キャッシュの問題を回避でき、更新を検知しなければ、キャッシュを利用するので、おすすめの設定です。
- バージョン番号はキャッシュ管理に使う識別子
- 一般的な形式は、メジャー（1→2）、マイナー（1.0→1.1）、パッチ（1.0.1→1.0.2）
- 開発中は time() で現在時刻をバージョンに設定し、キャッシュを無効化
- 本番環境ではセマンティックバージョニングに戻す
- filemtime() を使うと、ファイル更新時のみキャッシュを回避できる
第5引数の詳細と指定の仕方。
「wp_enqueue_script」「wp_enqueue_style」の第5引数である true または false は、スクリプトを どこで読み込むか を指定するフラグです。
それぞれ、以下の表の通りになります。
| 第5引数 | 備考 |
| true | スクリプトは フッター に読み込まれます。 フッターにスクリプトを読み込むことで、ページの初期表示が速くなり、パフォーマンスが向上します。 WordPressではフッターとは、</body> タグの直前（wp_footer アクションフック）を指します。 |
| false（デフォルト値） | スクリプトは ヘッダー に読み込まれます。 ヘッダーに読み込む場合、HTMLの <head> セクションにスクリプトが追加されます。 スクリプトがページの動作に必須で、初期読み込み時点で動いてほしい場合に適しています。 |
使い分けのポイント
では、どこでどう使い分けたらいいのか解説します。
結論からいうと、HTMLで読み込ませるときと同じタイミングで読み込ませておけばOkです。
cssならhead内で、JavaScriptなら</body>の直前です。
おさらいも兼ねて詳細を書いておきます。
フッターで読み込むべき場合（true）
フッターにスクリプトを置くと、HTMLとCSSのレンダリングが優先されるため、ユーザーにページが早く表示されます。
DOM（HTML要素）が完全に読み込まれる前にスクリプトを実行するとエラーが発生することがあります。
フッターに読み込めば、DOMが完全に準備された後に実行されるようになります。
DOM操作を行うJavaScriptは、trueにしてフッターで読み込ませましょう。
wp_enqueue_script(
'custom-script',
get_template_directory_uri() . '/js/script.js',
array('jquery'),
'1.0.0',
true
);ヘッダーで読み込むべき場合（false）
基本、JavaScriptは</body>の直前とお話しをしましたが、サイトの動作に必要なスクリプトは例外です。（例: 古いブラウザ用のポリフィル、外部リソースの設定スクリプトなど）。
その場合は、以下のようにfalseを指定して、head内で読み込ませるようにしましょう。
wp_enqueue_script(
'polyfill-script',
'https://cdn.polyfill.io/v3/polyfill.min.js',
array(),
'3.0.0',
false
);- 第5引数はスクリプトの読み込み場所を指定するフラグです。
- true にするとフッターに読み込まれ、ページの表示が速くなります。
- false（デフォルト）はヘッダーに読み込まれ、初期表示時にスクリプトが動作します。
- CSSは <head> 内、JavaScriptは </body> の直前に読み込むのが基本です。
- DOM操作を行うスクリプトはフッターで読み込み、動作に必須なスクリプトはヘッダーで読み込みます。
実践的な方法：複数ファイルを登録して、読み込ませる。
ここまでは、個別で読み込む方法を解説してきましたが、正直記述量が増えてしまい、実践的ではありません。
あくまでも基本の記述として覚えてき、実際には以下のように１つの関数名で複数のcssとJavaScriptを読み込ませましょう。
管理も楽になりますし、記述も減るのでコードの可読性も上がります。
以下、コードの例です。
function enqueue_assets() {
// スタイルシート
wp_enqueue_style(
'main-style',
get_template_directory_uri() . '/css/style.css',
array(),
'1.0.0',
'all'
);
wp_enqueue_style(
'responsive-style',
get_template_directory_uri() . '/css/responsive.css',
array('main-style'),
'1.0.0',
'all'
);
// JavaScript
wp_enqueue_script(
'main-script',
get_template_directory_uri() . '/js/main.js',
array('jquery'),
'1.0.0',
true
);
wp_enqueue_script(
'extra-script',
get_template_directory_uri() . '/js/extra.js',
array('main-script'),
'1.0.0',
true
);
}
add_action('wp_enqueue_scripts', 'enqueue_assets');「enqueue_assets」という関数の中で、cssとJavascriptを読み込ませています。
これで、複数書く必要がなくなり、追加や削除が発生した際も「enqueue_assets」を確認すれば修正すうることが可能です。
番外編：Google fontも読み込める！
実は、wp_enqueue_styleを使って、Google fontも読み込ませることができます！
function google_font() {
wp_enqueue_style(
'open-sans',
'https://fonts.googleapis.com/css?family=Open+Sans:400,700'
);
}ワードプレスで推奨されている読み込み方なので、linkタグで読み込ませている場合は、functions.phpに記述を移して、書き換えてあげましょう！
まとめ
WordPressでjQueryを正しく読み込むには、wp_enqueue_script を使用し、依存関係や読み込み場所を適切に設定することが重要です。本記事では、基本的な書き方から、フッターとヘッダーでの使い分けやバージョン管理の方法まで、実践的な内容を解説しました。これらのポイントを押さえることで、サイトのパフォーマンス向上やエラーの防止に役立ててください。
- WordPressでjQueryを読み込む際は、wp_enqueue_script を使う
- 依存関係は配列で指定し、スクリプトの実行順序を管理する
- フッターでスクリプトを読み込む場合は第5引数にtrueを設定する
- バージョン番号はキャッシュ制御のために設定する（固定値やファイルの更新日時を活用）
- フッターにスクリプトを読み込むにはwp_footerフックが必要
- ヘッダーにスクリプトを読み込むにはwp_headフックが必要