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

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

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

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

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

• https://hidetaka.dev

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

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

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

Above the fold Point Section & CTA

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

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

コンテンツも OpenAI APIで生成

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

https://wordpress.org/ patterns/

• https://wordpress.org/

気になるブロックを探す

画面幅ごとの表示を確認

“Copy Pattern”をクリック

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

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

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

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

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

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

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

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

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

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

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

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

「提供側にまわる」

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

ブロックのHTMLを取得

<?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で
パターンとして登録

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

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

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

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

ウェブサイト生成ツール（サイトビルダー）

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

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

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

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