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 登録する識別名 None
$src 登録するJavascriptのパス |None
$deps Javascriptの依存性 × array()
$ver パラメータの付与 × false
$in_footer wp_head()かwp_footer()でつかうか × false
  • $handleは登録させるフック名で、あらかじめWordPressで登録されているフック以外の好きな名前が決めれます
  • $srcはJavascriptのパスを書きます。この2つは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 登録する識別名 None
$src 登録するJavascriptのパス × |None
$deps Javascriptの依存性 × array()
$ver パラメータの付与 × false
$in_footer wp_head()かwp_footer()でつかうか × false
  • $handleは登録させるフック名で、あらかじめWordPressで登録されているフック以外の好きな名前が決めれます
  • $srcはJavascriptのパスを書きます。
  • $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_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()を使って解除する紹介します。

register_jqueryfunction 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の使い方とその違いとはもあるのでこちらも見てあなたのテーマ開発に生かしてください。

+1 Pocket はてブ!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

© 2012 - 2018 SAMURAI PROJECT Proudly powered by WordPress