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. 出力ソースの絶対パスを相対パスに一括で書き換える

  2. WordPress ショートリンク shortlink 短縮URLをソース内から削除する

  3. WordPress 特定のページでプラグインの有効・無効の制御ができるプラグイン Plugin Load Filter

サイドバー

よく使うカスタマイズ

最近の記事

アニメの名言集

正しい戦争なんてあるもんか

機動戦士ガンダムUC
by バナージ・リンクス

Profile

PAGE TOP
Amazon プライム対象