Web Design Leaves

作成日：2024年11月25日

前提条件

wp-env を使用するには以下のソフトウェアが必要なので前もってインストールしておきます。

Node.js

Node.js から直接ダウンロードするか、nvm のようなバージョンマネージャを使用できます。

Docker

Docker Desktop をインストールするのが簡単です（Mac、Windows、Linux）。アカウントの作成は任意なので、作成しなくても利用できます。

※ wp-env を使用する際は Docker を起動しておく必要があります。設定は必要ないので、Docker の知識がなくても大丈夫です（単に起動するだけです）。

概要

いくつかのコマンドを実行するだけで簡単に WordPress のローカル環境を構築できます。

任意の場所にプロジェクトのフォルダ（wp-env-sample）を作成します。

% mkdir wp-env-sample

作成したフォルダに移動します。

% cd wp-env-sample

wp-env のパッケージをローカルインストールします。

% npm i @wordpress/env -D

Docker を起動し、以下のコマンドを実行してローカル環境を立ち上げます。

% npx wp-env start

上記のコマンドが完了すると、ブラウザで http://localhost:8888/ にアクセスして WordPress を表示できます。管理画面にはユーザー名「admin」とパスワード「password 」でアクセスできます。

ローカル環境を終了するには以下を実行します。

% npx wp-env stop

ローカル環境を削除するには以下を実行します。

% npx wp-env destroy

構成ファイル .wp-env.json を使用すれば、WordPress や PHP のバージョンを指定したり、テーマやプラグインのフォルダを指定するなどが可能です。

公式ドキュメント

• @wordpress/env（日本語）
• wp-env 入門（日本語）
• @wordpress/env（英語）
• Get started with wp-env（英語）
• Quick and easy local WordPress development with wp-env（英語）

以下はもう少し詳しい説明です。

wp-env のインストール

wp-env はグローバルにインストールすることも、プロジェクトにローカルにインストールすることもできますが、以下はプロジェクトごとにローカルインストールして WordPress 環境を作成する方法です。

任意の場所にプロジェクトのフォルダ（この例では my-project）を作成します。

ターミナルで作成したフォルダに移動し、以下のコマンドを実行して wp-env をインストールします。

% npm i @wordpress/env -D

上記コマンドは npm install コマンドを使って wp-env のパッケージ（@wordpress/env）を -D オプション（--save-dev の短縮形）を指定してローカルインストールしています（iはinstallの短縮形）。

上記のコマンドを実行すると、プロジェクトのフォルダに、node_modules ディレクトリと package.json 及び package-lock.json が生成されます。

📁 my-project
├──📁 node_modules
├── package-lock.json
└── package.json

--save-dev オプションでローカルインストールしたので、生成された package.json には以下の devDependencies プロパティが追加されます。

{
  "devDependencies": {
    "@wordpress/env": "^10.12.0"
  }
}

VS Code

VS Code を使用している場合、作成したフォルダを VS Code で開いて、ターミナルタブでコマンドを実行できます。「ファイル」メニューから「フォルダーを開く」を選択して目的のフォルダーを開きます。

ターミナルタブでコマンドを入力し、return キーを押して実行します。

以下はインストールコマンド完了後、package.json を表示している例です。

wp-env の起動

Docker を起動しておきます。

wp-env をローカルで実行するには npx wp-env start コマンド（npx コマンド）を実行します。

wp-env をローカルインストールしている場合、コマンド（wp-env start）の前に npx を付けて実行します。グローバルにインストールしている場合は、npx は不要です（単に wp-env start のみ）。

この例のように、プラグインでもテーマでもないディレクトリで wp-env start コマンドを実行すると汎用の WordPress ローカル環境が作成されます。

% npx wp-env start

上記コマンドを実行すると、初回は WordPress をダウンロードしてインストールするので多少時間がかかりますが、しばらくすると「✔ Done!」と表示されて WordPress ローカル環境が起動します。

コマンドのレスポンスに「.wp-env.json 構成ファイルが見つかりません」という内容の警告（⚠ Warning）が表示されますが問題ありません（この例では .wp-env.json は後で追加します）。

コマンドのレスポンスにはローカル環境の URL が表示されます。デフォルトでは開発サイトの URL は http://localhost:8888/、テストサイトの URL は http://localhost:8889 です。

ポート番号は設定ファイル（.wp-env.json ）で変更可能です。

