概要

• WordPress開発チーム公式の開発環境 wp-env を使った、WordPress開発環境の雛形。
• テーマ開発、プラグイン開発に特化。
• 必須プラグインやテーマを、.wp-env.jsonで予め設定できて効率的。
• .wp-env.json は都度ブラッシュアップする。

前提

1. Docker Desktop セットアップ済。
2. Node.js セットアップ済。
3. node バージョンはLTS推奨なので確認しておく。

• nodeはVoltaで管理しているのでコマンドは以下。
• 使い方記事 👉 Qiita

# Volta 管理下の各種バージョンを確認するのに使用
volta list

# Volta で管理しているツールを一覧で見る
volta list all

4. 開発ディレクトリを作成し、移動する。
   1. mkdir hoge
   2. cd hoge

手順

1. npm i -D @wordpress/env

2. npm init -y 1. package.json生成

3. package.json の scripts に wp-env コマンドを追記。※記載箇所注意

4. .wp-env.json を作成。

5. 起動 npm run wp-env start

   動作	コマンド
   起動	npm run wp-env start
   停止	npm run wp-env stop
   再起動	npm run wp-env start --update
   削除	npm run wp-env destroy

6. トップページ表示確認 http://localhost:8888

7. 管理画面ログイン http://localhost:8888/wp-login.php

   ユーザー名	パスワード
   admin	password

DBへの接続

• 起動コマンドを実行後 docker ps でDBのポートをコピーする。

• 接続情報

  パラメータ	値
  Host	0.0.0.0
  Port	コピーした番号
  User	root
  Password	password
  Database	wordpress

トラブルシューティング

• 一般的な問題のトラブルシューティング

---

付録1. SSHでサーバーにWordPressをインストールする

1. 本番サーバーにSSHで接続する。
2. インストールするディレクトリに移動。 cd /web/public_html/hoge
3. WordPress最新版をダウンロード。 wget http://ja.wordpress.org/latest-ja.tar.gz
4. 解凍。（/wordpress/に解凍される） tar -zxvf latest-ja.tar.gz
5. 配置したいディレクトリにファイルを移動する。例） mv ./wordpress/* ./
6. 不要なディレクトリ、ファイルを削除。 例） rm -r latest-ja.tar.gz wordpress

付録2. 開発用空テーマ _s を使う

1. underscores.me で、空テーマを取得する。
   1. sassを使う場合、 Advanced Options をクリックし、 ✅ sassify!にチェックを入れる。
2. my-theme という名前のテーマを作成したい場合、 my-theme と入力してGENERATEボタンをクリック（ダウンロード）する。
3. ダウンロードしたものをテーマのスターターとして使う。

付録3. WordPress REST API の準備

1. 初期状態で叩いてもNot Found となる http://localhost:8888/wp-json/wp/v2/posts
2. REST API を利用するためには、設定 ＞ パーマリンク から 「投稿名」 を選択して 「変更を保存」 する必要がある