このサイトはアフィリエイト広告(Amazonアソシエイト含む)を掲載しています

そのページでは使っていないjQueryプラグインでエラーを出さないように。jQueryプラグイン存在判定の方法

フロントエンドは開発方法の発展のスピードがすさまじくjavascriptもそのまま書かずwebpackなどのツールを使用することが増えてきました。
jQueryに関しては脱jQueryが段々広まっているように見えますが案件によってはまだまだjQueryのお力を借りなければいけません。それはライブラリが豊富でスピーディーに開発できるからです。

WordPressのテーマを作成する際javascriptは共通フッターで呼び出し、どのページを読み込んでも同じjsが呼び出される処理を書いているものも多くあります。

しかし特定のページでまったく使用しないのにライブラリの外部ファイルを呼び出すのはとてもパフォーマンスに悪影響な気がしてなりません。

そこで外部ライブラリを呼び出している部分をheadタグ内から削除します。これで1つ呼び出しがなくなりすっきりすると思いきや開発ツールでエラー表示が……。

内容を読んでみるとwp_foot()で呼び出している共通javascriptファイル内でさきほど消した外部ライブラリを呼び出してるとのことでした。

私は外部ライブラリをwp_head()で吐き出されるように、共通javascript(自作)をwp_footer()で呼び出すようにしているためこのような事態に陥ってしまいました。

このような時はどうすれば良いでしょうか?javascript内でプラグインを読み込んでいるか判定してからプラグインを呼び出すようにjavascriptコードを変えてあげればよいのです。

▼プラグインを読み込んでいるか判定してからプラグインを呼び出すコード

<script>
$(function) {
  if (typeof $.fn.対象プラグイン名 !== 'undefined') {
    // 対象プラグイン呼び出し部分
  }

  // もしくは……
  if ($.fn.対象プラグイン名) {
    // 対象プラグイン呼び出し部分
  }
}
</script>

↑このように書くことによって外部プラグインを読み込んでいない場合でもエラーは表示されません。