ブロックパターンを使って、 デモサイトやLPを作ってみた話

1.5K Views

September 23, 23

スライド概要

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

ブロックパターンを使って、 デモサイトやLPを作ってみた話 Kansai WordPress Meetup@大阪 2023/09

2.

今日言いたいこと • ブロックテーマで構築するWordPressサイトは、 サイトビルダーでの構築に近いワークフローになる • ブロックパターンの知識量が、 提案や構築時の手間や工数を左右する・・・かも? • OSSサイトビルダーとしてのWordPress

3.

Agenda • ブロックテーマ・ブロックパターンで ワークショップ用デモサイトを作った話 • ページを作ってみての感想 • OSSなウェブサイトビルダーとしてのWordPress

4.

HELLO! ✋ 岡本 秀高 (Hide) • Stripe Developer Advocate • WordCamp Kyoto 2017 • @hidetaka_dev • https://hidetaka.dev

5.

Agenda • ブロックテーマ・ブロックパターンで ワークショップ用デモサイトを作った話 • ページを作ってみての感想 • OSSなウェブサイトビルダーとしてのWordPress

6.

定期通販系サービス ・・・っぽい デモサイトを構築

7.

Stripeのノーコード系 ワークショップで利用

8.

Above the fold Point Section & CTA

9.

テーマはデフォルト プラグインも初期状態

10.

ブロックエディターで サイトを構築

11.

コンテンツも OpenAI APIで生成

12.

複雑なコンテンツ・レイアウトを 「自分で作らない」 という選択肢

13.

https://wordpress.org/ patterns/

14.

気になるブロックを探す

15.

画面幅ごとの表示を確認

16.

“Copy Pattern”をクリック

17.

ブロックエディタでペーストする

18.

ブロックの集合体なので、カスタマイズも可能

19.

ブロックパターンを利用して サイトのレイアウトやコンテンツを 手早く作成・カスタマイズできる

20.

TOPページは 「フロントページ テンプレート」を 作成して構築する

21.

「ホームページの表示」は ブロックテーマでは 利用しない

22.

様々なテンプレートが作成可能

23.

特定ページや項目限定のテンプレートも作れる

24.

テーマの中で、 ファイル名ベースで設定していたことは テンプレートで大体できるっぽい

25.

Agenda • ブロックテーマ・ブロックパターンで ワークショップ用デモサイトを作った話 • ページを作ってみての感想 • OSSなウェブサイトビルダーとしてのWordPress

26.

考えながら作る人や CSSが苦手な人にはありがたい

27.

ブロックパターンを前提としたデザイン提案の可能性

28.

「どれだけブロックパターンを知っているか?」

29.

「提供側にまわる」

30.

パターン(旧再利用ブロック)を 作成する

31.

ブロックのHTMLを取得

32.
[beta]
<?php
/*
Plugin Name: Quote Pattern Example
Plugin
*/
register_block_pattern(
'my-plugin/my-quote-pattern',
array(
'title'
=> __( 'Quote
with Avatar', 'my-plugin' ),
'categories' =>
array( 'text' ),
'description' => _x( 'A big
quote with an avatar".', 'Block pattern
description', 'my-plugin' ),
'content'
=> '<!-- wp:group
--><div class="wp-block-group"><div
class="wp-block-group__inner

register_block_patternで
パターンとして登録

33.

https://ja.wordpress.org/2021/04/03/so-you-want-to-make-block-patterns/

34.

パターンの引き出しを増やしつつ、 足りないパターンだけ自作する 自作したパターンは、 プラグイン化などによる配布も可能

35.

Agenda • ブロックテーマ・ブロックパターンで ワークショップ用デモサイトを作った話 • ページを作ってみての感想 • OSSなウェブサイトビルダーとしてのWordPress

36.

ウェブサイト生成ツール(サイトビルダー)

37.

サイトビルダー + CMS CMS + サイトビルダー

38.

サイト編集と記事執筆のUXが、ほとんど同じ

39.

記事の中に、 WP_Queryをブチ込める (やるかどうかは別として)

40.

まとめと称した感想 • 今まで以上にコピペでサイト構築ができるようになった • ブロックパターンの引き出しを増やすことで デモやPoC、サイトの小改修などがやりやすくなる • WPはこれから「サイトビルダー機能を持つCMS」化するかも?