プラグインで追加されるJavaScriptやCSSのハンドル名を調べる方法

前回までの記事でプラグインで追加されたCSSファイルやJavaScriptのファイルを一度削除してフッターで出力するようにしました。

これによって「PageSpeed Insights」で指摘されていた「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」という項目に対処しました。

プラグインで追加されるCSSファイルやJavaScriptのファイルを出力しないようにするにはそれぞれの「ハンドル名」を調べる必要があります。

CSSファイルの場合はページのソースをみれば大体「id=〇〇-css」という風に書いてあってこの「〇〇」の部分が「ハンドル名」という場合が多いですが、JavaScriptの場合にidが書かれていない物がありましたのでそれを調べる方法を紹介します。

JavaScriptやCSSのハンドル名を表示させる

色々検索したのですが、具体的な方法が中々見つかりませんでした。ようやく目的の記事を発見する事ができました。ありがとうございます！！

GradeAの先行くWordPress高速化 ? 必ず結果の出る実践的HTTPリクエスト削減法 | ゆっくりと…

まずはfunctions.phpに記述をしますので子テーマのfunctions.phpを作成しておきます。既にある場合は必要ありません。

初めて「functions.php」を追加する場合には他の子テーマのように親テーマの記述をコピーするのではなく、白紙で作成しておきます。

つまり、ファイル名だけ書いて保存すればOKです。親テーマと同じ記述をするとブログが表示されない状態になります。まあ、記述をミスってもFTPからこのファイルを元に戻せばOKですので心配は無用です。

ここまでできたらWordPressに戻り、「外観」⇒「テーマの編集（エディタ）」と進み、先ほど作成した「functions.php」を開きます。

functions.phpでは最初と最後に次の記述をしておき、この中に全ての処理を書いていきます。

<?php

//ここに処理を記述していきます

?>

それでfunctions.phpに次の記述をします。これは調べた後で削除しても構いません。私の場合は子テーマのfunctions.phpに記述しております。

//---------------------------------------------------------------------------
// WordPressのJavascriptやCSSのハンドル名をHTMLソースに表示する
//---------------------------------------------------------------------------
function my_get_dependency( $dependency ) {
    $dep = "";
    if ( is_a( $dependency, "_WP_Dependency" ) ) {
        $dep .= "$dependency->handle";
        $dep .= " [" . implode( " ", $dependency->deps ) . "]";
        $dep .= " '$dependency->src'";
        $dep .= " '$dependency->ver'";
        $dep .= " '$dependency->args'";
        $dep .= " (" . implode( " ", $dependency->extra ) . ")";
    }
    return "$dep\n";
}
 
function my_style_queues() {
    global $wp_styles;
    echo "<!-- WP_Dependencies for styles\n";
    foreach ( $wp_styles->queue as $val ) {
        echo my_get_dependency( $wp_styles->registered[ $val ] );
    }
    echo "-->\n";
}
add_action( 'wp_print_styles', 'my_style_queues', 9999 );
 
function my_script_queues() {
    global $wp_scripts;
    echo "<!-- WP_Dependencies for scripts\n";
    foreach ( $wp_scripts->queue as $val ) {
        echo my_get_dependency( $wp_scripts->registered[ $val ] );
    }
    echo "-->\n";
}
add_action( 'wp_print_scripts', 'my_script_queues', 9999 );

これで一度保存して自分のブログを表示させます。表示させたら何も無いところで「右クリック」⇒「ページのソースを表示」をクリック。

ソースを見て行くと途中でCSSファイルやJavaScriptファイルの「ハンドル名 [依存するハンドル名] ‘パス’ ‘バージョン’ ‘属性’ (付加情報…)」が表示されている！！凄い！！

「WP_Dependencies for styles」というのがスタイルシート(CSS)で「WP_Dependencies for scripts」という部分がスクリプトです。

前回も解説しましたが、プラグインで追加されたCSSファイルやJavaScriptファイルの出力を解除するにはハンドル名が必要です。

「wp_dequeue_style( ‘ハンドル名’ );」や「 wp_deregister_script(‘ハンドル名’)」でしたよね。

ここで表示される情報を例にみてみましょう。例えばTwentyTwelveで出力されている「twentytwelve-navigation.js」。これはスマートフォンで表示されるあの「メニューボタン」の機能です。

twentytwelve-navigation [jquery] 'http://dokidome.com/wp-content/themes/twentytwelve/js/navigation.js' '20140711' '' (1)

と表示されています。

つまり「ハンドル名（$handle）」は「twentytwelve-navigation」でその横に「Javascriptの依存性（$deps）」が[jquery]とかかれています。という事はこのjsを機能させるにはjquery本体が必要という事です。しかもパスやバージョンまで表示されています。

これだけ情報があればプラグインで追加されたCSSファイルやJavascriptファイルの削除もスムーズに行きそうです。
⇒WordPress高速化まとめページ