ブロックテーマとこれからの WordPress サイト制作 / Toyama WordPress Meetup Vol.81

Transcript

1. ブロックテーマとこれからのWordPressサイト制作 Toro_Unit / 2025.12.06 @ Toyama WordPress Meetup vol.81 1
2. $ whoami Toro_Unit / 占部 紘 Frontend & WordPress Engineer Github: @torounit Twitter: @Toro_Unit 2
3. Contributions WordPress / Gutenberg Team Shinshu WordPress Meetup WordCamp Tokyo 2023 Speaker WordCamp Kansai 2024 Organizer Team WordCamp Kansai 2025 Organizer Team 3
4. 長野県松本市から来ました 思ってるより1時間くらい近 かった。 Shinshu WordPress Meetup 来週やります。 4
5. WordPress でサイト制作してる人 5
6. WordPress でブロックテーマでサイト制作してる人 6
7. ブロックテーマとは？ 7
9. WordPress 5.9 で導入されたテーマ。( Beta が取れたのは 6.2 ) フルサイト編集 (Full Site Editing, FSE) に対応。 従来のテーマと異なり、PHP テンプレートファイルを持たず、HTML テン プレートと theme.json で構成される。 ブロックエディターを使用して、サイト全体のレイアウトやデザインをカ スタマイズ可能。 ここ数年のデフォルトテーマ (Twenty Twenty-Two 以降) は全てブロックテ ーマ。 9
10. メリット カスタマイザー / ウィジェット / メニュー等が不要に。全てブロックで解 決するように。 PHP の知識が無くても、テンプレートなどをの開発が可能に。-> セキュ リティリスクの低減。 10
12. 「テーマの役割」の変化 従来のテーマ(クラシックテーマ) 完成したデザイン ブロックテーマ デザインの土台、コンポーネントの提供 12
13. ブロックテーマを開発するには 13
14. Create Block Theme ブロックテーマの開発を支援 するプラグイン ブロックテーマの雛形を生成 既存のブロックテーマをベー スに新しいブロックテーマを 作成 サイトエディター上での変更 をテーマに反映 14
15. なんとなくわかった気になる ブロックテーマ入門 / contents.nagoya 2025 6.28 https://speakerdeck.com/chiilog/na ntonakuwakatutaqi- ninaruburotukutemaru-men 15
16. ブロックテーマでの開発事例 16
17. https://risshi-juku.jp/ 設計・デザイン・開発から全て丸っと担当。 17
19. 開発の流れ 1. 色彩設計、タイポグラフィ設計、余白のルール設計 2. ボタン等の汎用のコンポーネントのデザイン定義 3. TOPページ、下層ページの汎用のパーツのデザイン設計 4. ワイヤーフレーム等を作成しながら各ページのコンテンツ設計 5. ヘッダーフッター、ナビゲーションなどの実装 6. 各ページの実装、ブロックパターン等の作成 19
20. デザイン、コンテンツ設計 20
23. 作業内容等 1. カラーセット、タイポグラフィ、マージンのルール、レイアウトグリッド の整備 -> theme.json に落とし込む。 2. 画像、カラム、幅広の横幅などの整理。-> 画像のサイズ設定、theme.json 3. 各要素のデザイン -> ブロックパターン、ブロックスタイル 23
24. 実装方針 基本的に、theme.json で出来ることは可能な限り theme.json で。 css を直接書けば何でも出来るけど、theme.json の挙動など考慮すること が増えるので、可能な限り theme.json や、WordPress 側の機能で実装した い。 ナビゲーションなどは、css 変数が用いられているのでそれを上書きした りすれば多少はコントロール可能。 24
25. ブロックテーマで サイトリニューアルした話 / Toro_Unit / 2025.04.12 @ Shinshu WordPress Meetup https://speakerdeck.com/torounit/2 025-dot-04-dot-12-at-shinshu- wordpress-meetup 25
26. ブロックテーマでの開発について 26
27. 考えるべきこと オリジナルのブロックを作成しない限り、HTML を改変することが 難しい。そのため、デザインをフィックスさせてスタートすると 開発コストの増加に繋がる可能性が高い。 デザインと実装でフィードバックをしながらすすめることが重要。 各ブロックなどの挙動理解してデザインをすることが理想だけど、 組み合わせの問題などもあり、事前に把握するのは簡単ではないので、 サクッと実装してみて確認していくのが良いのでは。 27
28. 既存のブロックの組み合わせで出来るならそれがベターだけど、ブロック を作成した方が楽で使いやすい場合もある。 28
29. ブロックをゴリゴリに作っている例 29
30. 株式会社ブルートーン by: ZIZO DESIGN https://bluetone.co.jp/ 30
31. White House http://whitehouse.gov/ 31
32. ヘッダーや、ナビゲーション、メインビジュアルなどはゴリゴリにカスタ ムブロックを作成して対応している。 レスポンシブとかを大真面目にやると基本的にはゴリゴリに開発をするこ とになることが多い。 32
33. ここ数年 ブロックテーマに取り組んでみての感想 ブロックテーマになったことで、簡単になったこと、難しくなったことは それぞれあるけど全体的にはそこまで工数が大きく変わった印象は無い。 ブロックエディターにちゃんと対応することの延長線上という感じ。 昔からたいへんなことは今もたいへん。 大枠での柔軟性が上がった分、細かい部分にこだわることのコストは高 い。(ブロックを作成したり) ローコードになった部分もあるけど、コードを書かなくて良いかというと そうでもない。 33
34. Thanks!!! 34