質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

受付中

WordpressにてjQueryファイルを利用したが正常に動かない

keiino0425
keiino0425

総合スコア2

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1回答

0グッド

0クリップ

142閲覧

投稿2022/12/03 09:00

前提

WordPressにてサイトを運営しています。

日本地図を表示し、任意の都道府県をクリックしたら指定したページに飛ぶようなものが欲しいと思い、Japan Map jQueryを使用しています。
https://boonboonblog.com/entries/entry-17574.html
こちらのサイトを参考に導入しました。

ですが、日本地図は表示されるものの、都道府県にホバーしても色が変わらないし、クリックしても指定したページに飛びません。
jQueryは読み込めているようですが...
解決へのアドバイスをいただきたいです。

<script> $(function(){ $("#myMapJapan").japanMap({ onSelect : function(data){ alert(data.code); } }); }); </script>

こちらのコードを入力したところ、灰色の日本地図は表示されたものの、都道府県をクリックしても何も変化はありませんでした。
また、下のコードのshowsAreaNameをFalseからTrueに切り替えたところ、表示は変化したため、
onSelect周りが反応していないのではないか...と推測しているのですが、調べても解決できませんでした。
ご協力いただければ幸いです。

該当のソースコード

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" charset="utf-8"></script> <script src="https://サイトのドメイン/js/japanmap/jquery.japan-map.min.js" charset="utf-8"></script> <script type="text/javascript"> jQuery(function($) { var myUrlPref = [ "https://spaschool.jp/teachers/hirata_naho/", // 北海道 "https://search.yahoo.co.jp/search?p=%E9%9D%92%E6%A3%AE%E7%9C%8C", // 青森県 "https://search.yahoo.co.jp/search?p=%E5%B2%A9%E6%89%8B%E7%9C%8C", // 岩手県 "https://search.yahoo.co.jp/search?p=%E5%AE%AE%E5%9F%8E%E7%9C%8C", // 宮城県 "https://search.yahoo.co.jp/search?p=%E7%A7%8B%E7%94%B0%E7%9C%8C", // 秋田県 "https://search.yahoo.co.jp/search?p=%E5%B1%B1%E5%BD%A2%E7%9C%8C", // 山形県 "https://search.yahoo.co.jp/search?p=%E7%A6%8F%E5%B3%B6%E7%9C%8C", // 福島県 "https://search.yahoo.co.jp/search?p=%E8%8C%A8%E5%9F%8E%E7%9C%8C", // 茨城県 "https://search.yahoo.co.jp/search?p=%E6%A0%83%E6%9C%A8%E7%9C%8C", // 栃木県 "https://search.yahoo.co.jp/search?p=%E7%BE%A4%E9%A6%AC%E7%9C%8C", // 群馬県 "https://search.yahoo.co.jp/search?p=%E5%9F%BC%E7%8E%89%E7%9C%8C", // 埼玉県 "https://search.yahoo.co.jp/search?p=%E5%8D%83%E8%91%89%E7%9C%8C", // 千葉県 "https://search.yahoo.co.jp/search?p=%E6%9D%B1%E4%BA%AC%E9%83%BD", // 東京都 "https://search.yahoo.co.jp/search?p=%E7%A5%9E%E5%A5%88%E5%B7%9D%E7%9C%8C", // 神奈川県 "https://search.yahoo.co.jp/search?p=%E6%96%B0%E6%BD%9F%E7%9C%8C", // 新潟県 "https://search.yahoo.co.jp/search?p=%E5%AF%8C%E5%B1%B1%E7%9C%8C", // 富山県 "https://search.yahoo.co.jp/search?p=%E7%9F%B3%E5%B7%9D%E7%9C%8C", // 石川県 "https://search.yahoo.co.jp/search?p=%E7%A6%8F%E4%BA%95%E7%9C%8C", // 福井県 "https://search.yahoo.co.jp/search?p=%E5%B1%B1%E6%A2%A8%E7%9C%8C", // 山梨県 "https://search.yahoo.co.jp/search?p=%E9%95%B7%E9%87%8E%E7%9C%8C", // 長野県 "https://search.yahoo.co.jp/search?p=%E5%B2%90%E9%98%9C%E7%9C%8C", // 岐阜県 "https://search.yahoo.co.jp/search?p=%E9%9D%99%E5%B2%A1%E7%9C%8C", // 静岡県 "https://search.yahoo.co.jp/search?p=%E6%84%9B%E7%9F%A5%E7%9C%8C", // 愛知県 "https://search.yahoo.co.jp/search?p=%E4%B8%89%E9%87%8D%E7%9C%8C", // 三重県 "https://search.yahoo.co.jp/search?p=%E6%BB%8B%E8%B3%80%E7%9C%8C", // 滋賀県 "https://search.yahoo.co.jp/search?p=%E4%BA%AC%E9%83%BD%E5%BA%9C", // 京都府 "https://search.yahoo.co.jp/search?p=%E5%A4%A7%E9%98%AA%E5%BA%9C", // 大阪府 "https://search.yahoo.co.jp/search?p=%E5%85%B5%E5%BA%AB%E7%9C%8C", // 兵庫県 "https://search.yahoo.co.jp/search?p=%E5%A5%88%E8%89%AF%E7%9C%8C", // 奈良県 "https://search.yahoo.co.jp/search?p=%E5%92%8C%E6%AD%8C%E5%B1%B1%E7%9C%8C", // 和歌山県 "https://search.yahoo.co.jp/search?p=%E9%B3%A5%E5%8F%96%E7%9C%8C", // 鳥取県 "https://search.yahoo.co.jp/search?p=%E5%B3%B6%E6%A0%B9%E7%9C%8C", // 島根県 "https://search.yahoo.co.jp/search?p=%E5%B2%A1%E5%B1%B1%E7%9C%8C", // 岡山県 "https://search.yahoo.co.jp/search?p=%E5%BA%83%E5%B3%B6%E7%9C%8C", // 広島県 "https://search.yahoo.co.jp/search?p=%E5%B1%B1%E5%8F%A3%E7%9C%8C", // 山口県 "https://search.yahoo.co.jp/search?p=%E5%BE%B3%E5%B3%B6%E7%9C%8C", // 徳島県 "https://search.yahoo.co.jp/search?p=%E9%A6%99%E5%B7%9D%E7%9C%8C", // 香川県 "https://search.yahoo.co.jp/search?p=%E6%84%9B%E5%AA%9B%E7%9C%8C", // 愛媛県 "https://search.yahoo.co.jp/search?p=%E9%AB%98%E7%9F%A5%E7%9C%8C", // 高知県 "https://search.yahoo.co.jp/search?p=%E7%A6%8F%E5%B2%A1%E7%9C%8C", // 福岡県 "https://search.yahoo.co.jp/search?p=%E4%BD%90%E8%B3%80%E7%9C%8C", // 佐賀県 "https://search.yahoo.co.jp/search?p=%E9%95%B7%E5%B4%8E%E7%9C%8C", // 長崎県 "https://search.yahoo.co.jp/search?p=%E7%86%8A%E6%9C%AC%E7%9C%8C", // 熊本県 "https://search.yahoo.co.jp/search?p=%E5%A4%A7%E5%88%86%E7%9C%8C", // 大分県 "https://search.yahoo.co.jp/search?p=%E5%AE%AE%E5%B4%8E%E7%9C%8C", // 宮崎県 "https://search.yahoo.co.jp/search?p=%E9%B9%BF%E5%85%90%E5%B3%B6%E7%9C%8C", // 鹿児島県 "https://search.yahoo.co.jp/search?p=%E6%B2%96%E7%B8%84%E7%9C%8C" // 沖縄県 ]; var areas = [ {"code": 1 , "name":"北海道地方", "color":"#ca93ea", "hoverColor":"#e0b1fb", "prefectures":[1]}, {"code": 2 , "name":"東北地方", "color":"#a7a5ea", "hoverColor":"#d6d4fd", "prefectures":[2,3,4,5,6,7]}, {"code": 3 , "name":"関東地方", "color":"#84b0f6", "hoverColor":"#c1d8fd", "prefectures":[8,9,10,11,12,13,14]}, {"code": 4 , "name":"北陸・甲信越地方", "color":"#52d49c", "hoverColor":"#93ecc5", "prefectures":[15,16,17,18,19,20]}, {"code": 5 , "name":"東海地方", "color":"#77e18e", "hoverColor":"#aff9bf", "prefectures":[21,22,23,24]}, {"code": 6 , "name":"近畿地方", "color":"#f2db7b", "hoverColor":"#f6e8ac", "prefectures":[25,26,27,28,29,30]}, {"code": 7 , "name":"中国地方", "color":"#f9ca6c", "hoverColor":"#ffe5b0", "prefectures":[31,32,33,34,35]}, {"code": 8 , "name":"四国地方", "color":"#fbad8b", "hoverColor":"#ffd7c5", "prefectures":[36,37,38,39]}, {"code": 9 , "name":"九州地方", "color":"#f7a6a6", "hoverColor":"#ffcece", "prefectures":[40,41,42,43,44,45,46]}, {"code":10 , "name":"沖縄地方", "color":"#ea89c4", "hoverColor":"#fdcae9", "prefectures":[47]} ]; $("#myMapJapan").japanMap( { areas : areas, selection : "prefecture", borderLineWidth: 0.25, drawsBoxLine : true, movesIslands : true, showsAreaName : true, showsPrefectureName : false, width: 778, font : "MS Mincho", fontSize : 12, fontColor : "areaColor", fontShadowColor : "black", onSelect:function(data){ // 現在の画面を切り替える window.location.href = myUrlPref[data.code - 1]; // 新しいウィンドウを表示する // window.open(myUrlPref[data.code - 1]); } } ); }); </script>

補足情報(FW/ツールのバージョンなど)

WordPress 6.1.1
テーマはSolarisを使用しています。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

WordPressでは$から始めるとエラーになります。
先頭をjQueryにし、引数に$を渡すことで、中身は通常通り$を使用することができます。

修正箇所

diff

1- $(function(){ 2+ jQuery(function($) { 3 $("#myMapJapan").japanMap({ 4 onSelect : function(data){ 5 alert(data.code); 6 } 7 }); 8 });

※前提で提示されているコードは$(function(){ から開始していますが、該当のソースコードはきちんとjQuery(function($) {から開始されているので、どちらが本当のコードかわかりません。後者であれば、私の解答では解決できないです。申し訳ございません。

投稿2022/12/03 14:14

編集2022/12/03 14:17
Cocode

総合スコア2125

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

keiino0425

2022/12/03 19:29

回答ありがとうございます。 jQuery(function($) から始まるコードを実際は使用しています。 わかりづらく申し訳ありません。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。