クイックスタートガイド

Topics

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

https://youtube.com/watch?v=nrut8SfXA44%3Fsi%3DYxvmHmAoYx-BDCog
WordPress Block Development: Quick Start Guide Video

ブロックプラグインのひな形の作成

まず 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 @wordpress/create-block-tutorial-template

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

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

Top ↑

基本の使い方

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

cd copyright-date-block && npm start

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

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

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

Top ↑

ブロックの動きの確認

新しいブロックのテストには、任意のローカル WordPress 開発環境を使用できますが、ひな形のプラグインにはwp-env の設定が含まれています。コンピュータに Docker がインストール、実行されている必要があります。準備を終えたら npx wp-env startコマンドを実行してください。

スクリプトの実行が終わると、ローカル環境に http://localhost:8888 でアクセスできます。ユーザー名 admin とパスワード password を使用して WordPress のダッシュボードにログインします。プラグインはすでにインストールされ、有効化されています。エディターまたはサイトエディターを開き、他のブロックと同じようにCopyright Date ブロックを挿入してください。

wp-env の詳細については、wp-env 入門 を参照してください。

Top ↑

その他のリソース

原文

最終更新日: