あまりにも..でちょっとびっくりするTwenty Twenty-Two(TT2)テーマの初期テンプレート。

どう手をつけたらいいか分からないから、別の有料や無料のテーマへ..と早速挫折する前に、一度テンプレートを触ってみませんか?

本ページは、このサイトを通じて実際に私が行っているTT2テーマのテンプレートのカスタマイズ方法を、できるだけ詳しくわかりやすく紹介し、一緒にTT2を盛り上げていければという思いで作成した勝手にマニュアルです。

さっぱり分からない..という方から、こんな時どうしたらいいの?と試行錯誤されている方の一助になれば幸いです。

本ページはこれで完結というわけではなく、次にご覧になる方へさらに分かりやすい情報をお届けするためのページにしたいと考えていますので、感想も含めコメントへの協力をお願いします。

テンプレートカスタマイズのツボどころ

戻し方(リセット)方法を知ってれば怖くない

TT2をはじめとするブロックテーマは、こんな順番でテンプレート(パーツ)を読み込んでいます。

  1. 有効化しているテーマ(子テーマ)でカスタマイズして保存しているテンプレート(パーツ)があればそれを使う
  2. 1がなければ有効化しているテーマ(子テーマ)のテンプレート(パーツ)を使う
  3. 子テーマで2がなければ親テーマのテンプレート(パーツ)を使う

つまりテーマエディターを開いて1度でも何かの変更をして保存したものがあればそれが最優先ということになるんです。

ただ、それを破棄して元に戻したい..ということも多いはず。

そんな時は、簡単に元の状態にリセットできます。

リセット方法を知っていれば、いくらでも強気にカスタマイズできますね。

リセットの方法は親テーマでも子テーマでも同じ、「外観」→「エディター」を開いた後に、テンプレートまたはテンプレートパーツの一覧を開き、各テンプレートの三点リーダー(点3つ)をクリックして「カスタマイズをクリア」すれば元の状態に戻せます。

TT2テンプレート・テンプレートパーツのカスタマイズ方法、バグ?と思われること、いざというときのリセット方法など|Twenty Twenty-Two (TT2)のカスタマイズ情報

また、子テーマを使用している場合には、リセット操作では以下の順でテンプレート(パーツ)が元に戻されます。

  1. 子テーマに同一のテンプレート(パーツ)があればそれに戻す
  2. 子テーマに同じテンプレート(パーツ)がなければ、親テーマにある同一のテンプレートに戻す

これを応用すると、子テーマにあらかじめある程度完成した形のテンプレート(パーツ)を置いておけば、そこまで戻すといったこともできるわけです。

具体的には、いずれかのテンプレートやパーツがある程度完成した時点で、以下のようにしておけば、そこまで戻す準備ができます。

  1. 子テーマのバックアップを取る
  2. バックアップした子テーマを解凍する
  3. 解凍した子テーマの中の「templates」「parts」フォルダをサイトの子テーマフォルダ内へアップロードする

子テーマのバックアップはテーマエディターのどれかのテンプレート(パーツ)を開いた状態で、画面右上の三点リーダー(点3つ)をクリックして、エクスポートをクリックするだけですから簡単です。

繰り返しになりますが、まずはご自身のサイトで少しカスタマイズした段階で、バックアップやリストア(元に戻す)作業を試験的に行って、いざというときは元に戻せばいい!というのを身に着けましょう。

既存のテンプレートやパーツは内容を一度削除したほうが作りやすい

TT2の標準で作られている各種のテンプレートは、シンプルではあるものの、各所にグループが作られていたりして、どこをどう触っているのか迷子になることがあります。

基本的に、サイトの横幅は、グローバル設定(テーマエディター右上の白黒半分の〇アイコン)で指定したもの、または、theme.jsonで指定した幅になるようになっています(これが基礎となります)。

そして、テンプレート内は個別コンテンツであれば、ヘッダー、フッターと、ブロック一覧のテーマカテゴリーにある「アイキャッチ画像」「投稿タイトル」「投稿コンテンツ」などを入れていけば基本出来上がります。

また、一覧系のテンプレートは基本的にクエリーループブロックを使いますので、それさえわかっていれば、全部のブロックを一旦削除しても(というか一旦真っ新にした方が)簡単にテンプレートを作れます。

もし失敗しても、前項のリセット方法を知っていれば大丈夫ですネ!

テンプレートやパーツ作りで躓きやすいところと作成のコツ

ここでは、いざテンプレートやテンプレートパーツを作ってみたけれど、ここがよく分からない、ここを何とかしたいというようなことを、経験を踏まえて挙げていきます。

幅を指定したはずが投稿や固定ページの編集画面に反映されないときの対処

私自身、TT2のテンプレートを触っていて、結構悩んだ部分です。

投稿や固定ページの編集画面に影響があるのは、単一やページテンプレートの「投稿コンテンツ」ブロックの部分。

このブロックには幅の指定があるので、そこで幅を指定すればきちんと投稿・固定ページ編集画面にも反映されます(一旦画面が表示されてからグイっという感じで幅が変わるので、少し待つ必要があるかも..)。

幅の指定は、「投稿コンテンツ」ブロックを開き、ブロックコントロールパネル(⚙マークをクリックして出てくるサイドバー)の「コンテント幅を使用するインナーブロック」をONにして、幅を実数で指示すると適用されます。

