WordPress js, CSSファイルのレジスタとエンキューのちがい

WordPressでJavaScriptファイルを追加する関数のwp_register_script()とwp_enqueue_script()のちがいを説明します。

『registerのあとにenqueue入れればいいや』ぐらいの人は間違っていないけれど意味がないこともあるよ？という話です。

CSSスタイルでも同じです。

まずはサンプルコードから。

add_action( 'wp_enqueue_scripts', function() {
    $ver = '1.0.0';
    $src = get_theme_file_uri( 'js/origin.js' );

    wp_register_script( 'origin-script', $src, [ 'jquery' ], $ver );
    wp_enqueue_script( 'origin-script' );
} );

よく見るコードです。が、こういうやり方も見ます。

add_action( 'wp_enqueue_scripts', function() {
    $ver = '1.0.0';
    $src = get_theme_file_uri( '/js/origin.js' );

    wp_enqueue_script( 'origin-script', $src, [ 'jquery' ], $ver );
} );

wp_register_script()がありません。でも2つのコードはまったく同じ処理をしています。

コピペして動いていればOKという人は気にしないでしょうが、このコードのちがいにはちゃんと意味があります。

（wp_deregister_script()とwp_dequeue_script()のちがいも同じ。）

スクリプトを管理しているのは1つのクラスオブジェクト

スクリプトにはレジスタとキューがありますが、どちらもWP_Scriptsクラスで管理されています。

その情報を取得して見ることもできます。

<?php

$scripts = wp_scripts();
$registered = $scripts->registered ;
$queue = $scripts->queue;

$my_regist = var_export( $registered['origin-script'], true );
$my_queue = var_export( $queue['origin-script'], true );
$my_inline = var_export( $scripts->get_data( 'origin-script', 'after' ), true );

スクリプトを扱う関数の内部はクラスオブジェクトの編集です。オブジェクトの編集のためにラッパーの関数が用意されていると言ったほうがいいのかな？

レジスタは登録だけ - wp_register_script()

レジスタはjsファイルの情報を登録するだけです。これだけではHTMLにjsファイルは出力されません。

キューに入ったものが出力される - wp_enqueue_script()

jsファイルはキューに入っているリストから出力します。レジスタに登録してもキューになければ意味がありません。

なぜレジスタとキューで分かれているのか？

レジスタとキューが分かれているのは、特定のページにjsファイルを出力するためです。

キューの登録（エンキュー）処理は1箇所とはかぎりません。もしキューがなかったら、jsファイルの変更のたびにすべての場所で変更が必要です。

でもエンキュー処理にハンドラだけを使っていれば、jsファイルの変更作業はwp_register_script()の1箇所です。

/**
 * 公開サイト・管理画面の両方で使う
 */
my_scripts_regist() {
    $ver = '1.0.0';
    $src = get_theme_file_uri( 'js/origin.js' );
    wp_register_script( 'origin-script', $src, [ 'jquery' ], $ver );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_regist' );
add_action( 'admin_enqueue_scripts', 'my_scripts_regist' );

/**
 * 公開サイトのjs出力
 */
add_action( 'wp_enqueue_scripts', function() {
    // 固定ページだけjsファイル出力
    if ( is_page() ) {
        wp_enqueue_script( 'origin-script' );
    }
} );

/**
 * 管理画面を追加する。
 */
add_action( 'admin_menu', function() {
    // 管理画面を追加
    $page_hook_suffix = add_submenu_page( 'edit.php',
        __( 'My Settings', 'my-textdomain' ),
        __( 'My Settings', 'my-textdomain' ),
        'manage_options',
        'my_options',
        'my_manage_menu'
    );
 
    add_action( "admin_print_scripts-{$page_hook_suffix}", function() {
        // 作ったメニューだけにjsファイルを出力
        wp_enqueue_script( 'origin-script' );
    });
} );

キューとレジスタの同時登録

テーマ全体で使うjsファイルはレジスタ登録をしません。

add_action( 'wp_enqueue_scripts', function() {
    $ver = '1.0.0';
    $src = get_theme_file_uri( 'js/origin.js' );

    wp_enqueue_script( 'origin-script', $src, [ 'jquery' ], $ver );
} );

jsファイルのパラメータにファイルパス（$src）を指定すると、エンキュー処理の内部でレジスタの登録も行います。

次のコードは同じですが、wp_register_script()を書く意味がないことが分かるでしょう。

wp_enqueue_script()でまとめてできちゃうので。

add_action( 'wp_enqueue_scripts', function() {
    $ver = '1.0.0';
    $src = get_theme_file_uri( 'js/origin.js' );

    wp_register_script( 'origin-script', $src, [ 'jquery' ], $ver );
    wp_enqueue_script( 'origin-script' );
} );

キューになくても依存関係で出力される

キューに登録されていないのにHTMLにjsファイルが追加されるパターンがあります。

たとえばjQueryです。jQueryはレジスタにだけ登録されているのにHTMLにはしっかり追加されます。

なぜ出力されるかといえば、jQueryに依存するjsファイルがキューに登録され出力されると、jQueryをレジスタからもってきて自動的に出力してくれるからです。

wp_enqueue_script( 'origin-script', $src, [ 'jquery' ] );

このへんは、Node.jsのパッケージ管理 npm と似てますね？

スタイル（CSS）の管理も原理は同じ

もうひとつ、同じような処理をCSSファイルでもしますが原理は同じです。ちがいは編集するクラスオブジェクトとラッパー関数がスタイル用になっているだけ。

データの管理方法は共通

WP_ScriptsとWP_Stylesは同じ親クラスを継承した兄弟クラスです。

class WP_Scripts extends WP_Dependencies {
    // 省略
}

class WP_Styles extends WP_Dependencies {
    // 省略
}

レジスタやキューの保存先も親クラスを使っているので参照も同じです。

<?php

// スクリプト情報の参照
$scripts = wp_scripts();
$script_registered = $scripts->registered ;
$script_queue = $scripts->queue;

$result = [
    'script' => [],
    'style' => [],
];

$result['script'][] = var_export( $script_registered['origin-script'], true );
$result['script'][] = var_export( $script_queue['origin-script'], true );
$result['script'][] = var_export( $scripts->get_data( 'origin-script', 'after' ), true );

// スタイル情報の参照
$styles = wp_styles();
$style_registered = $styles->registered ;
$style_queue = $styles->queue;

$result['style'][] = var_export( $style_registered['origin-script'], true );
$result['style'][] = var_export( $style_queue['origin-script'], true );
$result['style'][] = var_export( $styles->get_data( 'origin-script', 'after' ), true );

分かりやすいです。