2026年5月20日

WordPressのブロックエディター（Gutenberg）の使い方

プラグイン関連

はじめに

GutenbergはWordPress 5.0で導入されたブロックベースのエディターです。段落・見出し・画像・ボタンなどを「ブロック」として組み合わせてページを構成します。基本操作から再利用ブロック・カスタムブロック作成まで解説します。

症状・原因

Gutenbergの基本的な操作方法が分からない
旧エディター（Classic Editor）からGutenbergに移行したい
よく使うレイアウトをテンプレートとして保存したい
独自のカスタムブロックを作りたい

解決手順

ステップ1：基本操作を覚える

新規投稿/固定ページ → ブロックエディターが起動

ブロックの追加:
→「+」ボタンをクリック または /（スラッシュ）でコマンド検索
→ /heading → 見出しブロック
→ /image → 画像ブロック
→ /button → ボタンブロック
→ /columns → カラムブロック

ショートカット:
→ Ctrl+Z: 元に戻す
→ Ctrl+Shift+Z: やり直し
→ Ctrl+Alt+T: 前にブロックを挿入
→ Ctrl+Alt+Y: 後にブロックを挿入

ステップ2：再利用ブロックを作成する

よく使うブロックの組み合わせを保存：

ブロックを選択 → ブロックメニュー（⋮）→「再利用ブロックに追加」
→ 名前: CTA-バナー
→「保存」

再利用ブロックをWP-CLIで管理：

# 再利用ブロック一覧
wp post list --post_type=wp_block --fields=ID,post_title,post_status

# 再利用ブロックの内容を確認
wp post get 456 --field=post_content

ステップ3：ブロックパターンを登録する

// functions.php — カスタムブロックパターンを登録
add_action('init', function() {
    register_block_pattern('mytheme/hero-section', [
        'title'       => 'ヒーローセクション',
        'description' => 'タイトル・説明・CTAボタンのセット',
        'categories'  => ['featured'],
        'content'     => '<!-- wp:group {"className":"hero"} -->
<div class="wp-block-group hero">
<!-- wp:heading {"level":1} -->
<h1>メインタイトル</h1>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>説明文をここに入力してください。</p>
<!-- /wp:paragraph -->
<!-- wp:buttons -->
<div class="wp-block-buttons">
<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">お問い合わせ</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
</div>
<!-- /wp:group -->',
    ]);
});

ステップ4：カスタムブロックをPHPで作成する（Dynamic Block）

// functions.php — 動的カスタムブロックを登録
add_action('init', function() {
    register_block_type('mytheme/latest-news', [
        'attributes'      => [
            'count' => ['type' => 'integer', 'default' => 3],
        ],
        'render_callback' => function(array $attrs): string {
            $posts = get_posts(['numberposts' => $attrs['count'], 'post_status' => 'publish']);
            $html  = '<ul class="latest-news">';
            foreach ($posts as $post) {
                $html .= sprintf('<li><a href="%s">%s</a></li>',
                    get_permalink($post),
                    esc_html($post->post_title)
                );
            }
            return $html . '</ul>';
        },
    ]);
});

ステップ5：フルサイト編集（FSE）を使う

WordPress 6.0以降・FSE対応テーマ（Twenty Twenty-Three等）で使用可能：

外観 → エディター（フルサイト編集）
→ テンプレート: 投稿・固定ページ・アーカイブをブロックで編集
→ テンプレートパーツ: ヘッダー・フッターを編集
→ スタイル: サイト全体の色・フォントをGUI設定

# FSEテンプレートをWP-CLIで確認
wp post list --post_type=wp_template --fields=ID,post_name,post_status
wp post list --post_type=wp_template_part --fields=ID,post_name

ステップ6：Classic Editorへの切り替え（緊急時）

wp plugin install classic-editor --activate
wp option update classic-editor-settings '{"editor":"classic","allow-users":"no"}'

注意事項

旧エディターのショートコードはGutenbergでも「ショートコード」ブロックで使えます
カスタムブロックはJavaScript（React）で作るのが正式ですが、PHPのDynamic Blockでも多くの用途をカバーできます
FSEはブロックテーマでのみ使用できます（従来テーマでは「外観→エディター」メニューが表示されません）

まとめ

Gutenbergは再利用ブロック・パターンを活用すると制作効率が大幅に上がります。Dynamic Blockで最新投稿一覧などの動的コンテンツを表示し、FSE対応テーマではヘッダー・フッターもブロックで管理できます。

Post Views: 5