WordPress development site started at http://localhost:8888
WordPress test site started at http://localhost:8889

ブラウザで http://localhost:8888/ にアクセスするとインストールしたローカル環境の WordPress が表示されます。デフォルトでは最新のバージョン（この時点では 6.7.1）の英語版になります。

管理画面には、通常の WordPress と同様 http://localhost:8888/wp-login.php にアクセスして、ユーザー名 admin とパスワード password でログインできます。

管理画面の URL は http://localhost:8888/wp-admin です。

また、wp-env を起動後、Docker Desktop を確認すると Docker に WordPress のローカル環境のコンテナが作成されているのが確認できます。

Docker を起動せずに npx wp-env start を実行すると「Could not connect to Docker. Is it running?」のようなエラーが表示されてコマンドは終了しますが、その後 Docker を起動して再度コマンドを実行すれば問題ありません。

% docker ps
// 出力例
CONTAINER ID   IMAGE                                              COMMAND                   CREATED         STATUS         PORTS                     NAMES
56de01f610fb   9899f2682e3d0d5f423d35870b984665-tests-cli         "docker-entrypoint.s…"   6 minutes ago   Up 6 minutes                             9899f2682e3d0d5f423d35870b984665-tests-cli-1
5710c4655109   9899f2682e3d0d5f423d35870b984665-cli               "docker-entrypoint.s…"   6 minutes ago   Up 6 minutes                             9899f2682e3d0d5f423d35870b984665-cli-1
3933879258f3   9899f2682e3d0d5f423d35870b984665-tests-wordpress   "docker-entrypoint.s…"   6 minutes ago   Up 6 minutes   0.0.0.0:8889->80/tcp      9899f2682e3d0d5f423d35870b984665-tests-wordpress-1
298a8dd4c1ce   9899f2682e3d0d5f423d35870b984665-wordpress         "docker-entrypoint.s…"   6 minutes ago   Up 6 minutes   0.0.0.0:8888->80/tcp      9899f2682e3d0d5f423d35870b984665-wordpress-1
31fe0e43d712   mariadb:lts                                        "docker-entrypoint.s…"   6 minutes ago   Up 6 minutes   0.0.0.0:53599->3306/tcp   9899f2682e3d0d5f423d35870b984665-tests-mysql-1
03f35d728172   mariadb:lts                                        "docker-entrypoint.s…"   7 minutes ago   Up 7 minutes   0.0.0.0:53437->3306/tcp   9899f2682e3d0d5f423d35870b984665-mysql-1

% npx wp-env start --update

wp-env の終了

ローカル環境を終了するには以下のコマンドを実行します。

コマンドのレスポンスに「✔ Stopped WordPress.」と表示されれば停止（終了）しています。

% npx wp-env stop

再開するには、起動コマンド npx wp-env start を実行します。

.wp-env.json

構築する環境をカスタマイズするには、.wp-env.json（先頭にドットが付きます）という設定ファイルをプロジェクトのルートディレクトリに作成します。

📁 my-project
├──📁 node_modules
├── .wp-env.json  // 作成
├── package-lock.json
└── package.json

以下は .wp-env.json の設定例です。

この例では、WordPress は日本語版のバージョン 6.7.1 で PHP のバージョンは 8.3、プラグインとして WP Multibyte Patch と Query Monitor をインストールして有効化し、wp-config.php に WP_DEVELOPMENT_MODE を設定しています。

{
  "core": "https://ja.wordpress.org/wordpress-6.7.1-ja.zip",
  "phpVersion": "8.3",
  "plugins": [
    "https://downloads.wordpress.org/plugin/wp-multibyte-patch.2.9.zip",
    "https://downloads.wordpress.org/plugin/query-monitor.3.16.4.zip"
  ],
  "config": {
    "WP_DEVELOPMENT_MODE": "theme"
  }
}

.wp-env.json を作成したら設定した構成を適用するため、npx wp-env start --update コマンドを実行してローカル環境を再起動します。

% npx wp-env start --update

http://localhost:8888 にアクセスして確認すると、日本語版の WordPress 6.7.1 がインストールされ、指定したプラグインがインストールされ有効化されています。

