【WordPress】プラグインで読み込まれるCSSやJavaScriptを削除する方法【サイト高速化】

更新日:

今回はWordPressの各プラグインによって自動的に追加されるCSSやJavaScriptを読み込まなく設定する方法を解説します。これによって無駄な読み込みを減らすことができ、Webサイトの表示速度を改善するなどの効果を得ることができます。
 

※注意点※
この記事ではWordPressのテーマのソースコードを編集します。
WordPressの知識が無い方は下手に触って壊さないように注意しましょう。

 

 

CSSの削除

テーマファイル内の「functions.php」を編集します。※このファイルを編集することでWordPressを壊す恐れがあるので注意して作業しましょう。
 

cssを削除する例

 
functions.phpの一番下に以下のソースコードを追加します。
(今回はContact Form 7のCSSを削除する例です)

/* プラグインCSSの削除 */
function cut_plugin_css() {
	//Contact Form 7
	wp_deregister_style( 'contact-form-7' );
}
add_action( 'wp_enqueue_scripts', 'cut_plugin_css', 100 );

 
解説しますと、
wp_deregister_style」にて「contact-form-7のスタイルシート」の読み込みを解除するといった記述をしています。
 

 

cssを複数削除する例

 
先程のソースに追加していきます。今回は例として「a3 Lazy Load」を追加しました。

/* プラグインCSSの削除 */
function cut_plugin_css() {
	//Contact Form 7
	wp_deregister_style( 'contact-form-7' );
	//a3 Lazy Load
	wp_deregister_style( 'a3a3_lazy_load' );
}
add_action( 'wp_enqueue_scripts', 'cut_plugin_css', 100 );

 

 

各プラグインの記述方法

他のプラグインはどう記述すれば良いかを説明していきます。

/* プラグインCSSの削除 */
function cut_plugin_css() {
	//任意のcss
	wp_deregister_style( 'xxx' );
}
add_action( 'wp_enqueue_scripts', 'cut_plugin_css', 100 );

 
wp_deregister_style( ‘xxx’ );」の「xxx」にそれぞれ対応したものを記述します。

 
その調べ方ですが、対象のホームページにて「右クリック→ページのソースを表示する」を選択してソースを表示させます。

Ctrl + F」のページ内検索で「stylesheet」等で検索して以下のような削除したいcssファイルを探します。(例としてcontact-form-7のスタイルシート)

 

<link rel="stylesheet" id="contact-form-7-css" href="(サイトのURL)/wp-content/plugins/contact-form-7/includes/css/styles.css" type="text/css" media="all">

 
上記のような記述を見つけましたらidの部分に着目します。「id=”contact-form-7-css”

idの「-css」より前の記述を使用します。(今回はcontact-form-7)
プログラムの「wp_deregister_style( ‘xxx’ ); 」の「xxx」に調べたid部分を貼ります。

/* プラグインCSSの削除 */
function cut_plugin_css() {
	//任意のcss
	wp_deregister_style( 'xxx' );
	//Contact Form 7
	wp_deregister_style( 'contact-form-7' );
}
add_action( 'wp_enqueue_scripts', 'cut_plugin_css', 100 );

 
このように削除したいCSSを探して「wp_deregister_style」を記述していきましょう。
 

 

JavaScriptの削除

JavaScriptはプラグインの動作に関わることを記述している恐れがあるため、よく内容を理解した上で削除しましょう。

 
基本的にはCSSの削除作業と同じため、CSSの解説を参考にしてください。
functions.php」に記述するプログラムが少し違う程度です。

 
(Contact Form 7のJavaScriptを削除する例)

/* プラグインjsの削除 */
function cut_plugin_js() 
  //Contact Form 7
  wp_deregister_script( 'contact-form-7' );
}
add_action( 'wp_print_scripts', 'cut_plugin_js', 100 );

 

 

ページを指定してCSS・JavaScriptを削除(応用)

条件分岐(IF文)を使用することでCSSやJavaScriptの削除をページの種類によって指定することができます。
ここではいくつか例を挙げます。
 

 

TOPページのみプラグインCSSを削除する例

/* プラグインCSSの削除 */
function cut_plugin_css() {
	//Contact Form 7
	//TOPのみ削除
	if ( is_home() || is_front_page() ){
		wp_deregister_style( 'contact-form-7' );
	}
}
add_action( 'wp_enqueue_scripts', 'cut_plugin_css', 100 );

 

 

特定のIDのページ以外削除

 
(例としてID21番以外を指定)

/* プラグインCSSの削除 */
function cut_plugin_css() {
	//Contact Form 7
	//ID21番以外のページから削除
	if ( !is_single('21') ){
		wp_deregister_style( 'contact-form-7' );
	}
}
add_action( 'wp_enqueue_scripts', 'cut_plugin_css', 100 );

 
WordPress管理画面から指定したい記事の投稿画面にアクセスし、URLの「?post=」の後に書かれた数字がIDとなります。

 

その他の条件分岐

 
Google先生に聞いて下さい!
検索ワード「wordpress 条件分岐 ページ」
 

 

まとめ

今回はプラグインで読み込まれるCSSやJavaScriptの読み込みを削除する方法を解説しました。これを実行したいという方はある程度Webサイト構築の知識がある方だと思いますので、本当に右も左も分からないという方はサイトを壊しかねない作業のため細心の注意を払って作業して下さい。