WordPressがjQueryを挿入するしくみを説明します。スクリプトのキューに登録していないのに出力されるのがポイントです。
WordPressでは、HTMLの<style>にjsファイルを追加するのにwp_enqueue_scripts()を使います。
でもWordPressに搭載されているjQueryはちょっとちがいます。キューに登録していないのにHTMLには追加されます。
『なんで?』という話です。
WordPressが搭載するjQuery
WordPressのjqueryは3つのハンドラで構成されています。
ハンドラ | jQueryの種類 |
---|---|
jquery-core | jQuery本体 |
jquery-migrate | jQueryのバージョン違いを補足するプラグイン。 下位互換のないコードは復元してくれる。 |
jquery | jquery-core, jquery-migrateのエイリアス |
(そのほかjquery-ui関連の多数の付属プラグインもある。)
jQueryを追加しているコード
WordPressでjQueryを追加しているところは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' );
パラメータは全く同じなのに、なんでちがう書き方があるの?って思いますよね?
$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はユーザーよりのシステムです。
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のスクリプトは、キューに登録して使うのがふつうです。
でも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リファレンス
jQueryがいらないとき消さなくていい
もし、WordPressで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。