このサイトでも利用している、WordPressのカスタムフィールドの機能を飛躍的にアップするプラグイン「Advanced Custom Fields」で何ができるのかをいくつか紹介していきます。中には有料のアドオンを購入しなければ使えない機能もありますが、比較的安価（数千円ほど）なので取り入れやすいです。
最初に紹介するのはGoogleMapの表示です。
表示例は勉強会のイベントページで利用しているのでそちらをご覧ください。
コードは以下のようなものです。
<?php
//Googleマップ表示
$location = get_field('lesson_gmap');
if( !empty($location) ):
?>
<div class="acf-map">
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
</div>
<?php endif; ?>
以下は、複数の場所にマーカーを置く場合の解説です。
管理画面での入力方法は、下図のように、示したい場所を検索するか、地図を移動してマーカーを置くだけでOKです。
テンプレートにマップ表示用のタグを書き込んで表示することができます。
その他にもCSS、JSの設定が必要です。
詳しくはプラグインのサイトで紹介されています。
http://www.advancedcustomfields.com/resources/google-map/
必要なことは
・マップを表示する領域にCSSで幅と高さを与えておくこと
・Google MapのAPIを<script>で読み込むこと
・jQueryを読み込むこと
・マップ表示用のスクリプトを読み込むこと
・マップ表示用のコードとHTMLをテンプレートに書き込むこと
すべて、プラグインのサイトに書かれています。
テンプレートに書き込むコードを下記に掲載します。
まずスクリプトを読み込み
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script type="text/javascript" src="（テーマファイルフォルダURL）/js/acf-gmap.js"></script>
複数の場所にマーカーを表示する場合のコードは下記の通り。
<?php if( have_rows('gmap_multi') ): ?>
<div class="acf-map">
<?php while ( have_rows('gmap_multi') ) : the_row();
$location = get_sub_field('location');
?>
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
<h4><?php the_sub_field('title'); ?></h4>
<p class="address"><?php echo $location['address']; ?></p>
<p><?php the_sub_field('description'); ?></p>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
ひとつのマップに複数のマーカーが表示されるので、タイトルや説明を吹き出しで追加できるようになっているようです。すごい。
このとき「<div class=”acf-map”>〜</div>」の部分にCSSで高さが設定されていないと、正しく記述していても地図を表示できませんので注意（何度かはまりました）。
表示は下記の通り。
いい感じにすべてのマーカーが見えるように調整してくれるようです。
これで県内カレーマップが作れるぞー（え