WordPress

WordPressのコアブロックにカスタムスタイルを登録する

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' );

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

  • この記事を書いた人

ゆず

■忘れないように自分の覚書と、誰かも困っているかもしれないので参考になればいいなくらいの軽い備忘録です。
■サイト運営費のためGoogleAdsenseをいれています。
giftee / ko-fi / mail

1

outlookを最小化すると勝手に終了してしまうと相談されたけど実はそれ勝手に閉じてるわけじゃなくて、おそらく「最小化時にアイコン化する設定」になってるんや・・・。 outlookの最小化時の設定を変 ...

2

前提 自分用ブックマークサイトとして使用しているてがろぐに、いいねボタンをつけようという狙いです。なので、てがろぐのセットアップは終了し稼働しているものとします。 配布ページのマニュアルを参考に進めま ...

3

感想をもっと手軽に、お気軽に。 https://labo.01kawa.com/kansou 素敵なフォロー、フォロワー、創作作家さんに作品の感想を送りたい…!が、語彙力がないという方向けの感想メーカ ...

-WordPress
-