勉強したことのメモ

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

Advanced Custom FieldsでGoogleMapの使用

   

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

 

エラーの対処

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

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

 

MySQLの保存状態

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

 

取得と表示方法

 

GoogleMapの表示

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

 

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

 

まとめ

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

 - WordPress

  関連記事

contact form7で500エラー

WordPressプラグインのcontact form7で送信ボタンを押し、ロー ...

WordPressで任意のクエリをページ内で出力する方法

WordPressの固定ページ内でuidという任意のGETクエリを取得して、記事 ...

contact form7で送信時に別サーバへデータ送信

contact form7でフォーム送信時に別サーバーでフォーム内容をPOST送 ...

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

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

WordPressの管理画面で記事一覧にアイキャッチ画像を表示

WordPressの管理画面で記事一覧にアイキャッチ画像を表示させる方法のメモ。 ...

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

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

WordPressで「データベース接続確立のエラー」

WordPressで設定ファイル(wp-config.php)は触っていないのに ...

WordPressで自動でmetaタグのkeywordsとdescriptionを表示

metaタグのkeywordsとdescriptionにて、基本的にはAll i ...

WordPressのcron設定で負荷対策

WordPressのcron設定(wp-cron.php)を変更することで負荷が ...

Polylangで言語毎の分岐処理

WordPressで多言語サイトを作成するにあたりPolylangというプラグイ ...