2026年6月16日

WordPressのBlock Editorにカスタムプラグインを追加する方法

カスタマイズ

はじめに

WordPressは、その柔軟性と拡張性から多くのウェブサイトで使用されています。Block Editor（以前のClassic Editor）と組み合わせてカスタムプラグインを開発することで、さらに高度な機能を実現することができます。

症状・背景

このテーマが必要になる主な場面:

カスタマイズされたエディタ機能をユーザーに提供したい場合
WordPress内で独自のブロックを作成し、コンテンツ作成者に利用してもらいたい場合
既存のプラグインと連携させることで新たな価値を生み出したい場合

手順・設定方法

ステップ1: WordPress環境の準備

# WordPressサイトが正常に動作することを確認してください。
cd /var/www/html/wordpress

ステップ2: プラグイン開発用のディレクトリを作成

# カスタムプラグインのファイルを格納するディレクトリを作成します。
mkdir -p wp-content/plugins/my-custom-plugin/

# ディレクトリに移動します。
cd wp-content/plugins/my-custom-plugin/

ステップ3: プラグインの基本情報ファイルを設定

# ファイル名は「my-custom-plugin.php」で、プラグイン情報を記述します。
touch my-custom-plugin.php

# 編集モードに移行し、次の内容を入力します。
vi my-custom-plugin.php

ステップ4: カスタムブロックの登録と機能実装

# ブロックファイルを作成し、その中で必要なJSやCSSを読み込みます。
touch block.js block.css
vi block.js vi block.css

# index.phpに次の内容を記載し、必要に応じてカスタムブロックの機能を実装します。
echo 'function myCustomBlockInit() {
    wp_register_script( "my-custom-block", plugins_url( "/block.js", __FILE__ ), array("wp-blocks"), "1.0");
    wp_enqueue_style( "my-custom-block-style", plugins_url("/block.css",__FILE__), false, "1.0" );
}
add_action("init","myCustomBlockInit");' >> my-custom-plugin.php

ステップ5: ブロックの登録とカスタマイズ

# 登録するブロックを定義します。
vi block.js

// block.js内に次のように記載します。
const { registerBlockType } = wp.blocks;
registerBlockType('my-custom-plugin/my-block', {
    title: 'My Custom Block',
    icon: 'smiley',
    category: 'common',
    edit: function(props) {
        return (
            <div className="block-content">
                <p>This is my custom block</p>
            </div>
        );
    },
    save: function(props) {
        return wp.element.createElement('p', null, props.attributes.content);
    }
});

ステップ6: プラグインの登録とテスト

# WordPressプラグインページからカスタムプラグインを有効化します。
wp plugin activate my-custom-plugin/my-custom-plugin.php

# Block Editorで新しく作成したブロックを使用するため、WordPressにログインし、新しい投稿やページを作成します。

注意事項

セキュリティ上の注意: カスタムプラグインを実装する際は、必ず安全なコーディング基準を遵守してください。ユーザー入力を適切に検証し、データベースへのアクセスやファイル操作の際にも十分な注意が必要です。
パフォーマンス/運用上の注意: プラグインが不要になった場合や更新時に必ず無効化または削除しましょう。また、頻繁にアップデートするプラグインは安定性を確認した上で実装することをお勧めします。

まとめ

1. セキュリティの確保: カスタムコードを適切に保護し、外部からの攻撃からサイトを守ります。

2. 機能拡張: Block Editorと連携させることで、ユーザーが簡単にカスタムブロックを作成・使用することができます。

3. テスト環境での開発: 実際のライブサイト上で動作確認をする前に、必ずテスト環境でプラグインを試すことを推奨します。

4. ドキュメントの作成: カスタムプラグインを使用するユーザーのために、詳細な操作説明と設定方法を提供してください。

5. 更新管理: WordPressが定期的にアップデートされるため、それに合わせてカスタムプラグインも適切に更新しましょう。

Post Views: 5