標準ブロックに独自デザインを選択できるようにする方法

他にもいろいろなところで参考記事を公開されているので、今更感がありますが．．WordPress標準のブロックに対して、ボタンでスタイルの切り替えができるようにする機能の実装方法を紹介します。

まずはコピー用コードを紹介し、貴サイトで動作するのを確認いただいてからカスタマイズという流れで進めますので、今まで他のページを参考に長い時間かけてやってみたけどダメだったという方も、もう一度試してみては？

まずは実装してみる

WordPressは、それぞれのサイトの環境の違いや、テーマ・併用しているプラグインの違い等々で、サイトにより仕様は千差万別です。

このページで紹介するコードも多分に漏れず、私が管理するサイトの環境で動作したものを紹介しているだけで、他の環境でどうかなどということはとても検証できません。

そこで、説明を読んだ挙句に実現できなかった．．ということがないよう、解説は後にして、とにかく以下をテーマのfunctions.phpへ追加して、動作するかどうかを試してください。

if ( !function_exists( 'sample_add_custom_block_selector' ) ){
function sample_add_custom_block_selector(){
/* 追加する独自スタイル */
	register_block_style('core/paragraph', array(
	'name' =>  'custom-paragraph',
	'label' => __( 'カスタム',''),
  ));

}
}
add_action('init','sample_add_custom_block_selector');

if ( !function_exists( 'add_sample_style_init' ) ){
function add_sample_style_init(){
//スタイルシートの登録
	//wp_register_style( 'sample-style', plugin_dir_url( __FILE__ ) .'sample-style.css', array(),null, 'all' );
	wp_register_style( 'sample-style', get_stylesheet_directory_uri() .'sample-style.css', array(),null, 'all' );

//スタイルシートの読み込み
	wp_enqueue_style('sample-style');
}
}
add_action('wp_enqueue_scripts','add_sample_style_init');

if ( !function_exists( 'sample_add_custom_block_style' ) ){
function sample_add_custom_block_style(){
//スタイルコード
$custom_css_pre = '
.is-style-custom-paragraph{
background:#000;
color:#fff;
}
';

//スタイルコードを改行なしで整形する
	$custom_css = str_replace(PHP_EOL, '', $custom_css_pre);

//スタイルをヘッダー内へインラインで出力
	wp_add_inline_style( 'sample-style', $custom_css );
	wp_add_inline_style( 'wp-edit-blocks', $custom_css );

}
}
add_action( 'init', 'sample_add_custom_block_style');
add_action('wp_enqueue_scripts','sample_add_custom_block_style');

このコードを追加すると、投稿・固定ページ編集画面で以下のような動作が実現できます。

1. 段落ブロックを選択した際、右サイドバー（スタイルや色を設定するサイドバー）に、上の図のような「カスタム」というボタンが追加される
2. 「カスタム」をクリックすると、背景が黒で文字が白という表示になる（編集画面上）
3. 新しいタブでプレビューすると、編集画面と同じ表示（背景が黒で文字が白）になる

もしも「カスタム」というボタンが出ない場合は一度「Ctrl」+「F5」をキーボードから入力して、キャッシュのクリアを行ってみてください

うまく表示できたという方は次項のコード解説を参考にカスタマイズして、ご自身に合ったボタンを作成してください。

ご自身でコードの内容の確認や編集・調整ができない方で、この段階で動作の再現ができない場合には、残念ながら本ページを参考にしての機能実装は難しいと思われますので、他の資料をお探しください。

標準ブロックにカスタムスタイルを追加するコードの解説

さて、前項の完全コピペコードで以下のような機能が実現できました。

• 段落ブロックのスタイル欄に「カスタム」というボタンが追加された
• 「カスタム」をクリックした段落では、編集画面上で「背景が黒、文字が白」に表示が変わった
• 「カスタム」をクリックした段落では、新しいタブでプレビューすると「背景が黒、文字が白」に表示が変わった
• 「カスタム」を選択していた段落のボタンの「デフォルト」をクリックすると元の状態に戻る

ここからは、コピペ用コードを分解した形で、どうしてそうなるのか？ということも含めて詳細解説をしていきます。

冒頭のコピペコードを実装し、追加したfunctions.phpファイルの編集画面と、スタイルの変更ができることが確認できた投稿編集画面を開いた状態で読み進めていただけると、より一層理解が深まると思います。

各コードが理解していけば、追加や変更などのカスタマイズも自在にできるようになるでしょう。

ブロックにスタイル選択用のボタンを出現させる

冒頭のコピペコードに書かれている以下の部分の解説です。

