WordPressに独自のjavascriptを追加したい時に使用する関数です。
内部javascriptだけでなく外部のjavascript(CDN)を追加する時にも使う関数なので、是非使い方をマスターしましょう。
まとめ記事紹介
javascriptだけでなくcssも追加したい。追加だけでなく削除もしたい。保守性、メンテナンスを考えて適切な処理を行いたい。とお考えの方は、こちらのまとめ記事も併せてご覧ください。
wp_enqueue_script()
wp_enqueue_script() 初期値
wp_enqueue_script(
string $handle,
string $src = '',
string[] $deps = array(),
string|bool|null $ver = false,
bool $in_footer = false
)wp_enqueue_script() の簡潔コード
wp_enqueue_script($handle, $src, $deps, $ver, $in_footer);$handlestring 必須-
スクリプトの名前。判別するのに使うため一意である必要があります。
$srcstring-
スクリプトへの絶対URL。
デフォルト：
'' $depsstring[]-
依存するスクリプトのハンドル名を指定（既に登録されている
$handleを指定）指定したスクリプトの後に、このスクリプトが読み込まれる。
デフォルト：
array() $verstring|bool|null-
スクリプトのバージョン番号を指定する文字列 (存在する場合)
キャッシュ無効化の目的でクエリ文字列として URL に追加されます。
$verがfalseに設定されている場合、現在インストールされているWordPressのバージョンと同じバージョン番号が自動的に追加されます。nullに設定すると何も追加されません。デフォルト：
false $in_footerbool-
スクリプトを
<head>内ではなく</body>直前に挿入するかどうかの判定。サイトの軽量化を考えて読み込みは最後にしたい方は
trueを指定すると良いでしょう。デフォルト：
false
呼び出すアクションフック名一覧
javascriptを挿入したい場所によって、指定するアクションフック名が変わります。
適切な場所を指定してカスタマイズを行いましょう。
- フロントエンド
-
wp_enqueue_scripts
- 管理画面
-
admin_enqueue_scripts
- ログイン画面
-
login_enqueue_scripts
フロントエンドにjQuery挿入する例
add_action('wp_enqueue_scripts', function () {
wp_enqueue_script(
'jquery-min',
'https://code.jquery.com/jquery-3.7.0.min.js',
[],
'3.7.0'
);
});ここではわざとjquery-minと命名しています。これは既にjqueryがWordPressに登録されている名前だからです。
新たにjqueryと指定しても既存のコードは上書きされず、上のコードは無視されます。
既存のハンドルを上書きしたい場合はwp_deregister_script()などで削除後、新たに登録し直す必要があります。
jQueryを上書きしたい場合のコード
add_action('wp_enqueue_scripts', function () {
// WordPressに登録されているjQueryを削除
wp_deregister_script('jquery-core');
// 新たに好きなバージョンのjQueryを登録
wp_register_script(
'jquery-core',
'https://code.jquery.com/jquery-3.7.0.min.js',
[],
null
);
// 上のコードだけでは出力しないので、出力もしておきたい場合はこれも記載
wp_enqueue_script('jquery');
});外部javascript(jQuery)を指定
jQuery min v3.7.0をCDNで読み込む例
add_action('wp_enqueue_scripts', function () {
wp_enqueue_script(
'jquery-min',
'https://code.jquery.com/jquery-3.7.0.min.js',
[],
'3.7.0'
);
});CDNを読み込むための例としてjQuery min v3.7.0を指定するコード例です。
コードを記載する場所はテーマ、functions.php、プラグイン内で記述する良いでしょう。
上記のコードを記載するとHTMLのソースには以下のタグが挿入されます。
<script type='text/javascript' src='https://code.jquery.com/jquery-3.7.0.min.js?ver=3.7.0' id='jquery-min-js'></script>内部javascript(子テーマ内)をjQuery後に読み込む
子テーマフォルダ内に保存したjavascriptをjQuery後に読み込む例
add_action('wp_enqueue_scripts', function () {
// 説明のためjquery-minを追加
wp_enqueue_script(
'jquery-min',
'https://code.jquery.com/jquery-3.7.0.min.js'
);
// こちらが本題。依存関係にjquery-minを指定する
wp_enqueue_script(
'custom-script',
get_stylesheet_directory_uri() . '/custom-script.js',
['jquery-min'],
null
);
});内部ファイルを指定する場合のコード例です。
コードを記載する場所は子テーマフォルダのfunctions.phpに記述すると良いでしょう。
上記のコードを記載するとHTMLのソースには以下のタグが挿入されます。
jQueryが挿入された箇所の後にcustom-script.jsが読み込まれています。
<script type='text/javascript' src='https://code.jquery.com/jquery-3.7.0.min.js?ver=6.2.2' id='jquery-min-js'></script>
<script type='text/javascript' src='https://it-manabi.com/wp-content/themes/swell_child/custom-script.js' id='custom-script-js'></script>適切なバージョン管理とフッターで読み込む例
ファイルの最終更新時刻を利用
add_action('wp_enqueue_scripts', function () {
wp_enqueue_script(
'custom-script',
get_stylesheet_directory_uri() . '/custom-script.js',
[],
filemtime(get_stylesheet_directory() . '/custom-script.js'),
true
);
});filemtimeを利用してバージョン管理をしています。
custom-script.jsファイルが更新されると適切なタイムスタンプに更新されます。
タイムスタンプをdate関数で整形した場合のコード例
add_action('wp_enqueue_scripts', function () {
wp_enqueue_script(
'custom-script',
get_stylesheet_directory_uri() . '/custom-script.js',
[],
date('YmdHis', filemtime(get_stylesheet_directory() . '/custom-script.js')),
true
);
});こちらの方がカスタマイズする際にソースを確認した時に分かりやすいのでオススメです。
条件分岐で挿入するページを指定する方法
is_single()やis_page()などで条件分岐する
add_action('wp_enqueue_scripts', function () {
if (is_page('contact-us')) {
wp_enqueue_script(
'jquery-min',
'https://code.jquery.com/jquery-3.7.0.min.js'
);
}
});上記のコードはcontact-usというスラッグを持つ固定ページでのみjavascriptを挿入するコード例です。
条件分岐の変数を修正するだけで自由に挿入ページを指定できるので、サイト全体に読み込ませたくないファイルがある場合は積極的に条件分岐を使っていきましょう。
まとめ記事
WordPressにCSSやJSを追加・削除する方法を全て網羅し、分かりやすく整理したまとめ記事も作成しておりますので、より理解を深めるためにお読み下さい。
コメント