【WordPress】テーマ開発－ブロックパターンの追加方法

WordPressのエディタがGutenbergに変わってしばらく経ちますがブロックエディタは進化してきて馴染んできたと思います。

特にブロックパターン機能はHTMLを書けない不慣れなユーザーにも扱いやすくするとても親切なツールです。

管理画面を扱うユーザーにとって一度わかってしまえばとても便利なのでブロックパターンは多用してなるべく多くのことを管理者自身にやってもらうことが良いと思います。

ブロッパターンの登録方法

まず下記のようなコードをfunctions.phpにかきます。

if ( ! function_exists() ):

function hoge_register_block_patterns() {
    register_block_pattern(
        $block_pattern_name, // ブロックパターンの名前
        array(
            'title' => "", // ブロックパターンのタイトル※こちらが表示されるタイトル
            'categories' => array('text'), // カテゴリを指定textは適当
            'description' => '',　// パターンの説明。ここに指定してある文言が紹介文になる
            'content' => "", // ★ここにコンテンツ内容を入れる
            'keywords' => [], // キーワード検索でひっかけたい文字を指定する
            'viewportWidth' => 'ブロックパターンプレビュー時の想定幅'
        )
    )
}
add_action('init', 'hoge_register_block_patterns');
// @XXX hoge部分は適宜変更してください
endif;

functions.phpに用意が出来たら実際の投稿からパターンを作成

1. 始めに実際の投稿画面で作成したいブロックパターンの素（もと）を作成する
2. ビジュアルエディタ画面でCtrl+Shift+Alt+Mを同時押ししてビジュアルエディタからHTMLへブロックエディタの表示を変更する
3. 1で作成した箇所をコピーする
4. functions.php内のコードregiter_block_patternの’content’の値にコピーしたものを貼り付ける
5. 貼りつけたコピーを汎用性の高いものに変更（例えば画像はplacehold.jpなどに変更したり）
6. 管理画面からブロックパターンに追加されているか確認する

これでブロックパターンは気軽に登録することができます。

可能なかぎり管理画面を使いやすくして管理者に自信をもって操作してもらえるようにしましょう。