プラグインで追加される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ですので心配は無用です。

js-6

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

js-7

js-8

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

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

cssopt-2

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

js-opt-3

js-opt-4

「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高速化まとめページ

サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。