wordpress：wp_register_scriptとwp enqueue scriptの違いとは何ですか？

Question

functios.phpでJavaScriptの管理を行いたいと思っています。
調べていた際に行き詰りました。

wp_register_scriptとwp enqueue scriptの違いとは何ですか？

ちなみにですが、今までは下記の仕様で製作していました。
cssもfunctionsに書くべきだと知り、調べていくうちにぶつかりました。

// タイトルタグ
function my_setup_theme() {
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_setup_theme' );
//jQuery
function my_scripts() {
  wp_enqueue_script( 'jquery' );
  wp_enqueue_script( 'flexnav', get_template_directory_uri() .'/js/jquery.flexnav.min.js', array( 'jquery'));
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

Answer 1

wp_register_script で、ハンドル（名前みたいなもの）とJavaScriptファイルの紐づけをWPに認識させ、実際にそのスクリプトを利用する箇所（フック）でそのJavaScriptを表示させるのが wp_enqueue_script です。

WPの場合処理上、出力する前に一度出力するスクリプト群をキューにためて、適切な順序で出力する処理があるため、enqueue です。

wp_register_script では依存関係も含めてWPに認識させられるので、例えばあるJSを利用するために必要となる別のJSを設定しておくことにより、wp_enqueue_script で使いたいスクリプトだけを指定すれば、必要となる依存関係のスクリプトを合わせて読み込んでくれます。

wp_register_script
wp_enqueue_script

なお、ハンドルや依存関係の処理等をしないのであれば、wp_enqueue_script だけの利用でも構いません。

---

追記

よみこむJavaScriptを仮に

• proccess.js

とします。
このJavaScriptが動くためには別のスクリプト、

• required.js

が必要なものとします。
※実際はJavaScriptそれぞれのフルパスが必要になりますが、その辺は省略させてください。

この際、 wp_enqueue_script だけで書く場合、

function output_script()
{
    wp_enqueue_script('required', 'required.js');
    wp_enqueue_script('process',  'process.js', array('required') );
}
add_action( 'wp_enqueue_scripts', 'output_script' );

これで、出力のために2つの JavaScript がキューに入れられ、その他の処理でキューに入れられるJavaScriptと合わせて、適切な読み込み順序にWordPressが自動的に調整したうえで、出力されます。

これを wp_register_script を使う場合に書き換えると、

// 事前の段階で実行される処理として
  wp_register_script('required', 'required.js' );
  wp_register_script('process', 'process.js' , array( 'required' ) );

    // この処理では使わないJavaScriptでも一覧化、依存関係管理ができます。
  wp_register_script('othere-process', 'othere-process.js' , array( 'required' ) );


// -----

function output_script()
{
    wp_enqueue_script('process');
}
add_action( 'wp_enqueue_scripts', 'output_script' );

これで、事前に wp_register_script で登録されている同名のハンドルのスクリプトが、依存関係が解決された形で読み込まれ、出力されます。

• スクリプトの管理
• スクリプトの読み込み

を分けて処理がかける、ということです。
こうすると、ハンドル名 process がそのスクリプトであると管理されているので、仮に process が複数の箇所で読み込まれていたとして、読み込むスクリプトが new-process.js に変更になったとしても、1か所の修正ですべてに反映できます。

Comments

[makoto-n]

wp_register_scriptで全て登録、wp_enqueue_scriptで個別に出力という形でいいでしょうか？
すみません、JavaScriptをまったく理解していないもので、

[kaz.Suenaga]

あまりJavaScriptの理解と関係ない処理でして、

- 事前に「利用するJavaScriptのリスト」を作る処理が wp_register_script
- 実際に使う処理が wp_enqueue_script

です。
実際に使う際に、事前に登録してある名前（ハンドル）で読み込むこともできますし、その場で読み込むものを指定することもできます。
※そのため、wp_enqueue_script だけでも記述はできます。

事前にリストを作ることのメリットは、前述のとおりハンドル（別名みたいなものです）を自由につけられることと、依存関係を設定しておけることです。
依存関係を設定できることにより、必要なJavaScriptを1つ1つ正しい順序で wp_enqueue_script で読み込む必要がなくなり、使いたいJavaScript 1つを wp_enqueue_script で読み込むことで自動的に他の必要な JavaScript が読み込まれます。

wp_register_scrtpt は functions.php のような共通的に読み込まれる箇所で記述し、 wp_enqueue_script は各テンプレートやフックでの処理として記述されます。

[makoto-n]

返信遅くなりすみません。
つまり、「圧縮化」であっていますか？汗
すごく漠然と解釈してしまっていますが、、

[kaz.Suenaga]

圧縮なんて一言も言ってませんよ。

ではもう少し例示しますので、回答を追記します。
これから書きますので少し時間空きますがご了承くださいね。

[makoto-n]

はい、失礼しました。
お願いします。

[kaz.Suenaga]

付け加えると質問内にある

wp_enqueue_script( 'jquery' );

は、WPがデフォルトで事前に

wp_register_script( 'jquery' , [jQueryのURL], [依存関係] );

をやってあるからできる処理です。

[makoto-n]

なるほど！
ありがとうございます。
夜分に本当すみません！