icon
icon

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

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

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女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週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学で学習していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」

こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料相談を予約する