プラグインによって挿入されるJavaScriptファイルの読み込みを削除する方法

WordPressのプラグインを有効化した際、そのプラグインに関連するJavaScript読み込みコードはwp_head()関数やwp_footer()関数の部分に自動的に挿入される。

一般的なWordPressテーマではwp_head()関数やwp_footer()関数はすべてのページに共通して存在するので、そのプラグインを使用していないページでも上記JavaScriptは読み込まれてしまうことになる。
これはページ表示速度を無駄に遅くしている原因となるので、関係ないページでは読み込ませないほうが良いでしょう。
もちろん私もこのサイトだけに限らず、制作するすべてのサイトで実施しています。やることが基本です。

プラグインによって自動的に挿入されるCSSファイルに関しては「プラグインによって挿入されるCSSファイルの読み込みを特定のページだけにする方法」のページで解説していますので、そちらを参考にしてください。

以下からの解説は私が開発したプラグイン「WordPress版レスポンシブ・メールフォーム」をサンプルにして解説していきますが、他のプラグインの場合でも同じやり方で通用します。

wp_footer()部分に自動挿入されるJavaScriptの読み込みコードの例

上記のプラグインを有効化するとwp_footer()関数部分に以下のコードが挿入されます。

<script type='text/javascript' src='https://www.1-firststep.com/wp-content/plugins/responsive-mailform/js/jquery.autoKana.js?ver=1.0.0'></script>
<script type='text/javascript' src='https://www.1-firststep.com/wp-content/plugins/responsive-mailform/js/ajaxzip3.js?ver=1.0.0'></script>
<script type='text/javascript' src='https://www.1-firststep.com/wp-content/plugins/responsive-mailform/js/jquery.datetimepicker.js?ver=1.0.0'></script>
<script type='text/javascript' src='https://www.1-firststep.com/wp-content/plugins/responsive-mailform/js/responsive-mailform.js?ver=1.0.0'></script>

合計4つのJavaScriptファイルを読み込んでいます。
各ファイルの役割については「WordPressプラグイン版のレスポンシブ・メールフォームで自動挿入されるコードの解説」のページをご覧ください。

JavaScriptファイルの読み込みを中止する関数

JavaScriptファイルの読み込みを中止するにはwp_dequeue_scriptを使います。
参考ページ:Function Reference/wp dequeue script « WordPress Codex

wp_dequeue_script( JavaScriptファイルのハンドル名 )

過去にはwp_print_scripts関数を使う手法もあったらしいのですが、WordPressのバージョン3.3から非推奨になったようです。
参考ページ:Plugin API/Action Reference/wp print scripts « WordPress Codex

CSSファイルの読み込みを削除する方法でも同じようにハンドル名を使いました。
その際にはid属性からハンドル名を特定できましたが、上記サンプルコードを見てわかるようにJavaScriptの読み込みコードにはid属性がありません。

でもハンドル名が存在していないわけではなく、きちんとそれぞれにハンドル名があります。
このプラグインは私が作ったものだから、私は当然知っています。
ただHTML上にid属性として出力されていないだけなのです。おそらくデフォルトでは出力されないのでしょう。

ついでに言いますと、このようにJavaScriptの読み込みをプラグイン側の指示によってさせる場合、wp_enqueue_script関数というものを使うのですが、この関数はハンドル名を記入しておくことが必須なので、他のプラグインで上記コードのようにHTML上に表示されていなくても必ずハンドル名が存在すると思います。

話を戻します。
上記コードによって読み込まれる4つのJavaScriptファイルのハンドル名はそれぞれ、

jquery.autoKana.jsのハンドル名
jquery.autoKana.js
ajaxzip3.jsのハンドル名
ajaxzip3.js
jquery.datetimepicker.jsのハンドル名
jquery.datetimepicker.js
responsive-mailform.jsのハンドル名
responsive-mailform.js

と、そのままの名前にしてあります。
ですから、これらのコードの読み込みを中止するにはfunction.php内で、

wp_dequeue_script( 'jquery.autoKana.js' );
wp_dequeue_script( 'ajaxzip3.js' );
wp_dequeue_script( 'jquery.datetimepicker.js' );
wp_dequeue_script( 'responsive-mailform.js' );

と書けばOKとなります。
実際にfunction.phpに書く際にはユーザー定義関数で包んでフックさせる必要があるので、以下のようになります。

function responsive_mailform_dequeue_style() {
  wp_dequeue_script( 'jquery.autoKana.js' );
  wp_dequeue_script( 'ajaxzip3.js' );
  wp_dequeue_script( 'jquery.datetimepicker.js' );
  wp_dequeue_script( 'responsive-mailform.js' );
}
add_action( 'wp_enqueue_scripts', 'responsive_mailform_dequeue_style' );

特定のページでのみJavaScriptファイルを読み込ませたい場合は、上記コードにis_single()is_page()のような条件分岐を追加すればOKです。
その具体的なコード例は「プラグインによって挿入されるCSSファイルの読み込みを特定のページだけにする方法」のページの一番最後にあります。

サポートBBS

サイト内を検索
サイト運用事例
提供サポート
メールフォーム

ダウンロード一覧へ

BBS

ダウンロード一覧へ

その他おすすめ

ダウンロード一覧へ

Web制作のブログ

ブログ記事一覧へ

カテゴリ別
制作者の詳細
  • 谷元博のブログ
  • Google+