Wordpressでイメージマップを使うが表示されない件について

Question

前提・実現したいこと

Wordpressにて、イメージマップで地図の都道府県をクリックしたら別のサイトに行くようにしたいのです。
6年程はさわっていますが、HTMLは今月から勉強始めた初心者です。

http://labs.d-s-b.jp/ImagemapGenerator/

こちらを使ってコードを貼るのですが表示されません。
実際に貼ったコードは、

<map name="ImageMap"> <area alt="" coords="1343,969,1432,995" shape="rect" href="https://www.facebook.com/ayako.hashimoto.1977" /> </map>

幾つかのサイトを見ても、どれもすぐに表示されるようにしか
書かれていないので分からず質問させていただきました。

発生している問題・エラーメッセージ

エラーメッセージ　なし

該当のソースコード

<map name="ImageMap"> 
<area alt="" coords="1343,969,1432,995" shape="rect" href="https://www.facebook.com/ayako.hashimoto.1977" />
 </map>

試したこと

https://www.kopjapan.com/blog/web/114/

https://www.image-map.net/

こちらを見て行っていますが、実際には添付したような表示になり、

小さなのが表示されて、原因がわからず困っています。

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

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

>Wordpressにて
でしたらWordPressタグは必須と思います。

あとそのfacebookの個人ページへのリンクは何に使いたいのでしょうか。

[AyakoHashimoto]

Facebookは私の個人ページです。地図上の都道府県をクリックしたら、都道府県ページに移り、そこに個人一覧があるようにしたいのです。

Answer 1

提示されたジェネレータはimgタグで画像参照するようになっていますが、どうでしょうか。
質問に提示されたコードにはimgタグ自体ありません。
いずれにしても画像が正しくリンクされてないのであれば表示されないのは当然かと思います。
HTMLファイルに書いてあるならそのファイルから参照できる場所に置いてあるかとか。
記事なども「そこが分かっている前提」のコードに見受けられます。

Comments

[AyakoHashimoto]

ありがとうございます。
このコードでも表示されません。

<img src="827430-min.jpg" usemap="#ImageMap" alt="" />
<map name="ImageMap">
<area shape="rect" coords="1349,964,1424,996" href="https://itsumademo-wakaimama.xyz/dream-map-oosaka/" alt="" />
</map>

こちらのサイトを見たのですが、
https://from-rk.com/wordpress/wordpress-imagemap/
ダウンロードした圧縮ファイルを解凍して「jquery.rwdImageMaps.js」と「jquery.rwdImageMaps.min.js」までは理解できるのですが、該当ファイルに記述するの、該当ファイルがわからないのです。恐らくこれが上手くいけば表示されるのかな？と考えていますが合っていますでしょうか？
写真を添付したいのですが、写真は最初か解決方法しか添付できないようですね。

[m.ts10806]

やはりWordPress関連でしたかね。
質問タグに「WordPress」を追加してください。
質問は編集できます。

それに、「固定ページにtagを貼り付け」の項で触れられてますね。
jsもちゃんとリンクする必要があるのではないでしょうか。
※areaによるリンクマップだけなら関係なさそうですが、それなりに演出とかあるのでしょうし。

[AyakoHashimoto]

回答ありがとうございます。「Wordpressタグ」の意味さえ理解していませんでした。編集し直しました。

https://yuntu-tek.com/clickable-map/　に
「</body>タグの直前でjQueryを読み込ませて、そのあとにjquery.rwdImageMaps.min.jsを読み込ませる形にします。」という記述があったので、まずはjQueryの読み込ませ方をリアルで習ってみるのもテだなと思うのです。

ただ、疑問なのが、こちらのサイト
https://mio-code.com/2020/01/25/imagemap/を見ると、jQueryのことなどは一切なく、
「イメージマップはCSS・JavaScriptを必要とせず、HTMLだけで実装することが可能」と書かれているのに、できないのが疑問です。

まだHTMLもCSSもちゃんとやれていないのですが、地図上をクリックするサイトを作りたいので
身に付けたいです。

Answer 2

画像は[images]などディレクトリにまとめていないですか？
その場合は

<img src="images/827430-min.jpg" usemap="#ImageMap" alt="" />

となるような気がします。

また、Wordpressでphpとしてコードを書いている場合、画像を指定するには

<img src="<?php bloginfo('template_directory'); ?>/images/827430-min.jpg" usemap="#ImageMap" alt="" />

のように<?php bloginfo('template_directory'); ?>が必要になります。