【開発環境 #8】WordPressテーマ開発環境を構築する【WSL2,Docker】

前回はDockerでWordPressの開発環境を構築しました。今回はもう少し踏み込んで、WordPressテーマの開発環境を構築します。とは言っても、WordPressテーマをスクラッチ開発するのは大変なので、ユーザーのカスタマイズを前提に構成されたテーマであるUnderscoresを使用します。

環境
Windows
10 home (20H2)
WSL
2
Ubuntu
20.04 LTS
Docker Desktop for Windows
3.5.2 (66501)
WSL2 + Docker の記事一覧
  1. XAMPPからWSL2・Dockerへ
  2. WSL2、Ubuntuのアクセス方法とインストール場所変更
  3. Docker Desktopをインストールする
  4. DockerとXAMPPについて
  5. PHP開発環境の構築
  6. PHP, phpMyAdmin, MariaDBをDocker Composeで
  7. WordPress開発環境を構築する
  8. WordPressテーマ開発環境を構築する

Dockerイメージの選定

使用するDockerイメージは、前回と同じなので省略します。

ビルドコンテキスト

home/dev/wp
|-- docker/
|   `-- php-apache/
|       |-- Dockerfile
|       |-- php.ini
|       `-- wp-init.sh
|-- src/
|   `-- public_html/
`-- docker-compose.yml

Dockerfile

今回はコンテナイメ－ジ：wordpress:php7.4-apacheを使用します。

FROM node:14.18.1-slim as node
FROM wordpress:php7.4-apache

ARG UID=1000
ARG GID=1000
ARG UNAME=dev

COPY --from=node /usr/local/bin/node /usr/local/bin/node
COPY --from=node /usr/local/lib/node_modules /usr/local/lib/node_modules
RUN ln -s /usr/local/bin/node /usr/local/bin/nodejs && \
    ln -s /usr/local/lib/node_modules/npm/bin/npm-cli.js /usr/local/bin/npm && \
    ln -s /usr/local/lib/node_modules/npm/bin/npm-cli.js /usr/local/bin/npx

COPY --from=composer:latest /usr/bin/composer /usr/bin/composer
COPY --from=wordpress:cli-php7.4 /usr/local/bin/wp /usr/local/bin/wp

COPY ./php.ini /usr/local/etc/php/conf.d/z-php.ini
COPY ./wp-init.sh /var/tmp/wp-init.sh

