WordPress上にLeafletで地図を載せる(その②)

前回の記事で紹介したLeafletで地図を表示するHTMLの内容を踏まえると、Wordpressの記事にLeafletで地図を載せるときの課題として下記の3点が上げられます。

  1. leaflet.cssとleaflet.jsの読み込み(地図を表示したい記事のみで)
  2. 地図を表示させるコンテナのid定義(地図を表示したい記事のみで)
  3. 実際に地図を表示する(投稿画面でJavaScriptを打ち込む)

まず、①と②はheader.php (子テーマの場合はheader-insert.php)で条件を満たすときのみJavaScriptやCSSを読み込むことが出来ます。条件の設定は、記事の番号やスラッグで指定することも出来ますが、ここでは下記のようにカテゴリで設定したいと思います。

まず1行目ですが「in_category(‘Leaflet’)」がTrue、つまりLeafletというカテゴリに所属する記事の時だけ、ここの記載内容が適用されます。(ここではカテゴリ名を「Leaflet」にしていますが、任意の名称で大丈夫です。ただし念のため全角文字はさけています。)
なお「is_category」というよく似た関数がありますが、これはカテゴリのスラッグが引数と合致していないと適用されませんのでご注意ください。
3~5行目がヘッダに追記される内容で、leaflet.jsとleaflet.cssを読み込むとともに、地図を表示するためのコンテナのID(leafletmap)を定義しています。
なお、3・4行目のリンク先URLがhttpsになっているかを確認してください。httpsのページからhttpにあるJavascript等を読み込もうとするとエラーになって上手く読み込んでくれませんでした。

上記のPHPファイルの編集は、下記画像の通りダッシュボード→外観(左側)→テーマエディタ→当該phpファイルを選択(右側)でできます。

header-insertの編集

これで、カテゴリに「Leaflet」が設定されている投稿には、Leaflet.js・Leaflet.cssが読み込まれ、また地図表示用のコンテナも定義されることになります。

では次に、実際に地図を表示する投稿を作成します。
新規→投稿の、Wordpressの投稿画面で、ビジュアルではなくテキストを選択します。
なお、私はClassic Editorを利用しています。
そして、下記のように地図を表示するコンテナとともに、Leafletで地図を表示するためのJavaScriptを投稿画面のエディタ(テキストボックス)に入力します。
ここで、空行があるとWordpressの自動改行挿入機能により「<p>」が割り込んでくるため、空行をなくす必要があります(参考サイト)。なお、コメントを書いておけば空行とは認識されず、自動改行挿入機能は回避できました。

Leafletで地図を表示する投稿画面の例

なお、タイルレイヤを作成(コンストラクタ)の「attribution」でリンクを張るとJavaScriptが上手く動いてくれませんでした。そのため、リンクを外してあります(6・10・14・18・23行目)。

上記の方法で地図を表示させてみたのが、こちらの投稿になります。
とりあえず背景図を表示することが出来たので、あとはGeoJSONとかのベクタレイヤを読み込むコードを上記のJavaScriptに追記していけば、Wordpressで色々な地図を表示できるかと思います。