【WordPress】Gutenbergに見出しテンプレートやショートコードを挿入できるカスタムブロックを追加する方法

【WordPress】Gutenbergに見出しテンプレートやショートコードを挿入できるカスタムブロックを追加する方法 WordPress

WordPressのGutenberg（ブロックエディタ）では、独自のカスタムブロックを追加することで、よく使う定型文やショートコードをワンクリックで挿入できるようになります。

この記事では、Gutenbergにオリジナルの「テンプレート挿入ボタン付きブロック」を作成し、見出しや本文、ショートコードを手軽に挿入する方法を紹介します。

スポンサーリンク

ブロック開発に必要な準備

まずはWordPressテーマ内に block-template などのフォルダを作成し、必要なJavaScriptファイルやブロック情報を配置します。

以下は構成例です：

/your-theme/
├── functions.php
└── block-template/
    ├── block.js
    └── index.js

functions.php にスクリプト読み込みを追加

テーマの functions.php に以下を追加して、Gutenberg用スクリプトを読み込みます。

<?php
function register_custom_gutenberg_block() {
    wp_register_script(
        'custom-template-block',
        get_template_directory_uri() . '/block-template/block.js',
        array( 'wp-blocks', 'wp-element', 'wp-editor', 'wp-components' ),
        filemtime( get_template_directory() . '/block-template/block.js' )
    );

    register_block_type( 'mytheme/template-button', array(
        'editor_script' => 'custom-template-block',
    ) );
}
add_action( 'init', 'register_custom_gutenberg_block' );
?>

block.js の内容（カスタムブロックの定義）

block.js に以下のような内容を記述し、テンプレートを挿入するボタン付きのブロックを作成します。

(function (blocks, element, editor, components) {
    var el = element.createElement;

    blocks.registerBlockType('mytheme/template-button', {
        title: 'テンプレート挿入',
        icon: 'editor-insertmore',
        category: 'widgets',
        edit: function () {
            return el(
                'button',
                {
                    className: 'components-button is-primary',
                    onClick: function () {
                        const content = '<h2>見出しタイトル</h2>\n\nここに本文を入力してください。';
                        editor.RichText.insert(content);
                    }
                },
                'テンプレートを挿入'
            );
        },
        save: function () {
            return null; // 動的ブロック（保存時の出力なし）
        }
    });
})(
    window.wp.blocks,
    window.wp.element,
    window.wp.editor,
    window.wp.components
);

このカスタムブロックを使うことで、「テンプレートを挿入」ボタンをGutenberg上に追加し、クリックするだけで指定のHTMLを本文に追加できます。

ショートコードを挿入する場合

テンプレートの代わりにショートコードを挿入したい場合は、挿入文字列を以下のように変更します。

const content = '[my_shortcode param="value"]';

これにより、記事中に簡単にショートコードを追加できるようになります。

よくある質問（FAQ）

Q. PHPのみでGutenbergカスタムブロックを動的に登録する最小構成は？
A. register_block_type()にrender_callbackを指定します。block.jsonでブロックのメタデータを定義し、register_block_type(__DIR__ . ‘/block.json’)として登録します。JavaScriptのeditコンポーネントは別途必要です。
Q. @wordpress/create-blockで生成したスキャフォールドの構成は？
A. src/edit.js（エディターUI）・src/save.js（フロント出力）・src/index.js（ブロック登録）・block.json（メタデータ）・src/style.scss（スタイル）の基本構成です。
Q. カスタムブロックをプラグインではなくテーマに含めるには？
A. テーマのfunctions.phpでregister_block_type()を呼び出します。after_setup_themeフックでwp_enqueue_block_stylesを使うか、init内でregister_block_typeを実行します。テーマに含めるとテーマ削除時にブロックも無効になります。

まとめ

Gutenbergでは、カスタムブロックを使って投稿エディタにテンプレートやショートコードを簡単に挿入できるボタンを追加できます。よく使う定型文や構造がある場合は、エディタの操作性を高めるために、こうしたカスタマイズを導入すると便利です。

本格的な開発には @wordpress/create-block パッケージを使ったブロックプラグイン開発もおすすめですが、テーマ内で軽量に実装したい場合は今回の方法で十分対応可能です。