Bamboolog

wp_enqueue_scriptを使ってwp_headまたはwp_footerでスクリプトを読み込む方法

2016.06.29 2020.06.22 WordPress
wp_enqueue_scriptを使ってwp_headまたはwp_footerでスクリプトを読み込む方法

WordPressでは、JavaScriptファイルへのパスをテンプレートファイルに直接記入しなくても、wp_head()やwp_footer()から読み込むことができます。

読み込むことができますというか、そうしておかないとWordPressの公式テーマとしては登録できないようです。

wp_head()やwp_footer()からスクリプトを読み込むには、WordPessテーマのfunctions.phpを編集する必要があります。

公式テーマに登録するつもりがないWordPressテーマであれば、特に気にせずテンプレートファイルに直書きでもいいかと思いますが、WordPressテーマを複数作成する場合などには、functions.phpを使いまわすことができますので便利かと思います。

wp_enqueue_scriptを使ってwp_headまたはwp_footerでスクリプトを読み込む

wp_head()やwp_footer()からスクリプトを読み込むためにfunctions.phpを編集します。

functions.php
/* スクリプトの読み込み
---------------------------------------------------------- */
if(!is_admin()){
	function register_script(){
		wp_register_script('jquery_1.10.2', get_template_directory_uri().'/js/jquery-1.10.2.min.js');
		wp_register_script('jquery_ui_1.10.3', get_template_directory_uri().'/js/jquery-ui-1.10.3.custom.min.js');
		wp_register_script('functions', get_template_directory_uri().'/js/functions.js');
	}
	function add_script(){
		register_script();
		wp_deregister_script('jquery', '', array(), '1.0', false);
		wp_enqueue_script('jquery_1.10.2', '', array(), '1.0', false);
		wp_enqueue_script('jquery_ui_1.10.3', '', array(), '1.0', false);
		wp_enqueue_script('functions', '', array(), '1.0', false);
	}
	add_action('wp_print_scripts','add_script',10);
}

上記のソースでは、

  • jquery-1.10.2.min.js
  • jquery-ui-1.10.3.custom.min.js
  • functions.js

というjsファイルを登録し、WordPressにデフォルトで格納されているjQueryファイルの登録を除外、その後wp_head()より各スクリプトを読み込んでいます。

wp_register_script()でスクリプトを登録する

<?php wp_register_script( $handle, $src, $deps, $ver, $in_footer ); ?>

wp_register_script()はスクリプトを登録するための関数です。

上記ソースのように、読み込みたいファイルの数だけ下記のようなパラメータを利用して登録していきます。

wp_deregister_script()で登録済みのスクリプトを除外する

<?php wp_deregister_script( $handle ); ?>

wp_deregister_script()は登録済みのスクリプトを除外するための関数です。

wp_register_script()で登録したスクリプトやWordPressに標準で読み込まれるようになっているjQueryファイルを読み込ませないようにするときなどに使用します。

wp_enqueue_script()でスクリプトを読み込む

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

wp_enqueue_script()は、wp_register_script()で登録したスクリプトをwp_head()またはwp_footer()で読み込むための関数です。

各関数で使用するパラメータについて

上記3つの関数では、下記のようなパラメータを使用します(wp_deregister_script関数は$handleのみ)。

$handle
必須パラメータ。スクリプトを登録するための名称(ハンドル名)。
$src
オプション。スクリプトのURLです。絶対パス(http://で始まる)で指定せず、「plugins_url」と「get_template_directory_uri()」で指定するようにしましょう。
$deps
オプション登録するスクリプトが依存しているスクリプトのハンドル名を指定する。例えば、「photo_ui」というハンドル名のスクリプトが「photo」というハンドル名のスクリプトに依存している場合は下記のように記述します。

<?php wp_enqueue_script( 'photo_ui', '', 'photo', '', false ); ?>

あるスクリプトが他のスクリプトに依存している場合、依存されている側のスクリプトが先に読み込まれる必要があります。$depsはwp_enqueue_script()で読み込まれるスクリプトの読み込み順を自動的に並び替えるためのパラメータです。初期値はarray()です。

$ver
オプション。登録するスクリプトのバージョン情報を指定します。スクリプトにバージョンが特にない場合はfalseにしておけばWordPressが自動的にバージョン情報を入れてくれます。初期値はfalseです。
$in_footer
オプション。スクリプトを読み込む場所を指定します。通常スクリプトを読み込む場所はwp_head()ですが、wp_footer()で読み込みたい場合はこのパラメータをtrueにします。初期値はfalseです。