もしも適用されないときは、ひょっとするとグループ化された中に「投稿コンテンツ」ブロックが入っていて、グループの幅設定が引っかかっている可能性が高いので、一旦現在挿入されている「投稿コンテンツ」ブロックを削除した後、改めてヘッダー下などグループになっていないフリーな場所へ挿入して試すとうまくいくことが多い。

レイアウト幅の指定がないブロックはグループ化しよう

例えば「投稿のタイトル」や「投稿のアイキャッチ画像」といった、ブロックそのものに幅指定のないものはグループに入れて、グループとして幅を指定する。

逆にグループ化しないと、プリセットされた幅(幅広が指定されるっぽい)になってしまうので注意。

レイアウト幅指定のあるブロックはグループ化しない方が無難かも

逆に、「投稿コンテンツブロック」などの幅指定ができるブロックについては、グループの中に入れてしまうと、グループ-投稿コンテンツブロックという2重の幅指定ができるようになってしまい混乱するので、外に出しておいた方が管理しやすい。

グループ化されているかどうかはパッと見で判別しにくいので、エディター上部のブロックリスト(三のアイコン)をクリックして一覧表示させて確認するか、以下のスタイルを管理画面側のスタイルに追加すればグループ化している部分をオレンジの枠で囲めますので、問題はある程度解消できます(管理画面のスタイル適用の方法については割愛します)。

.wp-block-group {
    border: 2px solid #e15151;
}

共通して使うものはテンプレートパーツで作ってテンプレートへ挿入する

「ヘッダー」「フッター」をはじめ、一覧で使うクエリーループ、個別コンテンツで使う本文、次項で解説するサイドバー部分は、いろいろなテンプレートで使いまわす機会があり、かつ、一括して変更できた方が便利です。

従ってテンプレートは、背景やレイアウトを行ったところへテンプレートパーツを貼り付けたものと考えるとスマートにテーマ作成が進むと思います。

サイドバーありのテンプレートを作りたいときは

ブロックテーマには、従来のテーマ(クラシックテーマ)のように「ここが本文ですよ」「ここがサイドバーですよ」という決まりはありません。真っ白な画面にヘッダー、フッター、本文、サイドバーなどを自由に配置することができるのが魅力のテーマです。

従って、サイドバー様のものを作成する場合には、前項で説明したテンプレートパーツとしてサイドバー用のパーツを作成しておきましょう。

そしてテンプレートでは、カラムブロックを使って左右分割し、右または左にサイドバー用のパーツを、反対側に本文や一覧用のパーツ(またはブロック類)を入れれば簡単に完成できます。

背景色や背景画像を入れたいときは

背景画像や背景色は、従来のようにCSSでも実装可能ですが、表示画面(フロントエンド)と管理画面(テーマエディター)、そして投稿編集画面の3つにきちんと適用するのがちょっと大変です。以下参考ページです。

テーマエディター上でできる。もっとも簡単な方法は、真っ新のテンプレートにまずカバーブロックを入れることです。カバーブロックには全幅という画面幅いっぱにするオプションがありますし、色も画像も使えます。

カバーブロックを設置した上に、例えばサイドバーありであればカラムブロックを追加して、本文とサイドバーを入れるようにすれば完成です。

カバーブロックを使う方法の面倒な点はすべてのテンプレートにカバーブロックを入れ、それぞれに色や画像を設定しなければならないことです。それを一括でとお考えなら、上記リンク先ページの方法で実装すると後からの管理が楽になると思います

TT2のバグ?と思われること

エラーのあるブロックがあるテンプレートは増殖する?

テンプレート(最初からあるものも追加したものも)でエラーのあるブロックがあることに気づかずに何かの編集をして保存すると、同じ名前のテンプレートがどんどん作られていき、結局どのテンプレートが生きているのか分からなくなるようです(私の場合、標準のページテンプレートで大量増殖しました..)。

増殖してしまったテンプレートは、テーマのデフォルトテンプレート(単一やページなど)の場合、作者がTwenty Twenty-Twoになってしまって削除できないので、一旦編集画面を開いて何か(段落に適当な文字など)を挿入して保存すると、管理ユーザーが作者になり、削除できるようになりました。

投稿・固定ページ編集画面上のタイトル欄は幅が変わらない

テーマ公式にもそれらしいトピックスがあったのですが、そんなはずは..的な感じで一蹴されていました(笑)。

でも冒頭の方で書いたように、「投稿タイトル」のブロック自体に幅の指定がないのだから、それは当たり前でしょうけど、そこを何とか..って感じです。

幅指定がない=特に何かのCSSクラスが付帯するというわけでもないので、幅広だったら..といった条件の指定は難しいと思います。

他のブロックテーマはどうか不明ですが、投稿・固定ページ編集画面のタイトル欄の幅はそのままで使用するか、最初からCSSで幅を広げておくかの2択となりそうです。


いかがでしたか?画像が少なく文章ばかりではありましたが、参考になれば幸いです。

TT2は本当に自由にページレイアウトができて便利なテーマだと私は思っています。

冒頭でも書きましたが、より参考になるページにしたいと考えておりますので、感想や誤りの訂正などコメントいただけるとありがたいです。