WordPress で Google マップが誰でも簡単に横幅めいっぱいに表示させられるプラグインを作りました

About WordPress

みなさんは WordPress ブログやウェブサイトに Google マップをどのような方法で埋め込んでいますか?

ぼくは今まで、プラグイン Simple Map を使ったり、function.php へ自作のショートコードを登録したり・・・何パターンか試しました。

しかし、どれも(自分的に)ちょっと面倒だな・・・と感じて、結局自分が使いやすいプラグインを自作してみることにしました。

今回は「WordPress の投稿に Google マップの表示を横幅めいっぱいに表示させることができるプラグイン作りました」をお送りします。

ぼくが記事内 Google マップ埋め込み表示に求めること

  • 記事幅いっぱいに Google マップの横幅もなっていること(横幅が常に100%)
  • レスポンシブ対応であること(PCでもモバイルでも横幅が常に100%)
  • モバイルでも PC と同じ比率で表示して欲しい
  • Google マップ本体からの共有埋め込みコード(iframe)で投稿に埋め込めること
  • ビジュアルエディタのツールボタンから簡単に埋め込めること
  • マップを削除したい時には簡単にそれが行えること
  • すべてビジュアルエディタだけで完結できること(HTML エディタは使わない)

これです。

というわけで、これらの希望を満たすべく、自分で理想のプラグインをつくってみることにしました。

なんでプラグインを作ることにしたのか?

まあ、実のところ、CSS を style.css へ記述して、function.php へショートコードを登録して、AddQuicktag のような既存のプラグインを使えば同じことができるのですが・・・

複数の運営サイトにひとうひとつ同じものを設定していくのが超面倒だったので、インストールして有効化するだけで済む自作プラグインを用意することにしたんです。

プラグイン「googlemap-responsive」

今回自作したプラグインは「googlemap-responsive」という名前で、まんま Google マップをレスポンシブにして埋め込めるという感じです。

かなり突貫工事で作ったので必要最小限機能のとてもシンプルなプラグインです。

あ、野良プラグインなのでプラグイン検索ではでてきません。あしからずです。

では、以下からこのプラグインの説明を行う流れでダウンロードリンクも貼りますね。

プラグイン「googlemap-responsive」で出来ること

レスポンシブ対応の Google マップ埋め込み

実際に以下でこのプラグインを使って Google マップを埋め込んでみました。

どうです? PCでもモバイルでも、ちゃんと横幅めいっぱいに Google マップが広がっているでしょ?

因みにモバイルだとこんな感じで表示されます。

PC表示と同じ縮尺でスッキリした感じです。また、マップをタップすると Google マップが別途開きます。

カエレバやアプリーチなど HTML 入力が必要なサービス

カエレバやアプリーチなどの HTML 入力が必要なサービスに対して、HTML エディタを使うこと無く直接ビジュアルエディタへ埋め込むことができます。

例)カエレバ

例)アプリーチ

Life360-子供の見守り

Life360-子供の見守り

Life360無料posted withアプリーチ

こんな感じでビジュアルエディタから直接埋め込むことができます。

まあ、「googlemap-responsive」という名称のプラグインですが、仕様の関係上の副産物としてこのような使い方ができるわけなんです。

※カエレバやアプリーチのデザインは含まれてません。自前のテーマで用意してね。

googlemap-responsive のダウンロードとインストール

まずは以下からプラグイン本体「googlemap-responsive.zip」をダウンロードします。

インストールはマニュアルで行います。


  1. プラグインの「新規追加」をクリック。

  2. 「プラグインのアップロード」をクリック。

  3. ファイルを選択から先程ダウンロードした「googlemap-responsive.zip」を選択して、「今すぐインストール」を押します。

  4. 「プラグインを有効化」を押します。
  5. これで「googlemap-responsive」が使えるようになりました。

つづいて以下から詳しい使い方です。

Google マップの埋め込み方法


  1. プラグインを有効化すると、ビジュアルエディタのツールバーにこんなボタンアイコンが表示されています。投稿本文の Google マップを表示させたい場所でアイコンをクリックします。

  2. 画像のようなショードコードが自動的に入ります。間の ※ はショードコードの継ぎ目がわかるように入れてあるだけですから消してください。

  3. Enter キー(return)を 2回押すとこんな風になります。間のカーソル「|」がある部分に Google マップの埋め込みコードが入ります。とりあえずこの状態のまま Google マップで埋め込みたい地図を開きます。
  4. ↑「3」の状態にすることは、後で編集しやすくするためと、<p>タグをいれることによって段落と同じ余白をマップに付与できるからです。

  5. Google マップの埋め込みたい場所を開いたら「共有」をクリックします。

  6. 「地図を埋め込む」タブを選択すると、埋め込み用の HTML コードがコピーできるのでコピーします。

  7. 投稿画面に戻り矢印の部分にカーソルを合わせて・・・

  8. ツールバーのこちらのアイコンをクリックします。

  9. HTMLコードを埋め込むウィンドウがポップアップするので、フォームへ先程コピーした Google マップの埋め込みコードを貼り付けて OK を押します。

  10. ビジュアルエディタにはこのように表示されます。プレビューを確認してみてください。マップが投稿エリアの横幅めいっぱになってますよね? モバイルで確認すれば同じくらいの縦横比率で表示されていると思います。

カエレバやアプリーチなど HTML 挿入が必要なサービス


  1. HTML 挿入が必要なサービスをビジュアルエディタだけで直接コード埋め込みをするには、左側の「HTMLコードを埋め込む」ボタンだけ使います。

  2. まず、カエレバなどで埋め込みに必要な HTML コードをコピーします。

  3. 「HTMLコードを埋め込む」ボタンを押すとコード入力ウィンドウがポップアップします。

  4. フォームにコピーした HTML コードをいれて OK すると・・・

  5. ばっちり表示されます。ビジュアルエディタだけで完結できて便利です。

プラグインで埋め込んだマップを削除するには


  1. 後の ] を Shift + 左クリックで選択して、そのまま Shift キーをおしながら最初の [ を左クリックすると、その範囲が選択されます。BackSpace キーや Delete キーを押せばキレイサッパリ削除できます。

  2. カエレバやアプリーチなどを削除する場合には、改行して余白を用意して、あとは Google マップを消すのと同じで Shift + 左クリックで選択して削除すれば OK です。

あとがき

「googlemap-responsive」は、ただ、Google マップを簡単に楽ちんに横幅めいっぱいに表示させたいがためだけに作ったプラグインで、ついでにカエレバとアプリーチも簡単に埋め込めれば尚よしっ! というスタンス。

まあ、個人的には大いに役に立つプラグインなのですが・・・正直しょぼいプラグインと言われれば否定は全くしません。自分が使い勝手よければそれで万事OKなもので。

使いたい方はどうぞご自由にダウンロードしてお使いください。