WPブロックに独自のスタイルを追加して、管理画面から選択可能にする方法
WordPressのコアブロック(段落や見出し、リストなど)にオリジナルのスタイルを追加して、投稿時に管理画面から選択できるようにすることが可能です。
これにより、ブログ記事の見出しなどのパーツをテーマにあったスタイルに設定することができ、デザインの統一感や質がグッと上がります。
独自スタイルの設定方法
独自スタイルを登録
まず、functions.phpに独自スタイルを登録します。
//コアブロックに独自スタイルの追加 function custom_block_styles() { // 独自のブロックスタイルを登録する register_block_style( 'core/heading', // ブロック名 array( 'name' => 'heading-bgGray', // スタイル名 'label' => 'グレー背景', // スタイルの表示名 ) ); } add_action( 'init', 'custom_block_styles' );
ブロック名 | 独自スタイルを追加するコアブロックを指定します。 今回は「見出し」ブロックに追加するので’core/heading’とします。 |
name | cssのクラス名に使われます。 |
label | 管理画面での表示名 |
投稿エディター(Gutenberg)の外観をカスタマイズするためのCSS(editor-styles.css)を読み込んでいない場合は以下のコードも追加し、editor-styles.cssを配置してください。以下の例では、テーマフォルダのassets/css/に配置しています。
※cssの読み込みパスは適宜変更してください。
//エディタ用スタイルシート読み込み function my_theme_add_editor_styles() { add_theme_support('editor-styles'); //独自のエディタースタイルを有効にする add_editor_style( get_stylesheet_directory_uri() .'/assets/css/editor-styles.css' ); //css読み込み } add_action( 'after_setup_theme', 'my_theme_add_editor_styles' );
editor-styles.cssを読み込むことで、投稿画面にも独自スタイルを反映することができ、よりプレビュー画面の見た目に近づけることができます。
スタイルを定義
続いて、CSSにスタイルを定義します。.is-style-{name}
となることに注意してください。
nameは先ほどfunctions.phpで定義したnameが入ります。
テーマ(外観)のcssと、editor-styles.css両方にスタイルを定義してください。
※スタイルはお好きなものに適宜変更してください。
.is-style-heading-bgGray { background: #f5f5f5; font-size: 18px; font-weight: bold; border-radius: 4px; padding: 1em; margin-top: 4em; margin-bottom: 2em; }
以上で独自スタイルの設定が完了したので、投稿画面で確認してみると、先ほど定義したスタイルが選択可能になっていて、投稿画面上でもスタイルが適用されているのが分かります。
スタイルを複数登録する場合
ほとんどの場合、一つではなく様々なブロックに対して複数パターン登録すると思います。
その場合は基本的に以下のように一つ一つ定義していきます。
function custom_block_styles() { // 段落ブロックに追加 register_block_style( 'core/paragraph', array( 'name' => 'paragraph-style', 'label' => '段落スタイル1', ) ); // 見出しブロックに追加 register_block_style( 'core/heading', array( 'name' => 'heading-style-1', 'label' => '見出しスタイル1', ) ); register_block_style( 'core/heading', array( 'name' => 'heading-style-2', 'label' => '見出しスタイル2', ) ); register_block_style( 'core/heading', array( 'name' => 'heading-style-3', 'label' => '見出しスタイル3', ) ); } add_action( 'init', 'custom_block_styles' );
ブロック名の種類の例を記載します。
core/paragraph | 段落ブロックに追加 |
core/heading | 見出しブロックに追加 |
core/image | 画像ブロックに追加 |
core/gallery | ギャラリーブロックに追加 |
core/group | グループブロックに追加 |
core/list | リストブロックに追加 |
core/quote | 引用文ブロックに追加 |
core/audio | オーディオブロックに追加 |
core/cover | 画像とテキストを組み合わせたカバー画像を表示するブロック |
core/file | ダウンロードブロックに追加 |
core/video | 動画ブロックに追加 |
core/table | 表ブロックに追加 |
追加したいブロックに合わせて、適宜指定して追加してみてください。