ブロックスタイルをPHPで作ろう

本記事は、 WordPress 5.3 以降で可能になった PHP でブロックのスタイルを追加する方法について解説します。

ブロックのスタイルについて

ブロックには、スタイルと言った仕組みがあります。ブロックのスタイルを変更することで、要素の見た目をボタン1つで簡単に変更することを可能にします。

例えば、当ウェブサイトでは図のように「見出し」ブロックに独自の矢印風スタイルを追加しています。そうすることで新しいブロックなどを追加しなくても、ウェブサイトに合わせたデザインの統一感を表現可能です。

現在、ブロックスタイルのカスタマイズはPHPでも可能

ブロックエディターのカスタマイズには、従来の WordPress の開発で使用される PHP 以外(例えば React などのメタ言語)の知識が必要となります。
WordPress 5.3 以降では、React などのメタ言語を使用せず、PHP とCSSのみでもブロックのスタイルを設定可能になりました。その結果、PHP言語を主に取り扱うウェブ制作企業やウェブデザイナーの方でもメタ言語を意識せず、簡単にブロックのスタイルを制作可能な状態になりました。

実際にブロックスタイルを割り当てる前に

まず、スタイルを割り当てるために、標準ブロックの名前やなどを整理する必要があります。次の一覧を参考にしてください。括弧内はブロックの name になります。

標準ブロックの一覧

一覧の対応バージョンについて

WordPress 5.3 で確認しています。

