メインコンテンツへスキップ

WordCamp コントリビューター デイ

WordPress Playground VS Code 拡張機能 と @wp-playground/cli を使用すると、ローカルの WordPress 環境をセットアップするプロセスが効率化されます。WordPress Playground は両方をサポートしており、Docker、MySQL、Apache は必要ありません。

WordPress に貢献する際に、ローカル開発 でこれらのツールを使用する方法については、読み進めてください。拡張機能と NPM パッケージは現在開発中であり、すべての Make WordPress チーム が完全にサポートされているわけではないことにご注意ください。

はじめる​

VS Code プレイグラウンド拡張機能​

Visual Studio Code Playground 拡張機能 は、セットアップが不要な使いやすい開発環境です。

  1. VS Code を開き、拡張機能 タブ (表示 > 拡張機能) に移動します。
  2. 検索バーに「WordPress Playground」と入力し、インストール をクリックします。
  3. Playground を操作するには、アクティビティバー の新しいアイコンをクリックし、WordPress サーバーを開始 ボタンをクリックします。
  4. 数秒以内にブラウザに新しいタブが開きます。

@wp-playground/cli NPM パッケージ​

@wp-playground/cli は、コマンド 1 つで WordPress サイトを起動できる CLI ツールです。Docker、MySQL、Apache は必要ありません。

前提条件​

@wp-playground/cli には Node.js 20.18 以降と NPM が必要です。まだインストールしていない場合は、始める前に両方をダウンロードしてインストールしてください。

参加する Make WordPress チームによっては、インストール済みのものとは異なるバージョンの Node.js が必要になる場合があります。Node Version Manager（NVM）を使用してバージョンを切り替えることができます。インストールガイドはこちら。

@wp-playground/cli を実行しています​

@wp-playground/cli を使用するためにデバイスにインストールする必要はありません。プラグインまたはテーマのディレクトリに移動し、以下のコマンドで @wp-playground/cli を起動してください。

cd my-plugin-or-theme-directory
npx @wp-playground/cli@latest server --auto-mount

貢献者へのアイデア​

Gutenberg プルリクエスト (PR) を作成する​

  1. GitHub アカウントで Gutenberg リポジトリをフォークします。
  2. 次に、フォークしたリポジトリをクローンしてファイルをダウンロードします。
  3. 必要な依存関係をインストールし、開発モードでコードをビルドします。
git clone git@github.com:WordPress/gutenberg.git
cd gutenberg
npm install
npm run dev

上記の手順が不明な場合は、公式のGutenberg プロジェクト貢献者ガイドをご覧ください。この場合、wp-env が @wp-playground/cli に置き換えられることに注意してください。

新しいターミナルタブを開き、Gutenberg ディレクトリに移動して、@wp-playground/cli を使用して WordPress を起動します。

cd gutenberg
npx @wp-playground/cli@latest server --auto-mount

準備ができたら、変更を GitHub 上のフォークしたリポジトリにコミットしてプッシュし、Gutenberg リポジトリでプル リクエストを開きます。

Gutenberg の PR をテストする​

  1. 他の Gutenberg PR をテストするには、関連するブランチをチェックアウトします。
  2. 最新の変更をプルして、ローカルコピーが最新であることを確認します。
  3. 次に、必要な依存関係をインストールし、テスト環境が最新の変更と一致していることを確認します。
  4. 最後に、開発モードでコードをビルドします。
# copy the branch-name from GitHub #
git checkout branch-name
git pull
npm install
npm run dev

# In a different terminal inside the Gutenberg directory *
npx @wp-now/wp-now start

ブラウザで Playground を使って Gutenberg の PR をテストする​

Gutenberg の PR をテストするのにローカル開発環境は必要ありません。Playground を使用してブラウザ内で直接テストできます。

  1. テストしたい PR の ID をコピーします（オープンなプルリクエストのリストから 1 つ選択します）。
  2. Playground の Gutenberg PR プレビューアーを開き、コピーした ID を貼り付けます。
  3. Go をクリックすると、Playground は PR の有効性を検証し、関連する PR を含む新しいタブを開きます。提案された変更内容を確認できます。

ブラウザの Playground で WordPress プラグインを翻訳する​

対応している WordPress プラグインを翻訳するには、翻訳したいプラグインを読み込み、インライン翻訳を使用します。プラグイン開発者がこのオプションを追加している場合は、翻訳画面の右上のツールバーに「ライブ翻訳」リンクが表示されます。この新しいオプションの詳細については、Polyglots のブログ記事をご覧ください。

WordPress Playground でサポートを受け、貢献する​

ご質問や新機能に関するアイデアをお持ちですか？バグを発見しましたか？期待通りに動作しませんか？お気軽にお問い合わせください。