クイックスタートガイド

このガイドでは WordPress におけるブロック開発の基本原則をハンズオン形式で説明します。以下の手順に従うだけで、モダンなJavaScript (ESNext と JSX) を使用したカスタムブロックプラグインを数分で作成できます。ブロックのサンプル例では、著作権シンボル (©) と現在の年を表示します。どのウェブサイトのフッターにも最適でしょう。

まず Node.js と npm がコンピュータにインストールされていることを確認してください。インストールされていなければ、Node.js 開発環境 ガイドを参照してください。

次に、@wordpress/create-block パッケージと @wordpress/create-block-tutorial-template テンプレートを使用して、完全な「Copyright Date Block」プラグインのひな形を作成します。

任意の場所で create-block を使用してブロックを作成できます。次に、生成されたプラグインフォルダの中から wp-env を使用します。WordPress のローカル開発環境が作成され、新しいブロックプラグインがインストール、有効化されます。 ローカル WordPress 開発環境がすでにセットアップされている場合は、ターミナルを使用して plugins/ フォルダに移動してください。

プラグインを作成するフォルダを選択し、そのフォルダ内からターミナルで以下のコマンドを実行します。

npx @wordpress/create-block copyright-date-block --template create-block-tutorial-template

指定された slug (copyright-date-block) は、ひな形プラグインのフォルダ名と内部ブロック名を定義します。

WordPress のプラグインページに移動し、「Copyright Date Block」プラグインを有効化します。エディターでこのサンプルブロックが利用できるようになります。

プラグインを有効化すると、ブロックがどのように動作するかを調べられます。次のコマンドを使用して、新しく作成したプラグインフォルダーに移動し、開発プロセスを始めてください。

cd copyright-date-block && npm start

create-block はブロックのひな形を作成する際、wp-scripts をインストールし、最も汎用的なスクリプトをブロックの package.json ファイルに追加します。このパッケージの紹介については、wp-scripts 入門の記事を参照してください。

npm start コマンドは開発サーバーを起動し、ブロックのコードの変更を監視し、変更されるたびにブロックを再構築します。

変更が終わったら npm run build コマンドを実行します。ブロックのコードが最適化され、本番環境への適用が可能になります。

• create-block 入門
• wp-scripts 入門
• wp-env 入門

原文

最終更新日: 2023年11月19日