DockerでWordPress環境を構築

前提としてDockerとNode.jsがインストールされていること。

目的

WordPressでチーム開発する予定が立ちそうなのでメモを兼ねて書くことにしました。

できること

dockerを用いてWordPressの環境を作る。
今回はwp-envを使用して立ち上げる。

順番にやっていくだけで簡単に構築できるはずです。
環境構築が苦手な僕でも10分くらいで完了しました。笑

開発環境

Windows10pro
Docker version 20.10.7
npm version 7.19.0
node version 14.17.0

pacage.jsonを作成

任意のディレクトリに移動したら

npm init

pacagenameなどが問われますが特になければエンター連打でOK
ディレクトリ内にファイルができていることを確認

wp-envのインストール

npm i @wordpress/env --save-dev

このコマンドでインストールできる。
node_modulesが作成される。
同時にpacage-lock.json（インストール情報が載ったファイル）というファイルも作成される。

pacage.jsonにコマンドを追記する
・pacage.json元

{
  "name": "wptest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    // 6行目前後のここに書く
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@wordpress/env": "^4.1.0"
  }
}

"wp-env": "wp-env",をscriptsに追記する。

{
  "name": "wptest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "wp-env": "wp-env",  ←ここに追記
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@wordpress/env": "^4.1.0"
  }
}

これでnpm run wp-envが使用できるようになる

WordPressをダウンロードして立ち上げる。

npm run wp-env start

これでDockerが立ち上がってWordPressがダウンロードされて環境が構築される

docker desktopを見てmysqlやWordPressのコンテナが起動していることを確認

これでもう起動しているでブラウザで
localhost:8888
で検索するとトップページが開く

localhost:8888/wp-login.php
検索すると管理ページのログイン画面に飛べます
アドレスが admin
パスワードが password
でログインできます。（初期設定の簡単で危険なアドレスとパスワードなので必要に応じて再設定してください。）

以上で環境構築までは完了です。

日本語設定

サイドバーのsettinggのgeneralからsite languageを日本語に切り替え
タイムゾーンを＋９
に設定して保存

wp-envを用いてプラグインやテーマをインストール

.wp-env.jsonというファイルをルート直下に作成

プラグインをインストールしてみよう

今回は日本語版に必須なMV Multibyte Patchをインストールします。
ブラウザでMV Multibyte Patchで検索しこのページを開きます(大体検索結果の上の方にあります。)
もしくはこちらhttps://ja.wordpress.org/plugins/wp-multibyte-patch/

開けたらダウンロードボタンのリンクのアドレスをコピーする

.wp-env.jsonを開き以下のように記述

{
    "plugins": [
        "ここにインストールしたいプラグインのURLを追記",
        "2個目のプラグイン",
        "3個目のプラグイン"
    ]
}

今回の場合はこのような記述になります。

{
    "plugins": [
        "https://downloads.wordpress.org/plugin/wp-multibyte-patch.2.9.zip"
    ]
}

ここまで完了したら以下のコマンドを実行

npm run wp-env start --update

再起動がかかりアップデートされる。

再度ワードプレス管理画面のプラグインを見るとMV Multibyte Patchがインストールされていて有効化もしていることが確認できます。

テーマを作ろう

ルート直下に好きなテーマ名のフォルダを作成
今回はsample
そのフォルダに最低限のindex.phpとstyle.cssファイルを作成