Shifter-LocalでWordPressテーマ開発環境を作る

この投稿はShifter Advent Calendar 2019の12月23日の投稿です。

Shifter-Localとは

Docker image for testing WordPress themes and plugins while migrating to Shifter.
Shifter-Localとは、Shifterに移行するときにWordPressのテーマやプラグインをテストするためのDockerイメージです。
https://github.com/getshifter/shifter-local

今回はShifter-Localを使ってWordPressのテーマ開発環境の作成方法を簡単に説明します。

前提条件

ローカル環境にgitは入ってますよね?
Dockerは予めインストールしといてください。
基本的にコマンドラインで操作します。

Shifter-Localのインストール

適当な場所にgit cloneします。

git clone https://github.com/getshifter/shifter-local

cloneしたディレクトリに移動します。

cd shifter-local

Dockerを起動します。

docker-compose up -d

起動後、 https://127.0.0.1:8443 にウェブブラウザでアクセスするとWordPressのインストール画面が表示されるはずです。

WordPressとテーマのセットアップ

ここからブラウザ上でWordPressをインストールしてもいいのですが、Shifter-Localにはwp-cliも入ってることですし、ここはコマンドラインでテスト環境用としてサクッともろもろをインストールしてしまいます。

まずはコンテナーにアタッチします。

docker exec -i -t shifter-local_wp_1 /bin/bash

以下のコマンドではshifter-local_wp_1コンテナ内で、

ユーザ名:supervisor パスワード: strongpassword でWordPressをインストール
プラグインをいくつかインストールして有効化
WordPressの言語設定を日本語に設定
テーマユニットテストデータの日本語版をインストール
スターターテーマの_sをテーマ名sample-themeとしてインストールして有効化

を実行しています。

sudo -u www-data wp core install \
     --path=/var/www/html/web/wp \
     --url=example.com \
     --title=Example \
     --admin_user=supervisor \
     --admin_password=strongpassword \
     --admin_email=info@example.com \
&& \
sudo -u www-data wp plugin install \
    --path=/var/www/html/web/wp \
    debug-bar \
    show-current-template \
    wordpress-importer \
    --activate \
&& \
sudo -u www-data wp language core install ja \
    --path=/var/www/html/web/wp \
&& \
sudo -u www-data wp language core activate ja \
    --path=/var/www/html/web/wp \
&& \
wget https://raw.githubusercontent.com/jawordpressorg/theme-test-data-ja/master/wordpress-theme-test-data-ja.xml \
&& \
sudo -u www-data wp import wordpress-theme-test-data-ja.xml \
    --path=/var/www/html/web/wp \
    --authors=create \
&& \
rm wordpress-theme-test-data-ja.xml \
&& \
sudo -u www-data wp scaffold _s sample-theme \
    --path=/var/www/html/web/wp \
    --theme_name="Sample Theme" \
    --author="John Doe"

テーマはdocker-compose up -dを実行したディレクトリのvolume/app/themes内にsample-themeというディレクトリ名でできているはずです。

で https://127.0.0.1:8443/ をブラウザで開くと日本語サンプルデータがセットアップされた状態でWordPressが開きます。

ログインは https://127.0.0.1:8443/wp-login.php からできます。

すでにテーマがあるとかgitからcloneしたい場合はvolume/app/themesにてゴニョゴニョしてください。

また、make clean を実行するとこの環境を初期化して最初から何度でもやり直せます。

ではよいShifterライフを!

参考:
https://support.getshifter.io/en/articles/2453105-shifter-local-explained
https://support.getshifter.io/en/articles/1566084-debugging-generator-errors-with-shifter-local