define( 'FS_METHOD', 'direct' );
define( 'SCRIPT_DEBUG', true );
define( 'WP_ENVIRONMENT_TYPE', 'local' );
define( 'WP_PHP_BINARY', 'php' );
define( 'WP_TESTS_EMAIL', 'admin@example.org' );
define( 'WP_TESTS_TITLE', 'Test Blog' );
define( 'WP_TESTS_DOMAIN', 'localhost:8888' );
define( 'WP_SITEURL', 'http://localhost:8888' );
define( 'WP_HOME', 'http://localhost:8888' );
define( 'WP_DEBUG', true );

@charset "utf-8";
/*
Theme Name: Test Theme
*/

<h1>Hello WP Env!</h1>

📁 my-project
├──📁 node_modules
├── .wp-env.json
├── package-lock.json
├── package.json
└── test-theme  // 追加
    ├── index.php
    └── style.css

{
  "core": "https://ja.wordpress.org/wordpress-6.7.1-ja.zip",
  "phpVersion": "8.3",
  "plugins": [
    "https://downloads.wordpress.org/plugin/wp-multibyte-patch.2.9.zip",
    "https://downloads.wordpress.org/plugin/query-monitor.3.16.4.zip"
  ],
  "config": {
    "WP_DEVELOPMENT_MODE": "theme"
  },
  "themes": [
    "./test-theme"
  ]
}

<h1>Hello <?php bloginfo('name'); ?> !</h1>

{
  "core": "https://ja.wordpress.org/wordpress-6.7.1-ja.zip",
  "phpVersion": "8.3",
  "plugins": [
    "https://downloads.wordpress.org/plugin/wp-multibyte-patch.2.9.zip",
    "https://downloads.wordpress.org/plugin/query-monitor.3.16.4.zip"
  ],
  "config": {
    "WP_DEVELOPMENT_MODE": "theme"
  },
  "mappings": {
    "wp-content/themes/test-theme/": "./test-theme/"
  }
}

{
  "mappings": {
     "sql": "./sql"
  }
}

php_value post_max_size 2G
php_value upload_max_filesize 2G
php_value memory_limit 2G

{
  "mappings": {
    ".htaccess": ".htaccess"
  }
}

WordPress のファイル

WordPress のファイルの実体はホームディレクトリの .wp-env という隠しフォルダ内にあります。

必要に応じて隠しフォルダ内のファイルを確認することもできます。

wp-env destroy コマンドで削除される

ローカル環境（wp-env）を削除するコマンド wp-env destroy を実行すると、 .wp-env フォルダ内のその環境に関連するファイルは削除されます。

Docker Desktop からインスタンスのファイルを確認

Docker Desktop を使ってインスタンスのファイルを確認することもできます（Docker を理解していないのでこれで正しいかは不明）。

Containers のタブで Name の下の長い ID のようなものをクリックします。

以下が表示されるので「Vew Configurations」をクリックします。

以下が表示されるので「Open in IDE」をクリックすると、IDE（この例の場合は VS Code）が開いてファイルを確認できます。

以下は wordpress-6.7-ja というフォルダ内の wp-config.php を開いています。

PHP のバージョン

使用されている PHP のバージョンは Builds タブから確認できます（この方法が正しいかは不明）。

Builds タブで WordPress.Dockerfile をクリックします。

以下が開くので「Dependencies」の下を確認すると「wordpress:php8.3」のような表示があり、phpVersion フィールドに指定した PHP のバージョンになっています。

wp-env の削除

作成したローカル環境を削除するには以下のコマンドを実行します。

% npx wp-env destroy

以下の確認メッセージが表示されるので、本当に削除する場合は y を入力して return キーを押します。

これによりこの WordPress 環境と関連する Docker コンテナやボリューム、ネットワークが削除され、WordPress のファイル（.wp-env という隠しフォルダ内のこのローカル環境に関連する全てのファイル）が削除されます。

% npx wp-env destroy
ℹ WARNING! This will remove Docker containers, volumes, networks, and images associated with the WordPress instance.
? Are you sure you want to continue? (y/N)  // 削除するには y と入力して return キーを押す
Removing docker images, volumes, and networks. // Docker コンテナなどが削除される
Removing local files // ローカルファイル（ .wp-env 隠しフォルダ内のファイル）が削除される
✔ Removed WordPress environment. (in 41s 609ms) // ローカル環境削除完了

プロジェクトフォルダ内の node_modules フォルダや package.json、package-lock.json、及び手動で配置したファイルやフォルダは削除されません。

ローカル環境の再構築

npx wp-env destroy コマンドを実行後、npx wp-env start コマンドを実行すると、最初から（ゼロから）ローカル環境を構築することができます。

