クイックスタートガイド

このガイドでは、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 を使用したより高度な例については、以下のリソースを参照してください。

• ドキュメントとサンプルプログラム
• はじめに – および、その他の学習向け情報
• Interactivity API showcase

原文

最終更新日: 2024年9月29日