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

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 でサポートを受け、貢献する

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