【WordPress】特定ページのみ不要なプラグインのCSS・JavaScriptを無効化・除外する方法

• サイトを軽量化・高速化したい
• PageSpeed Insightsのスコアを上げたい

プラグインの入れすぎはサイトが重くなる原因

WordPressのプラグインをインストール・有効化すると、そのプラグインが使用するCSS・JavaScriptが適用されます。ですが、このCSS・JavaScriptがサイトの表示速度に影響を及ぼしています。

例えば「ContactForm 7」や「Invisible recapcha」といったプラグインはフォーム等が動作するページでは必要ですが、そのほかのページで読み込む必要がありません。そこで不要なページではこれらのCSS・JavaScriptを無効化・除外して読み込ませないようにすることで、サイトの表示高速化が見込めます。

プラグインが出力しているCSS・JavaScriptを確認する方法

まずは不要なCSS・JavaScriptを確認する方法をご紹介します。

「display_css_js_list」というショートコードを作成して、プラグインのCSSとJavaScriptのハンドル名の一覧を表示させます。
まずはfunctions.phpに下記をコピペします。

functions.php

/*CSS・JavaScript一覧表示*/
function plugin_css_js_list()
{
$plugin_list = '<p>CSS一覧</p><ul>';
$wp_styles = wp_styles();
foreach ($wp_styles->queue as $plugin_stlyle):
$plugin_list .= '<li>' . $plugin_stlyle . '</li>';
endforeach;
$plugin_list .= '</ul>';
$plugin_list .= '<p>JS一覧</p><ul>';
$wp_scripts = wp_scripts();
foreach ($wp_scripts->queue as $plugin_script):
$plugin_list .= '<li>' . $plugin_script . '</li>';
endforeach;
$plugin_list .= '</ul>';
return $plugin_list;
}
add_shortcode( 'display_css_js_list', 'plugin_css_js_list');

これで[display_css_js_list]というショートコードが使えるようになりました。

テンプレートファイルに表示したい場合は下記のように書きます。

front-page.php etc

<?php echo do_shortcode('[display_css_js_list]'); ?>

ショートコードを実行すると下記のようなハンドル名のリストが表示されます。こんな感じでプラグインが出力しているCSS・JavaScriptのハンドル名を確認することができました。

不要なCSS・JavaScriptを無効化・除外する方法

それでは実際にプラグインが出力してる不要なCSS・JavaScriptを無効化・除外してみましょう。

ここでは wp_dequeue_style とwp_dequeue_sｃriptという関数を使用します。

functions.php

function dequeue_plugins_css_js(){
　　//全体から除外
　　wp_dequeue_style('jetpack_css');
　　wp_dequeue_style('classic-theme-styles');
　　wp_dequeue_style('global-styles');
　　//投稿ページ以外から除外
　　if ( !is_single() ) {
　　　　wp_dequeue_style('amazonjs');
　　　　wp_dequeue_style('addtoany');
　　　　wp_dequeue_style('wp-mediaelement');
　　　　wp_dequeue_script('addtoany-core');
　　　　wp_dequeue_script('q2w3_fixed_widget');
　　　　wp_dequeue_script('toc-front');
　　}
　　//お問合せページ以外から除外
　　if ( !is_page('inquiry') ) {
　　　　wp_dequeue_style('contact-form-7');
　　　　wp_dequeue_script('contact-form-7');
　　}
}
add_action('wp_print_styles', 'dequeue_plugins_css_js');

上記の例のように各ページごとに分岐させて無効化・除外が可能です。

• 関数リファレンス/wp dequeue style – WordPress Codex 日本語版 
• 関数リファレンス/wp dequeue script – WordPress Codex 日本語版 
• 関数リファレンス/add action – WordPress Codex 日本語版 

• 【WordPress】重いYoutube埋め込み動画を高速化する方法 – WP YouTube Lyte【プラグイン】