if ( !function_exists( 'sample_add_custom_block_selector' ) ){
function sample_add_custom_block_selector(){
/* 追加する独自スタイル */
	register_block_style('core/paragraph', array(
	'name' =>  'custom-paragraph',
	'label' => __( 'カスタム',''),
  ));

}
}
add_action('init','sample_add_custom_block_selector');

このコードの塊（ユーザー定義関数とアクションフック）で、以下のことをしています。

1. 投稿・固定ページ編集画面のスタイルに独自のボタンを追加する
2. ボタンをクリックすると、そのブロックにCSSクラスが追加される

投稿編集画面をそのままにしていると、ボタンが追加されていることは目に見えると思いますので、2のCSSクラスが追加されているかを確認してみましょう。

ボタンを選択した状態で同じ右サイドバーの一番下にある「高度な設定」を開いてください。

追加CSSクラスという欄に、以下のコードが追加されていますね。

is-style-custom-paragraph

確認できたら、もう一度上記コードの以下の部分を見てみてください。

register_block_style('core/paragraph', array(
'name' =>  'custom-paragraph',
'label' => __( 'カスタム',''),
));

何か気づきませんか？？？そう、ここで1と2の指定をしているんです。

さらに分解すると、以下のようになっていて、それぞれに役割があります。

register_block_style('core/paragraph', array(
追加する独自デザインの内容
));

↑　↑　core/paragraph（段落ブロックの意）に対して、「追加する独自デザインの内容」を追加しなさいという役割です

‘name’ => ‘custom-paragraph‘,

↑　↑　追加するボタンに「custom-paragraph」という名前（ブログラム上の名前）を指定すると同時に、ボタンがクリックされたら、「追加CSS」へ「is-style-custom-paragraph」というCSSクラスを追加しなさいという役割です

'label' => __( 'カスタム',''),

↑　↑　人間がどんなボタンなのかが分かるよう、ラベル（目に見える名前）を指定する役割です

つまりこれがひと塊で機能します。

試しに、以下のコードを、コード中の「));」の下へ追加して保存し、投稿編集画面のキャッシュをクリア（「Ctrl」+「F5」）してみてください。

register_block_style('core/paragraph', array(
'name' =>  'custom-paragraph2',
'label' => __( 'カスタム２',''),
));

…段落ブロックを指定すると、スタイルの選択に「カスタム２」というのが表示されましたか？

このように、コードの塊を追加していくことでいくつでもボタンが追加できます。

ボタンのプログラムを追加した後は、必ず投稿編集画面で、キャッシュのクリアを行って確認しましょう

ちなみに、上記は「core/paragraph」という、「標準ブロックの段落ブロック」にとしているだけで、以下のページを参考に、他のブロックにも独自のデザインが適用できます。

スタイル追加ができるもの、できないものがありますので、ご自身で実際に追加して確認してみてくださいね

以上が、ボタンを追加するためのプログラムについての解説です。実際にいろいろやって以下を確認してみてくださいね。

• 指定したブロックに指定したラベルのスタイルボタンが追加されるか？
• スタイルボタンをクリックすると、追加CSSに「is-style-追加した名前」のCSSクラスが追加されるか？

思うように操作できるようになったら、次に進みましょう！

選択したボタンに対するスタイルを出力させる段取りをする

冒頭のコピペコードに書かれている以下の部分の解説です。

if ( !function_exists( 'add_sample_style_init' ) ){
function add_sample_style_init(){
//スタイルシートの登録
	//wp_register_style( 'sample-style', plugin_dir_url( __FILE__ ) .'sample-style.css', array(),null, 'all' );
	wp_register_style( 'sample-style', get_stylesheet_directory_uri() .'sample-style.css', array(),null, 'all' );

//スタイルシートの読み込み
	wp_enqueue_style('sample-style');
}
}
add_action('wp_enqueue_scripts','add_sample_style_init');

多分何等かのカスタマイズでテーマにアップロードしたスタイルシートを読み込ませる．．なんてことをした方はピンとくるコードだと思います。

文字であらわすと、以下のようなことをしています。

1. wp_register_style関数で、スタイルの書かれたファイルを登録する
2. wp_enqueue_style関数で、スタイルを読み込ませる
3. 1と2をユーザー定義関数に入れ、wp_enqueue_scriptsへフックしてスタイルの登録と読み込みをする

また、お気づきかと思いますが、ここで登録・読み込みさせる「sample-style.css」というファイルは実際には存在しません（ファイルの作成やアップロードなど一切してないですよね？？）。

つまり、次項で説明するコードを出力させるための準備ということです。

従って次項のコードと関連性がありますから、ひとまず上記のままにしておき、次項を読んで理解できてから自分流に改変するようにしましょう（もちろんそのままでも大丈夫です）。

選択したボタンに対するスタイルを編集画面・表示画面の両方に出力する

