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

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

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