WordPressのプラグインを有効化した際、そのプラグインに関連するJavaScript読み込みコードはwp_head()関数やwp_footer()関数の部分に自動的に挿入される。
一般的なWordPressテーマではwp_head()関数やwp_footer()関数はすべてのページに共通して存在するので、そのプラグインを使用していないページでも上記JavaScriptは読み込まれてしまうことになる。
これはページ表示速度を無駄に遅くしている原因となるので、関係ないページでは読み込ませないほうが良いでしょう。
もちろん私もこのサイトだけに限らず、制作するすべてのサイトで実施しています。やることが基本です。
プラグインによって自動的に挿入されるCSSファイルに関しては「プラグインによって挿入されるCSSファイルの読み込みを特定のページだけにする方法」のページで解説していますので、そちらを参考にしてください。
以下からの解説は私が開発したプラグイン「WordPress版レスポンシブ・メールフォーム」をサンプルにして解説していきますが、他のプラグインの場合でも同じやり方で通用します。
wp_footer()部分に自動挿入されるJavaScriptの読み込みコードの例
上記のプラグインを有効化するとwp_footer()関数部分に以下のコードが挿入されます。
<script src='https://www.1-firststep.com/wp-content/plugins/responsive-mailform/js/jquery.autoKana.js?ver=1.0.0'></script>
<script src='https://www.1-firststep.com/wp-content/plugins/responsive-mailform/js/ajaxzip3.js?ver=1.0.0'></script>
<script src='https://www.1-firststep.com/wp-content/plugins/responsive-mailform/js/jquery.datetimepicker.js?ver=1.0.0'></script>
<script 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ファイルの読み込みを特定のページだけにする方法」のページの一番最後にあります。
Twitterでフォローする
