WordPressで特定のCSS や JS を読み込ませないようにする

概要説明

特定のページでしか使用しないJSや標準またはプラグインで読み込んでいるCSSを使わない場合に読み込ませないようにするためのカスタマイズ。パフォーマンスチューニングで使うことが多いテクニックです。

/wp-includes/css/dist/block-library/style.min.css を読み込ませないようにする場合

functions.php
/*----------------------------------------------------
 特定のCSSを読み込ませないようにする
----------------------------------------------------*/
if ( !function_exists( 'my_equeue_plugins_style' ) ){
    function my_equeue_plugins_style() {
        wp_dequeue_style( 'wp-block-library' );
    }
    add_action( 'wp_enqueue_scripts', 'my_equeue_plugins_style', 100 );
}

 

CSSハンドル名の調べ方

サンプルで指定している「wp-block-library」の部分の調べ方は

<link rel='stylesheet' id='wp-block-library-css' href='...' />

idの-cssを削除した文字列がバンドル名です

JSを読み込ませないようにする

/js/slick.min.jsを読み込ませないようにする場合

functions.php
/*----------------------------------------------------
 特定のJSを読み込ませないようにする
----------------------------------------------------*/
if ( !function_exists( 'my_equeue_plugins_scripts' ) ){
    function my_equeue_plugins_scripts() {
        wp_deregister_script( 'slick-script' );
    }
    add_action( 'wp_enqueue_scripts', 'my_equeue_plugins_scripts', 100 );
}

 

JSハンドル名の調べ方

<script type="text/javascript" id="slick-script-js" src="..." ></script>

idの-jsを削除した文字列がバンドル名です

設定しても非表示にならない場合

ソースに直接タグを書いていると上記方法では非表示にできないためその時はソース上の記述を見直しましょう

wp-polyfill-inert.min.js の無効化

wp_deregister_script( 'wp-polyfill-inert' );

enlighterjs.min.css,enlighterjs.min.js の無効化

wp_deregister_script( 'enlighterjs' );
wp_dequeue_style( 'enlighterjs' );

comment-reply.min.js の無効化

wp_deregister_script( 'comment-reply' );

hoverintent-js.min.js の無効化

wp_deregister_script( 'hoverintent-js' );

dashicons.min.css の無効化

WordPress Developer Resources

関連機能

  1. WordPress dashicons.min.cssファイルの読み込みをログイン時だけにする ( WordPress公式アイコン )

  2. WordPress 特定の固定ページだけreCAPTCHAを有効にする ( Contact Form 7使用 )

  3. WordPressの自動更新処理を全停止させる

サイドバー

よく使うカスタマイズ

最近の記事

アニメの名言集

あまり強い言葉を使うなよ
弱く見えるぞ

BLEACH
by 藍染惣右介

Profile

PAGE TOP
Amazon プライム対象