WEB制作のための情報サイト / unazuki Library

基本構文と使い方（引数・実行結果）

基本構文

スクリプトを登録し、読み込み対象としてキューに追加します。キューに追加されたスクリプトは、wp_head() や wp_footer() が出力されるタイミングで自動的に読み込まれ、サイトに適用されます。

wp_enqueue_script($handle,$src,$deps,$ver,$args);

wp_enqueue_script($handle,$src,$deps,$ver,$args);

引数

実行結果

スクリプトを登録し、読み込み対象としてキューに追加します。

例１．script.jsをキューに追加

下記の例では、get_theme_file_uri()を使ってテーマ直下にあるjsディレクトリ内のscript.jsをキューに追加しています。第５引数がtrueのため、キューに追加されたjsはwp_footer()で呼び出されます。

wp_enqueue_script('main', get_theme_file_uri('/js/script.js'), ['swiper'], '1.0', true);

wp_enqueue_script('main', get_theme_file_uri('/js/script.js'), ['swiper'], '1.0', true);

学習者向け補足情報

よくある使い方

下記の例では、２つのCSSをwp_enqueue_style()で、２つのJavaScriptをwp_enqueue_script()でキューに追加しています。

function my_theme_scripts() {
	wp_enqueue_style('main', get_theme_file_uri('/css/style.min.css'), ['swiper'], '2.1');
	wp_enqueue_style('swiper', get_theme_file_uri('/lib/swiper/swiper.min.css'), [], '1.1');
	wp_enqueue_script('main', get_theme_file_uri('/js/script.js'), ['swiper'], '1.0', true);
	wp_enqueue_script('swiper', get_theme_file_uri('/lib/swiper/swiper-bundle.min.js'), [], '1.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

function my_theme_scripts() {
	wp_enqueue_style('main', get_theme_file_uri('/css/style.min.css'), ['swiper'], '2.1');
	wp_enqueue_style('swiper', get_theme_file_uri('/lib/swiper/swiper.min.css'), [], '1.1');
	wp_enqueue_script('main', get_theme_file_uri('/js/script.js'), ['swiper'], '1.0', true);
	wp_enqueue_script('swiper', get_theme_file_uri('/lib/swiper/swiper-bundle.min.js'), [], '1.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

このコードを実行すると下記のようにscript要素がwp_footer()で呼び出されます。なお、swiper.jsはswiper-bundle.min.jsに依存する指定なので（依存関係を指定する第３引数でswiperを指定）、見た目の順番通りではなく、swiper.jsはswiper-bundle.min.jsの後に呼び出されます。

結果例：
<script type="text/javascript" src="https://example.com/wp-content/themes/template-theme/lib/swiper/swiper-bundle.min.js?ver=1.0" id="swiper-js"></script>
<script type="text/javascript" src="https://example.com/wp-content/themes/template-theme/js/script.js?ver=1.0" id="main-js"></script>
※cssは割愛しています。

関連するテンプレートタグ