WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

TT2(Twenty Twenty-Two)テーマのデモサイトを作りました

公開日:2022(令和4)年9月7日/最終更新日:

WordPress



WordPressのデフォルトテーマ(インストール時に有効化されているテーマ)のTT2(Twenty Twenty-Two)。

ブロックエディタの導入後に進んでいるテーマのFSE(フルサイト編集)を目的としたテーマで、従来のテーマ(いわゆるクラシックテーマ)を使っていた方も、初めてWordPressを使ってみようとした方も、いきなり不思議な形になっていてびっくりするのではないでしょうか?

私もずっとクラシックテーマにお世話になってますし、このサイトでも使っている【HABONE】というテーマの制作もし、配布もしている身として、正直「ブロックテーマなんていらない」なんて思っていました。

とはいえ、完全に食わず嫌い状態でずっと過ごすのもどうかと思いますし、WordPressは今後ブロックテーマ全盛の方向へ進むでしょうから、避けてはいられない。

ということで、TT2(Twenty Twenty-Two)テーマを使ったデモサイトを作ってみました。

このページの公開時(日時はタイトル下参照)の状況としては、右サイドバー付きのブログスタイルをひとまず作ってみようと何となく形にしたところです。

今後このデモサイトでは、デモを見ていただくという目的はもちろんのこと、TT2(Twenty Twenty-Two)テーマを使った際のサイトカスタマイズ方法や、便利な機能を追加する方法なども紹介していきます。

デモサイトはこちらからご覧いただけますので、参考にしていただけたら幸いです。


ただ、いくらその場でいろいろ変更できるといわれるフルサイト編集とはいえ、機能の追加や全体のデザイン調整などは必要でしょうし、何よりテーマの更新によって追加したコードなどが上書きされてしまうのは避けたいので、ひとまず子テーマを作成して有効化しています。

子テーマはこちらのページで配布していますので、よかったら使ってやってください。

クラシックテーマ同様、子テーマを有効化すると、親テーマへ行ったカスタマイズは継承されませんのでご注意ください→テンプレートの移行方法はこちらのページを参考にしてみてください。

子テーマへは、いろいろなカスタマイズに対応できるよう、以下の機能を入れています。

基本的には【HABONE】用の子テーマを流用しています

  1. スタイルコード追加用のstyle.css
  2. 管理画面へのスタイル追加用のadmin-style.css
  3. エディタへスタイルを適用させるためのeditor-style.css
  4. カスタマイズ用プログラムコードを追加するためのfunctions.php
  5. カスタムスクリプトを導入するためのchild-script.js
  6. ヘッダー内へコードを追加するためのheader-insert.php
  7. フッター内へコードを追加するためのfooter-insert.php

特に6や7あたりは、アクセス解析用コードやアドセンス自動広告用コードを入れるのに便利だと思います。

しばらく使って見た率直な感想

ブロックテーマは、テンプレートをブロックベースで作成できることが魅力のテーマです。

Twenty Twenty-Twoの標準テンプレートは、シングルカラムで巨大なアイキャッチ画像やタイトルが並ぶ形なので、ちょっと大味な感じが否めません。

そこで、ブロックを使ってカスタマイズ..となるのですが、ブロックの基本的な操作方法や、クエリーループの使い方、追加CSSとそれに付随するスタイルコードの追加など、ある程度ブロックエディタというものに慣れていなければ、ご自由にどうぞ!と言われても難しい部分があります。

実際、デモサイトで手探りでレイアウトの変更などを行っていますが、おおよそどのテーマでも共通するテンプレート(アーカイブ、インデックス、ブログ形式の場合はホーム)がバラバラになっていて、同じ設定を繰り返すことになるので、ちょっと面倒かなと感じます(実際デモサイトでも途中やりになっています)。

投稿や固定ページそのものを作ることを優先にするなら、ひとまず独自ブロックなどを持たないクラシックテーマで作り始めて、ある程度コンテンツが揃った段階でTwenty Twenty-Twoテーマを使うというのが妥当な順番かと思いますが、それだと本末転倒な感じもします..。

とはいえ、一度形にしてしまえば問題ありませんし、テンプレートのカスタマイズはブロックで行えるので、クラシックテーマのようにテンプレートを変更するのに苦労することもないですから、後々威力を発揮するテーマかも知れません。

デモサイトへ行ったTwenty Twenty-Twoテーマのカスタマイズ内容などは、できるだけ細かく記事にして公開していますので、よかったら参考にしてみてください。