ENV APACHE_DOCUMENT_ROOT=/var/www/html/public_html
RUN sed -ri -e 's!/var/www/html!${APACHE_DOCUMENT_ROOT}!g' /etc/apache2/sites-available/*.conf && \
    sed -ri -e 's!/var/www/!${APACHE_DOCUMENT_ROOT}!g' /etc/apache2/apache2.conf /etc/apache2/conf-available/*.conf

RUN pecl install xdebug-3.1.2 && \
    docker-php-ext-enable xdebug && \
    rm -r /tmp/pear

RUN groupadd -g ${GID} docker && \
    useradd -u ${UID} -g ${GID} -o -s /bin/bash -m ${UNAME} && \
    usermod -aG www-data ${UNAME}

USER ${UID}

ユーザー作成

前回までは特にユーザー指定をしていませんでしたが、そうするとコンテナでのデフォルトユーザーがrootになります。Ubuntuの一部のディレクトリをコンテナへマウントしているのですが、Ubuntuとコンテナのユーザーや権限が違うと何かと不具合があるので、ここではコンテナのデフォルトユーザーを作成して指定します。今回はUbuntu側と合わせることにします。

Node & Composer & WP-CLI

Node、Composer、WP-CLIを、マルチステージビルドを使用してインストールします。
Nodeのバージョンがやや古めなのは、Underscoresで指定されているnode-sass(4.14.1)がnode(14)以下だったからです。

php.ini

php.iniは、コンテナで設定が上書きされるのを防ぐために、このようなファイル名にしています。(conf.d/内の*.iniファイルが、アルファベット順で上書き結合されるため)

wp-init.sh

WP-CLIで実行するコマンドを書いたシェルスクリプトです。

#!/bin/sh

wp core install --url='http://localhost:8080' --title='Theme Title' --admin_user='user' --admin_password='pass' --admin_email='mail@example.com'

wp language core install ja --activate

wp option update default_comment_status closed
wp option update default_pingback_flag 0
wp option update default_ping_status closed
wp option update date_format 'Y-m-d'
wp option update permalink_structure /%postname%
wp option update time_format 'H:i'
wp option update timezone_string 'Asia/Tokyo'

wp plugin delete akismet
wp plugin delete hello.php

wp plugin install classic-editor --activate
wp plugin install classic-widgets --activate
wp plugin install debug-bar --activate
wp plugin install log-deprecated-notices --activate
wp plugin install query-monitor --activate
wp plugin install wp-multibyte-patch --activate

wp user meta update user rich_editing false

# サブディレクトリにインストールした場合
# cp .htaccess ../
# cp index.php ../
# sed -i -e 's/\/wp-blog-header\.php/\/wp\/wp-blog-header.php/g' ../index.php
# wp option update home 'http://localhost:8080'
# wp option update siteurl 'http://localhost:8080/wp'
# wp rewrite structure '/%postname%'

wp scaffold _s example --theme_name='Example' --author='example' --activate --sassify

cd wp-content/themes/example

composer install
npm install

Apache 公開ディレクトリの変更

Apacheのデフォルト/var/www/htmlから、契約しているエックスサーバーの公開ディレクトリに合わせて、/var/www/html/public_htmlへと変更しました。

docker-compose.yml

version: '3'

volumes:
    db_data:

services:
  web:
    build: ./docker/php-apache
    ports: 
      - 8080:80
      - 9003:9003
    volumes:
      - ./src:/var/www/html
    working_dir: /var/www/html/public_html
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_NAME: wordpress
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_DEBUG : 1
      WORDPRESS_CONFIG_EXTRA: |
        define('SAVEQUERIES', true);
        define('WP_POST_REVISIONS', false);
        define('MY_PREFIX', 'my');
        if (isset($$_GET['debug']) && $$_GET['debug'] == 'debug') {
          define('WP_DEBUG', true);
        }
    tty: true
    stdin_open: true
    depends_on:
      - db

  phpmyadmin:
    image: phpmyadmin:latest
    ports:
      - 8081:80
    environment:
      PMA_HOST: db:3306
      PMA_USER: wordpress
      PMA_PASSWORD: wordpress
    depends_on:
      - db

  db: 
    image: mariadb:10.5
    ports:
      - 3306:3306
    command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci --default-time-zone=Asia/Tokyo
    volumes: 
      - db_data:/var/lib/mysql
    environment:
      MARIADB_ROOT_PASSWORD: password
      MARIADB_DATABASE: wordpress
      MARIADB_USER: wordpress
      MARIADB_PASSWORD: wordpress
      TZ: Asia/Tokyo

コンテナ作成&起動

$ pwd
/home/dev/wp

$ docker-compose up -d

Creating network "php_default" with the default driver
Creating volume "php_db_data" with default driver
.....
Creating php_db_1 ... done
Creating php_web_1        ... done
Creating php_phpmyadmin_1 ... done

動作確認

http://localhost:8080でWordPressが、http://localhost:8081でphpMyAdminが動作していることを確認します。

WordPress 設定

WP-CLIを使用して初期設定をサクっと済ませていきます。

コンテナに入る

$ pwd
/home/dev/wp

$ docker-compose exec web bash

WP-CLI の実行

ローカルからコピーしたwp-init.shを実行します。

$ pwd
/var/www/html/public_html

$ bash /var/tmp/wp-init.sh
Success: WordPress installed successfully.
Downloading translation from https://downloads.wordpress.org/translation/core/5.8.2/ja.zip...
.....
    run `npm audit fix` to fix them, or `npm audit` for details

動作確認

http://localhost:8080及びhttp://localhost:8080/wp-admin/へアクセスし、wp-init.shの記述通りの設定がなされたことを確認します。

終わりに（学習方法について）

今回で環境構築は終わりです。これで必要最低限のWSL2+Dockerでの環境構築ができるようになったかと思います。

今回の一連の記事を書くにあたって、Udemyホームページの米国AI開発者がゼロから教えるDocker講座で学習しました。全くの知識ゼロからスタートしましたが、この講座のおかげでここまで楽に進めることができました。これからDockerの学習を考えている人にとてもお勧めです。

WSL2 + Docker の記事一覧

  1. XAMPPからWSL2・Dockerへ
  2. WSL2、Ubuntuのアクセス方法とインストール場所変更
  3. Docker Desktopをインストールする
  4. DockerとXAMPPについて
  5. PHP開発環境の構築
  6. PHP, phpMyAdmin, MariaDBをDocker Composeで
  7. WordPress開発環境を構築する
  8. WordPressテーマ開発環境を構築する