simple-mapの使い方ーWordPressプラグイン【初心者向け】

WordPressのプラグイン【simple-map】の使い方を初心者向けに解説した記事です。簡単な操作で、Google MapをWordPressのサイト上に追加できます。ショートコードを使うので、やり方を紹介しています。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

WordPressのプラグインの使い方を初心者向けに紹介する記事です。

今回は、WordPressに簡単にGoogleマップの地図を表示させることができるプラグイン、simple-mapの使い方を紹介します。

 

なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。

 

大石ゆかり

田島メンター!!WordPressの記事に地図を入れたいんですけど、手軽にできる方法ってないですか〜?

田島悠介

それなら「simple-map」なんていいんじゃないかな?

大石ゆかり

「simple-map」ですか!手軽にできそうな名前ですね!!

 

simple-mapとは

WordPressで制作したWebサイト上に、Google Mapを追加できるプラグインです。

もともとプラグインがなくても地図は挿入できますが、いちいち検索してタグをコピーするのは意外と手間がかかるものです。

地図をよく使うサイトでは、ぜひ使ってみてください。

 

 

プラグインをインストールする

このプラグインは、管理画面から「プラグインを検索」してインストールもできますし、プラグイン公式サイトからダウンロードすることも可能です。

インストール方法がわからない場合はWordPressのプラグインをインストールする方法をご覧ください。

 

 

[PR] WordPressで挫折しない学習方法を動画で公開中

GoogleMapを挿入する

具体的にどのように地図を挿入するか紹介します。

このプラグインは、特に設定は必要ありません。ショートコードを利用することで、投稿記事や固定ページにGoogle Mapを挿入できます。

 

住所だけを入力すればいいので、非常に簡単です。

例えばこのように書きます。

[map addr="東京都墨田区押上1−1−2"]

 

注意点として、必ず「テキスト」のモードになっていることを確認してから入力してください。

simplemap

 

入力が完了してからサイト上で確認すると、このように反映されます。

simplemap2

 

デフォルトでは、幅が100%ですが、下記のように値を追加することで表示幅と高さを変更できます。

[map addr="東京都墨田区押上1−1−2" width="400px" height="300px"]

simplemap4

 

幅が変わったことがわかりますね。

simplemap3

 

また、スポットを表示するだけでなく、ポップアップでコメントを追加することもできます。

その場合は、[map addr=*****]~[/map]の間に、表示したい文章を書きましょう。HTMLやビジュアルエディタへの装飾も反映されます。

[map addr="東京都墨田区押上1−1−2"]スカイツリーです
一度は行きたいね[/map]

simplemap5

今回の記事は以上です。

 

WordPressの他のプラグインを使ってみたい場合は、Crazy Boneの使い方も合わせてご覧ください。

ぜひ、WordPressの使い方を覚えましょう!

 

大石ゆかり

本当に手軽ですね!タグに住所を入れるだけでいいなんて!!

田島悠介

毎回Google Mapにアクセスするのは大変だからね。

大石ゆかり

そうですね!

 

[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。