テーマ開発の環境セットアップ

以下はブロックテーマ開発の環境をセットアップする例です。

任意の場所に my-theme-project というプロジェクトのフォルダを作成します。その中にテーマのフォルダ my-block-theme を作成し、必須のファイル style.css と index.html、及び theme.json を作成します。

そしてプロジェクトフォルダのルートに .wp-env.json（wp-env の構成ファイル）を作成します。

📁 my-theme-project
├──📁 my-block-theme  // テーマフォルダ
│   ├── style.css
│   ├──📁 templates
│   │   └── index.html // 空のファイル
│   └── theme.json
└──.wp-env.json // wp-env の構成ファイル

style.css

テーマフォルダ my-block-theme の中に以下の style.css を作成します。この例では、最低限の Theme Name フィールドを設定し、テーマ名は My Block Theme としています。

/*
 * Theme Name: My Block Theme
 */

theme.json

WordPress がテーマを認識するのに theme.json は必要ではありませんが、my-block-theme の中に以下の theme.json を作成します。作成するテーマに合わせて内容は変更します。

{
  "settings": {
    "appearanceTools": true,
    "color": {
      "palette": [
        {
          "color": "#ffffff",
          "name": "Base",
          "slug": "base"
        },
        {
          "color": "#222222",
          "name": "Contrast",
          "slug": "contrast"
        },
        {
          "color": "#438aab",
          "name": "Accent 1",
          "slug": "accent-1"
        }
      ]
    },
    "layout": {
      "contentSize": "920px",
      "wideSize": "1280px"
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
          "name": "System Font",
          "slug": "system-font"
        }
      ]
    }
  },
  "version": 3,
  "$schema": "https://schemas.wp.org/wp/6.7/theme.json"
}

templates/index.html

my-block-theme の中に templates フォルダを作成し、その中に index.html ファイルを作成します。index.html には何も記述しません（空のファイル）。

.wp-env.json

.wp-env.json を作成してプロジェクトフォルダのルートに配置して以下を記述します。

この例では、最新の日本語版の WordPress と PHP 8.3 を指定し、独自のテーマ my-block-theme を themes フィールドに指定しています（必要に応じて変更します）。

また、ブロックテーマ開発に必要なプラグイン Create Block Theme と WordPress のデータ（テーマのファイルやデータベース、画像など）をエクスポートできるプラグイン All-in-One WP Migration をインストールして有効化するように指定しています。その他のプラグインは必要に応じて追加します。

{
  "core": "https://ja.wordpress.org/latest-ja.zip",
  "phpVersion": "8.3",
  "plugins": [
    "https://downloads.wordpress.org/plugin/wp-multibyte-patch.2.9.zip",
    "https://downloads.wordpress.org/plugin/query-monitor.3.16.4.zip",
    "https://downloads.wordpress.org/plugin/create-block-theme.2.6.0.zip",
    "https://downloads.wordpress.org/plugin/all-in-one-wp-migration.7.87.zip"
  ],
  "themes": ["./my-block-theme"],
  "config": {
    "WP_DEVELOPMENT_MODE": "theme"
  }
}

wp-env をインストール

ターミナルでプロジェクトフォルダ my-theme-project に移動し、npm i @wordpress/env -D を実行して wp-env をローカルインストールします。

% npm i @wordpress/env -D

node_modules フォルダや package.json などが追加されます。

📁 my-theme-project
├──📁 my-block-theme
│   ├── style.css
│   ├──📁 templates
│   │   └── index.html
│   └── theme.json
├── .wp-env.json
├──📁 node_modules // 追加
├── package-lock.json // 追加
└── package.json // 追加

wp-env の起動（ローカル環境の構築）

Docker を起動し、npx wp-env start コマンドを実行してローカル環境の構築します。

% npx wp-env start

✔ Done! と表示されたら、http://localhost:8888/ にアクセスし、ダッシュボードの「外観」を開くと「My Block Theme」が表示されるので「有効化」をクリックします。

サイトを表示するとインデックステンプレートは空なので以下のように何も表示されません。

「サイトを編集」をクリックしてインデックステンプレートの編集画面を開き、＋ アイコンをクリックしてインサーターを表示して、例えば「サイトのタイトル」を挿入し保存します。

※ 動作確認のための操作です。実際の開発ではテンプレートパーツを作成することになるかと思います。

