WordPressのfunctions.phpに見出しブロック用のスタイルを登録したかったのですが、以前も探したことがあって毎回検索するのも面倒なので、その覚書。
functions.phpに以下を追加
//見出しブロックのスタイル登録
function mytheme_register_block_styles() {
register_block_style(
'core/heading',
array(
'name' => 'topline-thick',
'label' => __('太い上線', 'mytheme'),
)
);
register_block_style(
'core/heading',
array(
'name' => 'underline-1',
'label' => __('下線見出し1', 'mytheme'),
)
);
register_block_style( 'core/heading', array(
'name' => 'leftbar-bold',
'label' => __('左縦ライン（太）', 'mytheme'),
));
}
add_action( 'init', 'mytheme_register_block_styles' );
見出しブロックにスタイルの項目が追加される
これで「太い上線」や「下線見出し1」などのスタイルを適用すると、該当の見出しに先ほど設定したクラスが追加される。
※サンプルコードには汎用性の高い左縦ライン（太）も追加した
'name' => 'topline-thick'でセットした場合は「is-style-topline-thick」、
'name' => 'underline-1',でセットした場合は「is-style-underline-1」というように、is-style-〇〇というクラス名になるようだ。
CSSを追加、修正する
style.cssにis-style-topline-thickやis-style-underline-1のスタイルを追加する。
結果
上がis-style-topline-thickクラスがついた見出し、下がis-style-underline-1クラスがついた見出し。
CSSメモ
CSSはこんな感じにしたよ、という覚書です。よく使う見出しデザイン一式をもうセットにしておいても良いかも。
.is-style-topline-thick{ padding: 1rem 0; border-top: 3px solid #00477D; border-bottom: 1px dotted #cccccc; }
.is-style-underline-1 { padding-bottom: 0.5rem; border-bottom: solid 3px #e0e0e0; position: relative; }
.is-style-underline-1:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 3px #5472cd;
bottom: -3px;
width: 20%;
}
.is-style-leftbar-bold {
position: relative;
padding-left: 1.2rem;
border-left: 8px solid #00477D;
}
