wp_register_scriptとwp_enqueue_scriptの使い方とその違いとは

WordPressのfunctions.phpでよく使うwp_register_script()とwp_enqueue_script()は、Javascriptをページに表示するときにセットする関数です。WordPressプラグインを使う場合やテーマのfunctions.phpに書いておけるおくことでJQueryプラグインなどのJavascriptファイルの依存関係を解決できたりします。また子テーマなどのJavascriptファイルの管理にもおすすめです。

wp_register_scriptとは

wp_register_script()とwp_enqueue_script()の使い方から紹介します。

wp_register_script($handle, $src, $deps, $ver, $in_footer);

引数	型	説明	デフォルト	必須
$handle	string	登録する識別名	None	○
$src	string	登録するJavascriptのパス	None	○
$deps	array	Javascriptの依存先	array()
$ver	string or boolean	パラメータの付与	false
$in_footer	boolean	wp_head()かwp_footer()か	false

$handleは登録させるフック名で、あらかじめWordPressで登録されているフック以外の好きな名前が決めれます
$srcはJavascriptのパスを書きます。この２つはwp_register_script()において必ず書かないといけない必須項目です
$depsはどのJavascriptの後に読み込ませるか決めることができます。基本的には、読み込ませるwp_register_script()の順に登録されますが、依存関係があるJavascript(JQueryプラグインなど)を登録させたい場合は、依存元のJavascriptの$handleを書いておくとそのJavascriptの後に登録されます
$verは読み込ませるJavascriptのパスにパラメータを付与できます。なにも書かないとWordPressのバージョン番号がパラメータに付与され、なにかパラメータを書いておくとそのパラメータが呼び込まれます。パラメータを付与させたくない場合は、NULLを書くことでパラメータが付与されません
$in_footerは登録する場所をwp_head()内かwp_footer()内で決めることができます。何も書かないとwp_head()内に登録されtrueとするとwp_footer()内に登録されます

wp_enqueue_scriptとは

wp_enqueue_script($handle, $src, $deps, $ver, $in_footer);

引数	型	説明	デフォルト	必須
$handle	string	登録する識別名	None	○
$src	string	登録するJavascriptのパス	None	○
$deps	array	Javascriptの依存先	array()
$ver	string or boolean	パラメータの付与	false
$in_footer	boolean	wp_head()かwp_footer()か	false

$handleは登録させるフック名で、あらかじめWordPressで登録されているフック以外の好きな名前が決めれます
$srcはJavascriptのパスを書きます。
$depsはどのJavascriptの後に読み込ませるか決めることができます。基本的には、読み込ませるwp_enqueue_script()の順に登録されますが、依存関係があるJavascript(JQueryプラグインなど)を登録させたい場合は、依存元のJavascriptの$handleを書いておくとそのJavascriptの後に登録されます
$verは読み込ませるJavascriptのパスにパラメータを付与できます。なにも書かないとWordPressのバージョン番号がパラメータに付与され、なにかパラメータを書いておくとそのパラメータが呼び込まれます。パラメータを付与させたくない場合は、NULLを書くことでパラメータが付与されません
$in_footerは登録する場所をwp_head()内かwp_footer()内で決めることができます。何も書かないとwp_head()内に登録されtrueとするとwp_footer()内に登録されます

wp_register_scriptとwp_enqueue_scriptの違い

これまで見ていただいてほぼ同じように見えるwp_register_script()とwp_enqueue_script()ですが、この違いは、WordPressのページ読み込み時にJavascriptファイルを登録するのかそれとも読み込むのかの違いがあります。wp_register_script()ではページを表示するときに使用したJavascriptファイルは現れないので、例えばwp_register_script()でJavascriptファイルの登録のみをしておいて特定のタイミングでwp_enqueue_script()を使ってページ表示時にJavascriptファイルを読み込むといったプラグイン開発を行うさいにありそうな場合や、wp_register_script()を使わずにfunctions.phpにwp_eneueue_script()のみを使ってJavascriptファイルを読み込むといったテーマ開発でよくありそうな場合で使い分けを行います。

wp_register_scriptとwp_enqueue_scriptのコードサンプル

wp_register_script()の使用例でGoogle Hosted LibrariesからJQueryをwp_footer()に読み込む使い方です。JQueryは、WordPressに登録されているのでwp_deregister_script()を使って解除する紹介します。

function register_jquery() {
    wp_deregister_script('jquery'); /* 同梱のJQueryを読み込ませない */
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', array(), NULL, true); /* Google CDNのJQueryの登録 */
    wp_enqueue_script('jquery'); /* 登録したJQueryをフックさせる */
}
add_action('wp_enqueue_scripts', 'register_jquery'); /* 実際のフック */

2行目のwp_deregister_script(‘jquery’)は、解除したいフック名を引数に書いておくとそのフック名に登録してあるJavascriptを解除してテーマに読み込まないようになります。4行目のwp_enqueue_script(‘jquery’)は、wp_register_script()で登録したものを登録します。wp_enqueue_script()は、wp_register_script()と引数の形は同じなのでwp_enqueue_script()にwp_register_script()で使うものを引数に渡せば、wp_register_script()は必要ありません。

まとめ

今回はWordPressのテーマやプラグインでJavascriptの登録を行うwp_register_script()とwp_enqueue_script()を紹介しました。WordPressでJavascriptの登録を行うと同様な形でCSSの登録を行うwp_register_styleとwp_enqueue_styleの使い方とその違いとはもあるのでこちらも見てあなたのテーマ開発に生かしてください。