DAINASHI YESTERDAY

2016.06.29

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

8382091621_8cbbcdb043_b

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

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

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

function.phpを編集する

wp_head()やwp_footer()からスクリプトを読み込むために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です。

参考ページ
自作テーマをWordPress公式ディレクトリに登録するつもりなら作成時やってはいけないこと
関数リファレンス/wp register script
関数リファレンス/wp deregister script
関数リファレンス/wp enqueue script

photo credit: Pinheads ( #cc ) via photopin (license)

投稿者: