WordPressでレスポンシブ対応のイメージマップを設置する方法

WordPressでレスポンシブ対応なイメージマップを作る必要があったので、その覚書。
ブロックエディタ対応です。

次のような流れで実装します。それぞれにツールを使います。

1. イメージマップの作成
2. レスポンシブ対応とするためのjsの読み込み
3. WordPress記事内への設置

イメージマップの作成

オンラインで制作できるツールがいくつかあります。それを使うのが簡単でしょう。

HTML Imagemap Generator
日本人の方が作った日本語のサービスです。右に画像、左にソースが表示されます。多角形は頂点の編集ができません。また、どのマップがソースの何行目に対応するかも後から確認しにくいです。そのため、数が少ない、丸や四角だけでよい、というようなシンプルなマップに向いています。

Free Online Image Map Generator
こちらは英語ですが、多角形の頂点の編集ができたり、描いた図形と設定したリンクの対応がわかりやすです。複雑なイメージマップを作るならこちらです。英語が分からなくても使い方はだいたいわかると思います。

イメージマップのレスポンシブ対応

レスポンシブの場合、デバイスや画面サイズによって画像の大きさが変わります。しかし、サイトマップはオリジナルの大きさを基準にした座標を使うので、そのままではズレてしまいます。

画像の大きさに合わせて座標を再計算すればよいのですが、それを自動で行ってくれるjQueryプラグインが「jQuery RWD Image Maps」です。

ダウンロードする場合
https://github.com/stowball/jQuery-rwdImageMaps

CDN出使う場合
https://cdnjs.com/libraries/jQuery-rwdImageMaps

WordPressサイトへのスクリプトの読み込み

WordPressで読み込ませる場合はfunctions.phpに下記のコードを書いて読み込ませるとよいでしょう。ここではCNDを使ったサンプルです。自分のサバーに設置する場合は7行目を適宜変更してください。

add_action( 'wp_enqueue_scripts', 'rwdimagemaps_enqueue_scripts' );

function rwdimagemaps_enqueue_scripts() {
  // jQueryプラグインの読み込み
	wp_enqueue_script(
		'rwd-image-maps',
		'https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js',
		array( 'jquery' ),
		'',
		true
	);

  // スクリプトの有効化
	$src = "jQuery('img[usemap]').rwdImageMaps();";
	wp_add_inline_script( 'rwd-image-maps', $src );

}

コードの前半はjQuery RWD Image Maps本体をページに読み込ませる処理です。jQueryより後に読み込む必要があるのでその指定も忘れずに。

後半はサイト内で有効化するための処理です。$srcの内容をテンプレートのfooter.phpに直書きしたり、wp_footerフックを使って表示さえることも可能ですが、wp_add_inline_srcipit()を使った方が読み込みの順番をWordPressが自動で管理してくれるのでお勧めです。

これで、イメージマップのレスポンシブ対応は完了です。

WordPress記事内への設置

画像にwidthとheightを設定

まず、イメージマップで使う画像を記事内に配置します。配置後に、

1. フルサイズを選択
2. 100％をクリック

という2つの作業を必ずこの順番で行いましょう。

こうすることでimgタグにフルサイズのwidthとheightの数値が設定されます。
※画像サイズを選択しただけではimgタグにwidthやheightは設定されません。

jQuery RWD Image Mapsはimgタグのwidthをhightをもとに座標を計算しているようで、この作業を怠るとイメージマップが正しくレスポンシブ対応にならないので注意してください。

imgタグにusemap属性を追加

次にusemap属性を追加していきますが、実は標準の画像ブロックではimgタグにusemap属性を追加することができません。
そこでツールバーから「HTMLとして編集」を選び、HTMLを直接表示させます。

そうすると、下図のように画像ブロックのHTMLソースが表示されます。

これを直接編集してusemap属性を追加します。

画像ブロックをカスタムHTMLブロックに変換

usemap属性を追加すると、残念ながらブロックエラーが表示されます。HTMLソースを編集したことが原因です。

ここで「解決」をクリックしたり、「ブロックリカバリーを試行」を選んでしまうと、先ほど追加したusemap属性が消えてしまいます。それでは困るので、ここでは「HTMLに変換」を選びましょう。

そうすると下図のようにHTMLブロックに変換されます。

これで画像ブロックとしては編集できなくなりますが、同じブロック内にイメージマップのコードも貼り付けることができます（下図）。

こうすると一つのブロックとして画像とマップコードを管理できるようになるので便利です。

以上でレスポンシブに対応したイメージマップの設置は完了です。

実際のサンプル

実際に上記の方法で設置したマップです。各部屋をクリックするとアラートがでるようにしています。工夫次第でライトボックス風に表示させたりすることも可能です。