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

WordPress 6.4.3
広告WordPress・PHP を学べる本

Amazonのアソシエイトとして、WordPress functions.phpは適格販売により収入を得ています。

概要説明

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

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

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

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

 

CSSハンドル名の調べ方

サンプルで指定している「wp-block-library」(ハンドル名)は、ページのソースの link タグの id から調べます。

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

id から「-css」を除いた文字列がハンドル名です。

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

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

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

 

JSハンドル名の調べ方

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

id から「-js」を除いた文字列がハンドル名です。

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

テーマのファイルなどに直接タグを書いていると、上の方法では読み込みを止められません。そのときは、タグを書いている所を直します。

1 行で止めるときのコード

下の 1 行のコードは、上の例と同じように、wp_enqueue_scripts に付けた関数の中に書きます(functions.php にそのまま書くと、読み込みの前に動いてしまいます)。

※ wp_deregister_script() は登録そのものを消すので、そのスクリプトを使っているほかのスクリプトも出なくなります。読み込ませないだけなら wp_dequeue_script() で十分です。

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

wp_deregister_script( 'wp-polyfill-inert' );

※ wp-polyfill が wp-polyfill-inert を使っているので、消すと wp-polyfill と、それを使うブロックやプラグインのスクリプトも出なくなります。画面の動きが変わらないかを確認してから使ってください。

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' );

※ 管理バー(admin-bar)が hoverintent-js を使っているので、ログイン中は管理バーのメニューが開かなくなります。ログインしていない人のときだけ止めるなら、if ( ! is_user_logged_in() ) の中に書きます。

dashicons.min.css の無効化

WordPress Developer Resources

SiteBeacon(サイトビーコン)

サイトが止まったら、すぐに気づける。

ホームページを 5 分ごとにチェックして、止まったとき・エラーが出たとき・SSL やドメインの期限が近いときに、メールでお知らせします。2 サイトまでは、ずっと無料で使えます。

SiteBeacon を見る サイトを直す相談をする

監視で気づいたあとの直す作業も、同じ担当がお受けします。