Twenty Twenty-Two（標準ブロックテーマ）の使い方と考え方【ワードプレス】

すごいですね。ワードプレスさん。
ブロックテーマにちょっと感動しました。

今回はTwenty Twenty-Twoを用いて
ブロックテーマの魅力と使い方について書いていきます。
ご興味があればどうぞ。

能書き

ぶっちゃけブロックテーマは古参のユーザーにスパルタ気味です。
まず、Twenty Twenty-Twoは外観のところにメニューやウィジェットがありません。
これまでのクラシックテーマ（従来のテーマ）を使ってきた人達はこの時点で討ち死にします。

以前はウィジェットやメニューを決まった位置に置いて
後はCSSやPHPを弄って何とかするスタイルでした。

今回はエディター一択。
しかも正式リリースされてるのにベータ版。
ワードプレスサイドの強い意志と焦りを感じます。

エディター

しかしあまり否定的に受け取るものでもありません。
エディターの完成度はかなり高いと言えます。

ここからはエディターの考え方や使い方についてご説明します。

ブロックテーマにおける各要素の考え方

エディターは以下の3つの構成で考えます。
フルサイト編集におけるページの考え方です。

• サイト
• テンプレート
• テンプレートパーツ

この順で親子関係を持つので図にすると以下の通り。

それぞれテンプレートやテンプレートパーツの要素はブロックという単位で扱います。

テンプレートの使い方

基本的にはこのテンプレートを編集することでサイトが完成します。

• Blank
• インデックス
• Single Post(No Separators)
• 個別投稿
• Page(No Separators)
• 固定ページ
• 404
• アーカイブ
• Page(Large Header)
• ホーム
• 検索

以下のものを弄ればおよそ事足りると思います。

• インデックス
• 個別投稿
• 固定ページ
• 404
• アーカイブ
• ホーム
• 検索

こちらはどういう時にここに遷移するのかがまだ僕はわかっていません。
特に弄らなくてもさほど影響がないと思います。

• Blank
• Single Post(No Separators)
• Page(No Separators)
• Page(Large Header)

新規追加を押すことで

フロントページが追加され新規ボタンが消えます。
どうやらフロントページしか追加させる気はないようです。

尚、フロントページを追加する前はトップページにホームが使用されています。
トップページを真っ新な状態から弄りたい人や
デフォルトのトップページは残しておきたい人は新規追加のフロントページを使用します。

尚、弄ったテンプレートは以下のように青いマークがつきます。

編集したものを一切無かったことにしたい場合は縦三つの点から「カスタマイズをクリア」できます。

テンプレートパーツの使い方

テンプレートパーツの内容

では、テンプレートパーツです。
テンプレートパーツは以下の通りです。

• Header (Dark, large)
• Header (Dark, small)
• Footer
• Header

テンプレートパーツの使い方

実際にテンプレートを編集する際に再利用できるブロックです。
実際に見てみます。

テンプレート → フロントページ（ホームでも構いません）

＋を押します。

下の方にスクロールしてヘッダーを探します。

既存のものを選択を押します。

お好みのヘッダーを選択します。

追加されました。

階段の様なアイコンをクリックするとテンプレートパーツの構成を見る事ができます。

以上がテンプレートパーツの役割です。
簡単に言えば複数のパーツをまとめておいて再利用できるようにするものです。
フッターも同様ですのでお試しください。

テンプレートパーツを自作

テンプレートパーツ → 新規追加 → 名前を入力 → 一般 → 生成

突然黒い画面が登場します。闇落ち？ちょっと焦ります。

＋ボタンを押します。

お好みのものを配置していきます。
今回は以下のものを配置してみます。

• カラム
• カレンダー
• 最新のコメント
• カテゴリー

3つのカラムが出来上がりました。

＋を押します。

全てを表示

カレンダー

同じ要領で最新のコメントおよびカテゴリーを追加します。
こんな感じ。真っ新の環境ではあまり見栄えしませんね。ご愛敬。

保存を押します。

もう一回聞いてくるので、「くどいなぁ」と思いながら保存を押します。

フロントページに移動します。
ワードプレスのアイコン → テンプレート → フロントページ

＋を押します。

テンプレートパーツを選択します。

既存のものを選択

群を抜いてダサいのがいますが今回つくったテンプレートパーツです。
選択します。

追加されました。

納得いかない場所に挿入されたりした場合は階段のようなアイコンを押し
ツリーの要素をドラッグアンドドロップしたりして調整します。

パターン

ここまで自力でブロックを組み立てる方法を実践してきました。
そろそろ僕のセンスの無さに辟易している頃かもしれません。
しかし、プロの用意したハイセンスなものがあります。
これが思いのほか便利です。

分かりづらいのでフロントページを綺麗さっぱり消しています。
まずはこういう感じ。

＋を押します。

パターンを選択します。
既に心躍る感じのものが視界に入ってきます。

参照を押します。

かなりテンションが上がります。これがプロの実力か・・・。
ヘッダー→テキスト→ギャラリー→クエリ―→Footersとから一つずつお好きなものを選んでください。

こんな感じになりました。
何だかカッコいい。内容は意味不明なんですけど。

僕のような素人はパターンを色々挿入して
一部のブロックを変更していくという方法でつくってます。
結局僕のページのクオリティは当ブログを見て頂ければわかる程度のレベルですけれども。

まとめ

今回はTwenty Twenty-Twoの簡単な使い方と考え方についてまとめてみました。

ブロックテーマはブロックの配置なども細かく自分で設定できます。
言い換えると細かく自分で決めていかないといけません。

しかし高度なことをやるためには
これまでプログラミング能力ありきの部分もありました。
まだコードを書かなければならない部分も一部残っていますが
プログラミング能力にさほどアドバンテージがないようにも感じます。

賛否や好みは人それぞれですがブロックテーマはかなり強力です。
乗り換えはお早目に。

Twenty Twenty-Two（標準ブロックテーマ）の使い方と考え方【ワードプレス】

おわり