WordPressでのJavaScriptの読み込み方法

WordPressでのJavascriptの読み込み方法について解説します。

WordPressのお作法にのっとた実装方法になります。

functions.phpにJavaScriptの読み込み処理を追加する

functions.phpにJavascriptの読み込み処理を追加します。

functions.phpの場所はこちら

[WordPressのインストールディレクトリ]/wp/wp-content/themes/[使用しているテーマ]/functions.php

ファイルの編集方法がわからない場合、下記の記事を参考にしてください。

functions.phpへの追加の例は下記のようになります。

function add_js() {
	wp_enqueue_script('custom_js', get_template_directory_uri() . '/custom_js.js');
}
add_action('wp_enqueue_scripts', 'add_js');

この例だと、下記に配置したcustom_js.jsというjavascriptファイルを読み込むという処理になります。

[WordPressのインストールディレクトリ]/wp/wp-content/themes/[使用しているテーマ]/

メソッド名（add_jsの部分）、識別子（custom_js）やファイル名（custom_js.jsの部分）はお好みに変えて大丈夫です。

JavaScript読み込み処理の解説

詳しく処理の解説をしていきます。

wp_enqueue_script()

スクリプトをインクルードするWordPressのメソッドです。
依存関係などを考慮してスクリプトをインクルードしてくれるので、WordPressでJavaScriptを読み込むなら、このメソッドを利用してインクルードした方が良いです。

参考：リファレンス

get_template_directory_uri()

テンプレートのディレクトリを取得するメソッドです。

参考：リファレンス

取得するディレクトリは下記。

WordPressのインストールディレクトリ]/wp/wp-content/themes/[使用しているテーマ]/

functions.phpの場所と一緒です。
今回の例では、このディレクトリにJavaScriptファイルを配置しています。

add_action()

メソッドをアクションにフックさせる関数です。

参考：リファレンス

今回の例では、wp_enqueue_scriptsアクションに、自作メソッドをフックさせています。

wp_enqueue_scriptsは、フロントのみに適応なので管理画面には影響を与えないとう性質です。

アクションの種類については、下記を参照してください。

まとめ

WordPressが用意しているお作法に則った方法のご紹介でした。

複数JavaScriptを読み込ませたい場合は、add_js()にwp_enqueue_script()のコールを増やせばOKです。

少しでも参考になれば幸いです。

最後までお読み頂きありがとうございました。