WordPress: enqueueされているscriptとstyleの一覧を表示してみる

WordPressはキューにスクリプトやスタイルの情報を溜めておき、wp_head()またはwp_footer()でタグとして出力しています。
キューにはWordPressのシステムや、テーマやプラグインが独自に登録したものなど様々なものが登録されています。
その結果、何がなんだかわからない状態になっています。

そこでwp_enqueue_style関数またはwp_enqueue_script関数で登録されたscriptとstyleの一覧を表示してみます。

ソースコード

まずは一覧を表示するPHPコードを挙げておきます。
次のコードをfunction.phpや自作プラグインに記述してください。

function print_enqueue_script(){
global $wp_scripts;
$count = 1;
echo '**************enqueued script<br>';
foreach ( $wp_scripts->queue as $queue){
echo ($count ++).':' . text_from_dependency( $wp_scripts->registered[ $queue ] ) . '<br>';
}
}
function print_enqueue_style(){
global $wp_styles;
$count = 1;
echo '**************enqueued style<br>';
foreach ( $wp_styles->queue as $queue){
echo ($count ++).':' . text_from_dependency( $wp_styles->registered[ $queue ] ) . '<br>';
}
}
function text_from_dependency( $obj ){
$result = '';
foreach ( ['handle','src','deps','ver','args'] as $p ){
$result .= ($result !== '' ? ',' : '' )
.$p . ':'
. ( is_array( $obj->$p ) ? '[' . implode(",",$obj->$p) . ']' : $obj->$p);
}
if( isset($obj->extra[ 'group' ]) ){
$result .= ',group:' . $obj->extra[ 'group' ];
}
foreach ( ['before','after'] as $pos){
if( isset($obj->extra[ $pos ]) ){
$result .= '<div style="background:#f1f1f1;padding-left: 5px;">position:' . $pos .'<br>';
$result .= htmlspecialchars(implode($obj->extra[ $pos ]));
$result .= '</div>';
}
}
return $result;
}

AFFS Simple Code Viewer

Copy

次に、テンプレートの最後の方（</body>の直前）で、関数を呼び出します。

<?php
print_enqueue_script();
print_enqueue_style();
?>
</body>

AFFS Simple Code Viewer

Copy

print_enqueue_script()関数はスクリプトに、print_enqueue_style()関数はスタイルに対応しています。

解説

スクリプトはWP_Scriptsクラスのインスタンスである、$wp_scriptsで制御されています。
スタイルはWP_Stylesクラスのインスタンスである、$wp_stylesで制御されています。

WP_Dependenciesクラス

二つのクラスは共にWP_Dependenciesを親に持っていて、データの管理は親クラスで行われます。

登録した情報は、ハンドル名をキーとして、WP_Dependencies::registered配列に保存されます。
その値は、_WP_Dependencyクラスのインスタンスです。

$wp_scripts->registered[ ハンドル名=>_WP_Dependency ]

キューとしての役割を持つのは、WP_Dependencies::queue配列で、値としてハンドル名がセットされます。

$wp_scripts->queue[ ハンドル名 , ハンドル名 , ・・・ ]

_WP_Dependencyクラス

次の表は、今回必要な_WP_Dependencyクラスのプロパティの一覧です。

プロパティ名	内容
$handle	ハンドル名
$src	ソースへのパス
$deps	依存先ハンドル名リスト
$ver	バージョン
$args	スクリプト：フッター出力フラグスタイル：media属性
$extra	追加情報

最後の$extra以外は、各関数の引数がそのままセットされています。

$extraは連想配列です。
次の表は今回必要なキーです。

キー名	内容
'group'	0:wp_head()で出力 1:wp_footer()で出力
'after'	インラインコード
'before'	インラインコード

'group'は、タグをヘッダーに出力するかフッターに出力するかのフラグです。
'after'と'before'は、wp_add_inline_script関数とwp_add_inline_style関数の引数で指定されたインラインコードです。

みんなpublicなので簡単

ここまでに紹介した変数やプロパティは全てpublicです。

そのため、簡単にscriptとstyleの一覧表示できます。

PHPコード

実際にコードを作成してみます。

_WP_Dependencyの文字列化部分

情報が格納されている_WP_Dependencyを、文字列化します。

function text_from_dependency( $obj ){
$result = '';
foreach ( ['handle','src','deps','ver','args'] as $p ){
$result .= ($result !== '' ? ',' : '' )
.$p . ':'
. ( is_array( $obj->$p ) ? '[' . implode(",",$obj->$p) . ']' : $obj->$p);
}
if( isset($obj->extra[ 'group' ]) ){
$result .= ',group:' . $obj->extra[ 'group' ];
}
foreach ( ['before','after'] as $pos){
if( isset($obj->extra[ $pos ]) ){
$result .= '<div style="background:#f1f1f1;padding-left: 5px;">position:' . $pos .'<br>';
$result .= htmlspecialchars(implode($obj->extra[ $pos ]));
$result .= '</div>';
}
}
return $result;
}

AFFS Simple Code Viewer

Copy

キュー一覧を出力

キューの一覧を出力する関数です。

