• RSS

[WP]ショートコードで簡単にGoogle Mapsを表示できるWordPressプラグイン「Simple Google Maps Short Code」

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

ショートコードを使って投稿や固定ページなどに簡単にGoogle Mapsを表示できるWordPressプラグイン「Simple Google Maps Short Code」のご紹介です。

例えば、WordPressの投稿画面のカスタムフィールドでお店の住所を登録できるようにしておけば、その住所の入力値から自動で店舗のGoogle Mapsを表示してあげることができますので、ポータルサイトなどでお店の紹介記事を掲載する場合などには特に便利なプラグインではないかと思います。


Simple Google Maps Short CodeプラグインでのGoogle Maps表示にはGoogle APIキーが必要です。キーの取得方法はこちらの記事を参考にしてみてください。

Simple Google Maps Short Code プラグインのインストール

管理画面のプラグイン新規追加画面よりSimple Google Maps Short Code を検索するか、以下のサイトよりプラグインファイルをダウンロードします。


Simple Google Maps Short Code の基本的な使い方

Simple Google Maps Short Codeプラグインを有効化にしたら、Google Mapsを表示したい箇所(投稿の本文フィールドなど)に以下のような[pw_map]というショートコードを貼り付けると、


↓このように地図が表示されます。



addressに指定する住所は日本語でもOKなところがSimple Google Maps Short Codeの良いところです。

また、テーマファイル(page.phpなど)に以下のようなショートコードを書くことで、Google Mapsを表示することもできます。



オプション

住所(address)以外にも、Google Mapsの表示サイズやスクロールホイールの有効/無効など、いくつかの設定オプションが用意されています。

表示サイズ(widthやheight)についてはwidthheightを利用します。


enablescrollwheel="false"でスクロールホイールを無効化します。


disablecontrols="true"でマップコントロールを無効化します。



カスタムフォールドに住所を入れ、その住所をaddressに指定してGoogle Mapsを自動表示

以下はAdvanced Custom Fieldsを利用した例ですが、

WordPressの投稿画面でカスタムフィールドに住所を登録できるようにして、その住所をSimple Google Maps Short Codeaddressの値にしてあげることで、Google Mapsを自動で表示してあげることが可能です。

手順

投稿画面のカスタムフィールドに住所を入力し、
ショートコードで簡単にGoogle Mapsを表示できるWordPressプラグイン「Simple Google Maps Short Code」

Google Mapsを出力したいページのテーマファイル(single.phpなど)に、以下のようなショートコードを追加します。


すると、記事ごとに以下のような地図を自動で表示させることができます。




  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください