「wp_dequeue_script」でjsの読み込みを解除できなかった時の対処法【ページスピード対策】

2023年10月27日
コラム
WordPress

コラム

1 はじめに
2 wp_dequeue_script関数の使い方
- 2.1 お問い合わせページ以外に読み込ませないソースコード例
3 「wp_dequeue_script」で読み込みを解除できなかった場合
4 対処法「wp_deresister_script」関数を使用する
- 4.1 トップページからEasy FancyBox関連ファイルの読み込みを解除するソースコード例
5 他のページスピード関連の記事

はじめに

ページスピード対策の作業をしていると、そのページに不要なcssやjs関連のファイルを読み込まないようにしたいと思います。

例えば、「ContactForm7」のcssやjs関連のファイル類ははお問い合わせページ以外では読み込み不要な代表的な例です。ContactForm7関連のファイルを必要なページ以外で読み込まないためのソースコードは下記記事で紹介しています。

cf7関連ファイル読み込ませない

ContactForm7関連のファイルをContactForm7があるページ以外で読み込まなくするためのソースコードを紹介しています。ページスピード対策になります。

不要なcssやjsを読み込まないようにするために「wp_dequeue_script」関数を使用しますが、この関数が効く時と効かない時があるので効かなかった時に対処した方法をご紹介します。

この記事でわかること
wp_dequeue_script関数を使用して不要なcssやjs関連のファイルを読み込まないようにする方法
wp_dequeue_script関数が効かなかった時の対処法

wp_dequeue_script関数の使い方

上記で紹介している記事に具体的な方法は書いたのですが、

例えば、下記ContactForm7のjsをお問い合わせページ以外に読み込ませたくない場合

<script type="text/javascript" src="https://ドメイン/wp-content/plugins/contact-form-7/includes/js/index.js?ver=5.8.1" id="contact-form-7-js"></script>

お問い合わせページ以外に読み込ませないソースコード例

function cf7_dequeue_scripts() {
    if (!is_page('contact')) {
        wp_dequeue_script('contact-form-7');
    }
}
add_action('wp_enqueue_scripts', 'cf7_dequeue_scripts', 99);

wp_dequeue_script関数の引数に指定するのは読み込ませないファイルのハンドル名です。

id属性の「-js」や「-css」を抜いた部分のこと。
上記ソースコードのid属性は「contact-form-7-js」となっているので、ハンドル名は「contact-form-7」となる。

上記ソースコードをfunctions.phpに追加すると、お問い合わせ以外でソースコードを読み込まなくなっているはずです。

なお、cssの読み込ませないようにしたい場合は、「wp_dequeue_style」関数を使用してください。

「wp_dequeue_script」で読み込みを解除できなかった場合

「Easy FancyBox」というプラグインのjsファイルが「wp_dequeue_script」で読み込みを解除することができませんでした。

「Easy FancyBox」プラグインはモーダルスライダーを実装するためのプラグインです。

WordPress.org 日本語

Firelight Lightbox

Formerly Easy Fancybox. The most popular WordPress lightbox …

対処法「wp_deresister_script」関数を使用する

今回のパターンでは「wp_dequeue_script」関数ではなくて「wp_deresister_script」関数を使用することで読み込みを解除することができました。

使用方法は「wp_dequeue_script」関数と同じで、引数にハンドル名を使用してください。

トップページからEasy FancyBox関連ファイルの読み込みを解除するソースコード例

function fancybox_dequeue_scripts {
  if (is_front_page()) {
    wp_deregister_style('fancybox');
    wp_deregister_script('jquery-fancybox');
    wp_deregister_script('jquery-easing');
  }
}
add_action('wp_enqueue_scripts', 'fancybox_dequeue_scripts', 99);