Home / Team Handbook / ブロックエディターハンドブック / はじめに / チュートリアル / ブロックの作成チュートリアル / WordPress プラグイン

WordPress プラグイン

ブロックは、WordPress プラグインを使用してブロックエディターに追加されます。ユーザーは自分のプラグインを作成し、インストール、有効化してブロックを使用できます。まずここでは最初に、WordPress プラグインの構成を見ていきます。

プラグインの詳細

「WordPress プラグイン」の実体は Web サイトの wp-content/plugins ディレクトリ内にあるファイルの集合体です。このチュートリアルでは @wordpress/create-block パッケージを使用して必要とされるプラグインファイルを生成します。

ワーキングディレクトリへの切り替え

(1A) wp-env を使う予定がなければ、ローカルの WordPress プラグインディレクトリに移動してください。たとえば Local by Flywheel (以下、Local) であれば ~\Local Sites\mywp\wp-content\plugins です。

または

(1B) wp-env start を使う場合、任意のプロジェクト用ディレクトリから始めることができます。wp-env がサイトのプラグインディレクトリにマッピングしてくれます。

プラグインファイルの生成

(2) 環境の適切なディレクトリに移動後、次のコマンドを実行してプラグインファイルを生成します。

npx @wordpress/create-block gutenpride
cd gutenpride

新しいディレクトリ gutenpride とすべての必要なプラグインファイルが作成されます。以下、プラグインファイルを見ながら説明を加えていきます。一緒にファイルを確認し内容に親しんでください。

作成されるメインのプラグインファイルは PHP ファイル gutenpride.php です。このファイルの先頭部分には、プラグインを定義するプラグインヘッダーコメントブロックがあります。

/**
 * Plugin Name:     Gutenpride
 * Description:     Example block
 * Version:         0.1.0
 * Author:          The WordPress Contributors
 * License:         GPL-2.0-or-later
 * License URI:     https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:     gutenpride
 *
 * @package         create-block
 */

WordPress の起動

プラグインがロードでき、動作することを確認します。

(3A) Local や他の環境であれば WordPress サイトが起動していることを確認してください。

または

(3B) wp-env を使用する場合は、まず開発環境のセットアップを参照してください。次に gutenpride ディレクトリ內部から以下を実行します。

wp-env start

ローカルで WordPress を起動し、カレントディレクトリをプラグインディレクトリとして使用します。ブラウザから http://localhost:8888/wp-admin/ にアクセスしてログインします。デフォルトユーザー名は「admin」、パスワードは「password」です。

Plugin のインストールの確認

生成されたプラグインは WordPress 管理画面の「プラグイン」ページのリストに表示されます。プラグインを有効化してください。

WordPress プラグイン作成の詳細については Plugin Basics を参照してください。またプラグインヘッダーのフィールドの説明、追加可能なフィールドについては Plugin Header requirements を参照してください。

package.json

package.json ファイルはプロジェクトの JavaScript プロパティを定義します。これは NPM で使用される標準ファイルでプロパティや実行可能なスクリプトを含みます。ファイルやプロセスは WordPress 固有のものではありません。

package.json ファイルは create スクリプトで作成され、依存性と必要なスクリプトを定義します。最初からある依存性は @wordpress/scripts パッケージだけでブロック構築に必要なツールと構成をバンドルします。

package.json には scripts プロパティがあり、npm run (cmd) を使用した際に実行されるコマンドが定義されています。生成された package.json ファイルでは、2つのメインのスクリプトが wp-scripts パッケージ内のコマンドを指しています。

  "scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
  },

これらのスクリプトは npm run build または npm run start で実行されます。

npm run build は1度実行すると「production ビルド」(製品ビルド) を作成します。コードを圧縮しダウンロード時間を短くしますが、このためにブラウザツールを使用してコードを読むことが難しくなります。最終の配布用としては有用ですが開発では適しません。

npm run start を使用すると「development ビルド」(開発ビルド) が作成されます。コードは圧縮されないため、ブラウザツールを使用しても読みやすく、source maps でデバッグも容易になります。さらに development ビルドは watch プロセスを開始します。待機してファイルの変更を監視し、ファイルが更新されるたびにリビルドします。変更ごとにコマンドを実行する必要はありません。

デフォルトではビルドスクリプトはビルドする JavaScript ファイルとして src/index.js を探し、ビルドしたファイルを build/index.js に保存します。次のセクションではスクリプトの詳細を確認しますが、まず WordPress にロードされていることを確認しましょう。

スクリプトをロードするプラグイン

エディター内で動作するようビルドしたスクリプトをロードするには、WordPress に対してスクリプトにことを伝える必要があります。これは gutenpride.php ファイル内の init アクションで行います。

function create_block_gutenpride_block_init() {
    register_block_type_from_metadata( __DIR__ );
}
add_action( 'init', 'create_block_gutenpride_block_init' );

register_block_type_from_metadata 関数は、これから作成するブロックを登録し、block.json ファイルで提供されたメタデータから登録された editor_script ファイルハンドルを指定します。エディターがブロックをロードすると、このスクリプトをロードします。

{
    "apiVersion": 2,
    "name": "create-block/gutenpride",
    "title": "Gutenpride",
    "category": "widgets",
    "icon": "smiley",
    "description": "Example block written with ESNext standard and JSX support – build step required.",
    "supports": {
        "html": false
    },
    "textdomain": "gutenpride",
    "editorScript": "file:./build/index.js",
    "editorStyle": "file:./build/index.css",
    "style": "file:./build/style-index.css"
}

ブロックメタデータで提供される editorScript に対して、ビルドプロセスは2つ目のアセットファイル index.asset.php を作成します。ファイルには依存性とタイムスタンプに基づくファイルバージョンのリストが含まれています。

内部で使用される wp_register_script は「ハンドル」と呼ばれる名前を登録し、その名前をスクリプトファイルと関連付けます。他のライブラリーを含めスクリプトが必要であれば、指定に依存性が使用されます。ファイルが更新された場合にブラウザがリロードするよう、バージョンが指定されます。

wp_set_script_translations 関数は WordPress に、もし存在するならスクリプトの翻訳をロードするよう伝えます。詳細については翻訳と国際化を参照してください。

すべてを終えたら新しい投稿を作成してエディターを開始し、インサーターにブロックが追加されていることを確認してください。検索には / を使うか、[+] のボックスをクリックして「Gutenpride」を検索し、ブロックを見つけてください。

トラブルシューティング

Web コンソールの使い方を学び親しみましょう。Web コンソールでは JavaScript のエラーを表示したり、JavaScript のスニペットをテストできます。Firefox 開発ツールドキュメントを参照してください。

FireFox で開発ツールを開くにはメニューの「Web 開発」>「開発ツールを表示」を選択してください。Chrome では「その他のツール」>「デベロッパーツール」です。両方のブラウザともキーボードショートカットは Windows では Ctrl+Shift+I、Mac では Cmd+Shift+I です。Windows や Linux であれば F12 キーでも開きます。ログを参照するには「コンソール」をクリックしてください。

npm run start を実行してください。watch プロセスが始まり、自動リビルドが行われます。src/index.js ファイルを更新するとビルドが始まります。ブロックエディターをリロードすると変更が反映されます。

詳細についてはブロックエディターハンドブックの JavaScript 入門チュートリアルのビルドセクションを参照してください。

まとめ

この時点でプラグインを作成し有効化できました。@wordpress/scripts への依存性を含む package.json ではビルドとスクリプトの開始を定義しています。基本的なブロックが完成しエディターに追加できました。

次のセクション: ブロックの詳細

原文

最終更新日: 2021年4月2日

WordPress.org

日本語

ようこそ

P2 の使い方

お問い合わせ