wp-envを利用してWordPressのローカル環境を構築する

WordPressでローカル環境を作成する方法は様々ありますがwp-envを利用すればnpmコマンドを利用して簡単にローカルを作成することができます。

wp-envはNode.js以外にDockerが必要になりますので、事前にインストールと起動をしておいてください。

初期設定

まずはWordPress環境を作成したいディレクトリをターミナルなどで開き以下のコマンドでインストールを行います。

# package.json の作成
npm init -y
# wp-env のインストール
npm install -D @wordpress/env

次に設定ファイルの.wp-env.jsonを作成します。
今回は最低限の以下の設定を行います。

これは現在いるディレクトリの「wp-theme」というディレクトリをthemesディレクトリ同期させる設定です。

.wp-env.json

{
    "mappings": {
        "wp-content/themes/wp-theme/": "./wp-theme/"
    }
}

テーマがちゃんと反映されているか確認するためにindex.phpとstyle.cssのみの最小限のテーマを作成してwp-themeディレクトリ内に配置しておきます

wp-theme/index.php

<h1>WordPress Theme</h1>

wp-theme/style.css

/*
Theme Name: WordPress Theme
*/

@charset "utf-8";

現状は以下のようなシンプルなファイル配置になっているはずです。

├── node_modules
├── package-lock.json
├── package.json
└── wp-theme
    ├── index.php
    └── style.css

ではこれでWordPressを立ち上げてみましょう。

ローカル環境の立ち上げ

環境の立ち上げと終了は以下のコマンドで可能です。

# WordPressの環境の起動
npx wp-env start
# WordPressの環境の終了
npx wp-env stop

初回は起動に時間がかかりますが起動すれば、 http://localhost:8888/ にアクセスすることでWordPressのサイトを確認できます。

管理画面は http://localhost:8888/wp-admin/ になります。
初期アカウントとパスワードは「Admin」と「password」でログインできます。

管理画面にログインできたら、サイドメニューのAppearance->Themesから先ほど作成したシンプルなテーマに変更してみましょう。

こちらのテーマをActivateするとテーマ採用されhttp://localhost:8888/ にアクセスすると「WordPress Theme」が表示されます。

テーマの編集

更新が反映されるかwp-theme/index.phpを変更して確認してみましょう。

wp-theme/index.php

<h1>WordPress Theme！！！！</h1>

http://localhost:8888/ でブラウザをリロードすると変更内容が反映されているのが確認できます。

今回はシンプルにテーマのみを編集できるローカル環境を作成しましたが.wp-env.jsonを変更すると様々な設定が可能ですのでローカルでWordPressの環境を構築する必要がある人は試してみてください。