WordPress│wp-envの環境構築・使い方

2023.06.112024.03.05

いつもはLocalを使ってWeb制作をしているのですが、

PCをMacBookAirに変えたので、公式が推奨しているwp-envの環境構築をしてみました。

結論を言うとクライアントワークはLocalで十分ですが、

テーマやプラグイン、ブロックエディタ関連の開発はwp-envの方が便利だと思います。

Windowsでも環境構築してみたのですが、エラーが出まくるのでmacでの環境構築をおすすめします。

wp-envの環境構築の前提条件

前提として下記の2つがインストールされていることが前提条件です。

wp-envを最短で環境構築する

公式サイトを見ながら@wordpress/envの環境構築していきます。

ちなみにWindowsは非常に環境構築が難しいのでMacやLinaxでのインストールをおすすめします。

Japanese Team

@wordpress/env wp-env を使用してプラグインやテーマのビルド用とテスト用の WordPress ローカル環境を…

VS Codeを起動して上部メニューからターミナルを起動します。

まずはnpm -vを打ってNode.jsが動くか確かめましょう。

package.jsonの作成

作業するフォルダを作成して、ディレクトリの場所に切り替えます。

例：cd /Users/motoki/Documents/wordpress/develop

次にnpm initコマンドを叩きます。

最初にプロジェクト名を打ちます。

あとはリターンキーを押していき、最後にyesと入力。

フォルダにpackage.jsonの作成が作成されます。

@wordpress/envのインストール

続いて下記のコマンドを打って@wordpress/envのインストールします。

npm i @wordpress/env --save-dev

インストール後、node_modulesフォルダとpackage-lock.jsonというファイルが生成されます。

package.jsonの編集

wp-envというコマンドを使えるようにするためにpackage.jsonを開いて、下記のコードを追記します。

変更箇所は"scripts": {"wp-env": "wp-env"}の所のみです。

{
  "name": "develop",
  "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": "^7.0.0"
  }
}

DockerにWordPressをインストール

次のコマンドを打って、DockerにWordPressをインストールします。

npm run wp-env start

ターミナルでDone!と表示されいれば完了です。

ブラウザから下記のURLにアクセスしWordPressが表示されているか確認しましょう。

http://localhost:8888/

管理画面にログインしたい場合は以下の通りです。

http://localhost:8888/wp-login.php

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

wp-envの更新方法

とりあえず WordPressが表示できたものの、どうやってテーマやプラグインを更新するのかローカルフォルダに直接アクセスできるLocalとは違ってわかりづらいと思います。

実際の更新方法を書いておきます。

.wp-env.jsonの作成

同階層に.wp-env.jsonというファイルを作成します。

※先頭にドットがつきます。

例えば下記の内容のコードを記載すると、プラグインがインストールされて有効の状態で表示されます。

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

.wp-envファイルの作成後、ターミナルで以下のコマンドを打つとWordPressの環境がアップデートされます。

npm run wp-env start —update

Done!と表示されましたら確認してみましょう。

自作テーマやプラグインをインストールする

ディレクトリは下記の状態だとします。

wordpress
├plugins
│ └my-plugins（フォルダのままでOK。中身はmy-plugin.phpのみ）
└themes
　　└my-theme （フォルダのままでOK。中身はstyle.cssとindex.phpのみ）

.wp-env.jsonの記述は以下の通り。

{
	"themes": [
		"../themes/my-theme"
	],
	"plugins": [
		"https://downloads.wordpress.org/plugin/wp-multibyte-patch.latest-stable.zip",
		"../plugins/my-plugins"
	]
}

更新後、自作テーマや自作プラグインが追加されていることを確認します。

.wp-env.jsonは他にもさまざまな指定ができます。

core: WordPressのバージョンを指定できる
port: ポート番号を指定できる。
config: wp-config.phpの設定を変更できる
mappings: 画像等のディレクトリをローカルに指定できる。

Japanese Team

@wordpress/env wp-env を使用してプラグインやテーマのビルド用とテスト用の WordPress ローカル環境を…

まとめ

冒頭で書いた通り、このwp-envを使った環境構築は

テーマやプラグイン、ブロックエディタ関連の開発の場合におすすめです。

作業がVSCodeのみで完結しますので、非常にシンプルです。

逆にクライアントワークのコーディング作業にはあまりおすすめしません。

気になった方は是非試してみてください。