【WordPress】プラグインのCSSやJavaScriptを削除する方法【サイト高速化】
更新日：
ルナリス
今回はWordPressのプラグインで読み込まれるCSSやJSを削除する方法を解説するわ
どうして削除するの？
ソルト
ルナリス
共通のCSSにコピペしてデータを圧縮したり、自分でCSSやJSを設定したい時に削除するといいわ
なるへそ！
ソルト
もくじ
目的
プラグインのCSSやJavaScriptを削除することによって、無駄な読み込みを減らすことができ、Webサイトの表示速度を改善をすることができます。
また、自分オリジナルのCSS、JavaScriptを設定することも可能となります。
明確な目的がない場合は削除はしない方がよいため、必要だと感じた方のみ試して下さい。
CSSの削除
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の削除
基本的には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サイト構築の知識がある方だと思いますので、右も左も分からないという方は細心の注意を払って作業して下さい。
ルナリス
このサイト、表示早いと思わないかしら？(自画自賛)
コメント一覧