Create Block Theme のアイコン をクリックして、「テーマへの変更を保存」をクリックします。

確認のパネルが表示されるので「変更内容を保存」をクリックすると、以下のようにアラートが表示されるので OK をクリックします。

サイトを表示すると、インデックステンプレートに追加したサイトタイトルが表示さます。

コードエディターを確認すると、空だった index.html に Create Block Theme プラグインによりサイトタイトルのブロックマークアップが追加されています。

これで基本的なセットアップは完了です。

サイトエディターを使って編集し、Create Block Theme プラグインを使って変更をファイルに書き出すことがます。必要に応じて、テーマフォルダ（my-block-theme）内のファイルを編集することができます。

関連ページ：ブロックテーマの作り方（ローコードでブロックテーマ開発）

上記の例では、テーマフォルダを作成した後で、wp-env をインストールしていますが、wp-env をインストール後にテーマフォルダや .wp-env.json を作成して、その後ローカル環境を起動しても同じです。

% npm i @wordpress/env -D

my-cbt-project
├──📁 node_modules
├── package-lock.json
└── package.json

{
  "core": "https://ja.wordpress.org/latest-ja.zip",
  "phpVersion": null,
  "plugins": [
    "https://downloads.wordpress.org/plugin/wp-multibyte-patch.2.9.zip",
    "https://downloads.wordpress.org/plugin/query-monitor.3.16.4.zip",
    "https://downloads.wordpress.org/plugin/create-block-theme.2.6.0.zip",
    "https://downloads.wordpress.org/plugin/all-in-one-wp-migration.7.87.zip"
  ],
  "config": {
    "WP_DEVELOPMENT_MODE": "theme"
  }
}

my-cbt-project
├──📁 node_modules
├── .wp-env.json
├── package-lock.json
└── package.json

% npx wp-env start

{
  "core": "https://ja.wordpress.org/latest-ja.zip",
  "phpVersion": null,
  "plugins": [
    "https://downloads.wordpress.org/plugin/wp-multibyte-patch.2.9.zip",
    "https://downloads.wordpress.org/plugin/query-monitor.3.16.4.zip",
    "https://downloads.wordpress.org/plugin/create-block-theme.2.6.0.zip",
    "https://downloads.wordpress.org/plugin/all-in-one-wp-migration.7.87.zip"
  ],
  "config": {
    "WP_DEVELOPMENT_MODE": "theme"
  },
  "themes": ["./my-sample-theme"]
}

{
  "core": "https://ja.wordpress.org/latest-ja.zip",
  "phpVersion": null,
  "plugins": [
    "https://downloads.wordpress.org/plugin/wp-multibyte-patch.2.9.zip",
    "https://downloads.wordpress.org/plugin/query-monitor.3.16.4.zip",
    "https://downloads.wordpress.org/plugin/create-block-theme.2.6.0.zip",
    "https://downloads.wordpress.org/plugin/all-in-one-wp-migration.7.87.zip"
  ],
  "config": {
    "WP_DEVELOPMENT_MODE": "theme"
  },
  "mappings": {
    "wp-content/themes/my-sample-theme/": "./my-sample-theme/"
  }
}

{
  "settings": {
    "color": {
      "palette": [
        {
          "color": "#ffffff",
          "name": "Base",
          "slug": "base"
        },
        {
          "color": "#222222",
          "name": "Contrast",
          "slug": "contrast"
        },
        {
          "color": "#438aab",
          "name": "Accent 1",
          "slug": "accent-1"
        }
      ]
    },
    "appearanceTools": true,
    "layout": {
      "contentSize": "620px",
      "wideSize": "1000px"
    },
    "spacing": {
      "units": ["%", "px", "em", "rem", "vh", "vw"]
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
          "name": "System Font",
          "slug": "system-font"
        }
      ]
    },
    "useRootPaddingAwareAlignments": true
  },
  "templateParts": [
    {
      "area": "header",
      "name": "header"
    },
    {
      "area": "footer",
      "name": "footer"
    }
  ],
  "version": 3,
  "$schema": "https://schemas.wp.org/wp/6.7/theme.json"
}

📁 block-theme-project
├── .wp-env.json
└──📁 my-simple-theme  // Create Block Theme で作成した空のテーマのコピー
    ├──📁 parts
    │   ├── footer.html
    │   └── header.html
    ├── readme.txt
    ├── screenshot.png
    ├── style.css
    ├──📁 templates
    │   └── index.html
    └── theme.jsonn

