ブロックテーマでサイトをリニューアルした話 / 2026-01-31 Kansai WordPress Meetup

Transcript

1. ブロックテーマでサイトをリニューアルした話 Toro_Unit / 2026.01.31 @ Kansai WordPress Meetup 1
2. $ whoami Toro_Unit / 占部 紘 Freelance Frontend & WordPress Engineer WordPress Contributor Github: @torounit / X: @Toro_Unit 2
3. 長野県松本市から来ました 2026年2月15日まで松本城の プロジェクションマッピングやっ てます。 ワーケーションとかどうぞ。 さむいですけどいいところです。 Shinshu WordPress Meetup やってるよ。 3
4. Introduction: ブロックテーマとは？ 4
6. WordPress 5.9 で導入されたテーマ。( Beta が取れたのは 6.2 ) フルサイト編集 (Full Site Editing, FSE) に対応。 従来のテーマと異なり、PHP テンプレートファイルを持たず、HTML テン プレートと theme.json で構成される。 ブロックエディターを使用して、サイト全体のレイアウトやデザインをカ スタマイズ可能。 ここ数年のデフォルトテーマ (Twenty Twenty-Two 以降) は全てブロックテ ーマ。 6
7. メリット カスタマイザー / ウィジェット / メニュー等が不要に。全てブロックで解 決するように。 PHP の知識が無くても、テンプレートなどをの開発が可能に。-> セキュ リティリスクの低減。 7
9. 「テーマの役割」の変化 従来のテーマ(クラシックテーマ) 完成したデザイン ブロックテーマ デザインの土台、コンポーネントの提供 9
10. ブロックテーマを開発するには 10
11. なんとなくわかった気になる ブロックテーマ入門 / contents.nagoya 2025 6.28 https://speakerdeck.com/chiilog/na ntonakuwakatutaqi- ninaruburotukutemaru-men 11
12. カスタムフィールドもブロックで扱えるようになりました （WordPress 6.5） register_post_meta( 'post', 'my_custom_field', array( 'show_in_rest' => true, 'single' => true, 'type' => 'string', ) ); <!-- wp:paragraph { "metadata":{ "bindings":{ "content":{ "source":"core/post-meta", "args":{"key":"my_custom_field"} } } } } --><p>Fallback content</p><!-- /wp:paragraph --> 12
13. プラグイン側からブロックパターンを登録することも可能 register_block_pattern( 'my-plugin/my_custom_field', array( 'title' => 'My Custom Field', 'description' => 'My Custom Field', 'content' => '<!-- wp:paragraph { "metadata":{"bindings":{"content":{"source":"core/post-meta","args":{"key":"my_custom_field"}}}}} --> <p>Fallback content</p> <!-- /wp:paragraph -->', ) ); 13
14. Block Theme is Production Ready !!! 14
15. ブロックテーマでの開発事例 15
16. https://risshi-juku.jp/ 設計・デザイン・開発から全て丸っと担当。 16
18. 開発の経緯 2024年12月頃、こんな相談。 LINE公式アカウントをやりたい、それに伴って同線を作りたい。 コンテンツの見直しなどもしたいので、操作方法などを教えてほしい。 現状だと情報の不足があってページ追加なども必要。 可能であれば自分たちでいじりたい。 18
19. 以前はお知らせがたまに更新される程度だったので、静的サイトにすることも 検討したが、先方がコンテンツ作成を自分たちでやりたいという要望が 大きかったので、WordPress でリニューアルすることに。 19
20. デザイン、コンテンツ設計 20
23. 実装方針 基本的に、theme.json で出来ることは可能な限り theme.json で。 css を直接書けば何でも出来るけど、theme.json の挙動など考慮すること が増えるので、可能な限り theme.json や、WordPress 側の機能で実装した い。 ナビゲーションなどは、css 変数が用いられているのでそれを上書きした りすれば多少はコントロール可能。 せっかくデザインから自分でやるので、CSS のビルドしない！(決意 23
24. テーマ開発の流れ 1. 色彩設計、タイポグラフィ設計、余白のルール設計 2. ボタン等の汎用のコンポーネントのデザイン定義 3. TOPページ、下層ページの汎用のパーツのデザイン設計 4. ワイヤーフレーム等を作成しながら各ページのコンテンツ設計 5. ヘッダーフッター、ナビゲーションなどの実装 6. 各ページの実装、ブロックパターン等の作成 24
25. テーマ実装などをしながら、同時並行で先方とコンテンツの整理を進め る。 ワイヤーフレームを作成しながら、コアブロックでの作成が難しいところ をブロックスタイル + ブロックパターンで実装。 TOPページの、各セクション、CTA、FAQ 等はブロックパターン化。 25
27. 開発する上での困りごと 27
28. メディアクエリが使えない theme.json でメディアクエリ等を用いた設定は出来ない。CSS を記述すれば 可能だけれど、theme.json がある以上、可能な限り CSS を記述したくない。 28
31. 横並び(flex) + 幅:fixed + 横幅指定 31
32. 幅が「fixed」の場合、 「固定幅」を設定出来るが、 これは flex-basis の数値。 上手いこと設定すると、モバイルで 1カラム、 大きな画面で 2カラム等は実現できる。 32
33. 「画面サイズに応じて個別に指示をする」 ↓ 「要素のサイズを決めて自動的にレイアウトさせる、flexで頑張る」 33
34. デザイン面で考慮することは結構多いが、とりあえず、 display:none を 使わずに考える。非表示の要素を WYSIWYG で扱うのは無理。 34
35. ボタン等のバリエーション ・hover 制御 ボタンのバリエーションが増えがち。 エディターからは hover 等の制御が出来ない。 仮に制御出来るようになったらそれはそれ で複雑じゃない？ 35
36. currentColor をとにかく頑張って使う。 "border": { "bottom": { "color": "currentColor", "style": "solid", "width": "4px" }, "left": { "color": "currentColor", "style": "solid", "width": "4px" }, "right": { "color": "currentColor", "style": "solid", "width": "4px" }, "top": { "color": "currentColor", "style": "solid", "width": "4px" } }, "color": { "text": "var(--wp--preset--color--primary)" 36
37. pointer-events:auto; word-break:auto-phrase; display:inline-flex; align-items:center; justify-content:space-between; gap: var(--wp--preset--spacing--50); &::after { content: ''; font-size: 0.8rem; display: inline-block; vertical-align:middle; clip-path: polygon(0.8em 50%, 0% 0%, 0% 1em); width: 1em; height: 1em; background-color: currentColor; transition:all 0.1s ease-out 0s; } &:hover::after { transform: translateX(0.5em); }", clip-path とかで頑張れば複雑な形とかも 使える。 37
38. color-function も使える color に指定する値は、CSS プロパティで指定可能なモノなら何でも 出来るので、 calc() や rgba() なども 利用可能。 色のルールなどをちゃんと整備すると、 ブロックスタイルを増やさずに済む。 38
39. ナビゲーションのスタイリング ナビゲーションのHTML 構造を改変するのは非常に困難。自前でブロックを 作成するしか無いが、実装コスト・メンテナンスコストが高い。 なのでとにかく CSS で頑張る。 39
40. CSS で頑張るとこの くらいまでは カスタマイズ出来る。 40
42. --navigation-layout-justification-setting: stretch; & button.wp-block-navigation__responsive-container-open::before { content: "Menu"; margin-right: 4px; font-size: 1rem; font-weight: bold; text-transform: uppercase; } & button.wp-block-navigation__responsive-container-close::before { content: "Close"; margin-right: 4px; font-size: 1rem; font-weight: bold; text-transform: uppercase; } & .wp-block-navigation__responsive-container-close { display: flex; } & .wp-block-navigation__responsive-container { padding: var(--wp--preset--spacing--50) !important; } & .wp-block-navigation__responsive-close { max-width: none !important; } & .wp-block-navigation__responsive-container-content { max-width: var(--wp--style--global--content-size); margin: 0 auto; } & .wp-block-navigation-submenu.wp-block-navigation__submenu-container { padding: var(--wp--preset--spacing--40) !important; padding-top: 0 !important; } & .wp-block-navigation-submenu.wp-block-navigation__submenu-container .wp-block-navigation-item { font-size: var(--wp--preset--font-size--regular) !important; } 42
43. ナビゲーションのブロックの CSS には、 --navigation-layout-justification-setting: flex-start; --navigation-layout-direction: row; --navigation-layout-wrap: wrap; --navigation-layout-justify: flex-start; --navigation-layout-align: center; 等の CSS 変数が用いられているので、ここを上書きしたりで多少の レイアウトの調整は可能。 43
44. フィードバック 44
45. ユーザーの感想 思ってたより簡単に使えた。いわゆる TinyMCE みたいなモノを想像して たからすげーってなった。 以前と比べてとかはよくわからない、触ってないしそもそも個人でサイト とか持ってないし。 ボタンとか簡単に足せるのはおどろいた、後から写真とか足せるのありが たい。 「普通のサイト」が、文字とか画像とかが案外簡単に変えれないって話は それはびっくり。 事前に編集する部分を決めるのはしんどい。そこまで考えられない。 45
46. 俺：右側の設定パネルとかって触った？ ユーザー：なにそれ？ 俺：Oh... 46
47. その後色々話を聞いたけど、そもそもエンドユーザーにとって、 「設定パ ネル = 高度な設定」となっているケースは多そう。 正直 CSS の知識が無いと良く解らないモノも多い。そして、タブの中に タブがある UI。初心者お断り感はすごい。 可能な限り、設定パネルを触らなくても良いように考えるのが良い。 47
48. 俺の感想 投稿サムネイルとか、毎回作ってエラいなーって思ってたら canva で 結構 簡単に作れるという話。Instagram用の画像も作らないいけないというこ とで。 エンドユーザーがカジュアルにバナーとか作れる時代になったことの は、ブロックテーマと相性がいいかも。 「緊急のお知らせをどこに出す？」みたいな話はそのときになってはじめ てユーザー側が想像できる話だったりする。ブロックテーマだとある程度 柔軟に対応できた。 48
49. ブロックテーマでの開発について 49
50. 考えるべきこと オリジナルのブロックを作成しない限り、HTML を改変することが 難しい。そのため、デザインをフィックスさせてスタートすると 開発コストの増加に繋がる可能性が高い。 デザインと実装でフィードバックをしながらすすめることが重要。 各ブロックなどの挙動理解してデザインをすることが理想だけど、 組み合わせの問題などもあり、事前に把握するのは簡単ではないので、 サクッと実装してみて確認していくのが良いのでは? 50
51. スケールの 設計などもちゃんと 考えたい margin / padding 等はどんどん 肥大していくので、ちゃんと 設計したい。 https://standard.shiftbrain.com/blo g/music-math-typography 51
52. CSS力は要らない？ 必要！！！！ theme.json だけで完結するにしても、 clamp や currentColor 、 calc() などを駆使する必要があるので、CSS力は必 須。 CSS を書かないためにもCSS力はいる。 theme.json の機能では難しいCSSプロパティは沢山ある。 (例：position, z-index, subgrid...etc) 規模が大きくなると、パターンのCSS管理、カスタムブロック開発など必 要になる! 52
53. CSS をいっぱい書かないと いけない場合の話。 ブロックテーマ時代における、 テーマの CSS について考える https://speakerdeck.com/torounit/2 025-dot-09-dot-13-at-shinshu- wordpress-meetup 53
54. 今日のテーマのテキスト等を差し替えたモノ https://github.com/torounit/kansai-wordpress-meetup-20260131 54
55. Block Theme is Production Ready !!! 55
56. Thanks!!! 56