Wordpressの導入〜Googleマップを表示させる

# はじめに
私自身Webサイトを作ったりすることはないのですが、あまりITに詳しくない知人から「WordpressでGoogleマップ表示させたいんだけどどうすればいいの？」っていう質問を受けたので、少しだけ触ってみました。

#　動作環境
- Mac OS X Yosemite 10.10.5
- Docker version 17.09.1-ce, build 19e2cf6
- docker-compose version 1.17.1, build 6d101fb

# Wordpressのインストール
## docker-composeファイルの作成
まずはWordpressをインストールするために、以下のようなdocker-compose.ymlを作成します。

```
version: '3'

services:
   db:
     image: mysql:5.7
     volumes:
       - db_data:/var/lib/mysql
     restart: always
     environment:
       MYSQL_ROOT_PASSWORD: somewordpress
       MYSQL_DATABASE: wordpress
       MYSQL_USER: wordpress
       MYSQL_PASSWORD: wordpress

   wordpress:
     depends_on:
       - db
     image: wordpress:latest
     ports:
       - "8000:80"
     restart: always
     environment:
       WORDPRESS_DB_HOST: db:3306
       WORDPRESS_DB_USER: wordpress
       WORDPRESS_DB_PASSWORD: wordpress
volumes:
    db_data:
```

## docker-composeを実行
次に以下のdocker-composeコマンドを実行し、上記で作成したdocker-compose.ymlをビルドします。

```
work $ docker-compose up -d
Creating network "work_default" with the default driver
Creating volume "work_db_data" with default driver
Pulling db (mysql:5.7)...
5.7: Pulling from library/mysql
f49cf87b52c1: Pulling fs layer
78032de49d65: Downloading [==================================================>] 78032de49d65: Download complete
f49cf87b52c1: Downloading [>                                                  ]  539.8kB/52.6MBownloading [===============================================>   ] 837546b20bc4: Download complete
f49cf87b52c1: Downloading [=>                                                 ] f49cf87b52c1: Pull complete
78032de49d65: Pull complete
837546b20bc4: Pull complete
9b8316af6cc6: Pull complete
1056cf29b9f1: Pull complete
86f3913b029a: Pull complete
4cbbfc9aebab: Pull complete
8ffd0352f6a8: Pull complete
45d90f823f97: Pull complete
ca2a791aeb35: Pull complete
Digest: sha256:1f95a2ba07ea2ee2800ec8ce3b5370ed4754b0a71d9d11c0c35c934e9708dcf1
Status: Downloaded newer image for mysql:5.7
Creating work_db_1 ...
Creating work_db_1 ... done
Creating work_wordpress_1 ...
Creating work_wordpress_1 ... done
```

## Wordpressにアクセス
上記コマンドが実行されれば無事Wordpressが起動されているはずです。
ブラウザから `http://localhost:8000` でアクセスして確認してみましょう。

アクセスするとまずは言語設定、サイト名、ユーザ名、パスワード等聞かれるので設定します。これらは後から変更することも可能です。

# Google Mapの表示
ここでは以下の3パターンでGoogle Mapを表示する方法を紹介します。

- Google Mapの共有用URLを埋め込む方法
- WordpressのSimple Mapプラグインを使う方法
- WordpressのWP Google Mapプラグインを使う方法