一般ブロック

  • 段落( core/paragraph
  • 見出し( core/heading
  • リスト( core/list
  • 引用( core/quote
  • 画像( core/image
  • ファイル( core/file
  • ギャラリー( core/gallery
  • 音声( core/audio
  • カバー( core/cover
  • 動画( core/video

フォーマット

  • カスタムHTML( core/html
  • 表( core/table
  • ソースコード( core/code
  • クラシック( core/freeform
  • 整形済み( core/preformatted
  • プルクオート( core/pullquote
  • 詩( core/verse

レイアウト要素

  • 続きを読む( core/more
  • グループ( core/group
  • カラム( core/columns
  • ボタン( core/button
  • メディアと文章( core/media-text
  • 改ページ( core/nextpage
  • 区切り( core/separator
  • スペーサー( core/spacer

ウィジェット

  • ショートコード( core/shortcode
  • アーカイブ( core/archives
  • カレンダー( core/calendar
  • カテゴリー( core/categories
  • 最新のコメント( core/latest-comments
  • 最新の記事( core/latest-posts
  • RSS( core/rss
  • 検索( core/search
  • タグクラウド( core/tag-cloud

埋め込み

  • 埋め込み( core/embed
  • Twitter( core-embed/twitter
  • Youtube( core-embed/youtube
  • Facebook( core-embed/facebook
  • Instagram( core-embed/instagram
  • WordPress( core-embed/wordpress
  • SoundCloud( core-embed/soundcloud
  • Spotify( core-embed/spotify
  • Flickr( core-embed/flickr
  • Vimeo( core-embed/vimeo
  • Animoto( core-embed/animoto
  • Cloudup( core-embed/cloudup
  • CollegeHumor( core-embed/collegehumor
  • Dailymotion( core-embed/dailymotion
  • Funny or Die( core-embed/funnyordie
  • Hulu( core-embed/hulu
  • Imgur( core-embed/imgur
  • Issuu( core-embed/issuu
  • Kickstarter( core-embed/kickstarter
  • Meetup.com( core-embed/meetup-com
  • Mixcloud( core-embed/mixcloud
  • Photobucket( core-embed/photobucket
  • Polldaddy( core-embed/polldaddy
  • Reddit( core-embed/reddit
  • ReverbNation( core-embed/reverbnation
  • Screencast( core-embed/screencast
  • Scribd( core-embed/scribd
  • Slideshare( core-embed/slideshare
  • SmugMug( core-embed/smugmug
  • Speaker Deck( core-embed/speaker-deck
  • TED( core-embed/ted
  • Tumblr( core-embed/tumblr
  • VideoPress( core-embed/videopress
  • WordPress.tv( core-embed/wordpress-tv
  • Amazon Kindle( core-embed/amazon-kindle

ブロックスタイルを追加しよう

サンプルコードのダウンロード

ケミ

今回の記事ではサンプルコードを用意しています。ここからの記事解説は、ダウンロードされたファイルのコードを見ながらご覧ください。

サンプルコードの内容

今回の記事では、サンプルとして「見出し」ブロックに幾つかのスタイルを追加することを行います。

サンプルコードの構成

block-style-sample

block-style-sample.php

editor-style.css

front-style.css

コードの解説

init にフックを追加

まず、init に対してフック追加を行います。

add_action( 'init', 'add_block_style' );
ケミ

フックの実行タイミングに問題があると、ブロックのスタイルは正しくブロックエディターに登録されません。ほとんどの場合、 ブロックのinit に対してフック追加を行うのが推奨されているようです。

コールバックをしている add_block_style 関数について

function add_block_style() {
	if ( is_admin() ) {
		editor_block_style();
	} else {
		front_block_style();
	}
}
ケミ

フックで実行される add_block_style 関数では、管理画面時、つまり、ブロックエディター時には editor_block_style 関数を実行し、それ以外は front_block_style 関数を実行するようにしています。

ブロックエディター側のスタイル追加処理について

function editor_block_style() {
	wp_register_style(
		'block_style_sample_editor',
		plugin_dir_url( __FILE__ ) . 'editor-style.css',
		[],
		filemtime( plugin_dir_path( __FILE__ ) . 'editor-style.css' )
	);
	register_block_style(
		'core/heading',
		[
			'name' => 'arrow',
			'label' => '矢印',
			'style_handle' => 'block_style_sample_editor',
		]
	);
	register_block_style(
		'core/heading',
		[
			'name' => 'speech',
			'label' => '吹き出し',
			'style_handle' => 'block_style_sample_editor',
		]
	);
	register_block_style(
		'core/heading',
		[
			'name' => 'stripe',
			'label' => 'ストライプ',
			'style_handle' => 'block_style_sample_editor',
		]
	);
}
ケミ

ブロックエディターの画面でスタイルを反映するため、editor_block_style 関数では wp_register_style 関数で ブロックエディター内で読ませる CSS ファイルを登録する形にします。注意点は wp_enqueue_style 関数ではないことです。

ケミ

そして、register_block_style 関数が今回の最大のポイントです。この関数には、第1引数に「ブロックの name」、第2引数に「スタイルを示す連想配列」を記述します。この関数の詳しいリファレンスは次を参照してください。

register_block_style – WordPress私的マニュアル
ケミ

「スタイルを示す連想配列」の name の値に記述した文字列は、実際のCSSのクラス名では .is-style- をプレフィックスとして付与されます。
label の値に記述した文字列は、ブロックのスタイルを選択する際に表示されるラベル名になります。

style_handle の値に記述した文字列は、wp_register_style 関数で事前に登録していた CSS のハンドル名を割り当てます。

今回は「矢印」「吹き出し」「ストライプ」の3種類を追加するサンプルなので register_block_style 関数を3回使用し、それぞれのスタイルを追加しています。

ブロックエディター側のスタイルについて

ケミ

ここで editor-style.css を一度見てみましょう。

.editor-styles-wrapper div[data-type="core/heading"] h1.rich-text.is-style-arrow,
ケミ

ブロックエディター内では .editor-styles-wrapper と言う大きなクラス要素の中に各ブロックが div タグで囲まれて存在する仕様になっています。そのため、 .editor-styles-wrapper div[data-type= ブロックの name ] でスタイルを当てるブロックに対する切り分け指定が可能です。また、h1 タグの要素の中には、実際の画面とは異なり、見出しの文字入力をするための .rich-text の要素が含まれています。基本的に入力要素がある場合は .rich-text 要素に対してスタイルを当てるようにすれば良いでしょう。

ブロックエディターとフロント画面では一部のスタイルが変化すると言うことを覚えておいてください。

フロント画面側のスタイル追加について

function front_block_style() {
	wp_enqueue_style(
		'block_style_sample_front',
		plugin_dir_url( __FILE__ ) . 'front-style.css',
		[],
		filemtime( plugin_dir_path( __FILE__ ) . 'front-style.css' )
	);
}
ケミ

実際の画面でスタイルを反映するために、front_block_style 関数では wp_enqueue_style 関数で front-style.css を読み込むようにしています。この CSS では、実際の画面には .rich-text などのクラス要素はありませんので h1h2 タグに対してスタイルを当てるようにしています。

補足

備考

サンプル内のブロックのスタイルは、サルワカの「CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選」 を参考にさせていただきました。

この記事の筆者

Kmix39(ケミ)

電子の妖精。当ウェブサイトの記事制作などを行なっています。
金融・不動産・医療・教育などの数々の業種のシステム開発を経験を積み、スマートフォンアプリケーションと WordPress などのウェブアプリケーションを日々勉強中。