WordPressでJavaScriptファイルを読み込む方法

WordPressでJavaScriptファイルを読み込み使用するには、wp_enqueue_script関数を利用します。

具体的には、下記のようにfunctions.phpに記述します。

function hoge_scripts() {
  	wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
}
add_action( 'wp_enqueue_scripts', 'hoge_scripts' );

コードについて少し説明してみます。

簡単に説明すると、アクションフックである「wp_enqueue_scripts」(※複数形になっているので注意が必要)
によってwp_enqueue_script関数が含まれたhoge_scriptを呼び出しています。

続いて、「wp_enqueue_script関数」の引数を確認していきましょう。

• handle スクリプトのハンドル名。デフォルトのスクリプト名と重ならないようにする
• src スクリプトのURL
• deps 依存スクリプト識別名を配列で指定
• ver バージョン文字列
• in_footer trueにするとスクリプトがbodyの前で読み込まれる。falseだとheadの前で読み込まれる

ここまでだと具体例がないので少しイメージしづらいと思います。

なので、具体的なjavascriptファイルを試しに読み込ませてみたいと思います。

例としてクリックすると開閉する目次（メニュー）を実現させるjavascriptコードを用意しました。
なお、コードはjQueryを利用しています。

こんな感じです。

「1.HTMLとはなにか? 」「2.CSSとはなにか？」をクリックするとリストが表示されます

まず、下記のコードをWordPressに投稿ページに追加しましょう。

1. HTMLとはなにか?

	
- HTMLの基本
	
- HTMLの応用
	
- HTMLの演習

2. CSSとはなにか？

	
- CSSの基本
	
- CSSの応用
	
- CSSの演習

つぎにWordPressのスタイルシートに下記の追記します。

.hidden{
  display: none;
}

最後に下記のようなjavascriptファイルを用意します。

jQuery(document).ready(function(){
	jQuery('.mokuji h2').on('click',function(){
		jQuery(this).next().toggleClass('hidden');
	});
});

上記のファイルは「custom_script.js」というファイル名で
sampleというテーマのフォルダの直下にある「js」フォルダに保存されているとします。

wordpress
 └── wp-content
     ├── languages
     ├── plugins            
     ├── themes
     │   └── sample
     │       └── js  ←ここに保存されているとする
     │   
     ├── upgrade 
     └── uploads

では、さっそくcustom_script.jsを読み込んでみましょう。
functions.phpに下記のコードを追記します。

function my_scripts_method() {
  wp_enqueue_script(
    'custom-script',
    get_stylesheet_directory_uri().'/js/custom_script.js',
    array( 'jquery' ),
    '1.0',
    true
  );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

これでjavascriptコードがWordPressに読み込まれるはずです。

参考