wordpressでクリッカブルマップをレスポンシブ対応させる為の.jsファイルの読み込みについて

Question

wordpress内でクリッカブルマップをレスポンシブ対応させるjQueryを使用しようとしていますが、.jsファイルが読み込まれません。

使っているjQueryは下記サイトを参照しています。
http://ozpa-h4.com/2015/10/29/jquery-rwd-image-maps/

もともとjqueryが読み込まれていると思い
投稿ページの</map>直下にファイルの読み込みと命令を書いています。
読み込み時のsrcを絶対パスに変えてみたりしたのですが２行目でコンソール結果が404エラーになります。

使っているテーマはletoです。

２日ばかり悪戦苦闘しており、もう無理です。ご教授頂けましたら幸いです。

1</map>
2<script type="text/javascript" src="jquery.rwdImageMaps.min.js"></script>
3<script>
4$(document).ready(function(e) {
5$('img[usemap]').rwdImageMaps();
6});
7</script>
8</body>

Answer 1

WordPressは初期状態では$がjQueryのエイリアスとして定義されていないので、

jQuery(function() {
  jQuery('img[usemap]').rwdImageMaps();
});

もしくは

(function($) {
  $(function() {
    $('img[usemap]').rwdImageMaps();
  });
})(jQuery)

のようにする必要があります。

追記（2019-04-19 11:57）

jQuery は初期状態で読み込まれるようになっているので、 wp_enqueue_script('jquery',...) は不要です。
またjquery.rwdImageMaps.min.jsのURLが正しくないので、
functions.phpに

function theme_enqueue_scripts() {
	wp_enqueue_script('jquery-rwdImageMaps', 'https://cdn.jsdelivr.net/gh/stowball/jQuery-rwdImageMaps/jquery.rwdImageMaps.min.js', ['jquery'], '1.6');
}

add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' );

のように記述し、

<script type="text/javascript" src="jquery.rwdImageMaps.min.js"></script>
```
を削除してください。
jsDelivrというCDNサービスからjquery.rwdImageMaps.min.jsを読み込んでくれるようになります。

Comments

[ai_123]

ご教授ありがとうございます。

function.phpの最下部に下記を記述しました。
wp_enqueue_script('jquery');

投稿ページの</map>直下に下記を記述しました。
<script type="text/javascript" src="jquery.rwdImageMaps.min.js"></script>
<script>
jQuery(function() {
jQuery('img[usemap]').rwdImageMaps();
});
</script>

ですが、実行してみると上手く動作しません。
デベロッパーツールで確認すると、下記のエラーが表示されます。
(index):326 GET https://サイト名/投稿ページタイトル/jquery.rwdImageMaps.min.js net::ERR_ABORTED 404

jquery.rwdImageMaps.min.jsの読み込みがされてないと思うのですが、、- -;

[yhg]

回答に追記しました

[ai_123]

度々、ご回答していただきありがとうございます。

ご教授していただいた通りにCDNサービスから読み込んでみました。
結果、コンソールでのエラーが無くなり、rwdImageMaps.min.jsファイルの読み込みに成功しました。
しかし、ブラウザ上で、これまでずれて表示されていたクリッカブルマップのリンク範囲が消えました。

https://www.1000wave.net/2883
上記サイトを参考に<image>タグ内の heightとwidthの指定を削除したらクリッカブルマップがレスポンシブ対応で表示される様になりました！

ご回答ありがとうございました！フォローさせて頂きます！