WordPressのバージョンアップで壊れにくいサイトを作る

X等で、「WordPressのバージョンアップでサイトが壊れた(表示が崩れた)」というのを見かけることがあります。
もちろん、事前にベータ版やRC(リリース候補)版で動作確認する、が確実ですが、この記事では、そもそもWordPressがバージョンアップしても壊れにくい(コード変更が生じにくい)方法の1つを紹介します。

コアのブロックを活用する

WordPressでは独自ブロックを追加することができます。独自ブロックだと入力欄を自分の好きなように構築できるので、たしかに開発時は楽しいでしょう。しかし、問題があります。

• WordPressのブロック機能は開発が日々行われており、バージョンアップで新しくなる (詳細は=>ブロック API リファレンス / API バージョン)

このため、独自ブロックを作っている場合、WordPressのバージョンアップ時にコード変更を必要とするケースが結構あります。

私の場合も、昔(WordPress5.0ぐらいのころ)は独自ブロックで吹き出しブロックを作成していました。しかし現在では、コアブロックの『メディアとテキスト』に、スタイルシートをあてることで、吹き出しブロックを実現しています。

↑ブロック編集画面で、追加CSSクラス が指定できるので、speech-balloon と記載しています。(CSSの詳細は、本記事では省略) ↓実際の画面はこのようになります。

スクリーンショットの元記事は=> ファクトフルネス(ハンス・ロスリング他)の次に読む本は「存在しない女たち

追加CSSクラスは初期設定可能

さて、追加CSSクラス ですが、ここに都度speech-balloonと書くのは手間がかかりますね。これを解決する方法の1つとして、新規投稿時にブロックを初期配置する があります。

新しく記事を書くときにブロックをあらかじめ配置しておく機能ですが、ブロックの詳細設定も同時に可能です。このため、追加CSSクラスに値を指定できます。

$post_type_object->template = array(
    array( 'core/media-text', array(
		'mediaType' => 'image',
		'mediaUrl' => '',
		'className' => 'speech-balloon'
	)),
);

といったように、className' => 'speech-balloon' という指定が可能です。

このように、コアブロックを活用して作ることで、バージョンアップ時にコード変更が必要になる事態を減らすことが可能です。