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のプラグインをインストールする方法をご覧ください。
GoogleMapを挿入する
具体的にどのように地図を挿入するか紹介します。
このプラグインは、特に設定は必要ありません。ショートコードを利用することで、投稿記事や固定ページにGoogle Mapを挿入できます。
住所だけを入力すればいいので、非常に簡単です。
例えばこのように書きます。
[map addr="東京都墨田区押上１−１−２"]
注意点として、必ず「テキスト」のモードになっていることを確認してから入力してください。
入力が完了してからサイト上で確認すると、このように反映されます。
デフォルトでは、幅が100％ですが、下記のように値を追加することで表示幅と高さを変更できます。
[map addr="東京都墨田区押上１−１−２" width="400px" height="300px"]
幅が変わったことがわかりますね。
また、スポットを表示するだけでなく、ポップアップでコメントを追加することもできます。
その場合は、[map addr=*****]~[/map]の間に、表示したい文章を書きましょう。HTMLやビジュアルエディタへの装飾も反映されます。
[map addr="東京都墨田区押上１−１−２"]スカイツリーです 一度は行きたいね[/map]
今回の記事は以上です。
WordPressの他のプラグインを使ってみたい場合は、Crazy Boneの使い方も合わせてご覧ください。
ぜひ、WordPressの使い方を覚えましょう！
本当に手軽ですね！タグに住所を入れるだけでいいなんて！！
毎回Google Mapにアクセスするのは大変だからね。
そうですね！
[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。
