【WordPress】フルサイト編集テーマをいくつか作ってみて
WordPress5.9でリリースされたフルサイト編集。
リリース当初はいわゆる「ハイブリッドテーマ」や「ユニバーサルテーマ」といった作り方で進めることが多かったのですが、最近は「ブロックテーマ」での構築を前提に考えるようになりました。
今回書いている内容は私個人的に作ってみての感想とか作業手順なので、ぜひほかの人にも書いてほしい…（知りたい）
ブロックテーマになってどう変わった？
基本的にテーマを構築する上でPHPを触ることがぐっと減りました。毎回書いてるPHPは
- ブロックスタイルを作る
- テーマ自体のCSSやJS、ブロックのCSSをエンキューする
- ブロックパターンを作る
これくらいかな？あと場合によって投稿テンプレートをデフォルトでセットするとか細々したものがあったりなかったり。クエリー操作したりするPHPなんかは全然書きません。ヘッダーやフッターも然り。
ヘッダーやフッター、アーカイブ等といったテンプレートも、管理画面からブロックを組み合わせてレイアウトするので、半分以上は管理画面（エクスポートしてローカルで管理もするけど）で完結します。
表示する側と管理画面側の表示が同一になる（ように作る）ので、「ここを自分たちで変えたい」がより叶いやすくなったんじゃないかな。クラシックテーマだと、特にメニューやウィジェットなんかは下図のような画面から追加する必要があったので、レイアウトのイメージがつきにくかったのではないかなーと思います。
この画面はこの画面でシステマチックで私は好きなんですけど🫣
ちなみに開発コストは？
開発のコストが下がったようには感じていません。 クラシックテーマと同等、もしくはよりコストがかかってくるケースもあるかな？これはデザインによりけり。
あとは体感として、クラシックテーマのときよりデザイナーさんとコミュニケーションとることがかなり増えました。（いいこと👏）
「ここはこういう理由で実現が難しいんですが、こういう風に変えるのはどうでしょう？」という調整の相談ですね。そういう点では、ブロックテーマはより密にデザイナーさん、ひいてはクライアントさんとのやり取りも多く発生します。
作り方は変わった？
ブロックテーマになる前から本文部分はブロックになっていたのであんまり変わらないかなと思っていましたが、何度かブロックテーマを作ってみると「作るときの頭の使い方が変わったかも？」と思いました。
クラシックテーマのときは運用にあまり関わりない部分（クエリーまわりの表示だとか404だとか）は自由にHTMLタグを組みわせて粛々と作り上げていっていましたが、ブロックテーマの場合は先述したとおり、ブロックの組み合わせでレイアウトを整えていくので、少なくともコアに搭載されているブロックがどういう振る舞いをするのかを把握して、「これとこれを使えばこの表現はできるな」というパターン作りをしていく必要があります。
そうだな……クラシックテーマが「0から1を足していって100にする」なら、ブロックテーマは「数ある1と1を組み合わせた結果100になる」という感じかな……？🤔表現がちょっとむずかしい！
かるーく制作手順
せっかくなので軽くブロックテーマのUI出しながら制作手順を振り返ってみます。
この管理画面、ナウい感じで結構好き。
ブロックテーマだと多くのCSSが管理画面からデフォルトの設定ができます。わざわざCSSファイルに書かなくていいのがいい👍
例えばフォントの設定だとこんな感じ。
フォントサイズの設定は S / M / L / XL / XXL とありますが、これはtheme.jsonで自分で設定します。
同じようにpaddingなどの余白もtheme.jsonから。
デザインシステムの設定が最初の大仕事
このように色々と管理画面から設定可能になっているので、ブロックテーマの大仕事のひとつはこの「デザインシステム」を作り上げることですかね🤔
theme.jsonで作ったタイポグラフィ設定や余白設定なんかはどのブロックでも共有されるものです。
カスタムで自由に値を入れることももちろんできますが、スライダーでサクサク設定できる方が使いやすいですよね。で、この値をあとから変えるとまたブロックのスタイルを調整して…という無限ループが発生しちゃいます😭
デザインシステム用のファイルがあれば、「ここはどうですか〜？」といった意思疎通がしやすいので、デザイナーさんはぜひぜひ作ってみてほしいです！
デザインシステムの次はブロックのスタイル調整
Theme Unit Testをいれて、ブロックのスタイル調整をしていきます。
基本的にサイトエディターでスタイル調整していきますが、CSS追加で必要な場合は register_block_style でブロック用のスタイルをつけます。
また、別のスタイルが必要な場合はwp_enqueue_block_styleでブロックスタイルをつける、もしくはパターンを作成することを検討します。
このあたりは別のブログ記事にしようかな🤔
ブロック単体の調整や、ブロック同士を組み合わせてパターンを作っていくのはこの段階。
カスタムブロックの制作もここですね。
カスタムブロックはどれくらい作ってる？
WordPressのバージョンが上がるごとに作るカスタムブロックが減ってます。（体感）
コアの機能が充実していくにつれてパターンで解決できるものが増えてきたので、今は極力パターンで実装しています。スライダーとかカルーセルみたいな機能が加わるものに関してはカスタムブロックを作る、という感じですね。
6.4で新しいAPIも出たので、よりがっつりカスタムブロック作ることは減っていくんじゃないかな……そうだといいな。（やっぱりカスタムブロックは色々カロリーが高い🐷）
ヘッダーなども管理画面から設定
ヘッダーやフッターもPHPファイルで作るのではなく、ブロックで行います。
このナビゲーションがめちゃくちゃ曲者！毎回頭を悩ませる筆頭。デザインを見てからどう実装するかいつもすんごい悩みます。まだすんなりただナビゲーションメニュー使って配置はやったことがないな…🤔
まだここは語れるほどのものがないのでこのあたりにします。もっと数こなして語れるようになったらまた！！
余談で他にもちょっと難しいなーと思うポイント
- カードっぽいレイアウト
- aタグを親にするブロックを持つことができない（そういうブロックがない）ので、そもそもデフォルトでは実現ができない
- カスタムブロックを作って対処したことがありますが、子ブロックのリンク機能を消すことができないので、UIが悪い
- レスポンシブ（カスタムブロック以外）
- コアのブロックの場合はブロック自体のブレイクポイントを使うため、細かい制御が難しい（できないわけではないけど相当気を使う）
みたいな感じかな。カードっぽいレイアウトに関してはなんか回避策ないかなって考えてるのでスクラップでメモ書きながら検証しようかな🤔
ざっくり軽くですが制作手順はこんな感じでした。
ブロックテーマはたのしい！
クラシックテーマが楽しくなかったわけではないんですが、ブロックテーマはなんとなく作ってて楽しい感じがあります。
粛々とデザインシステムを作ったりブロックを整えていく時間が長いので、なかなか進捗が進んでいないように感じるときがありますが、いざページを作るとスコーーーンと一気に形になるのが結構快感…🥹
いかに使いやすいWordPressを作るかを考える
WordPressだけでなく、CMSを使うということは、自分たちで更新していきたいから入れるものだと思ってます。
使いにくい管理画面は結局更新されず、放置される原因にもなる。だから、「これは使いやすいのかな？これを入れたら逆に操作性悪くならない？」「このカスタムブロックは本当に使いやすい？」を自分に問いながら作業しています。
人が触るとき、を意識してサイトを作るのってすごく難しいんですけど、結構ここに楽しさも見出したりしてます。
完璧にできてるとは全然言えないですが、ブロックテーマはこういう「考えたものをちゃんと返してくれる」みたいなところがすごく好きです。
むずかしいけどね！！！！これからもずっと試行錯誤していきます💪💪💪
Discussion