WordPressテーマSANGOの質問

jQueryの使い方

アバター
kodama

クリッカブルマップを作成中でして、jquery.rwdImageMaps.min.js(jQuery RWD Image Mapsというライブラリの中のファイル)を子テーマ内に作成したjsフォルダに格納し(script.jsと同じフォルダ内)、表示させたい記事にクリッカブルマップのコード(HTML Imagemap Generatorで生成)を記述し、その下にネットで拾った以下コードを記述しているのですがうまく動きません(レスポンシブに対応せず、画像とクリック位置がずれる)。

$(document).ready(function(e) {
$(‘img[usemap]’).rwdImageMaps();
});

原因として、jQueryの読み込みがうまく言っていないのかなと思うのですが、そもそもwordpressやテーマの構造の中でのjQuery自体の位置付けや概念がぼんやりしており、、、

「ちなみにjQueryは初期設定からヘッダーで読み込み済みです。」

とありますが、この点がいまいちわかっていません。パスはheader.phpを指定するべきなのでしょうか?(の1行目)
とてもトンチンカンな質問っぽいですが、わからないことが分からない状態に陥っております。お手数ですが教えて頂ければ幸いです。

カスタマイズでJavaScriptを利用する方法
コメントへの回答
サルワカくん
サルワカくん
2019/03/02

SANGOではjQuery本体をheadタグ内で読み込んでいます。
使用したいjQueryライブラリがある場合は、jQuery本体の後にそのファイルを読み込むようにする必要があります。

jQuery本体より後に読み込まれていれば、jQueryライブラリの読み込み場所はどこでも構いません。
(パフォーマンスの観点からフッターで読み込むのが良いでしょう)

SANGOのソースコードを見てみると以下のようなコードが見つかると思います。

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>

こちらより後にライブラリを読むこみ、実行コードを記述する必要があります。

うまくいかない場合「ご自身でブラウザのDevツールからconsoleを開き、エラーが出ていないか確認する」ということが必要になります。
よく分からない場合は、今回のようなカスタマイズは推奨しません。
(例えば、クリッカブルマップを使わないページにまでjQueryライブラリのコードが読み込まれてパフォーマンスが落ちる、などの問題が起きたりします。)