勉強したことのメモ

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

Advanced Custom FieldsでGoogleMapの使用

   

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

 

エラーの対処

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

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

 

MySQLの保存状態

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

 

取得と表示方法

 

GoogleMapの表示

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

 

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

 

まとめ

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

 - WordPress

  関連記事

WordPressで閲覧者にテーマを変更させるプラグイン

「新規サイトを○○みたいなイメージでWordPressのテーマを見繕って欲しい」 ...

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

WordPressでWordPress WP Social Bookmarkin ...

WordPressのfunctions.phpの初期設定

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

WordPressでタグやカテゴリの複数検索

WordPressでカテゴリのアンド検索や、タグとカテゴリの同時検索を行いたかっ ...

Advanced Custom Fieldsでチェックボックスの記事を取得

Advanced Custom Fieldsでチェックボックス設定しているカスタ ...

WordPressでユーザー毎にフラグを持たせる

WordPressでユーザー毎に何らかのフラグを持たせて、フラグによって分岐処理 ...

WordPressでメモリを節約しつつ高速化する設定方法

メモリ1GのVPSを借りてWordpress以外にも、ちょいちょいものを置いてい ...

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

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

WordPressでNo URL was~というエラー

WordPressでmp4ファイルをアップロードして記事に埋め込んだものの、記事 ...

ACFでセレクトメニューを動的に生成

WordPressでカスタムフィールド設定用のプラグインAdvanced Cus ...