勉強したことのメモ

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

Advanced Custom FieldsでGoogleMapの使用

   

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

 

エラーの対処

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

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

 

MySQLの保存状態

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

 

取得と表示方法

 

GoogleMapの表示

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

 

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

 

まとめ

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

 - WordPress

  関連記事

images
WordPressで複数のカテゴリーを取得する

WordPressで1つの記事に対して複数カテゴリを設定していた場合、テーマによ ...

images
contact form7で送信数を測定

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

images
WordPressでテーマの作成

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

images
WordPressで店舗用サイトを作るときに使えそうなテーマ

WordPressで店舗用のサイトを作る際に使えるかも、というテーマがいくつかあ ...

images
WordPressでSNSボタンが表示されない

WordPressでWordPress WP Social Bookmarkin ...

images
WordPressサイトのロードアベレージが高い

あるWordPressサイトのロードアベレージが先月ぐらいまでは通常0.5前後で ...

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

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

images
Advanced Custom Fieldsで記事取得

WordPressでAdvanced Custom Fieldsにて設定した項目 ...

images
WordPressの記事をfacebookに投稿

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

images
WordPressを停止しないままサーバ移設する方法

WordPressを設置しているサーバのリソースがそろそろ危ういので移設を検討す ...