Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ブロックテーマでどう変わる?新しいWordPressのWebサイト制作
Search
tbshiki
May 27, 2023
Technology
0
930
ブロックテーマでどう変わる?新しいWordPressのWebサイト制作
【大阪】Kansai WordPress Meetup@大阪『サイトの作り方 3種おさらい&祝☆誕生20周年』
tbshiki
May 27, 2023
Tweet
Share
More Decks by tbshiki
See All by tbshiki
ブロックテーマをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2025 01 25
tbshiki
1
640
もくもく会? / mokumokukai?
tbshiki
0
570
ホームページをつくるまで / Before creating a website
tbshiki
0
280
Other Decks in Technology
See All in Technology
いま注目のAIエージェントを作ってみよう
supermarimobros
0
280
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
110
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
5
1.6k
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
380
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
240
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
220
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
240
MCPで変わる Amebaデザインシステム「Spindle」の開発
spindle
PRO
3
3.3k
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
410
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
250
20250913_JAWS_sysad_kobe
takuyay0ne
2
220
Practical Agentic AI in Software Engineering
uzyn
0
110
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
39k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
A designer walks into a library…
pauljervisheath
207
24k
Facilitating Awesome Meetings
lara
55
6.5k
It's Worth the Effort
3n
187
28k
Bash Introduction
62gerente
615
210k
Faster Mobile Websites
deanohume
309
31k
The World Runs on Bad Software
bkeepers
PRO
70
11k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Transcript
ブロックテーマでどう変わる? 新しいWordPressのWebサイト制作 2023/05/27 つぶ(佐敷 亮太) Kansai WordPress Meetup@大阪 『サイトの作り方 3種おさらい&祝☆誕生20周年』
None
㊗WordPress 20周年 おめでとうございます🎉
SA式 sashiki TB式 tbshiki つぶ式 つぶ 昔書いていたブログの名前が「SA式」 2016年に始めたブログが「TB式」 TB式は呼びにくいと「つぶ」になりました 好きなWordPressのバージョンは5.2です。
つぶ 佐敷 亮太 りょうた さしき リユースとWeb制作と ECとバックオフィス効率化と デザイン思考とラーメンが好き
ブロックエディターを 使ったことがある人ー?
ブロックテーマを 使ったことがある人ー?
ブロックエディターとは ブロックテーマとは ブロックエディター・ブロックテーマで メリットがありそうな人
ブロックエディターとは ブロックテーマとは ブロックエディター・ブロックテーマで メリットがありそうな人
ブロックエディターとは 2018年12月6日にリリースされた WordPress 5.0 “Bebo” から搭載された 新しいエディターです
None
None
ブロックエディターとは ブロックを積み重ねるようにして コンテンツをつくっていくエディター エディターとフロントエンド(公開側)の デザインが(ほぼ)一緒
None
ブロックエディターとは ブロックを積み重ねるようにして コンテンツをつくっていくエディター エディターとフロントエンド(公開側)の デザインが(ほぼ)一緒
None
ブロックエディターとは ブロックで作ったレイアウトを使い回すことができる 「再利用ブロック」が最高 Post Snippetsなどのスニペット系プラグインがいらなくなるかも
ブロックで作ったレイアウトを使い回すことができる 「再利用ブロック」が最高 Post Snippetsなどのスニペット系プラグインがいらなくなるかも ブロックエディターとは
ブロックエディターとは
ショートコードを作ることが減った ショートコードで囲むことがめちゃくちゃ減った [hogehoge] ……… [/hogehoge]みたいなやつ カスタムフィールドは使われなくなる って言われてたけど結構使う ブロックでレイアウトを作ってショートコードでカスタムフィールドを呼び出す なんてことができるので最高 ブロックエディターとは
ショートコードを作ることが減った ショートコードで囲むことがめちゃくちゃ減った [hogehoge] ……… [/hogehoge]みたいなやつ カスタムフィールドは使われなくなる って言われてたけど結構使う ブロックでレイアウトを作ってショートコードでカスタムフィールドを呼び出す なんてことができるので最高 ブロックエディターとは
ブロックエディターとは クラシックブロックがあるので クラシックエディターから移行しやすい ここはブロックでレイアウトして、ここはクラシックブロックを入れる みたいなことができる TwitterやYouTubeなどはURL貼るだけで埋め込みができるから クラシックエディターだけを使うよりも効率があがるかも
ブロックエディターとは クラシックブロックがあるから クラシックエディターから移行がしやすい ここはブロックでレイアウトして、ここはクラシックブロックを入れる みたいなことができる TwitterとかYouTubeとかURL貼るだけで埋め込みができるから クラシックエディターだけを使うよりも効率があがるかも
ブロックエディターとは クラシックブロックがあるので クラシックエディターから移行しやすい ここはブロックでレイアウトして、ここはクラシックブロックを入れる みたいなことができる TwitterやYouTubeなどはURL貼るだけで埋め込みができるから クラシックエディターだけを使うよりも効率があがるかも
None
None
None
None
ブロックエディターとは ブロックエディターでもHTML編集できるんです!
ブロックエディターとは 2021年7月20日リリースの WordPress 5.8 から ウィジェットもブロックでレイアウトできるようになりました
ブロックエディターとは 2021年7月20日リリースの WordPress 5.8 から ウィジェットもブロックでレイアウトできるようになりました
ブロックエディターとは 有能!クエリーループブロック 特定のカテゴリやタグ、選択した固定ページのみを呼び出すことが可能に アイキャッチやカテゴリ、投稿日なども自由に設定可能 今人気!ブロックパターンを使うと ポチポチするだけでページができあがる https://ja.wordpress.org/patterns/ ブロックパターンディレクトリからコピペで実装可能!
ブロックエディターとは 突然! 好きなブロック 3選
左右で分割 カラムブロック 簡単に横並びレイアウト可能 レスポンシブレイアウトも おまかせ
背景を操れ カバーブロック シングルページやLPで大活躍
なんでもまとめろ グループブロック まとめてフォントサイズや フォントウェイトを変更可能 縦並び横並びもお手の物
ブロックエディターとは ブロックエディターを使ったことがないという方に朗報! 環境構築不要で今すぐブロックエディターを触ることができます https://wordpress.org/gutenberg/
ブロックエディターとは ブロックテーマとは ブロックエディター・ブロックテーマで メリットがありそうな人
ブロックテーマとは 2022年1月25日にリリースされた WordPress 5.9 “Joséphine Baker” に搭載された Full site editing(フルサイト編集)の主な機能の一つ
FSE対応テーマ ≒ ブロックテーマ?🤔
ブロックテーマとは ブロックエディターの機能が コンテンツ以外のレイアウトにも対応したテーマ ヘッダーやフッター、アーカイブページ、404ページまで 全てブロックで構築できるのが特徴
ブロックテーマとは ということは?どういうこと?
ブロックテーマとは ということは?どういうこと?
ブロックテーマとは つまりどういうこと?
ブロックテーマとは テーマのレイアウトにしばられることがなくなった メニューやウィジェット、カスタマイザーなどにしばられることがなくなった コンテンツ部分以外のカスタマイズの自由度があがった 細かなレイアウトまで ノーコードで構築できるようになった
出典 : https://ja.wordpress.org/team/handbook/theme-development/basics/template-hierarchy/
出典 : https://ja.wordpress.org/team/handbook/theme-development/basics/template-hierarchy/ →フロントエンドからの呼び出し テーマ作成の優先順位←
導入のハードルは少し高い 全ページのレイアウトを確認する手間がかかる WordPressのページ階層の知識やHTML・CSSの知識があるといいな ブロックテーマとは
導入のハードルは少し高い 全ページのレイアウトを確認する手間がかかる WordPressのページ階層の知識やHTML・CSSの知識があるといいな ブロックテーマとは 自由すぎる不自由\(^o^)/
ブロックテーマとは 子テーマなどでテーマテンプレートの上書きをしている環境 テーマのアップデートでレイアウトが崩れるかもしれないから 修正対応かもと不安になっていたのがなくなった🙌 テスト環境でテンプレートを作成・変更・検証したものを 本番環境の子テーマを上書きしてアップデートみたいなことができなくなった😿
ブロックテーマとは 突然! 国産ブロックテーマ 3選
unitone Snow Monkey開発者のキタジマさんが開発 Every Layoutにインスパイアされた レイアウト用のブロックが用意されている 素敵すぎるブロックテーマ まだメディアクエリ使ってんの?
X-T9 Lightningを開発している 株式会社ベクトル製のブロックテーマ 国産ビジネス向けテーマの 始祖ならではの安定性 Lightningの次の主力テーマですって
Cormorant オレインデザイン代表のオレインさんが開発 Cormorantを日本語にすると鵜らしいです 岐阜の長良川では鵜飼が有名とのこと 鵜飼のシーズンは5~10月
ブロックテーマとは ブロックテーマの可能性を一番感じるところ
ブロックテーマとは ヘッダー・フッター・メニュー・ウィジェット の中でロール(権限)で出し分けができること ログインしているユーザーに 別のナビゲーションメニューを表示させる なんてことが可能になります
ブロックテーマとは ヘッダー・フッター・メニュー・ウィジェット の中でロール(権限)で出し分けができること ログインしているユーザーに 別のナビゲーションメニューを表示させる なんてことが可能になります
ブロックテーマとは ヘッダー・フッター・メニュー・ウィジェット の中でロール(権限)で出し分けができること ログインしているユーザーに 別のナビゲーションメニューを表示させる なんてことが可能になります
ブロックエディターとは ブロックテーマとは ブロックエディター・ブロックテーマで メリットがありそうな人
ブロックエディター・ブロックテーマでメリットがありそうな人 タイトルの 新しいWordPressのWebサイト制作 ってなんやねん😡
ブロックエディター・ブロックテーマでメリットがありそうな人 「オリジナルテーマ制作」から 「ブロックテーマで構築」に 置き換わります
ブロックエディター・ブロックテーマでメリットがありそうな人 エディターとフロント側のレイアウトの差が減った レイアウト(パーツ)の使いまわしがしやすくなった コードを書く必要が無いので制作のハードルが下がる テンプレートも管理画面で編集可能
ブロックエディター・ブロックテーマでメリットがありそうな人 is 誰
ブロックエディター・ブロックテーマでメリットがありそうな人 デザインは得意だけど コーディングが苦手さん 紙・UI / UX・プロダクトデザイナー ヘッダーやフッターまで 自由にレイアウトできるので鬼に金棒
ブロックエディター・ブロックテーマでメリットがありそうな人 デザインは得意だけど コーディングが苦手さん 紙・UI / UX・プロダクトデザイナー ヘッダーやフッターまで 自由にレイアウトできるので鬼に金棒
ブロックエディター・ブロックテーマでメリットがありそうな人 コーディングは得意だけど プログラミングが苦手さん コーダー ブロックの使い回しやロールやPC/スマホなどの 条件による出し分けができるので キャンバスに自由にお絵かきしてください
ブロックエディター・ブロックテーマでメリットがありそうな人 コーディングは得意だけど プログラミングが苦手さん コーダー ブロックの使い回しやロールやPC/スマホなどの 条件による出し分けができるので キャンバスに自由にお絵かきしてください
ブロックエディター・ブロックテーマでメリットがありそうな人 エンジニアリングは得意だけど デザインが苦手さん エンジニア テーマがもつCSSが綺麗に装飾してくれます デザインに対しての苦手意識はとんでいけ~
ブロックエディター・ブロックテーマでメリットがありそうな人 エンジニアリングは得意だけど デザインが苦手さん エンジニア テーマがもつCSSが綺麗に装飾してくれます デザインに対しての苦手意識はとんでいけ~
ブロックエディター・ブロックテーマでメリットがありそうな人 is みんな
ブロックエディター・ブロックテーマでメリットがありそうな人 ブロックテーマを試したい方に朗報! 環境構築不要で今すぐブロックテーマを触ることができます (Twenty Twenty-Three , Skatepark , Pendant etc...) https://developer.wordpress.org/playground/demo/
ブロックエディター・ブロックテーマでメリットがありそうな人 ブロックテーマを使ったサイト制作 とっても楽しいのでしてみませんか?