WordPressプラグインによって読み込まれるCSSやJavaScriptをヘッダーから削除する方法

WordPressにプラグインをインストールすると、プラグインによっては独自のCSSやJavaScriptを読み込むものがあります。プラグインによって読み込まれるCSSやJavaScriptが必要ないという場合、ヘッダーから読み込み自体を削除した方がサイトの表示時間短縮にも繋がります。

そこで、プラグインによって読み込まれるCSSやJavaScriptをヘッダーから削除する方法をご紹介したいと思います。

プラグインによって読み込まれるCSSやJavaScriptをヘッダーから削除する方法

CSSの読み込み停止

今回はContact Form 7を例に紹介したいと思います。適用しているテーマのfunctions.phpに以下を記述することで、CSSの読み込みを停止することができます。

add_action( 'wp_print_styles', 'del_style', 100 );
function del_style() {
    wp_deregister_style( 'contact-form-7' );
}

トップページだけで停止したいという場合は、以下のように条件分岐を追加します。

add_action( 'wp_print_styles', 'del_style', 100 );
function del_style() {
  if (is_front_page()) {
    wp_deregister_style( 'contact-form-7' );
  }
}

上記はContact Form 7を例にしましたが、他のプラグインの場合「contact-form-7」の部分を停止したいプラグインのディレクトリ名に変更すればOKです。ディレクトリ名は/wp-content/plugins内を見ると確認できます。

JavaScriptの読み込み停止

JavaScriptの読み込みを停止するには、functions.phpに以下を記述します。

add_action( 'wp_print_scripts', 'del_script', 100 );
function del_script() {
    wp_deregister_script( 'contact-form-7' );
}

トップページだけで停止する場合は、以下のように条件分岐を追加します。

add_action( 'wp_print_scripts', 'del_script', 100 );
function del_script() {
  if (is_front_page()) {
    wp_deregister_script( 'contact-form-7' );
  }
}

CSSの時と同様に、他のプラグインで実施する場合は「contact-form-7」の部分を停止したいプラグインのディレクトリ名に変更します。

あとがき

プラグインによってはJavaScriptを停止すると動かなくなるものもあると思いますので、条件分岐をつけて必要なページだけで読み込むようにするのがおすすめです。

ちなみに、Contact Form 7の場合、以下の方法でもCSSやJavaScriptの読み込みを停止できます。

function wpcf7_file_control(){
 add_filter("wpcf7_load_js", "__return_false");
 add_filter("wpcf7_load_css", "__return_false");
 
 if( is_page("contact") ){
 if( function_exists("wpcf7_enqueue_scripts") ) wpcf7_enqueue_scripts();
 if( function_exists("wpcf7_enqueue_styles") ) wpcf7_enqueue_styles();
 }
}
add_action("template_redirect", "wpcf7_file_control");

上記をfunctions.phpに記述すると、contactというスラッグのページのみContact Form 7のCSSとJavaScriptが読み込まれるようになります。