【WordPress】不要なJSを読み込まないようにする
こんばんはTakeyemaです。
PageSpeed Insightsへの対応されていると思います。
ここでページの速度を調べると、まあ色々無理難題をふっかけてくるわけですが、
天下のGoogle様には逆らえない世の中です。
中でも「これどうにもならんやろ…」と匙を投げかけたのは
「使用していない JavaScript の削除」です。
WordPressを使用していると、ページによっては不要なJavaScriptを色々と読み込んでしまうわけですが、
読み込まないようにするには該当するプラグインを停止するとか、テーマを変えるとか
根本的に対応しなきゃならないので本末転倒になってしまうんですよ。
ページごとに使用するプラグインを変えられればいいのですが、
Wordpressはそのような仕様にはなっていません。
（可能にするプラグインとかあったらすいません。）
さてそこで便利な方法をご紹介します。
この方法だと、ページごとに読み込ませないJSを決められるので、
欲しい機能はそのままで、不要なスクリプトは読まないようにできます。
編集するのは「functions.php」です。
普通のインストールだったら
ドキュメントルート/wp-content/themes/[使用しているテーマ名]/functions.php
ですかね。
function dp_deregister_scripts() {
if ( is_page( '適用するページのスラッグ' ) ) {
wp_deregister_script( '解除するJSの識別名' );
}
}
add_action( 'wp_print_scripts', 'dp_deregister_scripts', 100 );
適用するページのスラッグは、Wordpressのコントロールパネルから、
該当するページの編集ページを開くと「スラッグ」という項目があります。
まあ大抵はページのURLになってるんじゃないかな。
解除するJSの識別名は
ファイル名が「hogehoge.js」だったら「hogehogejs」みたいな場合が多いですが
ちゃんと調べたいなら、以下のコードで一覧が出ますので、一つ一つ調べていく必要があります。
（大量のログが出ます。）
function twpp_detect_handle() {
global $wp_scripts;
var_dump( $wp_scripts );
// Output dump to log file
// error_log( var_export( $wp_scripts, true ) );
}
add_action( 'wp_enqueue_scripts', 'twpp_detect_handle' );関数wp_deregister_scriptは、該当するJavaScriptの登録がwp_register_scriptで行われている場合に有効です。
もう一つwp_dequeue_scriptという関数があり、こちらは登録がwp_enqueue_scriptで行われているJavaScriptに対して有効です。
一つ一つ調べていってもいいのですが、面倒なので自分はこうしちゃいます。
function dp_deregister_scripts() {
if ( is_page( '適用するページのスラッグ' ) ) {
wp_deregister_script( '解除するJSの識別名' );
wp_dequeue_script( '解除するJSの識別名' );
}
}
add_action( 'wp_print_scripts', 'dp_deregister_scripts', 100 );
ページスピードを早くしようというのに、コードを一行増やしちゃうのホントひで。
正しいエンジニアの皆さんはちゃんとしてくださいね。
複数のページに適用するなら配列を使って
function dp_deregister_scripts() {
if ( is_page( array( '適用するページ1のスラッグ','適用するページ2のスラッグ' ) ) ) {
wp_deregister_script( '解除するJSの識別名' );
wp_dequeue_script( '解除するJSの識別名' );
}
}
add_action( 'wp_print_scripts', 'dp_deregister_scripts', 100 );
ページによって削除するJSを変えるなら、if+elseif を使って
function dp_deregister_scripts() {
if ( is_page( '適用するページ1のスラッグ' ) ) {
wp_deregister_script( '解除するJS1の識別名' );
wp_dequeue_script( '解除するJS1の識別名' );
}
elseif ( is_page( '適用するページ3のスラッグ' ) ) {
wp_deregister_script( '解除するJS2の識別名' );
wp_dequeue_script( '解除するJS2の識別名' );
}
}
add_action( 'wp_print_scripts', 'dp_deregister_scripts', 100 );
同様に使用しないスタイルシートを読み込ませない事もできます。
使用する関数は、「wp_dequeue_style」「wp_deregister_style」。
function dp_deregister_styles() {
if ( is_page( array( '適用するページ1のスラッグ','適用するページ2のスラッグ' ) ) ) {
wp_dequeue_style( '解除するスタイルシートの識別名' );
wp_deregister_style( '解除するスタイルシートの識別名' );
}
}
add_action( 'wp_print_styles', 'dp_deregister_styles', 100 );
スタイルシートの識別名の調べ方をググっていたら、JSと併せて表示するコードを紹介されている方がいました。
ここで借用させてもらいます。
Plus WordPressさま
不都合があったらお手数ですがご連絡ください。
削除いたします。
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 "\n";
}
add_action( 'wp_print_styles', 'my_style_queues', 9999 );
function my_script_queues() {
global $wp_scripts;
echo "\n";
}
add_action( 'wp_print_scripts', 'my_script_queues', 9999 );
結果は、コメントアウトされてHTMLに出力されるので、閲覧者に影響も出ないので良いですね。
このようなやり方だと、手間は若干かかりますが、
個別のページごとに読み込ませるJS、CSSをコントロールできるので良いのではないでしょうか。
お付き合いありがとうございました。
では。
