ネットソリューション

【WordPress】追加CSSクラスをボタン化して使いやすくしてみた

calendar_month2024-07-26

ブロックエディタはHTMLソースが決まっている

WordPressのブロックエディタ（Gutenberg）はブロックごとにHTMLソースが決められています。

h2見出しブロックだったら

<h2 class="wp-block-heading">h2見出しです</h2>

リストブロックだったら

<ul>
    <li>リスト項目1</li>
    <li>リスト項目1</li>
    <li>リスト項目1</li>
</ul>

といった具合です。

これらのHTMLをCSSで装飾する際、1種類のデザインを当てるだけなら特に問題ないのですが、場合によっては同じh2でも違うデザインにしたいことなどがあるかと思われます。

その際は、ブロックエディタの右メニューにある「高度な設定」タブ内の「追加CSSクラス」を用いることで、独自のCSSクラスを追加することができます。

しかし問題はこれを「手入力しないといけない」こと。
WPに慣れている方であれば問題ないかもしれませんが、お客様が更新を行う場合はなかなかこの仕様をお出しするのも勇気がいります。
そこでこの「追加CSSクラス」をもっと簡単に利用できる方法をお教えします。

「追加CSSクラス」をボタン化する

手入力が難しいなら、ボタン化してデザインを選択できるようになればいいじゃない！
ということで、ご利用のテーマのfunctions.phpに以下のコードを追加してください。

// 追加CSSクラスのボタン化
function mytheme_register_block_styles() {
    register_block_style(
        'core/heading',
        array(
            'name'  => 'heading-2',
            'label' => __( '見出しデザイン2', 'mytheme' ),
        )
    );
}
add_action( 'init', 'mytheme_register_block_styles' );

'core/heading',がスタイルを当てたいコアブロックの名前、
'name' => 'heading-2',が追加したいクラス名（※注意点あり）、
'label' => __( '見出しデザイン2', 'mytheme' ),が編集画面上でボタンとして表示する際のボタンテキスト
となります。

上記コードを追加後、編集画面に移動し、見出しブロックを選択すると、右メニューに以下のようなボタンが追加されます。

このボタンを選択すると、選択中の見出しブロックにis-style-heading-2というCSSクラスが追加されます。
あとはこのCSSクラスにスタイルを当てることで、簡単にデザインの変更が可能となります。

一点注意すべき点は、'name' => 'heading-2',で指定したクラス名そのものではなく、接頭辞としてis-style-が必ず入ってしまうこと。
こちらを想定したCSSの記述が必要となります。

もし見出しブロック以外にもCSSボタンを実装したい場合は、register_block_style単位で増やしていくことで複数ブロックに設定が可能です。
一つのブロックに複数のCSSボタンを実装することもできます。

例）

// 追加CSSクラスのボタン化
function mytheme_register_block_styles() {
    register_block_style(
        'core/heading', //見出しブロック
        array(
            'name'  => 'heading-2',
            'label' => __( '見出しデザイン2', 'mytheme' ),
        )
    );

    register_block_style(
        'core/paragraph', //段落ブロック
        array(
            'name'  => 'paragraph-2',
            'label' => __( '段落デザイン2', 'mytheme' ),
        )
    );

    register_block_style(
        'core/group', //グループブロック
        array(
            'name'  => 'group-2',
            'label' => __( 'グループデザイン2', 'mytheme' ),
        )
    );
}
add_action( 'init', 'mytheme_register_block_styles' );