なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28

contents.nagoya 2025で発表したセッションのスライドです

Transcript

1. なんとなくわかった気になる ブロックテーマ入門
2. 質問はこちらへどうぞ！
3. 今日持ち帰って欲しいテーマ 管理画面だけでサイト全体を構築できる時代になったよ！
4. 今までのWordPressテーマは どういうつくりだったかと言 うと…
5. お知らせだったりブログだったりみたいな 簡単な「記事を書く」には十分だけど、 LPっぽいページのような、凝ったデザインのペー ジは作りにくい… 使いやすくするためにどうなるかと言うと……… ページの作成はW YSI W YGエ ディタ
6. ちょっと凝ったページを作るために カスタムフィールドを使用。 レイアウトが複雑になればなるほど、 カスタムフィールドが増えていく。 表示側のレイアウトは固定なので、 柔軟さはありません カスタムフィールド祭り
7. メニューをカスタマイズしたり、 ヘッダーに使う画像を設定したりできる。 PHPでカスタマイズして項目を増やしたりもできる ヘッダーやフッター等はテーマカスタマイザーを使って 行う
8. 機能自体はカスタマイズの中にあるものと同じ。 サイドバーやフッターなどはウィジェットを使って レイアウトしたりしなかったりする ときにはウィジェットを使ってレイアウト
9. ……どこが何で表示されるの？
10. 例えば、本文の下に表示される著者情報はどこで変える ？ 著者情報を表示するエリアがあるとして、どこで内容を変えるのでしょう？ ページを作った人のアカウントに入力したプロフィール情報？ウィジェット？ はたまた、ページをつくるときにチェックボックスがある？ テンプレートファイルに直書きされている………？ 作り方は人によって様々です。 つまり………………
11. (ᐛ)ﾜｶﾗﾝ
12. 作り方が一定ではないゆえに把握がしづらい WordPress本体の学習コストもあるのに、カスタマイズが入ることにより学習コストが増える カスタマイズが多くなればなるほど、困った時に検索しても解決法が出てこない マニュアルが追従しない可能性もある 直感的な操作ができない（どう表示されるのかわかりづらい） 先ほどの例のように、どこを変更したらやりたいことができるのか分かりづらい or できない ユーザー（クライアント）体験 固定レイアウトゆえに、デザイン面の要件定義が複雑になりがち 例：通常２カラムだけど、このカスタムフィールドが空だったら1カラムにする！ こういうのを全パターン事前に洗い出す必要がある(ᐛ) 少しの変更でもテーマ（PHP）の変更が必要 全体像を素早く把握するにはテンプレートファイルを探し出す必要がある わかる人じゃないと触れないブラックボックス化 開発者体験
13. 少しの変更の具体例をあげると……… 「お客様の声を載せるエリアを新設したい」となった場合 1 . カスタムフィールドを新規に作成する a . お客様の名前 b . 写真（あったら表示、なかったら非表示でレイアウト変更） c . コメント 2 . PHPで該当のテンプレートファイルにカスタムフィールドを表示するエリアを追加 3 . CSSでスタイル調整 4 . 動作テスト 5 . 本番反映 ほんの少しの作業のように見えるけど、 テーマ本体の変更が絡むため結構大掛かりな変更になってしまう ユーザーと開発者でコスト感が違ってくるのはこういうところかもしれない
14. もっと簡単にできたらいいですよね 軽微な変更なら簡単に、自分でやりたい！ ノーコードで操作できたら最高なんだけど…？ ユーザー（クライアント）体験 カスタムフィールド設計、少なくしたい！（なんなら0にしたい！） 管理画面（投稿画面）だけで完結できたらいいな！ 新しいメンバーでもすぐに理解できる構造にしたい！ 開発者体験
15. それ、ブロックエディターで解決でき ます！
16. https://yout u.b e/56ta 6p5 5u3U 管理画面デモ
17. これは投稿画面
18. 実際に表示してみたページ
21. ぜんぜんちがう！
22. 最初はちょっと抵抗感あるかも…？ まるっと操作感が変わってしまうので、最初は使いづらさを感じるかも。 ただ、慣れてしまうともう従来のカスタムフィールド設計には戻れない……… やってみてよかったポイント ユーザー（クライアント）への説明コストが下がった 見たまま編集できるので、画面キャプチャして「ここはこうしたらいいですよ」で 概ね理解してもらえる プロトタイプ作成がめちゃくちゃ楽 「これできるかな？」が投稿画面からブロック組み合わせて試せるので、実装可否 やコストが早めに測れる ブロックごとに独立したパーツとして完結しているので、そのブロックに行った変更 が他に影響しない
23. OKOK、ページ作るのは ずいぶん変 わるんだ ね 今まで話していたのはあくまで「ページや記事の内容（いわゆる本文）」の話。 でも…さっきまでの話だと、ページ作る以外（ヘッダーやフッターなどのサイトの骨組み 部分）はわかりにくいまま。 ページみたいに見たまま編集したい サイト編集はサイト編集で、1ページにまとまっていてほしい メニューはこっちのページ、ロゴはあっちのページ、みたいにごちゃごちゃ分かり にくいのはイヤ！
24. できます！
25. 今日の本題ブロックテーマ
26. ブロックテーマって？（FSE とも言われます ） ページや記事を作るときに使っていたブロックを、テンプレート全体で使うテーマのこと Full Site Editingとかフルサイト編集テーマとも言われます （PHPで作られたテーマはクラシックテーマと呼ばれています） デフォルトテーマはTwenty Twenty-Twoからブロックテーマ リリースは2022年（ 3年前！ ） よくベースとしておすすめされるのはTwenty Twenty-Five（ tt-5って書かれたり もする ） 私もおすすめ。空テーマで作る時に参考にしています
27. ブロックテーマの特徴 ブロックテーマの心臓： theme. json デザイン設定を管理 サイトで使う色・余白・文字サイズなどなど 管理画面で設定したデザインを保存するファイル このファイルを使えば他 のWordPressでも同じデザインが使える 管理画面からノーコードで構築 私の開発では実際のところローコード PHPの量は激減（少なくとも私が今まで担当したテーマはそう） 毎回決まって書いてるのはCSSやJSをエンキューするタグくらい 参 考 U R L htt p s://d eve l o p e r.wo rd p re ss.o rg /t h e m es/ htt p s://fu ll s i te e d i t i n g .c o m / htt p s://s p e a ke rd e c k.c o m /t b s h i k i / ka n s a i -wo rd p re ss- m e etu p - 2 02 5 - 0 1- 2 5
28. https://yout u.b e/ V RQUR 6C UvA0 実際にサイトを作ってみます
29. 必要ファイル自前で作らないといけないの？ 最初にエディターを使ってテンプレートファイルやtheme. jsonを作成しました。 でも、毎回こうやって手動で用意するのは大変です。 私も細かいtheme. jsonの中身なんて覚えていません。 さ っ き の デ モ 録 画 前 に （ あ れ 、 な ん で こ れ 反 映 さ れ な い ん だ ？ ） っ て そ こ そ こ 詰 ま り ま し た （ ｺ ｿ ｯ あと、今回生成したサンプルだとインデックスのテンプレートが空なので どこから手をつけたらいいのかも正直わかりにくい………。 何より、変更した内容はデータベースに保存されるので、 ローカルでファイルとして持っておくことができません！！ つまり……… 本番環境への移行で同じ変更をしないといけない！ テーマのGit管理ができない！
30. だめじゃん
31. 諦めない！！！！！！！！！！ ご安心ください。 Create Blo ck Themeというプラグインを入れれば万事解決！ https://wordpress.org/plugins/create -blo ck-theme/ WordPressのテーマハンドブックにも載っています https://develop er.wordpress.org/themes/getting-starte d/quick-start- guide/#using-the - create -blo ck-theme -plugin
32. https://yout u.b e/Hc c kNuui2i o Create Blo ck Themeでテーマを作成してみます
33. ブロックパターンも知っておくとはかどります 1本目のデモ中、ヘッダーやフッターはボタンぽちーで配置しました。 あれが「 ブロックパターン 」と呼ばれるものです。 WordPress本体に付随するものもあればテーマに付随するものもあります。 そして、 ブロックパターンは自作できます！ ブロック同士を組み合わせてデザインを実現し、一かたまりとして登録しておくことで テーマのいたるところで使えるようになります。 弊社ではブロック自体のレイアウト機能を用いてパターンを作成することで、 カスタムブロック（独自につくるブロックのこと）を作る量が大幅に減りました！ ※参考までに、ブロックだけでは実現できない時にTailwindを使って追加クラスを入れたりもします
34. https://yout u.b e/ZTpZgQrc Q6I 最初に例に挙げたお客様の声をパターンにしてみましょ う
35. 合ってるはずなのに反映されないときがある 特にパターンを追加したときが多いんですが、キャッシュがきついときがあります！ ちゃんと保存したのに反映されない、というときは一度テーマを切り替えてみてください 一瞬別テーマに切り替えてからテーマを戻すと反映されることがあります それでもダメなときは大体どこかの記述だったり、ファイルの置き場が間違ってます
36. ブロックテーマを用いる上で必要な技術 発想力（技術とはちょっと違うけど） 基本、ブロックの組み合わせで物事を解決するため 既存ブロックの組み合わせ（ブロックパターン）が思いつかない場合 パターンライブラリで探してみる 「WordPress パターン」とかでググればOK パターンでどうしてもなんともならないなら、 プラグインを探す JSONを書いたり読んだりする力 theme. jsonを直接編集したらできることがﾁｮｯﾄ増えます CSS力 管理画面からでも追加CSSが書ける ブロックによってはややこしいCSSがついてたりするので、特にカスタマイズをす るのなら理解が必要 HTMLで最初にモックを作るのはやめときましょう ☠️ ブロックは決まったHTML構成・CSSクラスがついています 待っているのはスケジュール増加と絶望
37. テーマ作成自体が簡単になるわけではない クラシ ックテーマにはクラシックテーマの、 ブロックテーマにはブロックテーマ の苦行がありま す。 手軽に作れるようにな ったところもあれば、難しいところもあります 簡単にならないのなら、クラシックテーマで積み上げてきた知識があるのに、わざわざブ ロックテーマにする必要ないじゃん！？
38. ブロックテーマは「構築後」から本領 発揮！
39. CMSは作ってからが本番 WordPressに限らず、そもそもWebサイトは「作って終わり」ではありません。 特に、CMSを導入していたらなおのこと。 その先に、ユーザーが更新するフェーズがあります。 管理画面でつくったページが、そのままフロントで表示できる 先の例であげたような「お客様の声」のようなパターンを、ユーザー側が自由に作れ る そんな日々の運用で真価を発揮します。
40. 「これはカスタムブロック必要だからお願いします！」とか「これパターン使ったら できるのでやります！」など、分担がしやすくなった 管理画面からサッとプロトタイプができるので、デザイナーさんとの意思疎通のしや すさが格段にあがった ✨✨✨✨PHP書かなくていい ✨✨✨✨ セキュリティ的な問題をおこしにくい WordPressがまっしろになった………が起こりにくい ブロックは壊れても管理画面で「壊れてるよ！修復する？」って聞いてくれる 開発側の視点からの大満足ポイント
41. ブログで色々発信してます https://zenn.dev/p/hamworks WordPressサイト構築中のメモをまとめなおしたり、新機能で気になったもの試したり して記事書いてます。 最近ネタ切れ起こしてるのでネタください
42. 質疑応答………の前に
43. 質問ありそうなプラグインについて 極力プラグインは使っていません。 その上で入れたり入れなかったりするのは以下のプラグインです。 Advance d Query Lo op クエリーループブロックを拡張。カスタムフィールドで絞り込んだりとか https://ja.wordpress.org/plugins/advance d- query-l o op/ Blo ck Visibility 特定の期間だけブロック表示させたりできる https://ja.wordpress.org/plugins/blo ck-visibility/ Enable Resp onsive Image メディアクエリに応じて表示させる画像を変更できる https://ja.wordpress.org/plugins/enable -resp onsive -image/
44. 答えられないもの どういうケースがブロックテーマに向いてますか！？ WordPressに向いてるサイトです！ どんなサイトでもポテンシャルあります！！ 一旦ブロックテーマでプロトタイプ作ってみましょう！ ただし、一部の例外はあります！弊社でやったケースだと他言語だと難しいかも？ プラグインによっては機能は提供されているけど、基本全部管理画面で完結 テーマのGit管理が難しい（全部の言語のテーマの書き出しができない）
45. WordPressの実装相談お待ちしてま す ❤️
46. 会社紹介 株式会社HAMWORKS ブロックテーマでの実装をメインにWordPressの開発をしています。 ブロックでの開発がまだ苦手………という方はご依頼お待ちしております ❤️ ブース出してますので遊びに来てください！
47. 自己紹介 岡本 千秋（おか もと　ちあき） 主にWordPressテーマ・プラグインを作ってるフロントエンド開発者 zennで書いた「WordPressのブロックテーマ制作手順まとめ」の著者 本業はゲーマー。ﾈｺﾁｬﾝ愛。 X: chiilo gweb GitHub: chiilo g zennの本はこちらからとべます
48. 質疑応答