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

wordpress image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

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()のちがいも同じ。）

WordPress.org公式リファレンス

Hooks - wp_enqueue_scripts

かんたんに超高速WordPressでサイトを作る、KUSANAGIが使える低価格クラウド・VPS・レンタルサーバ

スクリプトを管理しているのは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()レジスタの登録
wp_deregister_script()レジスタの削除
wp_enqueue_script()キューの登録
wp_dequeue_script()キューの削除
wp_add_inline_script()インラインスクリプトの追加

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

WordPress.org公式リファレンス

Class - WP_Scripts

Function - wp_scripts

Function - wp_register_script

Function - wp_deregister_script

Function - wp_enqueue_script

Function - wp_dequeue_script

Function - wp_add_inline_script

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

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

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

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

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

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

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

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

sample-a.php
/**
 * 公開サイト・管理画面の両方で使う
 */
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' );
sample-b.php
/**
 * 公開サイトのjs出力
 */
add_action( 'wp_enqueue_scripts', function() {
    // 固定ページだけjsファイル出力
    if ( is_page() ) {
        wp_enqueue_script( 'origin-script' );
    }
} );
sample-c.php
/**
 * 管理画面を追加する。
 */
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 と似てますね？

キューからjsファイルを出力。

↓

その前に、jsファイルが必要としているものがあるか？
（依存関係はあるか？）

↓

あるならキューになくてもレジスタから情報をもってきて出力。

↓

その後ろに自身のjsファイルを出力。

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

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

クラス
WP_Styles
スタイルオブジェクト取得
wp_styles()
wp_register_style()レジスタの登録
wp_deregister_style()レジスタの削除
wp_enqueue_style()キューの登録
wp_dequeue_style()キューの削除
wp_add_inline_style()インラインスタイルの追加

WordPress.orgリファレンス

Class - WP_Styles

Function - wp_styles

Function - wp_register_style

Function - wp_deregister_style

Function - wp_enqueue_style

Function - wp_dequeue_style

データの管理方法は共通

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 );

分かりやすいです。

WordPress.orgリファレンス

Class - WP_Dependencies

かんたんに超高速WordPressでサイトを作る、KUSANAGIが使える低価格クラウド・VPS・レンタルサーバ
前の投稿
WordPressには、かんたんに年月・日時を秒にする定数が用意されている
WordPressがjQueryを挿入するしくみ。HTMLに直書きせずプログラミングしている。
次の投稿

WordPressの本

post-cta-image

たくさんあるなかで、WordPressの基本が学べる、目的別に学べる本を選びました。

  • WordPressの基本。
  • Webサイト作成から運用まで全体的に学ぶ。
  • かんたんなカスタマイズを学ぶ。
  • 何も分からないところから学ぶ。
  • WordPressからPHPプログラミングを学ぶ。

の5冊です。どうしてもネット上で調べて勉強するのが苦手という人におすすめです。

この内容をモノにすればほかの本は必要ありません。あとは自分の力で、書籍を使わずにインターネット上にある情報だけで学んでいけます。

コメントを残す

*

新着記事