WordPressで、自作したjQueryを外部ファイルとして読み込む方法を紹介します。
WordPressで自作jQueryを読み込む方法
外部ファイル読み込むには、headタグ内に記述しますね。
思いつくのはheader.phpを開いて、headタグ内に直接埋め込むということ。しかしこれはおすすめできません。
WordPressでスクリプトファイルを読み込む際は、推奨されている読み込み方法があります。
wp_enqueue_scriptを使用してjQueryファイルを読み込む
WordPressでjQueryなどのスクリプトファイルを読み込むには、「wp_enqueue_script」という関数を使用することが推奨されています。
テーマディレクトリ→jsディレクトリ内にあるslider.jsというファイルを読み込みたい時は、下記コードをfunctions.phpに記述します。
function my_scripts() {
wp_enqueue_script(
'slider',
get_template_directory_uri().'/js/slider.js',
array('jquery'),
'1.0'
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );更新後、デベロッパーツールでheadタグ内で正しく読み込まれているか確認しましょう。
<script type="text/javascript" src="https://example.com/wp-content/themes/my-theme/js/slider.js?ver=1.0"></script>
wp_enqueue_scriptとは
javascriptなどのスクリプトファイルを重複しないように、適切な順番で読み込むように制御してくれる関数です。
▼WordPress Codex 日本語版
関数リファレンス/wp enqueue script
function my_scripts() {
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );第1引数($handle)：ハンドル名
スクリプトの識別名です。重複のない名前を記述します。
たとえば、「slider.js」という名前のファイルを読み込むなら「slider」、「main.js」という名前のファイルを読み込むなら、「main」とつけるなどしてわかりやすいハンドル名にしておきましょう。
第2引数($src)：ファイルのパス
ファイルのパスを記述します。
たとえば、テーマディレクトリ内のjsディレクトリ内のmain.jsを読み込む場合は以下のように記述します。
get_template_directory_uri().'/js/main.js'「get_template_directory_uri」はテーマディレクトリのパスを取得する関数です。
子テーマディレクトリ内のファイルを読み込みたい場合は、「get_stylesheet_directory_uri」を使用します。
第3引数($deps)：依存するスクリプトのハンドル名
このスクリプトよりも先に読み込まれているべきスクリプトを記述します。
jQueryを使用する場合は、「array(‘jquery’)」と記述します。
第4引数($ver)：バージョン
スクリプトのバージョンを記述します。省略可。
第5引数($in_footer)：スクリプトの記述位置
スクリプトの記述位置についてです。
初期値はfalseで、headタグ内に記述されますが、trueと記述すれば、このスクリプトはbody終了タグの直前に埋め込まれます。
headタグ内に記述されることに問題がなければ、省略します。
補足：WordPressでjQueryコードを使用する注意点
WordPressは標準でjQueryが読み込まれるようになっています。
しかしこのWordPress同梱のjQueryは、他のスクリプトと衝突しないように、jQuery記述の際に使用する「$」が使用できないようになっています。
別記事でWordPressでjQueryコードを使用する際の注意点をまとめているのでご参考ください。
→【jQueryが動かない】WordPressでjQueryのコードを書く時の注意点
まとめ
WordPressにはWordPress流の読み込み方があります。
安直にheadタグ内に直接埋め込んでしまうのは、WordPress初心者がよくやってしまうことでしょう。僕ももれなくやってました。笑
そのままheadタグ内に埋め込んだら思わぬ不具合が出る可能性があるので、この推奨された方法で読み込みましょう。
