WordPressでのJavaScriptの読み込み方法

WordPressでのJavascriptの読み込み方法についてのメモ。

WordPressのお作法があるので、それに則ります。

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

WordPressのカスタマイズでお馴染みのfunctions.phpにJavascriptの読み込み処理を追加します。

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

ファイルの編集方法がわからない方はWordPressで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');

function add_js() {

wp_enqueue_script('custom_js', get_template_directory_uri() . '/custom_js.js');

}

add_action('wp_enqueue_scripts', 'add_js');

この例だと、
[WordPressのインストールディレクトリ]/wp/wp-content/themes/[使用しているテーマ]/
に配置したcustom_js.jsというjavascriptファイルを読み込むという処理になります。

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

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

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

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

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

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

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

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

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

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

アクションの種類については、プラグイン API/アクションフック一覧を御覧ください。

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

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

自作のPHPを読み込む場合は、WordPressの投稿にPHPの処理を埋め込む方法を御覧ください。

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