WordPressがjQueryを挿入するしくみ。HTMLに直書きせずプログラミングしている。

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

WordPressがjQueryを挿入するしくみを説明します。スクリプトのキューに登録していないのに出力されるのがポイントです。

WordPressでは、HTMLの<style>にjsファイルを追加するのにwp_enqueue_scripts()を使います。

でもWordPressに搭載されているjQueryはちょっとちがいます。キューに登録していないのにHTMLには追加されます。

『なんで?』という話です。

WordPressが搭載するjQuery

WordPressのjqueryは3つのハンドラで構成されています。

ハンドラjQueryの種類
jquery-corejQuery本体
jquery-migratejQueryのバージョン違いを補足するプラグイン。
下位互換のないコードは復元してくれる。
jqueryjquery-core, jquery-migrateのエイリアス

(そのほかjquery-ui関連の多数の付属プラグインもある。)

jQueryを追加しているコード

WordPressでjQueryを追加しているところはwp-includes/script-loader.phpです。

wp-includes/script-loader.php
function wp_default_scripts( &$scripts ) {
    // 省略

    // jQuery
    $scripts->add( 'jquery', false, array( 'jquery-core', 'jquery-migrate' ), '1.12.4-wp' );
    $scripts->add( 'jquery-core', '/wp-includes/js/jquery/jquery.js', array(), '1.12.4-wp' );
    $scripts->add( 'jquery-migrate', "/wp-includes/js/jquery/jquery-migrate$suffix.js", array(), '1.4.1' );

    // 省略
}

これを見慣れた方法で書くとこうです。

<?php

wp_register_script( 'jquery', false, array( 'jquery-core', 'jquery-migrate' ), '1.12.4-wp' );
wp_register_script( 'jquery-core', '/wp-includes/js/jquery/jquery.js', array(), '1.12.4-wp' );
wp_register_script( 'jquery-migrate', "/wp-includes/js/jquery/jquery-migrate$suffix.js", array(), '1.4.1' );

パラメータは全く同じなのに、なんでちがう書き方があるの?って思いますよね?

WordPress Codex 日本語版

wp_register_script

WordPress.orgリファレンス

wp_register_script

$scriptsとは何か?

$scripts->add() ?

見たことない使い方なのは当然です。これはwp_register_script()の内部で使われているから。

(wp_register_script()は$scripts->add()のラッパー関数。)

$scriptsはスクリプトのレジスタとキューを管理するクラスオブジェクトで、レジスタ・キュー登録されたデータはすべてここで管理します。

スクリプトオブジェクト
WP_Scripts

もちろんこのオブジェクトを見ることもできます。

<?php

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

$handle = 'jquery';
$jquery_regist = var_export( $registered[ $handle ], true );
$jquery_queue = var_export( $queue[ $handle ], true );
$jquery_inline = var_export( $scripts->get_data( $handle, 'after' ), true );

WordPress.orgリファレンス

Class - WP_Scripts

Function - wp_scripts

WordPressはユーザーよりのシステムです。

CMS (Contents Management System)

Webサイトをプログラミングせずに構築するためのツールが用意されたフレームワーク。

Webでは、ページに表示するものをコンテンツと呼ぶことから来ている。

コンテンツをドラッグ&ドロップで配置してWebサイトを作っていく。

WordPressが有名。

ユーザーがカスタマイズしやすいようにザ・プログラミングのオブジェクト指向をなるべく見せません。

そのラッパーとして関数を用意しています。

(さすがに取得データのアクセスはオブジェクト指向になるが。)

jsファイルのパスがfalseはエイリアス

もうひとつ気になるのは、レジスタに登録するときにjsファイルのパスでfalseを指定しているところ。

<?php

$scripts->add( 'jquery', false, array( 'jquery-core', 'jquery-migrate' ), '1.12.4-wp' );

これはエイリアスです。

ハンドラのjqueryを指定したときは内部でjquery-core, jquery-migrateをワンセットにして見ているのと同じです。

jquery-migrateはjqueryのバージョン違いをなくすプラグインなので、jqueryはjQuery本体です。

jqueryはjQuery本体とmigrateをワンセットにしたハンドラ。

jquery-core, jquery-migrateを使ってはいけない。

ときどき、jquery-core, jquery-migrateハンドラを使う情報を目にしますが推奨しません。

jquery-coreを使うとmigrateが無視されるからです。

jquery-migrateを使うのもよくありません。migrateを使っていないとき無駄にHTMLの<style>で追加するからです。

(サイト表示スピードが遅くなるだけ。)

必ずjqueryハンドラを使いましょう。migrateがいらないなら、jqueryの依存からmigrateを外せばそれで済みます。

なぜjqueryエイリアスを用意したのか? 考えてみましょう。

(これを使えってこと。)

jQueryはキューに入っていない

WordPressのスクリプトは、キューに登録して使うのがふつうです。

WordPress Codex 日本語版

wp_enqueue_script

WordPress.orgリファレンス

wp_enqueue_script

でもjQueryはキューに入っていません。

jQueryを使うjsファイルをキューに入れて、HTML出力するときに行われる依存関係の自動挿入を利用しているからです。

<?php

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

このコードは、origin.jsをHTMLに出力する前にjquery本体とmigrateを出力します。

これでorigin.jsはjQueryが使えるようになっています。

(ついでにmigrateも使える。)

WordPress.orgリファレンス

Hook - wp_enqueue_scripts

jQueryがいらないとき消さなくていい

もし、WordPressでjQueryを使いたくないとき、レジスタから削除する処理を書きたくなりますが、

jqueryのレジスタ削除
<?php

add_action( 'wp_enqueue_scripts', function() {
    if ( is_admin() ) {
        return; // 管理画面はjQueryを使うので消さない
    }

    if ( ! wp_script_is( 'jquery', 'registered' ) ) {
        return; // jqueryがない
    }

    wp_deregister_script( 'jquery' );
    wp_deregister_script( 'jquery-core' );
    wp_deregister_script( 'jquery-migrate' );
} );

この処理はいらないです。搭載するjsファイルがjQueryに依存しないことを指定すれば自動的にjQueryはHTMLに出力されません。

(解除処理の分だけ時間がかかるし。)

ただし、使うプラグインやテーマのすべてのjsファイルがjqueryに依存しないことが必要です。

『キューに入れてない』だけでこんなことができるんですね?

やりおるな、WordPress。

WordPress.org Codex 日本語版

wp_deregister_script

wp_script_is

WordPress.orgリファレンス

Function - wp_deregister_script

Function - wp_script_js

前の投稿
WordPress js, CSSファイルのレジスタとエンキューのちがい
WordPressのjQueryからmigrateを外す方法
次の投稿

WordPressの本

post-cta-image

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

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

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

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

コメントを残す

*