## Google Mapの共有用URLを埋め込む方法
これが1番シンプルで簡単な方法です。
まずはGoogle Mapにアクセスし、埋め込みたい場所を検索します。
そこで、以下の画面で示す **共有** をクリックします
![FireShot_Capture_9_-_東京タワー_-_Google_マップ__-_https___www_google_co_jp_maps_place.png](https://qiita-image-store.s3.amazonaws.com/0/113160/b24ea3ec-0f13-5b38-db06-2f17f64e6c1f.png)

そうすると以下のように共有用URLが表示されます。
![FireShot Capture 8 - 東京タワー - Google マップ_ - https___www.google.co.jp_maps_place.png](https://qiita-image-store.s3.amazonaws.com/0/113160/6c1d3f59-6dc4-af7c-603d-2e9fa5bb411e.png)

そのURLを本文に貼り付けます。このとき入力を **テキストモード** に切り替えておいてください。
![FireShot_Capture_6_-_新規投稿を追加_‹_テストサイト_—_WordPress_-_http___localhost_8000_wp-admin_post-new_php.png](https://qiita-image-store.s3.amazonaws.com/0/113160/74fc26b4-380f-fdf1-6bf6-1c4bf5e3ab49.png)

プレビューで確認します。
![FireShot_Capture_7_-_投稿テスト_–_テストサイト_-_http___localhost_8000__p_4_preview_true.png](https://qiita-image-store.s3.amazonaws.com/0/113160/03654480-707e-63d7-8a0e-3fa573f3c043.png)

## WordpressのSimple Mapプラグインを使う方法
いちいちGoogle Map開いて検索して、コピーしてくるのがめんどくさい！っていう人はSimple Mapプラグインがおすすめです。

まずはプラグインをインストールします。以下のように **プラグイン** をクリックし、そこから「Simple Map」と検索しましょう。
![FireShot_Capture_16_-_About_‹_テストサイト_—_WordPress_-_http___localhost_8000_wp-admin_about_php.png](https://qiita-image-store.s3.amazonaws.com/0/113160/d66d2b08-afef-2ce1-0e65-2f20759f5347.png)

インストールが完了すると、プラグイン一覧にSimple Mapが表示されるので有効化をクリックします。
次にSimple Mapプラグインを使うため **Google Map APIキー** を以下から取得します。

- Google Map API  
https://developers.google.com/maps/web/

APIキーというのはGoogle Mapと連携するために必要なパスワードのようなものなので、 **他の人には絶対に知られないようにしてください。**

Google Map APIキーを取得したらSimple Mapプラグインの設定画面で入力します。
そうすればSimple Mapプラグインを使う準備は完了です。

あとは記事の作成画面から以下のように入力するだけでGoogle Mapを埋め込めます。
![FireShot_Capture_14_-_投稿の編集_‹_テストサイト_—_WordPress__-_http___localhost_8000_wp-admin_post_php.png](https://qiita-image-store.s3.amazonaws.com/0/113160/df7c894f-3711-9172-2d8d-2b8d68e1d8ee.png)


プレビューで確認してみます。
![FireShot_Capture_17_-_テストサイト_-_http___localhost_8000__p_9_preview_true.png](https://qiita-image-store.s3.amazonaws.com/0/113160/01a4f644-e6d7-283a-e033-1ca43d008214.png)

タグは `[map]東京都港区芝公園４丁目２−８[/map]` のように記述することもできます。
他にも座標を緯度/経度で指定する方法や、ズームの倍率の変更などもできますが、ここでは割愛します。
詳しくは[公式ページ](https://wordpress.org/plugins/simple-map/#description)の **ARGUMENTS** の部分を参考にしてください。


## WordpressのWP Google Mapプラグインを使う方法
上記のSimple　Mapプラグインは簡単で便利ですが、複数のPinを立てたり、細かい指定が中々しづらかったりします。
そのような場合はWP Google Mapプラグインを使うと便利です。

まずはSimple Mapプラグインのときと同様にWP Google Mapプラグインをインストールします。
このプラグインはSimple Mapプラグインと違い **Google Map Javascript APIキー** が必要になりますので、以下から取得します。

- Google Map Javascript API  
https://developers.google.com/maps/documentation/javascript/get-api-key?hl=ja

こちらもSimple Mapプラグインのときと同様に、プラグインを有効化してAPIキーを入力します。
これで使う準備が完了です。

このプラグインでは、記事の作成とは別にMapを作成しておきます。
![FireShot_Capture_12_-_WPGoogle_Maps_‹_テストサイト_—_WordPress__-_http___localhost_8000_wp-admin_admin_php.png](https://qiita-image-store.s3.amazonaws.com/0/113160/95c5fe27-f390-baee-7b1e-147077f30ca2.png)

1度作成してしまえば繰り返し使うこともできるので、何度も使いまわして貼りたいときなどにも便利です。
上記のように地図を作成したら **Short code** というところに表示されている文字列をそのまま記事に貼り付けます。
![FireShot_Capture_13_-_新規投稿を追加_‹_テストサイト_—_WordPress_-_http___localhost_8000_wp-admin_post-new_php.png](https://qiita-image-store.s3.amazonaws.com/0/113160/f201ec9f-3e93-b2f7-635f-5710e04f0f29.png)

プレビューで確認します。
![FireShot_Capture_11_-_テストサイト_-_http___localhost_8000__p_9_preview_true.png](https://qiita-image-store.s3.amazonaws.com/0/113160/6f60e370-d220-57e0-de82-a7963561858d.png)

# まとめ
Google Mapの共有からURLをコピーしてくる方法が簡単ですが、プラグインを使った方がカスタマイズ等できるので良いと思いました。