【WordPress】register_block_styleで囲みボックスをワンクリックで切り替える！

register_block_styleを使えば、エディターのサイドパネルからワンクリックでスタイルを切り替えられるようになります。

コードはAIに丸投げでOK！仕組みの理解と使い方だけ覚えれば十分です。

この記事では
・register_block_styleの仕組み
・ファイルを分けてスッキリ管理する方法
・すぐ使えるボックススタイルの全コード

を、実例を交えながら解説します。

register_block_styleって何をするもの？

WordPressのブロックには、デフォルトで「スタイル」を切り替える機能があります。
register_block_styleは、そこにオリジナルのスタイルを追加登録できる関数です。

エディターでスタイルを「選べる」ようになる仕組み

グループブロックを選択したとき、右側の設定パネルに「スタイル」という項目があります。
ここに自分で登録したスタイルが並ぶようになります。

どこに書くの？ファイル構成の確認

register_block_styleはPHPで書く関数です。
「PHPって難しそう…」と思った方、大丈夫です！
コードはAIに丸投げでOK。仕組みと使い方だけ理解すれば十分です😊

ファイルを分けて管理する理由

functions.phpに全部書くこともできますが、スタイルが増えるにつれてどこに何が書いてあるかわからない状態になりがちです。

functions.php
├── テーマセットアップ
├── スクリプト読み込み
├── register_block_style①
├── register_block_style②
├── register_block_style③
└── …どんどん増える😭

functions.php
└── require 'inc/block-styles.php'

inc/block-styles.php
└── register_block_styleを全部ここに
    CSSもインラインで一緒に書く！

inc/block-styles.phpに登録する

テーマフォルダの中にincフォルダを作り、
その中にblock-styles.phpを作ります。

kk-theme/
├── style.css
├── theme.json
├── functions.php
├── inc/
│   └── block-styles.php  ← ここを新規作成
└── templates/
    └── index.html

functions.phpは読み込むだけ

functions.phpには1行追加するだけでOKです👇

// ブロックスタイルの登録
require get_template_directory() . '/inc/block-styles.php';

CSSはインラインで書く（おすすめ）

register_block_styleにはCSSをインラインで一緒に書けるオプションがあります。
PHPファイル1つで完結するので、AIに追加をお願いするときも管理するときもラクです😊

register_block_style( 'core/group', [
    'name'         => 'kk-summary',
    'label'        => '✅ まとめ',
    'inline_style' => '
        .wp-block-group.is-style-kk-summary {
            background-color: #eef6f0;
            border-left: 4px solid #4a7c7e;
            border-radius: 8px;
            padding: 1.25rem 1.5rem;
        }
    ',
] );

（補足）CSSファイルに分ける方法もある

スタイルが増えてきたり、CSSだけ別で管理したい場合は
assets/css/block-styles.cssに分ける方法もあります。

// functions.phpでCSSファイルを読み込む
function kk_block_styles_css() {
    wp_enqueue_block_style( 'core/group', [
        'handle' => 'kk-group-styles',
        'src'    => get_theme_file_uri( 'assets/css/block-styles.css' ),
        'path'   => get_theme_file_path( 'assets/css/block-styles.css' ),
    ] );
}
add_action( 'init', 'kk_block_styles_css' );

実際に作ってみよう（まとめボックスを例に）

実際に「まとめボックス」を1つ作ってみましょう。
このコードをそのままAIに渡して「同じ形式でポイントボックスも追加して」と
お願いするだけで、どんどん増やせます😊

inc/block-styles.phpのコード

inc/block-styles.phpを新規作成して、このコードを貼り付けます👇

function kk_register_block_styles() {

    // ✅ まとめ（緑）
    register_block_style( 'core/group', [
        'name'         => 'kk-summary',
        'label'        => '✅ まとめ',
        'inline_style' => '
            .wp-block-group.is-style-kk-summary {
                background-color: #eef6f0;
                border-left: 4px solid #4a7c7e;
                border-radius: 8px;
                padding: 1.25rem 1.5rem;
            }
        ',
    ] );

}
add_action( 'init', 'kk_register_block_styles' );

エディターでの使い方（図解）

コードを保存したら、エディターでこの手順で使えます👇

選択すると、こんな見た目になります👇

theme.jsonとの役割分担まとめ

ここまで読んで「theme.jsonとregister_block_style、
結局どっちに書けばいいの？」と思った方へ。
どっちに書けばいいか迷ったときの判断基準を整理します！

具体的にはこんな感じです👇

グループ以外のブロックにも使える

基本が理解できたら、次のステップに進んでみましょう！
register_block_styleはグループブロック以外にも使えます。

どのコアブロックにもスタイルを追加できます👇

'core/paragraph'

'core/image'

'core/list'

'core/heading'