/*
Theme Name: My Simple Theme
Theme URI:
Author:
Author URI:
Description:
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 5.7
Version:
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-simple-theme
Tags:
*/

{
  "settings": {
    "appearanceTools": true,
    "layout": {
      "contentSize": "620px",
      "wideSize": "1000px"
    },
    "spacing": {
      "units": ["%", "px", "em", "rem", "vh", "vw"]
    },
    "color": {
      "palette": [
        {
          "color": "#F9FEF5",
          "name": "Base",
          "slug": "base"
        },
        {
          "color": "#303030",
          "name": "Contrast",
          "slug": "contrast"
        },
        {
          "color": "#399744",
          "name": "Accent 1",
          "slug": "accent-1"
        },
        {
          "color": "#FAFBD2",
          "name": "Accent 2",
          "slug": "accent-2"
        },
        {
          "color": "#F65959",
          "name": "Accent 3",
          "slug": "accent-3"
        }
      ]
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
          "name": "System Font",
          "slug": "system-font"
        }
      ]
    },
    "useRootPaddingAwareAlignments": true
  },
  "templateParts": [
    {
      "area": "header",
      "name": "header"
    },
    {
      "area": "footer",
      "name": "footer"
    }
  ],
  "version": 3,
  "$schema": "https://schemas.wp.org/wp/6.7/theme.json"
}

{
  "core": "https://ja.wordpress.org/latest-ja.zip",
  "phpVersion": null,
  "plugins": [
    "https://downloads.wordpress.org/plugin/wp-multibyte-patch.2.9.zip",
    "https://downloads.wordpress.org/plugin/query-monitor.3.16.4.zip",
    "https://downloads.wordpress.org/plugin/create-block-theme.2.6.0.zip",
    "https://downloads.wordpress.org/plugin/all-in-one-wp-migration.7.87.zip"
  ],
  "config": {
    "WP_DEVELOPMENT_MODE": "theme"
  },
  "mappings": {
    "wp-content/themes/my-simple-theme/": "./my-simple-theme/"
  }
}

ブロック開発の環境セットアップ

カスタムブロックをプラグインとして開発する環境を構築する例です。

以下ではブロックのひな形を作成する公式ツール Create Block（@wordpress/create-block）と wp-env を使ってブロック開発の（ブロックをプラグインとして開発する）環境をセットアップします。

この例では Create Block を使ってブロックのひな形を作成する際に --wp-env オプションを指定して、プラグイン内で wp-env パッケージを実行するための構成やスクリプトを追加して開発環境を構築します。

以下は create-block コマンドの書式です。

% npx @wordpress/create-block@latest [options] [slug]

slug にはひな形ファイルの出力先 (フォルダ名) を指定します（プラグイン名としても使用されます）。

options に --wp-env を指定すると wp-env パッケージを同時にインストールします。

ブロックのひな形を作成

任意の場所で以下のコマンドを実行してブロックのひな形を作成し、wp-env をインストールします。

% npx @wordpress/create-block@latest  --wp-env my-custom-block

上記コマンドを実行すると、my-custom-block という名前のフォルダの中にブロックをカスタマイズするために必要な初期ファイルが作成され、wp-env パッケージがインストールされます。

コマンドが完了するには少し時間がかかります。

.wp-env.json

作成されたプラグインフォルダの中には以下のような .wp-env.json が生成されます。

plugins フィールドに [ "." ] が指定され、カレントディレクトリのプラグイン（my-custom-block）がインストールされ有効化されるように設定されています。

{
  "core": "WordPress/WordPress",
  "plugins": [
    "."
  ]
}

必要に応じて .wp-env.json を編集します。この例では以下のように、core に日本語版の WordPress を指定し、plugins に WP Multibyte Patch を追加しています。

{
  "core": "https://ja.wordpress.org/latest-ja.zip",
  "plugins": [
    ".",
    "https://downloads.wordpress.org/plugin/wp-multibyte-patch.2.9.zip"
  ],
  "config": {
    "WP_DEVELOPMENT_MODE": "plugin"
  }
}

package.json

package.json を確認すると、devDependencies に @wordpress/env が追加されています。

scripts フィールドに "env": "wp-env" が設定されているので、wp-env を npm run env で実行できます。

