クイックスタートガイド
このガイドでは、WordPress の Interactivity API をデモする基本的なブロックを構築します。
インタラクティブなブロックのひな形の作成
まず Node.js と npm がコンピュータにインストールされていることを確認します。インストールしていなければ、Node.js 開発環境 ガイドを参照してください。
次に、@wordpress/create-block パッケージと @wordpress/create-block-interactive-template テンプレートを使用して、完全な「My First Interactive Block」プラグインのひな形を作成します。
プラグインを作成したいフォルダを選択し、そのフォルダ内からターミナルで以下のコマンドを実行します。
npx @wordpress/create-block@latest my-first-interactive-block --template @wordpress/create-block-interactive-template
指定されたスラッグ（my-first-interactive-block���は、ひな形プラグインのフォルダ名と内部ブロック名を定義します。
基本的な使用方法
プラグインを有効化すると、ブロックの動作を調べられます。次のコマンドを使用して、新しく作成したプラグインフォルダーに移動し、開発プロセスを開始します。
cd my-first-interactive-block && npm start
create-block がブロックのひな形を作成すると、wp-scripts がインストールされ、最も汎用的なスクリプトがブロックの package.json ファイルに追加されます。このパッケージの紹介については、wp-scripts 入門の記事を参照してください。
npm start コマンドは開発サーバーを起動し、ブロックのコードの変更を監視し、変更が加えられるたびにブロックを再構築します。
変更を終えたら、npm run build コマンドを実行します。ブロックのコードが最適化され、本番環境用のパッケージが構築されます。
ブロックの動作の確認
ローカルに WordPress をインストールし、実行している場合は、その plugins フォルダから上のコマンドを実行できます。そうでない場合は、wp-now を使用して、プラグインのフォルダ (my-first-interactive-block) から以下のコマンドを実行することで、プラグインがインストールされた WordPress サイトを起動できます。
npx @wp-now/wp-now start
「My First Interactive Block」ブロックを任意の投稿に挿入し、公開すると、フロントエンドで動作を確認できます。
Interactivity API を使用したより高度な例については、以下のリソースを参照してください。
最終更新日: