WordPressの日本地図は、ブロックエディタからショートコードなしで置ける

「クリックできる日本地図を本文に入れたいけれど、ショートコードを書くのはちょっと身構える」。そういう人向けに言うと、Japan Clickable Map はブロックエディタに対応していて、ブロックを追加して表示するマップを選ぶだけで日本地図を置けます。[jcm_map id="..."] のようなコードを手で打つ必要はありません。

ブロックの名前は「クリッカブル地図」。本文の途中に段落を足す感覚で、地図をそのまま差し込めます。

目次

ブロックで置くまでの流れ

順番としてはこうなります。

  1. 先にマップを1枚作って保存する。 管理画面の「クリッカブル地図」から、都道府県マップか市区町村マップを新規作成し、色とリンクを設定して保存します。ここでマップに固有のIDが振られます。
  2. 記事や固定ページの編集画面でブロックを追加する。 ブロック挿入(+)から「クリッカブル地図」を選びます。
  3. 一覧から表示するマップを選ぶ。 ブロックに出てくる候補から、さっき作ったマップを選ぶだけ。都道府県マップも市区町村マップも同じ候補一覧に並ぶので、どちらを置くにしても操作は変わりません。

選んだあとはエディタ上に地図が出て、公開すればそのまま表示されます。保存されるのはマップのIDだけで、実際の描画は表示時にサーバー側で組み立てられる仕組みです。つまりブロックは「どのマップを出すか」を指し示しているだけ、という作りになっています。

ブロックで色やリンクは変えられない(そこが肝)

ここが最初にいちばん戸惑うところだと思います。ブロックを選んでも、色やリンク、表示モードといった設定項目はブロック側に出てきません。 「ブロックで地図の色を変えようとしたのに、それらしい設定が見当たらない」とつまずきやすいポイントです。

これは不具合ではなく、設計上そうなっています。色やリンク、表示範囲、精度などはすべてマップの投稿側(クリッカブル地図の編集画面)で設定するもので、ブロックは完成したマップを呼び出すだけだからです。見た目を直したくなったら、ブロックではなく元のマップの編集画面に戻る。この切り分けを先に知っておくと、無駄に探さずに済みます。

逆に言うと、一度作ったマップは複数のページから同じブロックで呼び出せます。マップ側を直せば、貼ったすべての場所に反映されるので、後から色やリンクを足したいときも管理が一か所で済みます。

ショートコードと、どう使い分けるか

ブロックとショートコードは中身は同じものを呼び出していて、置き方が違うだけです。判断の目安はシンプルで、本文に普通に置きたいならブロック、本文以外の場所に入れたいならショートコードです。

ブロックエディタで編集している投稿や固定ページの中に置くなら、ブロックが素直です。一方で、サイドバーのウィジェットや、テーマのテンプレートファイル(フッターや専用のエリア紹介ページなど)に地図を埋め込みたいときは、ブロックが使えない場面があります。そういうときはショートコード [jcm_map id="マップID"] を貼るほうが確実です。id には作ったマップのIDを入れます。同じIDなら、ブロックで出してもショートコードで出しても同じ地図が表示されます。

なので「本文中心ならブロック、それ以外で必要になったらショートコード」と覚えておけば、ほとんどの場面で迷いません。

ブロックでの設置を実際の画面で確かめながら進めたい人は、Japan Clickable Map の詳細を 製品ページで確認できます。

目次