［み］WordPressでショートコードを使ってGoogleマップを表示させる方法

ショートコードのすばらしさに目覚めたみはらです。

知らず知らず使っていたショートコードですが、調べれば調べるほど賢くてデキルやつだというのがわかってきました。
で、さっそく今回はそのショートコードを使って、Googleマップを表示させる方法を紹介します。
いつものWordPressシリーズのようにコピペでOKですので、どんどん使ってください。

ショートコードでGoogleマップを表示する方法

まずは、このコードを functions.php にコピペしてください。

functions.php

function G_Maps($atts, $content = null) {
   extract(shortcode_atts(array(
      "width" => '600',
      "height" => '450',
      "src" => ''
   ), $atts));
   return '<iframe width="'.$width.'" height="'.$height.'" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'.$src.'&amp;output=embed"></iframe>';
}
add_shortcode("googlemaps", "G_Maps");

そして、Googleマップを表示させたいところにこのコードです。

HTML

[googlemaps width="幅" height="高さ" src="GoogleマップのURL"]

幅と高さは書かなくてもOKです。
書かないと、デフォルトにした600×450で表示されます。
なので、面倒な方は

HTML

[googlemaps src="GoogleマップのURL"]

でOKです。
しかも、辞書登録とかしてしまえば本当にカンタンにGoogleマップを表示できるようになります：）

では、ためしに、こないだまた行った秋田市のマシンガンを表示してみます。
コードはこれです。

HTML

[googlemaps src="https://maps.google.co.jp/maps?q=39.724664,140.144144&ll=39.724633,140.144077&spn=0.001879,0.002792&num=1&brcurrent=3,0x5f8fc29d97b09f5d:0xb50887d613e49c9b,0&t=m&z=19"]

で、表示されるのがこれです。

[googlemaps src=”https://maps.google.co.jp/maps?q=39.724664,140.144144&ll=39.724633,140.144077&spn=0.001879,0.002792&num=1&brcurrent=3,0x5f8fc29d97b09f5d:0xb50887d613e49c9b,0&t=m&z=19″]

カンタンですね。

まぁ、ショートコードはステキなんですが、GoogleマップのURLをコピーすんのがめんどくさいですね…　そして、マシンガンからだいぶずれてますね…

ショートコードでGoogleマップを表示する方法

コメントを残す コメントをキャンセル

コメントを残す