【WordPress】jQueryを読み込む方法

wordpress

たった一行のコードを書くだけで、WordPressでjQueryを読み込むことができます。

WordPressでjQueryを読み込むphpファイル

WordPressでは、目的に応じてphpファイルを分割しています。(詳しくはこちら)Webサイトのヘッダーを作るために使用する、header.phpでjQueryを読み込むのが一般的です。

jQueryを読み込む方法

WordPress関数である、「wp_enqueue_script();」関数を使用すれば、jQueryが使えるようになります。

<?php wp_enqueue_script('jquery'); ?>

このコードを<head>タグのなかに埋め込みます。するとjQueryが使えるようになります。
もう少し詳しくみてみましょう。

wp_enqueue_script()の特徴

wp_enqueue_script()はJavaScriptファイルをWordPress内で適切に読み込むための関数です。普通のHTMLファイルであれば、一番下の<footer>タグの中でJavaScriptを読み込みます。
WordPressも同じ方法で読み込むことはできます。しかし、wp_enqueue_script()を使用することが推奨されます。

この関数は5つの引数を持つことができます。

wp_enqueue_script($handle, $src, $deps, $ver, $in_footer)
<!--$handle:スクリプトのハンドル名-->
<!--$src:スクリプトのパス(省略できる)-->
<!--$deps:スクリプトのハンドル名を配列で指定(省略できる)-->
<!--$ver:スクリプトのバージョン(省略できる)-->
<!--$in_footer:true指定でfooterでファイルを出力(省略できる)-->

バンドル名として「jQuery」を指定すると、<?php wp_enqueue_script(‘jquery’): ?>となるわけです。

例えば、この関数を使って、独自のJavaScriptファイルを読み込むとしましょう。「theme→header.php」の中で、「theme→js→main.js」を呼び出すとすると、次のように記述します。

<?php
wp_enqueue_script('jquery'); <!-- jQueryの読み込み -->
wp_enqueue_script('my_js_file', get_template_directory_uri().'/js/main.js); <!--独自ファイルの読み込み-->
?>

第一引数には$handle(ハンドル名)を指定します。独自のファイルなので、どんな文字列でも構いません。(他のものと被らなければ)
第二引数には$srcとして、ファイルのパスを指定します。get_template_directory_uri()で、テーマのフォルダのパスが取得できます。

Appendix

WordPressでjQueryを読み込む方法と、JavaScriptファイルを読み込む方法を紹介しました。jQueryは、非常に簡単に読み込めますね。

参考文献:[改訂版]WordPress 仕事の現場でサッと使える! デザイン教科書[WordPress 5.x対応版]

WordPress 仕事の現場でサッと使える! デザイン教科書
著者:中島 真洋
価格:2905円(Kindle)