勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

Advanced Custom FieldsでGoogleMapの使用

   

Advanced Custom FieldsでGoogleMapを使用したかった。設定上から選ぶことはできるが、そのままだと記事投稿ページでエラーが発生していた。この辺の対応策と、実際のページ表示方法をメモ。

 

エラーの対処

APIキーを設定していないというのが原因でエラーが発生している模様。テーマファイルのfunctions.phpに以下を追加する。

キーを定数に入れているのは他ページでも使う為。

 

MySQLの保存状態

postmetaテーブルで以下のようシリアライズされた形で保存される。

 

取得と表示方法

 

GoogleMapの表示

iframeで埋め込む方法場合は以下の通り。1件のみ表示させたいような場合はこちらの方法が楽。

 

JavaScriptで出力する場合は以下の通り。複数表示させたい場合はこちらになる。

 

まとめ

GoogleMapのフィールドを使うと経度緯度と住所が入るので使いやすい。また、ダッシュボード上からも使いやすくなる。

 - WordPress

  関連記事

さくらvpsにワードプレスを導入

さくらvpsで立ち上げたサーバーにWordPressを導入した際のメモ。 ①ダウ ...

FeedWordPressでアイキャッチ画像も設定する方法

FeedWordPressで更新記事を取得しつつ、アイキャッチ画像も自動で設定し ...

WordPressのfunctions.phpの初期設定

WordPressのテーマ作成時にfunctions.phpを書くが、いつも内容 ...

WordPressの記事をfacebookに投稿

WordPressの記事をfacebookに投稿する際にOGP設定をする必要があ ...

WordPress5のエディタを元に戻す方法

WordPress5にアップデートしたところ記事投稿ページのエディタが非常に使い ...

WordPressでカスタムフィールドとCSVファイル投稿

WordPressでカスタムフィールド設定している環境に、CSVファイルアップロ ...

WordPressで任意のクエリをページに出力するプラグイン

先日、「WordPressで任意のクエリをページ内で出力する方法 」という記事で ...

WordPressで固定ページに記事一覧を表示させるプラグイン

WordPressで固定ページ編集時にショートコードを書くことで、記事一覧を表示 ...

WordPressでテーマの作成

CSSとHTMLコーディングデータがあり、それをWordPressのテーマに反映 ...

contact form7で送信数を測定

contact form7でフォーム送信が完了した時点で計測されるようにトラッキ ...