Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ブロックテーマ、WordPress でウェブサイトをつくるということ / 2026.02.07...

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on.

ブロックテーマ、WordPress でウェブサイトをつくるということ / 2026.02.07 Gifu WordPress Meetup

Gifu WordPress Meetup #91 - WordPress や Web 制作に関するお話がたくさん聞ける会 https://www.meetup.com/ja-jp/gifu-wordpress-meetup/events/312855759 の登壇資料です。

Avatar for Toro_Unit (Hiroshi Urabe)

Toro_Unit (Hiroshi Urabe)

February 07, 2026
Tweet

More Decks by Toro_Unit (Hiroshi Urabe)

Other Decks in Technology

Transcript

  1. $ whoami Toro_Unit / 占部 紘 Freelance Frontend & WordPress

    Engineer WordPress Contributor Github: @torounit / X: @Toro_Unit 2
  2. 5

  3. 6

  4. 7

  5. 8

  6. 9

  7. WordPress 5.9 で導入された新しいテーマの仕組み。 フルサイト編集 (Full Site Editing, FSE) に対応。 従来のテーマと異なり、PHP

    テンプレートファイルを持たず、HTML テン プレートと theme.json で構成される。 ブロックエディターを使用して、サイト全体のレイアウトやデザインをカ スタマイズ可能。 ここ数年のデフォルトテーマ (Twenty Twenty-Two 以降) は全てブロックテ ーマ。 10
  8. 誤解を恐れずに言うならば、現代の WordPressは「デザインを100% 再現する」には向いていない。 HTMLの改変が難しい。 WordPress が提供する CSS の機能が中途半端。 例えばメディアクエリが使えない。CSS を記述する部分と

    theme.json 等で設定する部分の混在。 カスタムブロックの開発をすれば大抵は可能だが、実装コスト・保守コス トの増加。 「クラシック」なやり方のままでは、サイト開発が難しい。 18
  9. 26

  10. 30

  11. 32

  12. テーマの実装方針 基本的に、theme.json で出来ることは可能な限り theme.json で。 css を直接書けば何でも出来るけど、theme.json の挙動など考慮すること が増えるので、可能な限り theme.json

    や、WordPress 側の機能で実装した い。 ナビゲーションなどは、css 変数が用いられているのでそれを上書きした りすれば多少はコントロール可能。 せっかくデザインから自分でやるので、CSS のビルドしない!(決意 34
  13. 37