【WordPress】クリッカブルマップをレスポンシブ対応させる方法

2021年5月1日2023年6月19日もっとWordPressを知ろう編

【景品表示法に基づく表記】本サイトのコンテンツには、商品プロモーションが含まれている場合があります。

カイエダです。
今回ご紹介するのは、昔からあるWebデザイン技術を、レスポンシブ対応にする方法です。
WordPress上だと、ひと工夫必要です。

お客様のWebサイトリニューアルで、クリッカブルマップを利用することになりました。

クリッカブルマップとは

別名：クリッカブルイメージマップ，イメージマップ
【英】clickable map, clickable image map, image map
クリッカブルマップとは、クリックが可能なURLを任意の位置に埋め込んだイメージのことである。

クリッカブルマップは、イラストや写真などのイメージ上の特定の場所を円や多角形エリアとして設定して、クリック時に設定したURLにジャンプさせる手法を指す。クリッカブルマップでは、好きな場所にリンクを設定できるので、細かい位置設定が必要な地図やイメージを多用しデザインに凝ったサイトでよく用いられる。
▼出典

https://www.weblio.jp/content/%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AB%E3%83%96%E3%83%AB%E3%83%9E%E3%83%83%E3%83%97″>https://www.weblio.jp/content/%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AB%E3%83%96%E3%83%AB%E3%83%9E%E3%83%83%E3%83%97

クリッカブルマップは、「HTML Imagema Generator」などのサイトで作成できます。
あまりフレキシブルではありませんが、HTMLがわかる人にだったら便利なサイトです。

HTML Imagemap Generator

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

Imagemap の HTML コードを作成するジェネレーターです。

labs.d-s-b.jp

最近ではクリッカブルマップ自体、ニーズがないのか、そんなに見かけなくなりましたね。

もし改良したり、スマホ対応にしたいというときは、もともとのWebサイトにあったクリッカブルマップをそのまま使いたい、というリクエストがあった時ではないでしょうか。
　
現在はスマホでのWebサイト閲覧が当たり前ですが、パソコンからの見た目だけの技術だと、スマホでみた時にクリッカブルマップはうまく作動してくれません。

私が解決したい問題は次です。

スマホでもきちんと動くこと（レスポンシブ対応であること）
WordPressで動くこと

ということで、以下、クリッカブルマップの作り方は掲載しませんが、WordPressでクリッカブルマップをレスポンシブ対応にする方法を載せておきますね。

解決方法

jQuery RWD Image Mapsをダウンロード（(Downroad ZIPというボタンを押す）。
解凍後、サーバーの任意の場所にFTP等でアップロードします。
https://github.com/stowball/jQuery-rwdImageMaps
今回ダウンロードしたのはjQueryですが、WordPress上で動かすには、コンフリクトが発生しうまく動きません。
そこで以下のコードを、WordPress上マップを設置する記事の中にコピペ！
記事中に設置することも考慮すると、改行はなくしたほうがいいでしょう。

<script src="（サーバーにアップした場所）jquery.rwdImageMaps.min.js"></script><script>jQuery(document).ready(function(e) {jQuery('img[usemap]').rwdImageMaps();});</script>

本来であれば、jQueryですので “$ (…)"という表記が入るのですが、上記コードでは “$ (…)"を"jQuery"にすべて変更しています。この理由は以下です。

わかったブログさんが見つけてくださった方法を参考にしています。

WordPress上では、jQueryコードはそのままでは動きません。
コンフリクトを防止するため、jQueryお馴染みの$(…)の表記が使えないのです。
$をjQueryに置き換えると、動くようになります。
また、記事中にjavascriptコードを書くと、pタグとかが入ってしまうことがあるので、上記コードは改行をなくしてます。
わかったブログ