function print_enqueue_script(){
global $wp_scripts;
$count = 1;
echo '**************enqueued script<br>';
foreach ( $wp_scripts->queue as $queue){
echo ($count ++).':' . text_from_dependency( $wp_scripts->registered[ $queue ] ) . '<br>';
}
}
function print_enqueue_style(){
global $wp_styles;
$count = 1;
echo '**************enqueued style<br>';
foreach ( $wp_styles->queue as $queue){
echo ($count ++).':' . text_from_dependency( $wp_styles->registered[ $queue ] ) . '<br>';
}
}

AFFS Simple Code Viewer

Copy

キューはwp_headだけでなく、wp_footerアクションでも登録される可能性があります。
そのため、上の関数はwp_footer()の後で実行します。

<?php
print_enqueue_script();
print_enqueue_style();
?>
</body>

AFFS Simple Code Viewer

Copy

テンプレートを直接書き換えるのが難しい場合は、wp_footerアクションをフックするショートコードを作成して記事から呼び出します。

function list_enqueue_shortcode(){
add_action('wp_footer','list_enqueue',9999999);
}
function list_enqueue(){
print_enqueue_script();
print_enqueue_style();
}
add_shortcode('list_enqueue', 'list_enqueue_shortcode');

AFFS Simple Code Viewer

Copy

今回は次の記事で紹介しているindex.phpの最後で二つの関数を呼び出してみます。

WordPressテーマを自作【1】最小構成で有効化

また、WordPressにログインしていないブラウザでページを表示しています。
結果は、次のようになりました。
長いので一部省略しています。

**************enqueued script
**************enqueued style
1:handle:wp-block-library,src:/wp-includes/css/dist/block-library/style.min.css,deps:[],ver:,args:
2:handle:global-styles,src:,deps:[],ver:1,args:1
position:after
body{--wp--preset--color--black: #000000;/* 省略 */}

scriptが0で、styleが2つだとわかります。
出力されたhtmlのheadタグで、確認してみます。

<html lang="ja">
<head>
<meta name='robots' content='noindex, nofollow' />
<link rel='dns-prefetch' href='//s.w.org' />
<script type="text/javascript">
window._wpemojiSettings = {/* 省略 */};
/*! This file is auto-generated */
/* 省略 */
</script>
<style type="text/css">
img.wp-smiley,
img.emoji {
/* 省略 */
}
</style>
<link rel='stylesheet' id='wp-block-library-css' href='http://xxx.com/wp-includes/css/dist/block-library/style.min.css?ver=5.9' type='text/css' media='all' />>
<style id='global-styles-inline-css' type='text/css'>
body{--wp--preset--color--black: #000000;/* 省略 */}
</style>
<link rel="https://api.w.org/" href="http://localhost/wordpress/wp-json/" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://xxx.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://xxx.com/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 5.9" />
</head>

AFFS Simple Code Viewer

Copy

16～19行目がキューから出力されたタグです。

その他のタグは、別のルートで出力されていることも類推できますね。

登録済み一覧を出力

最後に、registered配列を直接参照してみます。
wp_register_script関数またはwp_register_style関数で登録しただけで、キューに入れていないものも確認することができます。

function print_register_script(){
global $wp_scripts;
$count = 1;
echo '**************registered script<br>';
foreach ( $wp_scripts->registered as $registered){
echo ($count ++).':' . text_from_dependency( $registered ) . '<br>';
}
}
function print_register_style(){
global $wp_styles;
$count = 1;
echo '**************enqueued style<br>';
foreach ( $wp_styles->registered as $registered){
echo ($count ++).':' . text_from_dependency( $registered ) . '<br>';
}
}

AFFS Simple Code Viewer

Copy

キュー一覧のときと同じように、二つの関数を実行してみます。

**************registered script
1:handle:utils,src:/wp-includes/js/utils.min.js,deps:[],ver:,args:
2:handle:common,src:/wp-admin/js/common.min.js,deps:[jquery,hoverIntent,utils,wp-i18n],ver:,args:1
3:handle:wp-sanitize,src:/wp-includes/js/wp-sanitize.min.js,deps:[],ver:,args:1
4:handle:sack,src:/wp-includes/js/tw-sack.min.js,deps:[],ver:1.6.1,args:1
・・・省略
219:handle:wp-wordcount,src:/wp-includes/js/dist/wordcount.min.js,deps:[lodash,wp-polyfill],ver:6a22341ec4203372b399ccf210f7cc7a,args:1
220:handle:wp-block-file-view,src:http://localhost/wordpress/wp-includes/blocks/file/view.min.js,deps:[],ver:e8d668b8e69d9bf1c99dc250d92f2b72,args:
221:handle:wp-block-navigation-view,src:http://localhost/wordpress/wp-includes/blocks/navigation/view.min.js,deps:[],ver:3776ea67846b3bb10fe8f7cdd486b0ba,args:
**************enqueued style
1:handle:colors,src:1,deps:[wp-admin,buttons],ver:,args:
2:handle:common,src:/wp-admin/css/common.min.css,deps:[],ver:,args:
3:handle:forms,src:/wp-admin/css/forms.min.css,deps:[],ver:,args:
・・・省略
63:handle:wp-edit-site,src:/wp-includes/css/dist/edit-site/style.min.css,deps:[wp-components,wp-block-editor,wp-edit-blocks],ver:,args:
64:handle:global-styles,src:,deps:[],ver:1,args:1
position:after
body{--wp--preset--color--black: #000000;/* 省略 */}

スクリプトが221個でスタイルが64個でした。
非常に多いですね。

■Googleで他サイト検索

■僕がおススメするアフィリエイト教材