勉強したことのメモ

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

Advanced Custom FieldsでGoogleMapの使用

   

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

 

エラーの対処

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

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

 

MySQLの保存状態

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

 

取得と表示方法

 

GoogleMapの表示

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

 

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

 

まとめ

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

 - WordPress

  関連記事

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

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

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

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

WordPressにお気に入り登録機能とお気に入り一覧ページを作成する方法

WordPressにお気に入り登録機能をつけたかった。 会員制のサイトじゃなかっ ...

WordPress4.0の新機能

WordPress4.0への更新が出来るとダッシュボードに書いてた。 互換性で変 ...

WordPressのユーザー画像とプロフィール

WordPressでユーザー毎に画像とプロフィール部分にHTMLタグを登録したか ...

contact form7で送信数を測定

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

WordPressのメール送信フォームに画像認証を設置する

■やりたかった事 ココで作成したメール送信フォームに画像認証を設置する ■方法 ...

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

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

WordPressのサーバー移行で気付いた点

あるWordPressを置いているサーバーのリソースが苦しくなってきたので、新た ...

WordPressにてフッターへ出現する笑顔マーク(smiley)を見えなくする方法

■やりたい事 WordPressにて左下へ勝手に出現する笑顔マーク(smiley ...