Twenty Twenty-Twoテーマでできることの検証サイト(デモサイト)の構築を開始しました

Twenty Twenty-Twoテーマでできることの検証サイト(デモサイト)の構築を開始しました

WordPressはバージョン5.5あたりから、ブロックエディタの拡充が進み、本格的にFSE(フルサイト編集)化へと舵を切りました。

その証拠に、インストール後のデフォルトテーマ(最初に有効化されるテーマ)が、Twenty Twenty-TwoというFSE用テーマになり、従来のテンプレート構造のテーマはクラシックテーマと呼ばれるようになりました。

私は10年近くWordPressを使ってサイトを作ったり管理したりする経験が邪魔をして、旧来のテーマに半ば執着しているのではないかと疑問を持ち、思い切ってFSEの世界へ飛び込んでみようと思いました。

そこで、現在のデフォルトテーマであるTwenty Twenty-Twoテーマのデモサイトを作り、どんなことができるのか?どんなところが旧来のクラシックテーマと違うのか?など、いろいろと発信していこうと思います。

Twenty Twenty-Twoテーマを使ったデモサイトはこちら

あくまでも私個人の研究心・好奇心を元にしたデモサイトですので、ご覧になった際にはめちゃくちゃになっていてとてもデモと呼べるものにはなっていないかもしれませんがご容赦ください。

ページ上部へ戻る▲

Twenty Twenty-Twoテーマ用の子テーマを配布します

クラシックテーマ同様、Twenty Twenty-Twoテーマも、いろいろな修正が行われ、随時更新されていきます。

ご存じかと思いますが、テーマの更新を行うと、そのテーマのファイル内へカスタマイズのために追加したり編集したりしたものがすべて上書きされ、元に戻ってしまうのは避けられません。

これを避けるためのWordPressの機能が子テーマです。子テーマは文字通り元のテーマの子供として動作し、

  • 基本的には親テーマ(元のテーマ)のプログラムを動かす
  • 子テーマ内で追加したものや編集したものを親テーマよりも優先して動かす

ことをします。頻繁に更新が行われるWordPressテーマでは、いわば必須の機能だと言えます。

いくらTwenty Twenty-TwoがFSE用のテーマとは言っても、何かの制御を行うためにfunctions.phpなどへコードを追加することはあるでしょうから、やはり子テーマを使うことは必要だと思います。

そこで、デモサイトでもまず最初に行ったのは、子テーマの制作とインストール・有効化です。

子テーマは必要だし、必須だとも思っているけど作り方が分からないという方のために、以下からダウンロードできるようにしておきますので、自由に使ってください。

10 ダウンロード

ダウンロード後は、クラシックテーマ同様、「外観」メニューから、テーマのアップロードを選択し、ダウンロードした子テーマをアップロードインストール、有効化します

上記で配布する子テーマについては、以下の機能を持つファイルが実装されています。

  • スタイルを定義するためのstyle.css
  • カスタムプログラムを実行するためのfunctions.php
  • カスタムスクリプトを実行するためのchild-script.js
  • ヘッダータグ内へアクセス解析タグなどを挿入するinsert-header.php
  • フッタータグ内へアクセス解析タグなどを挿入するinsert-footer.php
  • 管理画面内へデザインを適用するadmin-style.css
  • 編集画面へデザインを適用するeditor-style.css
  • FSEテーマの規定動作を指示するtheme.json

また、現在ダウンロードできるバージョン1.1では以下の機能を追加しました。

  • add-content/parts01に記述した内容を「parts01」ショートコードで出力
  • add-content/parts02に記述した内容を「parts02」ショートコードで出力
  • add-content/parts03に記述した内容を「parts03」ショートコードで出力

Twenty Twenty-Twoでは、従来の「外観」メニューではなく、「ツール」メニューにある「テーマファイルエディタ」からテーマの編集ができます

テーマテンプレート内で使うもよし、投稿などの本文へ挿入して定型文(広告コードなど)を出力してもよしな機能です。

さらに、 2022年9月25日に更新したバージョン1.2では、閲覧画面側でもWordPress標準のダッシュアイコンを使用できるようにしました。


今後デモサイトがどうなっていくのかについては実際にご覧になっていただければと思います。

またTT2(Twenty Twenty-Two)テーマの使い方やカスタマイズ方法などについては、デモサイト上で公開していきますので、参考になれば幸いです。

著:清水 由規, 著:清水 久美子, 著:鈴木 力哉, 著:西岡 由美, 監修:星野 邦敏, 監修:吉田 裕介
¥2,948 (2022/09/22 08:50時点 | Amazon調べ)
著:Mana
¥2,200 (2022/09/22 08:50時点 | Amazon調べ)
Avatar photo

作者:

WordPress用テーマ「HABONE」の開発、プラグインやテーマの翻訳、WordPressの使い方やカスタマイズ方法などの情報を配信しています。

年齢:50代 趣味/園芸・ペット・卓球