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

by tbshiki

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

ブロックエディターとは

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

ブロックテーマとはということは？どういうこと？

Slide 41

Slide 41 text

ブロックテーマとはということは？どういうこと？

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

ブロックテーマとは突然！国産ブロックテーマ 3選

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

Slide 56

Slide 56 text

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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