Docker ComposeでWordPressのテーマ開発環境を一瞬で作成する

きっかけ

WordPressでテーマ開発をする際、
用意された環境が本番環境しかないときがあります。
そんなとき、Dockerでローカル環境のWordPress検証環境をすぐに作れるようにしたく、
用意することにしました。

環境

• Mac、WindowsどちらでもOK
• Docker、Docker Compose両方をインストール済

ディレクトリ構成

WordPressのローカル検証環境を立ち上げられば良いので、シンプルな構成にします。
まずはプロジェクト用の適当なフォルダを用意します。
（ここではwordpress-dockerという名前にしました。）

 wordpress-docker/
  └─docker-compose.yml

開発用の空テーマをダウンロード

開発用の空テーマを用意します。
underscores.me というサイトから空テーマを取得することができます。
今回は、original-theme という名前のテーマを作成したいので、
original-themeと入力してダウンロードします。

このフォルダはWordPressコンテナのwp-content/themesにマウントしたいので、
ダウンロードしたら、wordpress-dockerディレクトリに配置します。

 wordpress-docker/
  ├─original-theme/
  │  ├─inc
  │  ├─js
  │  ├─languages
  │  ├─...
  │  
  └─docker-compose.yml

docker-compose.yml作成

wordpress-docker ディレクトリ配下に、docker-compose.ymlを作成します。

docker-compose.yml

version: '3'

services:
  db:
    image: mysql:5.7
    ports:
      - "3307:3306"
    environment:
      MYSQL_ROOT_PASSWORD: rootwordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress
    volumes:
      - db-data:/var/lib/mysql


  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    ports:
      - "8001:80"
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_DB_NAME: wordpress
    volumes:
      - ./original-theme:/var/www/html/wp-content/themes/original-theme

  phpmyadmin:
    depends_on:
      - db
    image: phpmyadmin/phpmyadmin
    ports:
      - "8081:80"

volumes:
  db-data: {}

Docker起動

Docker Composeを使って立ち上げます。

$ docker-compose up -d

アクセスする

WordPressコンテナはポート8001で動かしているので、
http://localhost:8001にアクセスします。
WordPressのインストール画面が表示されれば成功です。

あとは、手順に沿えばWordPressのインストールは完了です。

phpMyAdminのコンテナもポート8081で追加しているので、
データベースにはhttp://localhost:8081でアクセスできます。

作成した空テンプレートを有効化する

先ほど作成した空テーマ original-theme を有効化します。

これでローカル環境でテーマ開発がいくらでもできますね！
また wordpress-docker ディレクトリをGitで管理するようにしてしまえば、
複数人で開発するときにも便利です。