icysamon blog

wordpress のブロックテーマは直観的にウェブサイトを編集することができるのでとても便利です。でもカスタマイズ部分が少ない欠点があります。

このときにはテーマの functions.php を配置して以下のようなカスタムスタイルを追加ことができます。

コード

function themeslug_register_block_styles() {
    register_block_style( 'core/group', array(
        'name' => 'default',
        'label' => __( 'Default', 'themeslug' ),
        'is_default' => true,
        'inline_style' => '.wp-block-group.is-style-default {}' 
    ) );
    
    register_block_style( 'core/group', array(
        'name' => 'widget',
        'label' => __( 'Widget', 'themeslug' ),
        'inline_style' => '.wp-block-group.is-style-widget {
            background-color: #faf0e6;
            border-radius: 25px;
        }' 
    ) );
}
add_action( 'init', 'themeslug_register_block_styles' );

コードの分析

最初には themeslug_register_block_styles() という関数を作ります、他の名前も大丈夫です。そしてデフォルトのスタイルを設定します。

register_block_style( 'core/group', array(
    'name' => 'default',
    'label' => __( 'Default', 'themeslug' ),
    'is_default' => true,
    'inline_style' => '.wp-block-group.is-style-default {}' 
) );

次はカスタムスタイルを作ります。

register_block_style( 'core/group', array(
    'name' => 'widget',
    'label' => __( 'Widget', 'themeslug' ),
    'inline_style' => '.wp-block-group.is-style-widget {
        background-color: #faf0e6;
        border-radius: 25px;
    }' 
) );

name はカスタムスタイルの名前、そして inline style はカスタムスCSSの設定場所です。ここはグループというブロックをカスタムするので css には .wp-block-group とします。

そしてスタイル名は widget ので後ろに .is-style-widget とします。

最後には add_action() で作った関数を実行します。

add_action( 'init', 'themeslug_register_block_styles' );