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

ブロックテーマでどう変わる?新しいWordPressのWebサイト制作

 ブロックテーマでどう変わる?新しいWordPressのWebサイト制作

【大阪】Kansai WordPress Meetup@大阪『サイトの作り方 3種おさらい&祝☆誕生20周年』

tbshiki

May 27, 2023
Tweet

More Decks by tbshiki

Other Decks in Technology

Transcript

  1. ブロックテーマでどう変わる?
    新しいWordPressのWebサイト制作
    2023/05/27 つぶ(佐敷 亮太)
    Kansai WordPress Meetup@大阪
    『サイトの作り方 3種おさらい&祝☆誕生20周年』

    View Slide

  2. View Slide

  3. ㊗WordPress 20周年
    おめでとうございます🎉

    View Slide

  4. SA式
    sashiki
    TB式
    tbshiki
    つぶ式
    つぶ
    昔書いていたブログの名前が「SA式」
    2016年に始めたブログが「TB式」
    TB式は呼びにくいと「つぶ」になりました
    好きなWordPressのバージョンは5.2です。
    つぶ
    佐敷 亮太
    りょうた
    さしき
    リユースとWeb制作と
    ECとバックオフィス効率化と
    デザイン思考とラーメンが好き

    View Slide

  5. ブロックエディターを
    使ったことがある人ー?

    View Slide

  6. ブロックテーマを
    使ったことがある人ー?

    View Slide

  7. ブロックエディターとは
    ブロックテーマとは
    ブロックエディター・ブロックテーマで
    メリットがありそうな人

    View Slide

  8. ブロックエディターとは
    ブロックテーマとは
    ブロックエディター・ブロックテーマで
    メリットがありそうな人

    View Slide

  9. ブロックエディターとは
    2018年12月6日にリリースされた
    WordPress 5.0 “Bebo” から搭載された
    新しいエディターです

    View Slide

  10. View Slide

  11. View Slide

  12. ブロックエディターとは
    ブロックを積み重ねるようにして
    コンテンツをつくっていくエディター
    エディターとフロントエンド(公開側)の
    デザインが(ほぼ)一緒

    View Slide

  13. View Slide

  14. ブロックエディターとは
    ブロックを積み重ねるようにして
    コンテンツをつくっていくエディター
    エディターとフロントエンド(公開側)の
    デザインが(ほぼ)一緒

    View Slide

  15. View Slide

  16. ブロックエディターとは
    ブロックで作ったレイアウトを使い回すことができる
    「再利用ブロック」が最高
    Post Snippetsなどのスニペット系プラグインがいらなくなるかも

    View Slide

  17. ブロックで作ったレイアウトを使い回すことができる
    「再利用ブロック」が最高
    Post Snippetsなどのスニペット系プラグインがいらなくなるかも
    ブロックエディターとは

    View Slide

  18. ブロックエディターとは

    View Slide

  19. ショートコードを作ることが減った
    ショートコードで囲むことがめちゃくちゃ減った
    [hogehoge] ……… [/hogehoge]みたいなやつ
    カスタムフィールドは使われなくなる
    って言われてたけど結構使う
    ブロックでレイアウトを作ってショートコードでカスタムフィールドを呼び出す
    なんてことができるので最高
    ブロックエディターとは

    View Slide

  20. ショートコードを作ることが減った
    ショートコードで囲むことがめちゃくちゃ減った
    [hogehoge] ……… [/hogehoge]みたいなやつ
    カスタムフィールドは使われなくなる
    って言われてたけど結構使う
    ブロックでレイアウトを作ってショートコードでカスタムフィールドを呼び出す
    なんてことができるので最高
    ブロックエディターとは

    View Slide

  21. ブロックエディターとは
    クラシックブロックがあるので
    クラシックエディターから移行しやすい
    ここはブロックでレイアウトして、ここはクラシックブロックを入れる
    みたいなことができる
    TwitterやYouTubeなどはURL貼るだけで埋め込みができるから
    クラシックエディターだけを使うよりも効率があがるかも

    View Slide

  22. ブロックエディターとは
    クラシックブロックがあるから
    クラシックエディターから移行がしやすい
    ここはブロックでレイアウトして、ここはクラシックブロックを入れる
    みたいなことができる
    TwitterとかYouTubeとかURL貼るだけで埋め込みができるから
    クラシックエディターだけを使うよりも効率があがるかも

    View Slide

  23. ブロックエディターとは
    クラシックブロックがあるので
    クラシックエディターから移行しやすい
    ここはブロックでレイアウトして、ここはクラシックブロックを入れる
    みたいなことができる
    TwitterやYouTubeなどはURL貼るだけで埋め込みができるから
    クラシックエディターだけを使うよりも効率があがるかも

    View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. ブロックエディターとは
    ブロックエディターでもHTML編集できるんです!

    View Slide

  29. ブロックエディターとは
    2021年7月20日リリースの WordPress 5.8 から
    ウィジェットもブロックでレイアウトできるようになりました

    View Slide

  30. ブロックエディターとは
    2021年7月20日リリースの WordPress 5.8 から
    ウィジェットもブロックでレイアウトできるようになりました

    View Slide

  31. ブロックエディターとは
    有能!クエリーループブロック
    特定のカテゴリやタグ、選択した固定ページのみを呼び出すことが可能に
    アイキャッチやカテゴリ、投稿日なども自由に設定可能
    今人気!ブロックパターンを使うと
    ポチポチするだけでページができあがる
    https://ja.wordpress.org/patterns/
    ブロックパターンディレクトリからコピペで実装可能!

    View Slide

  32. ブロックエディターとは
    突然!
    好きなブロック
    3選

    View Slide

  33. 左右で分割
    カラムブロック
    簡単に横並びレイアウト可能
    レスポンシブレイアウトも
    おまかせ

    View Slide

  34. 背景を操れ
    カバーブロック 
    シングルページやLPで大活躍

    View Slide

  35. なんでもまとめろ
    グループブロック
    まとめてフォントサイズや
    フォントウェイトを変更可能
    縦並び横並びもお手の物

    View Slide

  36. ブロックエディターとは
    ブロックエディターを使ったことがないという方に朗報!
    環境構築不要で今すぐブロックエディターを触ることができます
    https://wordpress.org/gutenberg/

    View Slide

  37. ブロックエディターとは
    ブロックテーマとは
    ブロックエディター・ブロックテーマで
    メリットがありそうな人

    View Slide

  38. ブロックテーマとは
    2022年1月25日にリリースされた
    WordPress 5.9 “Joséphine Baker” に搭載された
    Full site editing(フルサイト編集)の主な機能の一つ
    FSE対応テーマ ≒ ブロックテーマ?🤔

    View Slide

  39. ブロックテーマとは
    ブロックエディターの機能が
    コンテンツ以外のレイアウトにも対応したテーマ
    ヘッダーやフッター、アーカイブページ、404ページまで
    全てブロックで構築できるのが特徴

    View Slide

  40. ブロックテーマとは
    ということは?どういうこと?

    View Slide

  41. ブロックテーマとは
    ということは?どういうこと?

    View Slide

  42. ブロックテーマとは
    つまりどういうこと?

    View Slide

  43. ブロックテーマとは
    テーマのレイアウトにしばられることがなくなった
    メニューやウィジェット、カスタマイザーなどにしばられることがなくなった
    コンテンツ部分以外のカスタマイズの自由度があがった
    細かなレイアウトまで
    ノーコードで構築できるようになった

    View Slide

  44. 出典 : https://ja.wordpress.org/team/handbook/theme-development/basics/template-hierarchy/

    View Slide

  45. 出典 : https://ja.wordpress.org/team/handbook/theme-development/basics/template-hierarchy/
    →フロントエンドからの呼び出し
    テーマ作成の優先順位←

    View Slide

  46. 導入のハードルは少し高い
    全ページのレイアウトを確認する手間がかかる
    WordPressのページ階層の知識やHTML・CSSの知識があるといいな
    ブロックテーマとは

    View Slide

  47. 導入のハードルは少し高い
    全ページのレイアウトを確認する手間がかかる
    WordPressのページ階層の知識やHTML・CSSの知識があるといいな
    ブロックテーマとは
    自由すぎる不自由\(^o^)/

    View Slide

  48. ブロックテーマとは
    子テーマなどでテーマテンプレートの上書きをしている環境
    テーマのアップデートでレイアウトが崩れるかもしれないから
    修正対応かもと不安になっていたのがなくなった🙌
    テスト環境でテンプレートを作成・変更・検証したものを
    本番環境の子テーマを上書きしてアップデートみたいなことができなくなった😿

    View Slide

  49. ブロックテーマとは
    突然!
    国産ブロックテーマ
    3選

    View Slide

  50. unitone
    Snow Monkey開発者のキタジマさんが開発
    Every Layoutにインスパイアされた
    レイアウト用のブロックが用意されている
    素敵すぎるブロックテーマ
    まだメディアクエリ使ってんの?

    View Slide

  51. X-T9
    Lightningを開発している
    株式会社ベクトル製のブロックテーマ
    国産ビジネス向けテーマの
    始祖ならではの安定性
    Lightningの次の主力テーマですって

    View Slide

  52. Cormorant
    オレインデザイン代表のオレインさんが開発
    Cormorantを日本語にすると鵜らしいです
    岐阜の長良川では鵜飼が有名とのこと
    鵜飼のシーズンは5~10月

    View Slide

  53. ブロックテーマとは
    ブロックテーマの可能性を一番感じるところ

    View Slide

  54. ブロックテーマとは
    ヘッダー・フッター・メニュー・ウィジェット
    の中でロール(権限)で出し分けができること
    ログインしているユーザーに
    別のナビゲーションメニューを表示させる
    なんてことが可能になります

    View Slide

  55. ブロックテーマとは
    ヘッダー・フッター・メニュー・ウィジェット
    の中でロール(権限)で出し分けができること
    ログインしているユーザーに
    別のナビゲーションメニューを表示させる
    なんてことが可能になります

    View Slide

  56. ブロックテーマとは
    ヘッダー・フッター・メニュー・ウィジェット
    の中でロール(権限)で出し分けができること
    ログインしているユーザーに
    別のナビゲーションメニューを表示させる
    なんてことが可能になります

    View Slide

  57. ブロックエディターとは
    ブロックテーマとは
    ブロックエディター・ブロックテーマで
    メリットがありそうな人

    View Slide

  58. ブロックエディター・ブロックテーマでメリットがありそうな人
    タイトルの
    新しいWordPressのWebサイト制作
    ってなんやねん😡

    View Slide

  59. ブロックエディター・ブロックテーマでメリットがありそうな人
    「オリジナルテーマ制作」から
    「ブロックテーマで構築」に 
    置き換わります

    View Slide

  60. ブロックエディター・ブロックテーマでメリットがありそうな人
    エディターとフロント側のレイアウトの差が減った
    レイアウト(パーツ)の使いまわしがしやすくなった
    コードを書く必要が無いので制作のハードルが下がる
    テンプレートも管理画面で編集可能

    View Slide

  61. ブロックエディター・ブロックテーマでメリットがありそうな人
    is 誰

    View Slide

  62. ブロックエディター・ブロックテーマでメリットがありそうな人
    デザインは得意だけど
    コーディングが苦手さん
    紙・UI / UX・プロダクトデザイナー
    ヘッダーやフッターまで
    自由にレイアウトできるので鬼に金棒

    View Slide

  63. ブロックエディター・ブロックテーマでメリットがありそうな人
    デザインは得意だけど
    コーディングが苦手さん
    紙・UI / UX・プロダクトデザイナー
    ヘッダーやフッターまで
    自由にレイアウトできるので鬼に金棒

    View Slide

  64. ブロックエディター・ブロックテーマでメリットがありそうな人
    コーディングは得意だけど
    プログラミングが苦手さん
    コーダー
    ブロックの使い回しやロールやPC/スマホなどの
    条件による出し分けができるので
    キャンバスに自由にお絵かきしてください

    View Slide

  65. ブロックエディター・ブロックテーマでメリットがありそうな人
    コーディングは得意だけど
    プログラミングが苦手さん
    コーダー
    ブロックの使い回しやロールやPC/スマホなどの
    条件による出し分けができるので
    キャンバスに自由にお絵かきしてください

    View Slide

  66. ブロックエディター・ブロックテーマでメリットがありそうな人
    エンジニアリングは得意だけど
    デザインが苦手さん
    エンジニア
    テーマがもつCSSが綺麗に装飾してくれます
    デザインに対しての苦手意識はとんでいけ~

    View Slide

  67. ブロックエディター・ブロックテーマでメリットがありそうな人
    エンジニアリングは得意だけど
    デザインが苦手さん
    エンジニア
    テーマがもつCSSが綺麗に装飾してくれます
    デザインに対しての苦手意識はとんでいけ~

    View Slide

  68. ブロックエディター・ブロックテーマでメリットがありそうな人
    is みんな

    View Slide

  69. ブロックエディター・ブロックテーマでメリットがありそうな人
    ブロックテーマを試したい方に朗報!
    環境構築不要で今すぐブロックテーマを触ることができます
    (Twenty Twenty-Three , Skatepark , Pendant etc...)
    https://developer.wordpress.org/playground/demo/

    View Slide

  70. ブロックエディター・ブロックテーマでメリットがありそうな人
    ブロックテーマを使ったサイト制作
    とっても楽しいのでしてみませんか?

    View Slide