Ishikawa WordPress Meetup Zoomオンライン参加者18名、WorpPress最新ブロックテーマ「Twenty Twenty-Three」を使って簡単なデザインカンプをもとにオリジナルにカスタマイズするデモンストレーションを行いました。
##デモンストレーション
ひろせさわみ
## 開催日時
2023年04月23日（日）14:00〜16:00
##開催形式
オンライン
## タイムテーブル
14:00 歓迎、主催者からのあいさつ（5分程度）
14:10 デモンストレーション（60分程度）
15:10 座談会および質問への回答（50分程度）
16:00 最後の挨拶
今回なぜデモをしようと思ったか?
2023年3月28日にWordPress 6.2がリリースされブロックテーマ「Twenty Twenty-Three」テーマエディタのベータの文字が消えました。
だからどうした?
いままでと何が違う?
触ってみたけど使い方がよくわからない
そんなふうに思った人たちにデモンストレーションを見てもらいブロックテーマを使ってみたいなと思ってもらいたかったので。
私もブロックエディタの使い勝手もよくわからないまま、ブロックテーマはその延長になるのでは？とひどく懸念していました。
なぜ使わないといけないの、と本気で考えてましたがブロックの便利さを知らなかっただけで実際にちゃんと向き合ってみたところ、「これは使える！」といった気持ちに変化しました。
今回デモンストレーションではWordPressの公式プラグイン「Create Block Theme」 を使っております。
このプラグインちょっとすごいです。
空のブランクを選択するとオリジナルのブロックテーマが簡単に作れてしまいます。
ぜひ使って自分だけのオリジナルテーマに挑戦してみてください。
議事録
目的：ブロックテーマ【Twenty Twenty Three】をカスタマイズする。
■デモンストレーション開始
code step（https://code-step.com/profile-menu/）を参考にしたサイトをTwenty Twenty Threeで作成する。
使用プラグイン：create block theme 1.8.1
新しいテーマ 空白のテーマ 子テーマを作成できる。
Googleフォントを簡単に取り込める。
xamppを使用
wordpress6.2
・子テーマの作成
Create Block Themeを使用して、子テーマの作成。
テーマ名 説明 必要な項目を入力して生成
作成した子テーマをダウンロードしてテーマの追加をする。
↓
有効化する
各テンプレートパーツのカスタマイズ
個別のページや個別のシングルページをテンプレートとして用意できる。
上部のリスト表示を押すことでヘッダーフッター等構成を確認しやすくなる。
リスト機能超便利
・ヘッダーのデザインをブロックエディターで編集
ヘッダー内の構成も表示されている。
ヘッダーロゴを変更。
メディアライブラリーにアップした画像に変更
・フッターのデザインをブロックエディターで編集
横並びから出してセンター寄せに変更する。
段落を押したうえで右上に設定を押してフォントサイズを変更する。
・ホームのデザインをブロックエディターで編集
クエリーループが便利
グループを解除する
パターンが色々と用意されている。
メディアライブラリからメイン用の画像を取り出し、
・aboutのセクション作成
リストでまとめたいものを選択肢、三点をクリック、グループ化を押すことで指定したものが一つのグループになる。
まとめたものをsectionにしたいので高度な設定でhtml要素でsectionに変更する。
横並び
横並びにしたい要素を二つ選択して横並びボタンをクリック
・Bicycleのセクション作成
aboutで作成したグループを複製する。
次のセクション用に編集し、複製して三つにする。
三つを選択肢、横並びにする。
・固定ページの作成
*元ページがないので想像で
テーマエディタ、テンプレートで固定ページ
コメント等はいらないので削除
・投稿用のページデザインを編集する
メイン画像のスタイルを治す
ホーム
↓
画像を選択
↓
三点
↓
追加CSS
クラスの追加をする。
↓
スタイルアクションから追加CSSに先ほど設定したクラスに対してCSSを追加
設定したクラスが親のfigureについてしまっているので 中のimgも指定する。
・create block themeを使ってGoogleフォントを追加
フォントを追加から追加フォントを選択
テーマ.jsonに保存される
■デモンストレーション終了
■質疑応答
Q：にゃんこさんからブロックテーマで子テーマを作成する理由が知りたいです。
A：親テーマを直に修正してしまうとアップデートがかかると消えてしまう可能性があるから。
Q：CSSの追加はどうするの？
A：functions.phpを作成して読み込ませてはどうか。
A:久野さん
親データの何かした場合アップデートの恩恵を受けられない場合がある。
style.cssはブロックの場合はコメントしか書かないというケースが多い。
外観からテーマ詳細を押すと出てくるテーマ情報に掲載される情報になる。
これからはstyle.cssやfunctions.phpなどのカスタマイズファイルで対応するのではなくWordPressの管理画面ですべて設定が完結する流れになっていくかもしれない。
バージョン6.3が8月に出る。
A:伊藤さん
Function.phpに代わりに、このプラグインはいかがでしょう？
Code Snippets
https://ja.wordpress.org/plugins/code-snippets/
Q：瑞樹さん
レスポンシブ対応はどのようにすればいいですか？
A：広瀬さん
テーマごとによってブレークポイントが用意されている。
デモではstyle.cssを弄っている
A：久野さん
個人的にはブレイクポイントを使わない流れになっていくのかなと思いますね。
あそこにはカラムブロック使うといいですよ
アイキャッチに関してはパネルのとことに高さパネルの指定が出来るのでvhにするなどで対応できるのではないか。
ブロックとクラシックが平行する時期がしばらく続くと思う。クラシックも勉強したほうがいい
https://github.com/Olein-jp/cormorant/blob/main/theme.json#L402
いちばんやさしいワードプレスの教本がおすすめ
https://amzn.to/3H7fYDW
久野さん：
こんなポッドキャストをやっております。WordPress な情報を簡単にキャッチしたいかたはどうぞ！
Q：中谷さん
固定ページ単体でもできるのか？
A:（ひろせさん）
テンプレートでカスタムテンプレートを使うとかで対応する。
Q：中谷さん
ブロックテーマのオリジナルテーマを作りたいがおすすめの情報はあるか？
ブロックは既存のテーマをカスタマイズしていったほうがいいならそれでもいい。
A：久野さん
create block themeでTwenty Twenty Threeをカスタマイズしてあたかも自分が作ったテーマのように使うのもいい
ブロックテーマは更新が早いので大変
ハイブリッドテーマもあり。
ブロックテーマを取り入れている方はこの中でどれくらいいますか？（ひろせさん）
結果として参加者間では半々くらい
Full Site Editing With WordPress
https://fullsiteediting.com/
クラシックエディターは本来2021年に亡くなる予定だったが2024年に伸びた。
今後も伸びると思われる。
5月20日にオフライン会を予定。
13～17時を予定。
共同オーガナイザー所感
デモンストレーションを行うことでブロックテーマの使い方を知ってもらったと思う。
また、ブロックテーマに興味を持ってもらった印象があり、デモンストレーションをやってよかったなと思った。
これからどんどん使い勝手が良くなることと思うので、自分自身もブロックテーマを使っての制作を進めていきたいと思う。
デモンストレーションやワークショップを通じてブロックテーマで作った作品を披露したいとも思う。
Ishikawa WordPress Meetup5月開催します！！
■勉強会開催日時
2023年5月20日（土） 13:20～16:40
■勉強会会場
ITビジネスプラザ武蔵 研修室3
■勉強会定員
26名
■勉強会参加費
無料
■持ち物
デモを会場で行う方、発表する方、お悩み相談予定の方はパソコンをお持ちください。
当日オフ会もあるよ♪