WordPressの見出しブロックを使う時に、スタイルを登録(プリセット)したいと思いググったメモ。
方法はいくつかある
theme.jsonを使用するパターンや、プラグイン(Editor Plusなど)を使用することで実装することもできますが、今回はfunctions.phpを使って登録する方法にしました。
functions.phpに記述するコード
function my_custom_block_styles() {
register_block_style(
'core/ブロック名',
array(
'name' => 'ブロックid',
'label' => 'ブロックラベル名',
'inline_style' => '.is-style-large-blue-heading { color: #0073aa; font-size: 36px; font-weight: bold; }'//カスタムCSSを使う場合
)
);
}
add_action( 'init', 'my_custom_block_styles' );
今回は見出しブロックのスタイルのプリセットを作りたかったので、ブロック名の箇所をcore/headingにします。ブロックidの箇所は半角英数字、ブロックラベル名の箇所はラベルの名前なので日本語でもok。
function my_custom_block_styles() {
register_block_style(
'core/heading',
array(
'name' => 'diagonal-line',
'label' => '斜線',
)
);
}
add_action( 'init', 'my_custom_block_styles' );
複数セットしたい場合はregister_block_styleを複数セットする。
register_block_style()で登録可能なコアブロック例
WordPressには多くのコアブロックが用意されており、それぞれに対してカスタムスタイルを登録できます。
以下は一部の代表的なブロックの例です:
ブロック名 (core/ブロック名) | 説明 |
---|---|
core/paragraph | 段落ブロック |
core/heading | 見出しブロック |
core/image | 画像ブロック |
core/quote | 引用ブロック |
core/button | ボタンブロック |
core/group | グループブロック(複数のブロックをまとめる) |
core/columns | カラムブロック |
core/list | リストブロック |
エディターでのスタイルプレビュー
管理画面のエディターにもスタイルを反映させたい場合は、functions.php
に以下のコードを追加し、エディター用のCSSを登録します。
function my_editor_styles() {
add_theme_support( 'editor-styles' );
add_editor_style( 'style.css' );
}
add_action( 'after_setup_theme', 'my_editor_styles' );

見出しブロックの、スタイルの箇所に追加されたら完了です。