{
  "name": "my-custom-block",
  "version": "0.1.0",
  "description": "Example block scaffolded with Create Block tool.",
  "author": "The WordPress Contributors",
  "license": "GPL-2.0-or-later",
  "main": "build/index.js",
  "scripts": {
    "build": "wp-scripts build",
    "format": "wp-scripts format",
    "lint:css": "wp-scripts lint-style",
    "lint:js": "wp-scripts lint-js",
    "packages-update": "wp-scripts packages-update",
    "plugin-zip": "wp-scripts plugin-zip",
    "start": "wp-scripts start",
    "env": "wp-env"
  },
  "devDependencies": {
    "@wordpress/env": "^10.12.0",
    "@wordpress/scripts": "^30.5.1"
  }
}

開発環境を構築

Docker を起動しておきます。

作成したプラグインのディレクトリに移動します。

% cd my-custom-block

npx wp-env start（または npm run env start）を実行してローカル環境を構築します。

% npx wp-env start

✔ Done! と表示されたら、http://localhost:8888 にアクセスし、管理画面にログインして左側メニューの「プラグイン」を選択します。

My Custom Block という Create Block で作成したプラグインがインストールされて有効化されています（この例の場合、WP Multibyte Patch もインストールし＆有効化されています）。

投稿に作成したブロック My Custom Block を挿入して確認します。

ブロックが挿入されるので、「保存」をクリックします。フロントエンド側でも同じように表示されます。

動作確認

Create Block の動作確認のため、ターミナルでブロックのプラグインフォルダ my-custom-block で、npm start コマンドを実行して開発を開始します。

% npm start

例えば、my-custom-block/src/style.scss を開いて、ブロック（.wp-block-create-block-my-custom-block）の背景色を変更して保存します。

サイトにアクセスして、編集画面とフロントエンドでブロックの背景色が変更されていれば確認終了です。

開発を終了するには control + c を押します。

データベースの操作

環境内では wp-cli を利用できるので、wp db コマンドを使ってデータベースのエクスポートやインポート、置換などを行えます。

データベースのファイルを保存するフォルダを作成し、その中に空の .sql ファイルを作成します。

この例では sql というフォルダの中に空のファイル my-db.sql を作成しています。

📁 my-theme-project
├──📁 my-sample-theme
├── .wp-env.json
├──📁 node_modules
├── package-lock.json
├── package.json
└──📁 sql  // 追加
    └── my-db.sql // 追加

.wp-env.json の mappings フィールドに "sql": "./sql" を追加します（15行目）。

{
  "core": "https://ja.wordpress.org/latest-ja.zip",
  "phpVersion": null,
  "plugins": [
    "https://downloads.wordpress.org/plugin/wp-multibyte-patch.2.9.zip",
    "https://downloads.wordpress.org/plugin/query-monitor.3.16.4.zip",
    "https://downloads.wordpress.org/plugin/create-block-theme.2.6.0.zip",
    "https://downloads.wordpress.org/plugin/all-in-one-wp-migration.7.87.zip"
  ],
  "config": {
    "WP_DEVELOPMENT_MODE": "theme"
  },
  "mappings": {
    "wp-content/themes/my-sample-theme/": "./my-sample-theme/",
     "sql": "./sql"
  }
}

npx wp-env start --update を実行して構成を更新します。これにより、WordPress インスタンス内に sql というディレクトリが作成され、ローカルディレクトリの ./sql がマウントされます。

% npx wp-env run cli wp db export sql/my-db.sql

% npx wp-env run cli wp db import sql/my-db.sql

% npx wp-env run cli wp search-replace 'foo' 'bar'

{
  "scripts": {
    "export-db": "wp-env run cli wp db export sql/my-db.sql",
    "import-db": "wp-env run cli wp db import sql/my-db.sql"
  },
  "devDependencies": {
    "@wordpress/env": "^10.12.0"
  }
}

% npm run export-db

VS Code Intelephense エラー

VS Code で PHP の拡張機能 Intelephense を使っている場合、「Undefined function 'xxxx'. intelephense(p1010)」のようなエラーが出る可能性があります。

このエラーはプロジェクトのディレクトリ内に WordPress 本体（関数を定義したファイル）がないために発生します。このエラーが出ても問題なく動作しますが、エラーを消すには以下を行います。

設定エディタで検索欄に「Intelephense: Stubs」と入力し、設定の Intelephense: Stubs でスクロールして一番下にある「項目の追加」をクリックします。

表示される項目から wordpress を選択し、「OK」をクリックして追加します。