最近、苦手な野菜を触りながら離乳食を作るのを楽しんでいるユキぷしゅです！

今回は実案件で用いた簡単にWordPressの環境構築ができる「wp-now」を紹介します！

従来のWordPressの開発って？

これまでのWordPressのローカル環境開発といえばこのようなものが思い浮かびます。

• XAMPP / MAMP / Local を用いたパターン
  • 新しくアプリケーションのインストールや設定が必要でちょっと面倒❌
• Docker を用いたパターン
  • Docker自体はすでに入れてる人多いけど、Dockerfileを作るのもちょっと面倒❌

今回の案件ではフロントエンドにNuxt.jsを用いていたことからローカルにNode.jsが入っている。
ならばNode.jsでWordPress開発環境を作れる方法がないか模索したところ、、、

あった！

＞＞＞ Node.jsベースでローカル環境を作れる「wp-now」 ＜＜＜

今回求めていたものだったので、 それをお試しで使ってみることにしました！

wp-nowとは？

• WordPress Playground を Node.js上で動かせるようにしたツール
  • WordPress Playground とは ホストなしであらゆるデバイスでWordPressを瞬時に実行できるプラットフォーム(詳細については公式よりご確認ください)
  • PHPをWebAssembly（WASM）にコンパイルして、Node.js上で実行
  • データベースはSQLiteを使用しローカルファイルで管理
  • 公式リポジトリ

初め見た時に「Node.js上でPHPを動かす！？」と驚きましたが、 一旦ここでは割愛します。

ここまでで wp-now がなんか新しい感じがするのは理解いただけたと思うのですが、
「Dockerでの開発環境構築に比べると何がいいの？」と思われるかもしれません。

僕が思うメリットは以下になります。

• 軽量高速
  • イメージのダウンロードも発生せず、起動が高速です！(5秒程度で管理画面にアクセスが可能)
• 学習コストが不要
  • デフォルトで利用する場合Node.jsのバージョンのみ設定で即時利用可能です！
  • 環境構築のため設定ファイルの作成等も不要です！
• WordPressのバージョン切り替えが容易
  • 後述しますが起動コマンドにバージョン指定することで簡単に切り替えが可能です！

コンセプトとして、
すぐにテーマやプラグイン開発をするためのツールとなるため、
本番環境に沿ったインフラ・バックエンド構成を行いたい場合は、
Dockerを利用することをおすすめします。

いざ！開発環境構築！

前提

• Node.jsバージョン管理：nvm(Node Version Manager)
• Node.jsバージョン：v22.15.0
  ※ Node.jsのバージョンはv20以降が必要

コマンド

// 今回WordPressを構築したいディレクトリを作成
$ mkdir wp-test-site-a 

// ディレクトリに移動
$ cd wp-test-site-a    

// wp-nowを実行
$ npx @wp-now/wp-now start

// localhostのURLにアクセス

コマンドのスクリーンショット

実際の画面(サイト側)

実際の画面(管理画面側)

終わり！

従来の開発環境構築の時間を考えると一瞬過ぎて度肝を抜かれたと思います。

ただこのままではWordPress内でインストールしたプラグインやテーマファイルが、
~/.wp-now/wp-content/playground 内での共通管理となってしまうため、
開発しにくくなっております。

次のセクションでは実際の開発で使える便利機能について紹介します！

実際に使用している便利な機能

WordPressやPHPのバージョンを指定する✍️

$ npx @wp-now/wp-now start  --wp=6.6 --php=8.2

管理画面のサイトヘルスで確認 → 変更されている！

プラグインやテーマフォルダをマウントさせる✍️

• 実行するディレクトリ内に themes/ や plugins/ を用意しファイルを設置する
  • サンプルテーマはUnderscoresで作成
  • サンプルプラグインはChatGPTで作成

管理画面で確認 → 読み込まれている

WordPressの設定をblueprint.jsonから事前設定する✍️

以下のblueprint.jsonを作成する 各Stepの説明は以下です

• setSiteOptions：サイトオプションを設定
  • サイトのタイトル(blogname)を「WP Test Site A」
  • キャッチフレーズ(blogdescription)を「Blog Description」
  • サイトの言語(WPLANG)を「日本語(ja)」
  • タイムゾーンを「東京(timezone_string)」
• defineWpConfigConsts：wp-config.phpの定数を定義
  • デバッグ機能(WP_DEBUG)を「true」
• activateTheme：インストールされているテーマをアクティブ
  • テーマ「wp-test-site-a」を有効(themes内のフォルダ指定)
• activatePlugin：インストールされているプラグインをアクティブ
  • プラグイン名(pluginName)を「Custom Admin Header Color」
  • プラグインパス(pluginPath)を「custom-admin-header-color/index.php」を指定
    • プラグインのエントリファイルを指定

{
  "steps": [
    {
      "step": "setSiteOptions",
      "options": {
        "blogname": "WP Test Site A",
        "blogdescription": "Blog Description",
        "WPLANG": "ja",
        "timezone_string": "Asia/Tokyo"
      }
    },
    {
      "step": "defineWpConfigConsts",
      "consts": {
        "WP_DEBUG": true
      }
    },
    {
      "step": "activateTheme",
      "themeFolderName": "wp-test-site-a"
    },
    {
      "step": "activatePlugin",
      "pluginName": "Custom Admin Header Color",
      "pluginPath": "custom-admin-header-color/index.php"
    }
  ]
}

blueprint.jsonを用いwp-nowを実行

$ npx wp-now start --blueprint=blueprint.json

管理画面で確認 → 読み込まれている

Blueprintについては以下ページが公式ドキュメントになります。
https://wordpress.github.io/wordpress-playground/blueprints/steps/#

しかしあくまでもWordPress Playgroundの設定になるため、 wp-nowで使用できないものがあるのでご注意ください。

最後に

今回は「wp-now」について紹介していきました！

WordPressというとDBやPHPが必要で、
テーマ制作をしたいだけなのに、
ローカルに開発環境作るのが少し面倒だなと思いがちですが、
これで簡単導入ができます！

テーマ・プラグイン開発には、wp-nowが使えるのでぜひご検討ください！

素敵な WordPress Developer Life を🏝️