HTMLでは、画像内にリンクを作ることができます。クリッカブルマップやイメージマップと言われるものです。リンクの領域は画像内の座標で指定できます。デモはこちら。
ところが、最近のウェブサイトの主流はレスポンシブデザインです。画像が縮小してしまうと、リンクの座標が合わなくなってしまいます。jQueryをつかってゴニョると解決するのですが、WordPressだとjQueryが動かない！ その辺の対策をまとめました。
方法
下記コードをマップをWordPress上の設置する記事の中にコピペすればOKです。
|
1 2 |
<script src="jquery.rwdImageMaps.min.js"></script><script> jQuery(document).ready(function(e) {jQuery('img[usemap]').rwdImageMaps();});</script> |
jQuery RWD Image Mapsというコードがあるので、ダウンロード(Downroad ZIPというボタンを押す)して解凍。jquery.rwdImageMaps.min.jsというファイルを、サーバーにアップロードしておいてください。上記の「src=”jquery.rwdImageMaps.min.js”」は、アップロードした場所によって変更してください。
WordPressでjQueryを動かす方法
WordPress上では、jQueryコードはそのままでは動きません。コンフリクトを防止するため、jQueryお馴染みの$(…)の表記が使えないのです。$をjQueryに置き換えると、動くようになります。
また、記事中にjavascriptコードを書くと、pタグとかが入ってしまうことがあるので、上記コードは改行をなくしてます。
ぜひお試しを！
コメント
サイトを作成中で、これまで他のサイトを見てどうがんばってもうまくいかなかったのですが、ここに書いてある方法でうまくいき、大変助かりました。ありがとうございました。