LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

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

スクリプトを管理しているのは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()インラインスクリプトの追加

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

レジスタは登録だけ - 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()インラインスタイルの追加

データの管理方法は共通

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の本

post-cta-image

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

  • WordPressの基本
  • Webサイト作成から運用まで全体的に学ぶ
  • ブログサイトの運営からサイトの収益化を学ぶ
  • サイト作成・運営 + 集客の方法を学ぶ
  • WordPressからPHPプログラミングを学ぶ
  • 最新のWordPress(バージョン5)に対応した本

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

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


WordPressの本7選

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください