何らかのお店などの店舗情報を掲載しているサイトを運営している方は、「各店舗情報ページに、その店の場所がわかるようにマップを掲載したいな」と思ったりしませんか?
例えば、全国のエステサロンを紹介するサイトを作り、各都道府県にあるエステサロンの店舗情報ページを作成。「店舗場所のところにピンを立てたマップをページに掲載したい!」と考える人もいると思います。
「できれば、作成した各店舗情報のページのマップのピンを一つにマップにまとめたい」と思ってる人もけっこういるのではないでしょうか?
そういったことが簡単にできるプラグインがあるのでご紹介します。
目 次
Googleマップを簡単に設置し、マップ上にピン(マーカー)を立てることが出来るプラグインというのが、「MapPress Easy Google Maps」というプラグインです。
このプラグインは基本的には無料ですが、有料でアップグレードすることもできます。
管理画面の「プラグイン」→「新規追加」で「MapPress Easy Google Maps」を検索。
インストール&有効化をしてください。
プラグインを有効化すると管理画面のメニューに「MapPress」という項目ができるので、それをクリックすると設定画面が開きます。
2か所だけやっておいたほうがよい設定があるので書いておきます。
「ローカライズ」というところの「言語」の部分に、「ja」と書き込んでおくと、Googleマップ内の表記が日本語になります。
次に「その他」のところの「マップサイズ」のところでサイズを指定しておくと使いやすいです。なぜか「太さ」と書かれてますがここは幅です。「Height」は高さです。
幅100%と書き込んでおくとレスポンシブに対応し、スマホなどで見た時にスマホ画面に合わせてサイズが変化します。縦サイズは350px前後くらいにしておくとパソコン画面でもスマホ画面でも見やすいです。
ラジオボタンにチェックが入っているサイズが個別ページにマップを掲載するときのデフォルトサイズになります。
「投稿」や「固定ページ」などの記事投稿ページに行くと、下記のように「MapPress」というものが追加されています。
マップを作るために「新規マップ」というボタンをクリック。
すると上記のようなフィールドなどが現れます。
マップの場所指定するために、赤で囲ったフィールドに、ピンを表示させたい場所の住所などを入力します。住所でも良いですし、緯度経度でもOKです。
あとは、有名な場所であれば住所などではなく建物名などで大丈夫なものもあります。(例えば東京スカイツリーとか東京ビッグサイトとか)
試しに東京スカイツリーの住所を入力してから虫眼鏡のアイコンをクリック。
すると、東京スカイツリーの場所にピン(マーカー)が打たれます。
地図上に打たれたピン(マーカー)をクリックすると小さなエディタが出現し、Googleマップ上でピンをクリックしたときに表示される吹き出しの中を作成することができます。写真なども入れ込むことができます。
編集が終わったら「保存」をします。
保存を完了させると上記のような表示になるので、「記事に挿入」をクリック。
すると投稿記事エディタの中にマップのショートコードが挿入されます。この状態で記事を公開すると、ページにマップが表示されるようになります。
下記の画像は投稿した記事の中にマップを設置した例です。
このような感じで各店舗の情報ページを作りマップを掲載しておくと、場所を知りたいユーザーに見やすくわかりやすい店舗情報ページになると思います。
この「MapPress Easy Google Maps」というプラグインは基本的には無料で使えます。ですがアップグレード版もあります。
価格はBasic License(3サイト分)で$29.95。1サイト分だと1,000円くらいですので安いです。Developer Licenseは無制限。Developer Licenseの価格は$49.95なので5,000円くらいですね。いずれにしても高くないプラグインなのでアップグレードも検討してみると良いと思います。
ただ「One year of updates and support」という表記があるので、1年間しかアップデートやサポートはしませんということなのでしょうか?
この部分はよくわからないので、ご自身でお調べになってください。
【できることその①】
まず、マップ上のピン(マーカー)を別のものに変更することができる。自分で用意した「png」画像ファイルのアイコンなどをピンにすることも可能です。各ページ、別々のピンを指定することができます。
【できることその②】
各個別ページに設置したマップのピン(マーカー)をひとつのマップ上にまとめて表示させることができます。
ピン(マーカー)をクリックすると吹き出しがでますので、その中のタイトルリンクをクリックするとその個別に移動します。
各ページのピン(マーカー)をひとつにまとめる方法はとても簡単です。下のショートコードを、「投稿」や「固定ページ」の投稿記事本文エディタに書き込むだけ。
[mashup query=”post_type=post”]
これだけで、各ページのマップ上のピンをひとつのマップにまとめることができます。
ウィジェットでショートコードが使えるように設定のしてあるwordpressテーマでしたら、サイドバーなどのウィジェットエリアにもショートコードでマップを設置することができます。
アップグレード版でできることを2つ紹介しましたが、このほかにももうちょっといろいろとできることがあります。
管理画面の「MapPress」の設定画面を見ると、無用版ではなかった設定があることに気づくと思いますので、いろいろといじってみてください。
このプラグインがあればアイディア次第でいろんなサイトが出来そうですよね♪例えば、脱毛サロンミュゼプラチナムの全国店舗情報サイトなど作ってみたいなぁと思いました^^
いろんな場面で活躍できそうなプラグインですので、ぜひ使ってみてください♪
動画コンテンツサイト用のHTML版テンプレートとアフィリサイト用のHTML版テンプレートを無料で配布しています。HTML版はどちらも無料です。
何らかのお店などの店舗情報を掲載しているサイトを運営している方は、「各店舗情報ページに、その店の場所がわかるようにマップを掲載したいな」と思ったりしませんか?
例えば、全国のエステサロンを紹介するサイトを作り、各都道府県にあるエステサロンの店舗情報ページを作成。「店舗場所のところにピンを立てたマップをページに掲載したい!」と考える人もいると思います。
「できれば、作成した各店舗情報のページのマップのピンを一つにマップにまとめたい」と思ってる人もけっこういるのではないでしょうか?
そういったことが簡単にできるプラグインがあるのでご紹介します。
目 次
Googleマップにピン(マーカー)を立てよう
Googleマップを簡単に設置し、マップ上にピン(マーカー)を立てることが出来るプラグインというのが、「MapPress Easy Google Maps」というプラグインです。
このプラグインは基本的には無料ですが、有料でアップグレードすることもできます。
管理画面の「プラグイン」→「新規追加」で「MapPress Easy Google Maps」を検索。
インストール&有効化をしてください。
プラグインを有効化すると管理画面のメニューに「MapPress」という項目ができるので、それをクリックすると設定画面が開きます。
2か所だけやっておいたほうがよい設定があるので書いておきます。
「ローカライズ」というところの「言語」の部分に、「ja」と書き込んでおくと、Googleマップ内の表記が日本語になります。
次に「その他」のところの「マップサイズ」のところでサイズを指定しておくと使いやすいです。なぜか「太さ」と書かれてますがここは幅です。「Height」は高さです。
幅100%と書き込んでおくとレスポンシブに対応し、スマホなどで見た時にスマホ画面に合わせてサイズが変化します。縦サイズは350px前後くらいにしておくとパソコン画面でもスマホ画面でも見やすいです。
ラジオボタンにチェックが入っているサイズが個別ページにマップを掲載するときのデフォルトサイズになります。
投稿ページなどにマップを掲載しよう
「投稿」や「固定ページ」などの記事投稿ページに行くと、下記のように「MapPress」というものが追加されています。
マップを作るために「新規マップ」というボタンをクリック。
すると上記のようなフィールドなどが現れます。
マップの場所指定するために、赤で囲ったフィールドに、ピンを表示させたい場所の住所などを入力します。住所でも良いですし、緯度経度でもOKです。
あとは、有名な場所であれば住所などではなく建物名などで大丈夫なものもあります。(例えば東京スカイツリーとか東京ビッグサイトとか)
試しに東京スカイツリーの住所を入力してから虫眼鏡のアイコンをクリック。
すると、東京スカイツリーの場所にピン(マーカー)が打たれます。
地図上に打たれたピン(マーカー)をクリックすると小さなエディタが出現し、Googleマップ上でピンをクリックしたときに表示される吹き出しの中を作成することができます。写真なども入れ込むことができます。
編集が終わったら「保存」をします。
保存を完了させると上記のような表示になるので、「記事に挿入」をクリック。
すると投稿記事エディタの中にマップのショートコードが挿入されます。この状態で記事を公開すると、ページにマップが表示されるようになります。
下記の画像は投稿した記事の中にマップを設置した例です。
このような感じで各店舗の情報ページを作りマップを掲載しておくと、場所を知りたいユーザーに見やすくわかりやすい店舗情報ページになると思います。
このプラグインはアップグレードするともっと良いことができます
この「MapPress Easy Google Maps」というプラグインは基本的には無料で使えます。ですがアップグレード版もあります。
価格はBasic License(3サイト分)で$29.95。1サイト分だと1,000円くらいですので安いです。Developer Licenseは無制限。Developer Licenseの価格は$49.95なので5,000円くらいですね。いずれにしても高くないプラグインなのでアップグレードも検討してみると良いと思います。
ただ「One year of updates and support」という表記があるので、1年間しかアップデートやサポートはしませんということなのでしょうか?
この部分はよくわからないので、ご自身でお調べになってください。
アップグレード版でできること
【できることその①】
まず、マップ上のピン(マーカー)を別のものに変更することができる。自分で用意した「png」画像ファイルのアイコンなどをピンにすることも可能です。各ページ、別々のピンを指定することができます。
【できることその②】
各個別ページに設置したマップのピン(マーカー)をひとつのマップ上にまとめて表示させることができます。
ピン(マーカー)をクリックすると吹き出しがでますので、その中のタイトルリンクをクリックするとその個別に移動します。
各ページのピン(マーカー)をひとつにまとめる方法はとても簡単です。下のショートコードを、「投稿」や「固定ページ」の投稿記事本文エディタに書き込むだけ。
これだけで、各ページのマップ上のピンをひとつのマップにまとめることができます。
ウィジェットでショートコードが使えるように設定のしてあるwordpressテーマでしたら、サイドバーなどのウィジェットエリアにもショートコードでマップを設置することができます。
アップグレード版でできることを2つ紹介しましたが、このほかにももうちょっといろいろとできることがあります。
管理画面の「MapPress」の設定画面を見ると、無用版ではなかった設定があることに気づくと思いますので、いろいろといじってみてください。
このプラグインがあればアイディア次第でいろんなサイトが出来そうですよね♪例えば、脱毛サロンミュゼプラチナムの全国店舗情報サイトなど作ってみたいなぁと思いました^^
いろんな場面で活躍できそうなプラグインですので、ぜひ使ってみてください♪