冒頭のコピペコードに書かれている以下の部分の解説です。

if ( !function_exists( 'sample_add_custom_block_style' ) ){
function sample_add_custom_block_style(){
//スタイルコード
$custom_css_pre = '
.is-style-custom-paragraph{
background:#000;
color:#fff;
}
';

//スタイルコードを改行なしで整形する
	$custom_css = str_replace(PHP_EOL, '', $custom_css_pre);

//スタイルをヘッダー内へインラインで出力
	wp_add_inline_style( 'sample-style', $custom_css );
	wp_add_inline_style( 'wp-edit-blocks', $custom_css );

}
}
add_action( 'init', 'sample_add_custom_block_style');
add_action('wp_enqueue_scripts','sample_add_custom_block_style');

今までのコードで、「ボタンは追加された」「追加スタイル（追加CSSクラス）は追加された」、でも実際の見た目（デザイン）は何も変化しませんね。

最後に、ボタンに伴って（ボタンをクリックすることで追加されるCSSクラスに対して）デザインが変化するようにしていきます。

コード中の以下の部分に注目してください。

//スタイルコード
$custom_css_pre = '
.is-style-custom-paragraph{
background:#000;
color:#fff;
}
';

ここに書かれているコードは2つに分割できます。

$custom_css_pre = '
追加するスタイルコード
';

.is-style-custom-paragraph{
background:#000;
color:#fff;
}

下のコードはよく見るスタイル指定用のコード（スタイルコード）です。「.is-style-is-style-custom-paragraph」に対して背景は黒、文字の色は白と指定しています。

要は、この部分を追加したスタイルに合わせて追加・編集していくだけです。

それを以下のコードで囲んで変数にしています。

$custom_css_pre = '
追加するスタイルコード
';

「$custom_css_pre」という変数に格納したコードは、以下のコードで、改行をなしにして、「$custom_css」という編集に再格納しています。

$custom_css = str_replace(PHP_EOL, '', $custom_css_pre);

「$custom_css」という変数に格納された、改行なしのスタイルコードは、以下の2行で利用されます。

wp_add_inline_style( 'sample-style', $custom_css );
wp_add_inline_style( 'wp-edit-blocks', $custom_css );

上の行は、先ほど追加（登録・読み込み）した架空のスタイルシートへ「$custom_css」の内容を追加しなさいというコード。

下の行は「wp-edit-blocks」という投稿・固定ページ編集画面のブロックに影響を与えるスタイルシートへ「$custom_css」の内容を追加しなさいというコード。

これをユーザー定義関数として囲んで、「init」フックで、適用させています。

ブロックエディターが進化して、WordPressのバージョン5.5あたり（正確には覚えていません）から、編集画面側のブロックへデザインを適用するのが少し面倒になったので、上記のコードでフロントエンド用とまとめて適用させようというものです。

このコードの良いところは、前項で作成した架空のスタイルシートファイル（sample-style）に対して、いくつでもスタイルコードをプログラムから追加できることです。

詳しくは、以下のページをご覧ください。

この方法だけではないのが悩ましいところ

検索すると、今回紹介した方法以外にも、同じようにブロックへ独自デザインを追加する方法がたくさん紹介されています。

大別すると以下のようなコードの書き方などで紹介されています。

• 追加デザイン用のjsファイル、CSSファイルを作成してそれぞれを読み込ませる方法
• 追加デザインはfunctions.phpへユーザー定義関数を使って記述し、CSSファイルは外部ファイルを読み込ませる方法
• 追加デザインはfunctions.phpへ直接記述し、CSSファイルは外部ファイルを読み込ませる方法
• 追加デザインはユーザー定義関数を使って記述し、CSSもインラインで出力する方法（本ページの方法）

最後の方法が本ページの方法ですが、恐らくこの方法で紹介しているページは少ないのではないかと思います。

なぜいろいろな手法があるのかをざっくり説明すれば、どれも目的は同じで、よほどいい加減な情報でない限りは、実際にはどの方法でも実装は可能であり、これがWordPressというツールの面白い（いろいろな方法や実装ルートが用意されている）ところでしょう。

ですから、結論としては、いろいろとやってみて、自身で管理がしやすい方法で実装されるといいでしょう。

ちなみに、以下が本ページの方法を私が推薦している（公開している）理由です。

• すべてのコードをプログラム内で完結できる（他にファイルを作ったり読み込ませたりする必要がない）点
• 他ファイルの読み込みをしない分、動かないというリスクを減らせる点
• 理由と順番を持って各プログラムを読み込ませている点

ただ、このページで紹介したコードも、わざわざ役割で分割しているだけで、全部を1つのユーザー定義関数にまとめることもできますから、興味のある方はやってみても面白いかも知れません。