※[Building your first extension]の翻訳内容となります。(2024年4月21日現在)

導入

このガイドでは、create-woo-extension を使用して WooCommerce 拡張機能をスキャフォールディングする方法を説明します。 create-woo-extension を使用すると、ゼロから手動で作成する場合と比べて、次のようなさまざまな利点があります。

記述する定型コードが少なくなり、手動でセットアップする依存関係も少なくなります。

Blocks などの最新の機能が自動的にサポートされ、単体テスト、lint、Prettier IDE 構成をすぐに使用できます。

拡張機能をセットアップしたら、wp-env を使用して開発環境を即座に起動する方法を説明します。

必要要件

始める前に、次のツールをデバイスにインストールする必要があります。

• Node.js NPM を使用
• Docker (wp-env を使用するには実行している必要があります)
• Composer

また、このガイドは、ユーザーがコマンド ラインの操作に精通していることを前提としています。

拡張機能のブートストラップ

ターミナルを開いて実行します

npx @wordpress/create-block -t @woocommerce/create-woo-extension my-extension-name

カスタムの拡張機能名を設定したい場合は、my-extension-name を任意のスラッグに置き換えることができます。 スラッグにはスペースを含めないでください。

「次のパッケージをインストールする必要があります: @wordpress/create-block@4.34.0」のようなプロンプトが表示された場合。 続行しますか?、Y を押してください。

パッケージが拡張機能の生成を完了したら、次のコマンドを使用して拡張機能フォルダーに移動します。

cd my-extension-name

次に、npm install を使用して拡張機能の依存関係をインストールし、npm run build を使用してビルドする必要があります。

おめでとう! WooCommerce 拡張機能を起動しました。 拡張機能は次のファイル構造になります。

• my-extension-name
  • block.json – カスタムブロックを WordPress に登録するために使用されるメタデータが含まれています。 もっと詳しく知る。
  • build – npm run build を使用して生成された拡張機能のビルドされたバージョン。 このフォルダー内のファイルを直接変更しないでください。
  • Composer.json – Composer によって参照される PHP 依存関係のリストが含まれています。
  • combos.lock – このファイルを使用すると、これらの依存関係をいつ、どのように更新するかを制御できます。
  • includes – PHP 開発における「includes」フォルダーの主な目的は、プロジェクトの複数の部分に含める必要がある、または必要な再利用可能なコードまたはファイルを保存することです。 これは PHP 開発者の規約です。
  • languages – プラグインのローカライズに使用される POT ファイルが含まれています。
  • my-extension-name.php – プラグインを WordPress に登録するプラグイン エントリ ポイント。
  • node-modules – アプリケーションの構成要素を形成し、より構造化されたコードを作成するのに役立ちます。
  • package.json – Node プロジェクトの中心とみなされます。 メタデータを記録し、機能の依存関係をインストールし、スクリプトを実行し、アプリケーションのエントリ ポイントを定義します。
  • README.md – アプリケーションの概要と説明。 特別な指示、作成者からの更新情報、アプリケーションに関する詳細をここにテキストで書くことができます。
  • src – ルート ディレクトリをクリーンな状態に保ち、ソース コードと他のアセットを明確に分離します。
  • tests – アプリケーションの単体テストを保持し、ソース ファイルから分離して保持できます。
  • vendor – プロジェクトの依存関係と、自分が作成していないサードパーティのコードを保持します。
  • webpack.config.js – webpack はモジュール バンドラーです。 その主な目的は、ブラウザで使用できるように JavaScript ファイルをバンドルすることです。

開発者環境のセットアップ

ローカル開発環境を起動するには、wp-env を使用することをお勧めします。 wp-env について詳しくは、こちらをご覧ください。 wp-env をまだローカルにインストールしていない場合は、npm -g i @wordpress/env を使用してインストールできます。

wp-env をインストールしたら、my-extension-name フォルダー内で wp-env start を実行します。 数秒後、WooCommerce と拡張機能がインストールされたテスト WordPress サイトが localhost:8888 で実行されます。

拡張機能のカスタム名を設定していない場合は、ここにアクセスして、/src/index.js によって生成された設定ページを確認できます。 wp-env のデフォルトのユーザー名とパスワードの組み合わせは、admin / password です。

次のステップ

拡張機能をブートストラップしたので、いよいよ機能を追加できるようになります。 以下に含めることができる簡単なものをいくつか示します。

シンプルな商品やバリエーション商品にカスタムフィールドを追加する方法

リファレンス

Visit @woocommerce/create-woo-extension on NPM for package reference Check out wp-env’s command reference to learn more about advanced functionality