Twenty Twenty-Twoは、ブロックエディタを活用するために作られた公式テーマだと思われますが、公式によるチュートリアルが少なすぎてビビる。
唯一私に探すことができた公式情報には「WordPress 5.9で導入されたフルサイト編集機能を活用し、色、タイポグラフィ、サイト上のすべてのページのレイアウトをビジョンに合わせてカスタマイズできます。」と書いてありますが、ちょっとコツがいる。
個人的な一番の不満は、開発環境で設定した内容を本番サイトに実装する際にあちこちに散逸した編集内容が管理画面から見えにくく、ファイルを探すのが面倒だったことかな。
逆にいうと、とても簡単にサイトの見た目を変えられるので、本番サイトしか存在しない場合には、便利かもね。
個人的に一番気に入ったのは、以前のテーマと違って、ビジターが見るページと投稿編集ページのデザインが連動していて、ページの見た目を変更した後、投稿編集ページでも同じ見た目になるように調整する必要がなくなったこと。
それでは、編集履歴へ。
ワードプレスの更新
- サイトネットワークで、ワードプレスをバージョン5.9.1へ更新
- プラグインの更新
- テーマの更新
Twenty Twenty-Twoを使うには、バージョン5.9以上じゃないとダメっぽい。
Twenty Twenty-Twoのインストール・子テーマ作成
テーマ → 新規追加 → インストール
インストールは通常通りだったけど、子テーマのfunctions.phpを作る際に、「get_template_directory()」系のコードじゃないと動かなかったので、以下の記事を更新しておきました。
関連記事「ワードプレス、「子テーマ」作成」
theme.jsonファイルの編集
テーマサポートとCSS定義の一部がTheme.jsonファイルでの制御に変わっていて、ちょっと混乱しました。
以前はfunctions.phpでテーマサポートの設定を変更したり、追記したりしていましたが…
子テーマにも「theme.json」ファイルを作って、必要な分だけ書き換えるのが早いっぽい。しかし、それでは親テーマの記述の前後関係を兼ね合いで、上手く上書きできない部分があったので、面倒くさくなって、親テーマのtheme.jsonファイルを丸ごとコピーして書き換えました。
理論的には、親テーマの「theme.json」ファイルも子テーマのfunctions.phpで追記できるハズなんですが、まだ情報が多くないので、冒険するのはやめときます。
便利なのか、不便なのかわかりません。
テーマを自作するというか、開発者にはいいかもしれませんが、そうでない上書きしたいだけの人にはイマイチかも。
あと、theme.jsonファイルのバージョンは、ワードプレス5.8がversion1で、ワードプレス5.9がversion2らしいので、ワードプレスをアプデした時にちょっと気をつけておかないと反映されなくなっちゃいそう。
テンプレートがphpからhtmlへ変わっていた
パーツとテンプレートが別のフォルダに入るようになって、すっきりしてます。うん。
もともとphpで書かれていたこれらのファイルがhtmlになっていました。こっちの方が処理が軽いんでしょうかね?
テーマサポートはjsonで、ブロックパターンはphp。
ふぅん。
プリセットのバリアント設定値が分かりにくい…
「var(–wp–custom–typography–line-height–normal)」みたいなプリセットの変数の設定値を探すのに結構苦労しました。一か所に寄せていてほしい。
変数を活用したテーマ自体は好みなんですが、あちこちに散らばっていると不便だよね…
参考：「グローバル設定とスタイル (theme.json)」
以下、その他のこまごまとしたカスタマイズ。
独立記事にするかもしれず、しないかもしれず…
Twenty Twenty-Twoのヘッダー
ブロックエディターテーマは、確かに簡単にブロックを動かして、上下左右に移動できたり、表示の幅設定を変更できるので、便利！
ブロックごとに文字の大きさ、色、背景色を変えられるので、コードの知識がなくても簡単に好みの大きさに変えられるのも、フレンドリー。
記事リストは、タイトル部分に背景色を入れたり、アイキャッチ画像を横に移動したりが簡単でした。
ただし、タイトル部分の背景色は、アイキャッチ画像が入っている場合にパッディングが抜けてしまう仕様だったので、そこだけ追記しました。
.wp-block-post h2 {
padding: 1.25em 2.375em;
}
記事の個別ページのデザインはかなり微妙。
まず、記事のトップにでかでかと表示されるアイキャッチ画像は、邪魔なので削除しました。
.attachment-post-thumbnail {
display: none;
}
次に、本文の幅が狭すぎるので、子テーマにtheme.jsonファイルを作って、広げました。
"layout": {
"contentSize": "1000px",
"wideSize": "1000px"
}ひとまずこんなもんで。
