🕌

WordPress Playgroundを初めて知りました

2024/05/28に公開

VSCODEでWordPressのプラグイン開発をお困っていますが、簡単にWordPressをローカル環境で使う方法を探していました。
XAMPPやlocalなど使っていましたが、内蔵ストレージの空き容量のことや、内蔵ストレージが汚れてしまうので、他の方法を探していました。

その中で、WordPress Playgroundを見つけました。

使い方を解説したウェブサイト

https://wordpress.github.io/wordpress-playground/start-using#start-a-new-wordpress-site

WordPress Playground for VS Codeという拡張機能がありますので、VSCODEで簡単に使うことができます。
https://marketplace.visualstudio.com/items?itemName=WordPressPlayground.wordpress-playground

こちらが新しい公式サイトです。

https://wordpress.org/playground/

Webで使う場合

https://playground.wordpress.net/

画面右上のStore Noneをクリックしてみます。

この画像のメニューが、表示されます。

ストレージタイプ (Storage type)

  • None: changes will be lost on page refresh.
    • なし:ページを更新すると変更は失われます。
  • Browser: stored in this browser.
    • ブラウザ:このブラウザに保存されます。
  • Device: stored locally in your device (beta).
    • デバイス:ローカルデバイスに保存されます(ベータ版)。

PHPバージョン (PHP Version)

  • PHP 8.0
    • PHP 8.0(ドロップダウンメニューで他のバージョンも選択可能)

拡張機能の読み込み (Load extensions)

  • Load extensions: libxml, openssl, mbstring, iconv, gd. Uncheck to save ~6MB of initial downloads.
    • 拡張機能の読み込み:libxml、openssl、mbstring、iconv、gd。初期ダウンロードを約6MB節約するためにはチェックを外します。
    • チェックボックス(デフォルトでチェック済み)

ネットワークアクセス (Network access)

  • Network access (e.g. for browsing plugins).
    • ネットワークアクセス(例:プラグインの閲覧用)
    • チェックボックス(デフォルトで未チェック)

WordPressバージョン (WordPress Version)

  • WordPress 6.5
    • WordPress 6.5(ドロップダウンメニューで他のバージョンも選択可能)

ボタン (Button)

  • Apply changes
    • 変更を適用

補足リンク (Supplementary Link)

  • Need an older version?
    • 古いバージョンが必要ですか?

以上が、画像内の各選択肢とその内容の翻訳および説明です。

VSCODEのプラグインの場合

プラグインから起動すると、ローカル環境でWordPressを使うことができます。

日本語に変更できました。

プラグインの中に入っていました。

私が作っているプラグインが、ちゃんとプラグインの一覧の中にありました。

開発しているフォルダからアップロードするなど作業しなくても、直ぐにプラグインの一覧の中にあるのは、とても助かると思いました。

CLIで使う

このコマンドを開発中のテーマまたは、プラグインのフォルダの中に移動して、実行してください。
Node.jsがインストールされていたら、使えます。

npx @wp-now/wp-now start

もしコードにエラーがあると、処理の途中でエラーメッセージが表示されます。
行番号が表示されますので、修正できます。
正常に起動できるとブラウザが立ち上がり、WordPressを使うことができます。

https://github.com/WordPress/playground-tools/tree/trunk/packages/wp-now

参考資料

https://x.com/masaru21/status/1795400432120201712

感想

データベースやウェブサーバー、PHPなどのインストールをしなくても、簡単にWordPressの開発環境をウェブやローカル環境に作ることができるので、とても助かりました。
特にVSCODEでプラグインやテーマを作っているときは、このプラグインを使うことで、簡単に開発環境のWordPressの中に制作中のコードをインストールされた状態にできるので、ありがたいと思いました。

Discussion