Advanced Custom Fieldsを使って住所を入力するだけでGoogleマップを表示するようにする方法

2017/12/18 WordPress

シェアする

googlemap02

はじめに

クライアントからたまに自分でGoogleMapを埋め込みたいという要望があります。そのまま埋め込んでください！言っても中々ハードルが高い。

なので、Advanced Custom Fieldsを使って
住所を入力するだけでGoogleマップを
表示するようにする方法をログとして残したいと思います。

設定方法

公式サイトにはこんな感じで書かれてます。

ACF | Google Map

英語ばかりなのは仕方ないんだけど、こういう時に辛いっすね。。

今回はちょこっとだけ変えました。ほぼコピペだけど。。

Advanced Custom Fieldsをインストール後GoogleMapの設定をします。

  1. 管理画面からカスタムフィールド→カスタムフィールドを選択
  2. 新規追加ボタンをクリック
  3. タイトルをつける(今回はGoogleMapサンプル)
  4. フィールドを追加してフィールドラベル(管理画面に表示されるラベル)とフィールド名を入力。
  5. フィールドタイプで[GoogleMap]を選ぶ。
  6. その他設定は必要であれば行います。特に位置はこの設定をどこで使うのか？投稿なのか固定なのか？
    など設定することができます。今回は投稿タイプを使用します。

googlemap01

その後、入れたいテンプレートにソースコードを埋め込む。そうすると記事に
住所入力欄が表示されて、住所を入力するとGoogleMapが表示されます。

今回はtwentyfifteenに入れてみます。

入れるソースコードは2種類。設定部分と表示部分です。入れる場所はテーマや入れたい場所によって異なるけど今回、設定はheader.phpの<?php wp_head(); ?>の下に入れます。(表示部分は後で。)
GoogleMapの埋め込みにはJQueryの記述が必要になるので<?php wp_head() ?>;の下に
入れる必要があります。

この時、ちゃんと条件分岐を入れるのを忘れずに。
そうしないと全てのページに表示されちゃいます。
(今回のサンプルでは入れません。)

今回のサンプルには直接CSSを書き込んでるけど、
導入する時はCSSはキチンとstyle.cssとかに入れます。
(よく考えたらCSSわけたら3つだけど今回は2つということで。。)

次に表示させたい箇所に表示部分のソースコードを導入します。

get_fieldのmapはフィールド名です。
一番最初にやったフィールド名に合わせてください。

今回は投稿でブログを書いた記事の下に表示させるようにします。contents.phpの<footer class=”entry-footer”>の下です。

実際の入力をしてみる

では、いつものように投稿からブログを書いてみます。テキスト入力欄の下に住所入力欄が増えています。ここで住所を入力してみましょう。サンプルは東京タワーです。

googlemap02

さいごに

こんな感じで表示されます。

googlemap03