専門知識不要で超簡単!WordPressのページにGoogleMapを直接貼り付ける方法

WordPress/ワードプレス

Google検索しても情報が多すぎて分からない

こんにちは。WEBディレクターの金川です。
さて今日も昨日に続いてノウハウ系&Tips系の記事をお送りします。
基本ノウハウ系のお話はGoogleで検索すれば情報がざくざく出て来るので、ボクがブログに書く意義ってあるのかなあとこれまで思っていました。
でもね、最近よく耳にするのは、検索して調べてもいろいろ情報が有りすぎて、どれを参考にしたらいいの分からない、あるいは難しすぎてお手上げだ、というようなお話です。
なのでボクも若干これまでのスタンスを変えて、ボクなりに噛み砕いた内容で伝えて行こうかな?なんてことを考えているわけです。
それに最近ボクのWordPress講座を受講してくださる方の中には、WordPressの立上げ時こそPCでやるけれど、その後の運営は基本スマートフォンが中心という方が増えてきました。
そしてそんな方々のうちの結構な割合の方が、そもそも検索をあまり使わないという傾向を何となく感じるんですよ。
だからこそボクがそんなみなさんに向けてノウハウをお伝えすることには、意義があるよねと考える次第です。
では早速今日のテーマ、
WordPressの記事にGoogleMapを貼り付ける
を紹介させていただきますね。

WordPress固有の機能「固定ページ」

WordPressには「固定ページ」という時系列ではない、時間の経過とともに流れていったりしないページを表示する機能があります。
この固定ページこそWordPressの大きな価値の一つと言うことができると思います。
そしてこの固定ページを有効に活用することで、例えば以下のようなコーナーあるいはページを用意することができます。

  • サービスメニュー
  • 店舗案内
  • スタッフ紹介
  • お店へのアクセス

などなど。まさにいわゆる「ホームページ」そのものですね。
そして上記の「お店へのアクセス」のページにGoogleMapを表示しておくと、お客さんに対して親切で分かりやすいですよね。
なので、
WordPressの記事にGoogleMapを貼り付ける
というノウハウが生きてくるんです。

GoogleMap上で行う作業のプロセス

先にお伝えしておくと、今回は見やすく分かりやすくする目的で、PCのモニター上での表示を例にしています。
ただしスマートフォンでも考え方は共通なので、そのへんは置き換えて考えてくださいね。

まずGoogleMapにアクセスして希望の地図を呼び出す

今回は以下の地点を例にします。
▼大阪府吹田市五月が丘北1−17(ISEYAクリーニング)
▼地図が表示されたら「共有」ボタンをクリック。

 
▼こんなボックスが開くので、タブを「リンクの共有」から「地図を埋め込む」に切り替える。

 
▼「地図を埋め込む」モードで表示されているコードをコピーする。

GoogleMapでも作業はここまでで、後はWordPressの記事編集画面に移ります。

WordPress編集画面上で行う作業プロセス

▼通常はビジュアル編集モードになってるので、「テキスト」タブをクリックして、テキスト編集モードにします。

 
▼テキスト編集モードにしたら、さきほどコピーした地図埋め込みコードを、本文枠には貼り付け(ペースト)します。

暗号のようなものなので、コードの意味は分からなくても大丈夫。
 
▼結果を確認するために、ビジュアル編集モードに戻します。

無事GoogleMapを記事中に貼り付けることができました!

実際にGoogleMapを貼り付けた例を見る

▼これは見本画像ではなくて、本当にGoogleMapを貼り付けた現物見本です。

GoogleMap上でやるのと同じように、この記事上でも拡大縮小、地図に移動、などなどが可能です。
また「拡大地図を表示」をクリックすれば、別ウインドウで本家のGoogleMapが開きます。
あと、用意されている地図埋め込みコードは横幅600ピクセルに設定されていまして、記事上では若干横幅が足りないので、上の例では横幅750ピクセルに微調整してあります。
この微調整はちょっとややこしいので、友人知人のみなさんとWordPress受講されたみなさんは、ボクに直接聞いてくだされば伝授いたします(笑)
こうやってみると、結構簡単にできるんですよ。
ただWeb上で検索してやり方を調べるのは、なかなかに骨の折れる仕事です。
そんなみなさんのお役に立てるとうれしいです。
本日は以上です。