• RSS
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

WordPressのカスタムフィールド拡張プラグインAdvanced Custom Fieldsで、Google Mapのフィールドに登録した地図情報を出力する方法のご紹介です。

Advanced Custom FieldsのGoogle Mapを表示する手順

以下のAdvanced Custom FieldsのページにCSS、PHP、Javascriptの各コードが書いてありますので、カスタムフィールド名やGoogle Mapを表示させる要素のクラス名を変えるだけで基本的にはOKです。
Advanced Custom FieldsのGoogle Mapを表示する方法

①CSS

まずはMapを表示させるためのCSSの記述例です。

acf-mapはMapを表示させる要素のクラス名なので、後述するPHPやJavascriptでも出てきます。クラス名は合わせておくようにします。


②PHP

続いて、地図を表示したいページのテンプレートファイルに以下のようなコードを追加します。

get_field(‘googlemap‘);はカスタムフィールド名です。ここはサイトに合わせて変更してみてください。また、acf-mapは①CSSの項目で指定した要素と同じ名前にしておきます。


③Javascript

footer.phpに記述するJavascriptの例です。

1行目のkey=APIキーは、Google Developerで取得したGoogle Maps API Keyを入れます。
Google Maps API Keyの取得方法はこちらの記事も参考にしてみてください。

2行目のgmap.jsは、以下の④で紹介するJavascriptコードを外部ファイル化したものです。


④gmap.js

③Javascriptと同様、footer.phpに直接書いても良いですが、長いので外部ファイル化しても良いかと思います。

120行目のacf-mapは①CSSと②PHPで指定したクラス名に合わせます。




  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください