2026年7月25日

WordPressのブロックプラグイン開発入門

プラグイン関連

はじめに

ここでは、WordPressのブロックエディタを使用して独自のブロックプラグインを開発する方法を紹介します。この技術は、カスタムコンテンツビルダーを作成し、ユーザーが自由に利用できる新しいウェブページや投稿タイプを作るのに役立ちます。

症状・背景

ユーザーが特定の機能を持つ独自のブロックを使用したい場合
カスタマイズされたエディタ体験を提供するプラグインを開発したい場合
WordPressサイトで一貫性のあるデザインとユーザーフレンドリーなインターフェースを実現したい場合
ブロックエディターの機能を拡張して、より複雑なウェブページを作成したい場合

手順・設定方法

ステップ1: WordPressプロジェクトのセットアップ

# WordPressサイトと開発用環境を準備する
composer create-project wordpress/wp-develop my-plugin --prefer-source

# プラグインフォルダを作成し、ブロックプラグイン用の基本ファイル構造を設定する
mkdir -p wp-content/plugins/my-block-plugin/src/blocks
touch wp-content/plugins/my-block-plugin/src/blocks/index.php

ステップ2: カスタムブロックの作成と登録

# WordPressブロックAPIを使用して新しいカスタムブロックを定義するPHPファイルを作成する
echo 'function my_block_init() {
    wp_enqueue_script(
        "my-block-js",
        plugins_url( "/src/blocks/block.js", __FILE__ ),
        array("wp-blocks", "wp-i18n", "wp-element"),
        filemtime(plugin_dir_path(__FILE__) . "blocks/block.js")
    );
}
add_action( "enqueue_block_editor_assets", "my_block_init" );' > wp-content/plugins/my-block-plugin/src/blocks/index.php

# ブロックのJavaScriptファイルを作成し、Reactを使用してブロック構造を定義する
echo 'import { registerBlockType } from "@wordpress/blocks";
import "./editor.css";

registerBlockType("my-block-plugin/test-block", {
    title: "Test Block",
    icon: "smiley",
    category: "common",
    edit: function( props ) {
        return <p>Editing Test Block</p>;
    },
    save: function(props) {
        return <p>Saved Test Block</p>;
    }
});' > wp-content/plugins/my-block-plugin/src/blocks/block.js

ステップ3: ブロックのエディタスタイルとCSSを追加

# カスタムブロック用のエディタスタイルとCSSファイルを作成する
echo '@import url( "../common.css" );
.TestBlock {
    background-color: #f5f6fa;
    border-radius: 4px;
    padding: 10px;
}' > wp-content/plugins/my-block-plugin/src/blocks/editor.css

# プラグインのメインファイルにエディタスタイルを登録するコードを追加する
echo 'function my_block_init() {
    wp_enqueue_script(
        "my-block-js",
        plugins_url( "/src/blocks/block.js", __FILE__ ),
        array("wp-blocks", "wp-i18n", "wp-element"),
        filemtime(plugin_dir_path(__FILE__) . "blocks/block.js")
    );
    wp_enqueue_style(
        'my-block-editor-style',
        plugins_url('/src/blocks/editor.css', __FILE__),
        false,
        filemtime(plugin_dir_path(__FILE__) . '/src/blocks/editor.css')
    );
}
add_action( "enqueue_block_editor_assets", "my_block_init" );' > wp-content/plugins/my-block-plugin/src/blocks/index.php

ステップ4: ブロックの機能を拡張とトラブルシュート

# エラーロギングやデバッグ用にwp_debugモードを有効にする
echo 'define( "WP_DEBUG", true );
define( "SCRIPT_DEBUG", true );' >> wp-config.php

# ブロックの挙動をチェックするために、ブラウザの開発者ツールを使用する
# JavaScriptエラーがないか確認し、ブロックが正しくレンダリングされていることを検証する

注意事項

開発環境でテストを行うこと。本番環境では直接プラグインを開発しない。
ブロックのCSSとJSファイルは適切にバージョン管理を行い、更新された場合に自動的に読み込まれるようにする。
WordPressの最新版を使用して開発すること。古いバージョンでは新しい機能が利用できない可能性がある。
セキュリティリスクを減らすためには、コードのベストプラクティスと標準的なセキュリティチェックポイントを遵守する。

まとめ

1. 基本セットアップ: WordPressサイト上で開発環境を準備し、プラグインフォルダを作成します。

2. ブロック定義: JavaScriptを使用して新しいカスタムブロックを定義し、編集と保存のためのReactコンポーネントを実装します。

3. エディタスタイル: ブロックが一貫性のある視覚的表現を持つように、編集画面用のCSSを追加します。

4. 拡張とトラブルシュート: 新しいブロック機能を追加し、開発者ツールを使用して問題解決を行います。

Post Views: 9