ブロックテーマの工数

Twenty Twenty-Fourと、WordPressのテーマエディタは予想以上に高機能で、ずっと感じていた公式テーマアレルギーを払拭するのには充分なものでした…が、それでもかなりの苦行でした。
「コードを書かせろおおお！！！」と何度思ったか知れません。

トータルの作業時間は20時間ほどです。これまでWordPress案件で育ててきた自分用クラシックテーマを使ったときの倍以上かかっています。ですが初見でこの結果なので、今後今回作成したtheme.jsonをもとに作成すれば同じくらいまで作業時間は縮まるのかなと思います。

多用したプラグイン

きちんと見ていただけるサイトを作成するうえで、以下のプラグインは必須でした。Snow Monkeyシリーズは前のデザインのときからお世話になりまくりですが、今回も続投です。

Snow Monkey Editor

インラインスタイル機能を、メインビジュアルのテキストにマーカーを引くとか、ページタイトルの先頭の文字を赤にするのに使っています。また、画面サイズによってヘッダのナビゲーションを切り替えるのにも使用しました。

Flexible Spacer Block

先日買った書籍で紹介されていたプラグインです。端末ごとにマージン量を設定できるだけでなく、ネガティブマージンも可能です。公式テーマは画面サイズが小さくなるほど文字サイズや余白の各段階の差が少なくなる傾向があり、モバイル画面ではバランスが良くないので、モバイルも考慮したサイトでは絶対に必要です。

Custom Blocks Constructor – Lazy Blocks

後述の「活動記録」一覧を表示するために使用しています。

Snow Monkey Blocks

「私について」のページのバイオグラフィーなど、複雑なコンテンツに使用しています。リニューアル前はブロークングリッドを多用していましたが、今回は公式テーマでの調整が難しかったこともあり、今回は目立つ箇所への使用は避けました。

Safariが重い

私の個人のMac端末はMac miniですが、Pixel 8や会社のMacBook Proと比較するとSafariで閲覧したときにかなりスクロールが遅くなります。ブロックテーマが採用している技術がSafariには厳しいのかは謎です。Chromeで発生する、カバーブロックの背景画像を固定すると「ガクッ」となる現象も気になります。今後改善されるとよいのですが…

ホームの演出

ホームにアクセスすると、Movable Type・WordPress・a-blog cmsのタグや関数が画面いっぱいに広がります。公式ドキュメントから拾ってきたもので、リロードするたびに変わります。以前からやりたかった演出です。

トップページのキャプチャ(33.7MB)

流石にこれはノーコードでは無理で、演出用のdiv要素を本文の末尾に差し込んでからコードを表示するJavaScriptの処理をトップページだけ追加しています。
公式テーマから継承した子テーマのfunctions.phpに以下を記載しました。

function ws24_scripts() {
	if(is_front_page()) {
		wp_enqueue_script( 'ws24-js-cover', get_stylesheet_directory_uri() . '/assets/js/ws24Cover.js', date('YmdHis') );
	}
}
add_action( 'wp_enqueue_scripts', 'ws24_scripts', 99 );

クエリーループブロックの課題

記事の繰り返しを詳細に設定できる「クエリーループブロック」は、リリース以来WordPressユーザーの間で好評ですが、がっつりした構築には力不足でした。

このサイトでは投稿とページのほかに「活動記録」という特殊なアーカイブを持つコンテンツがあります。この一覧やトップページの新着はクエリーループブロックで実装できませんでした。

カスタムフィールドを表示する程度ならなんとかなるらしいですが、このコンテンツは「URL」フィールドに入力した内容がリンク先になります。また、カスタムタクソノミーをラベルとして表示していますが、なぜか投稿テンプレートに「タグ」はあるものの「カテゴリー」がありません。半日悩みましたが、クエリループを断念してLazy Blocksプラグインで旧来のPHPを書きました。

私が所属している会社では、Movable TypeもWordPressも、このような複雑なカスタマイズが頻繁にあります。このあたりを今後のバージョンアップを想定しつつ、どう実装していくか悩ましいところです。

コードを書いた方が早い…？

ちまちま不満はあるものの、これまでのWordPress以外も含めたブロックエディタに感じていた「コードを書いた方が早い」はだいぶ薄れてきています。今後は現状の工数から、theme.jsonのカスタマイズやブロックパターンの登録でどこまで早くできるかというところです。

休暇の間に会社ではデザイナーさんたちが新規案件のサイトを仕上げていました。今回もとても素敵です。WordPressの機能を活かそうとしてデザインを殺してしまうことがないようにしたいものです。