Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Node.js を使用した WordPress 用のブロック プラグインの作成


Node.js を使用した WordPress 用のブロック プラグインの作成


Node.js を使用して WordPress のブロック プラグインを作成するには、次の手順に従います。

1. Node.js と npm をインストールします:
- マシンに Node.js がインストールされていることを確認します。そうでない場合は、Node.js の公式 Web サイトからダウンロードしてインストールしてください[1][2]。

2. スターター ブロック プラグインのセットアップ:
- ローカル開発インストールの「wp-content/plugins」ディレクトリに移動します。次に、「npx @wordpress/create-block」コマンドを実行して、ブロック プラグインをスキャフォールディングします。このコマンドは、プロジェクトを開始するために必要なすべてのコードを生成し、構成を必要とせずに最新の JavaScript ビルド セットアップを統合します[3][4]。

3. ブロック プラグインを構成します:
- 「create-block」コマンドは、段階的に入力を求めます。クイック スタート モードを使用して、コマンド ラインで特定のオプションを直接渡すこともでき、対話型プロンプトが不要になります[4]。

4. ブロック プラグインをビルドして実行します:
- `npm start` を実行して開発サーバーを起動し、コードの変更が検出されるたびにブロックを自動的に再構築します。ブロックをデプロイする準備ができたら、「npm run build」を使用してコードを最適化し、本番環境に対応できるようにします[4]。

5. WordPress と統合:
- 生成されたプラグインをWordPressで有効化します。これにより、ブロックがエディターで使用できるようになります[4]。

6. ブロックのカスタマイズと拡張:
- 必要に応じて、ボイラープレート コードを変更してブロックをカスタマイズおよび拡張します。これには、最新の JavaScript (ESNext および JSX) の使用と、ビルドおよび lint タスクの「wp-scripts」パッケージの活用が含まれます[4]。

これらの手順に従うことで、Node.js と `@wordpress/create-block` パッケージを使用して WordPress 用のカスタム ブロック プラグインを作成および管理できます。

引用:
[1] https://wpdevelopment.courses/articles/wordpress-create-block/
[2] https://kinsta.com/courses/gutenberg-block-development/setting-up-a-block-plugin/
[3] https://www.npmjs.com/package/%40wordpress/create-block
[4] https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-create-block/
[5] https://www.youtube.com/watch?v=-aa4F4Dn9GY