ブロックテーマでWordPress制作するようになったら、スピードアップできた話
noteとブログの棲み分けに悩んできましたが、近々にテーマファイルを配布してみようと思ったので、noteでWordPress関連の投稿をすることにしました。
WordPressサイト、どうやって作ってる？
WordPressのWeb制作を行なっている人って、どんなワークフローでやっているんでしょうか？
一般的には、デザインカンプ→HTML＆CSSで静的コーディング→（必要に応じて）functions.phpで機能追加→header、footerを分離してPHPで読み込み→記事部分などをWordPressのテンプレートタグに置き換え、といった感じが多いイメージです。（私は順番こそ違うことがありますが、概ねこんな感じです）
2023年。
エビスコムさんの「作って学ぶWordPressブロックテーマ」を読み、私のワークフローは一変しました。
変革をもたらした1冊の本
この本の何がすごいって、以下の3つが革新的。
ブロックテーマの歴史がわかる
ブロックテーマの作り方がわかる
Figmaのデザインカンプとの繋がりがわかる
ページエディタのGutenbergが登場してから、WordPress全体がフルサイト編集（FSE）に向かうまで、どんな変遷を辿ってきたのかが冒頭で詳述されています。
これがわかれば、ここから先、WordPressがどのように変わっていくのか見通しを立てることができる！
サンプルファイルがあって、手を動かしながらオリジナルのブロックテーマを作れます。
元々のFSE機能と「create block theme」プラグインを使ってノーコードで進める部分と、theme.jsonへ手書きで追加する部分、デザインバリエーションを追加するためにfunctions.phpとstyle.cssに追加する部分、の大きく3つの手法でカスタムできることがわかります。
そして、何より、今まで課題だった「デザインとコーディングが業務分担している場合」のヒントになる、Figmaのカンプが付いている！
これは本当にありがたいです。
theme.jsonで定義したパーツをFIgma上で再現し、デザイナーさんと連携するためのヒントがたくさん隠れています。
デザイナーさんに、この本の一部を読んでもらって、「ブロックごとの間隔はここ」「マージン・パディングのバリエーションはここ」「フォントサイズのバリエーションはここ」「全体の幅はこんな感じで3段階に」と共有すれば、Figmaでパズルのように組み立ててもらえる。
ボタン形状などがデフォルトと変わる場合は、コーディング時にfunctions.phpとstyle.cssで作ればOK。カラーバリエーションなどはtheme.jsonに入れてもいいし、サイトエディター内で調整もできる。
・・・本当に待ってました。
ヘッダーのレイアウトなどちょっと複雑なブロックの構成は、サイトエディターで試してもらえるように、簡易的なテーマを作っておくと良いかも。
（今度、FSE体験用の簡易テーマを無料公開してみようと思います！）
今のワークフロー
私の場合、直近ではデザインカンプ不要で実サイトにてデザインチェックしていただくことが続いたので、完全にブロックテーマでの制作に切り替えました。
正直、凝ったデザインを作りづらかったり、グローバルナビゲーション周辺（ハンバーガーボタンやドロワーメニュー）の動作はあまり良くなかったりと不自由なところはありますが、「なるはやで」「オリジナルデザインを」という要望に応えるにはぴったりです！
ブロックテーマに関する情報が国内ではどうしても限られてしまっているので、その魅力にハマってしまった以上、しばらくはnoteにて布教していきたいと思っています。