WPテーマ「Twenty Twenty-Two」を触ってみて

リリースを楽しみにしていたWordPress公式テーマ「2022年版:Twenty Twenty-Two」を2箇所に設定してみました。その感想などを。

Macローカルのテスト環境と別に、拙宅というか別宅というか旧宅にあたるブログも「Twenty Twenty-Two」に差し替えたので興味がある方は実際に触ってみてください。

フューチャーイメージもカスタム投稿も広告表示も何もない生の(キの)ブログ典型という感じなので、maximumなライブプレビュー参考にはなると思います。いやこの場合minimumなのだろうか? ・・・とりあえず半年以上はこのまま放置するだろう場所なのでリンクしました。

外観として、フロントページはシンプルなものでした。

前Twenty-Oneをはじめて見たときのドヨッとどよめいたようなインパクトはなかったですね。
初期設定では、テンプレートパーツのヘッダー(暗い、小)が充てられています。


Dark と Light でいいじゃない・・・と思いますが、Lightは存在しなくて、通常の「ヘッダー」を選ぶと昔ながらのサイト名と固定ページメニューだけが載った素っ気ないものになります。
フッターも同様、サイト名と「Proudly powered by WordPress」だけの旧来然としたもの。

ただこれ、旧来のテーマ・カスタマイザーとはまったく違うのが、WPテーマを自分で編集したことがある人はわかりますが、今までローカルにテーマをフォルダごとダウンロードして、夥しい数のPHPファイル群を見ながら、自分がモディファイしたい箇所を探すと大抵いきつく「template-parts」ディレクトリそのものなんですね。

誰もが「template-parts」をオンラインで触れる、PHPコードではなく、直観的に編集できるブロックエディタを使って。というのは、かなり色々なことへの敷居が下がってバリアフリーに近くなった感があります。


後日加筆

恐ろしく誤解を招くことを書いたかもと気づいたので後訂正。
テーマエディタの「テンプレートパーツ」で新規追加したものは「template-parts」ディレクトリに入るわけではありません。

「Twenty Twenty-Two」のファイル構成は従来テーマとは異なり「template-parts」フォルダに相当するのは「parts」
テンプレート群は「templates」に置かれtheme.jsonで管理されます。

ただ、まるで今までのテーマの「template-parts」をオンラインでさくさく作れるようなリーチの長さ・気軽さだね!と初見で誤解したその感想も、なまじ過去にテーマ・カスタマイズ経験があって頭の切り替えが出来ていない人(まず筆者)にありそうな誤解の一つの値として、この訂正加筆をして前の文章は消さずにおきます。

「Twenty Twenty-One」と「Twenty Twenty-Two」との差異、これぞ「刷新」なあれこれに驚きつつ、今日リアルな備忘録として書いているため関連の最新記事から読んでいただけると幸いです。


この「テンプレートパーツ」を一見したところで特に深く考えずに(あ、これはいいな)と認知したのは「実用性」

ちょうど今このサイトで使っているヘッダーの振り分けが、フロントページの「超でかいもの」と他ページの高さの低いもので、PHPファイル名もCSSクラス名も「header-Thin-白」や「header-Thin-黒」と名づけ、Thin=薄いですから、まんま [ ヘッダー:暗い・小 ] を地で行っていたユーザーがここにいたわけです。

少なくともフロントページとインディビジュアルページでヘッダーデザインを分けているコーポレートサイトは大多数としてあって、旧来は裏方(制作サイド)がそのようにしてくれたが、ファイル自体はどこにあるのか管理画面からは見つからないーが一般であったのが、テーマエディターから見られる仕様。
便利だし誰にでもわかりやすい。

従来のカスタマイザーでは、弄ってしまうとフロントも投稿もアーカイブページも一律に変更がかかるようなイメージがありました。(利用テーマの機能性によって差異はあると思いますが全体として自由度が低い印象は否めなかった)

で、(あ、これはいいな)と感じた理由は、いわゆる「サイト作成サイト」といったオンラインサービスがありますよね。
あれは一度試しに触れてみただけでも、ふだんテキストエディタでサイト制作サービスを生業としている私のような人間には苦行に近いものがあるんですが、広いアマチュア層の中にはきっと、このデフォルトテーマからテンプレートを作り足して組み合わせて、と積み上げ作業していく方が向いている人がいるだろうなと思ったわけです。

WordPressならクイックインストールのできるレンタルサーバーも多く、そこにこのテーマエディタが連結してくると、(わりと無敵じゃん?) みたいなのが初見の感想でありました。


さて最初のスクショに戻って、タイトルの「iMacまわりの経緯をまとめる。」と本文:抜粋文の長さを見比べると、タイトル幅の方が下にある段落幅より広いのがわかります。
さらに顕著なのが、次スクショの「ノートだってデュアルでいいぢゃない」

不自然なほど右側の余白がもったいないことになっているのは、実は本文表示のブロックは横2カラムになっているためです。


ブラウザのDeveloperツール的なものでみると、赤い枠の部分が「空」に見え
実際のテンプレート編集画面を撮ると右下の「空」カラムに [+] で何を配置するか選択するところです。


テンプレートですから、先頭POSTには愛猫ブリテンの写真を置いて、2番めPOSTには愛猫カイルスの写真を・・・と考えるところではなく!
このブロックは「ドコで何をしてるの」を知るのが先。つまりは役割を見ます。
ブロックエディタの上部メニューにある「リスト表示」を開き(control + option + O)

今いるブロックをまるっと選んだ結果が左の青い「クエリーループ」の中にいますよ〜の図。

右の青い「カラム」は、今度は逆に「リスト表示」の側である要素を選んだときに、「編集画面」はその位置へジャンプしてくれます。

つまり先程のーー右下の「空」カラムに [+] で何を配置するか選択するところーーへ戻ります。

たとえば。
右側のまだ「空」なカラムに [投稿のアイキャッチ画像] を選択して配置し、上部にある全幅の [投稿のアイキャッチ画像] のブロックを削除したら、

抜粋文の上に大きなアイキャッチがあるデザインからーー

ーー抜粋文の右側に抜粋文と同じくらいの高さのアイキャッチが配置されたデザインへ

早変わりするんでしょうね、このテンプレートが。素敵だわ。


いや、ダメだ。ブロックエディタの操作話になると愛の泥沼にはまるので、まずはテーマ本題へ戻りましょう。

WordPress5.9へアップデートした時点でテーマに関するメニューに変更はなく左の状態だったのが、Twenty Twenty-Twoを「有効」にすると右のように「エディター」のみに変化。

エディター(ベータ)を押下すると、いきなり「サイト編集画面」へ入ってしまうのが、若干わかりにくさでマイナス点。

左上にあるWロゴマークが「ナビゲーションを切り替え」ボタンになっているのでササッと押して、サイトテンプレートテンプレートパーツ を選択できるナビへ。

ローカルの開発環境には自分が置いたテンプレートパーツがあったので、まっさらデフォルトではない画面。作者がTwenty Twenty-Twoの初期ファイル↓4つと、作者sakuraiとなっている↑2つが一目瞭然でいいですね。

テンプレートの項目には、WordPressテーマを作成または編集したことがある人にはお馴染みのファイル群が並んでいます。

ここでも、作者がTwenty Twenty-Twoの初期ファイルと、サイト管理者が編集したことのある↑2つに、●印がついている・いないの差異がはっきり、わかりやすさが好感触。

↑画像は途中で切れていますが、他にも
ー 検索
ー ページ (大きなヘッダー)
ー 個別投稿
ー 404・・というファイルがあり

投稿画面では、デフォルトテンプレート以外に「空白」や「単一投稿(区切りなし)」が選べる仕様、固定ページでは、デフォルトテンプレート・空白・ページ(区切りなし)・ページ (大きなヘッダー)・・4選択肢がある。そういうファイル構成になっていました。

つまり「投稿」(エディターでは「単一投稿」と表現)と紐付けたテンプレートを増やせば、投稿時に選択肢が増え、「固定ページ」に紐付けられたテンプレートも自由に増減できるようになっている。

WordPressのブロックエディターハンドブックで

「フルサイト編集」(Full Site Editing、FSEとも) の大きな目標は、投稿やページだけでなくサイト内のあらゆる部分に対する、ブロックの使い慣れた体験と拡張性をもたらす機能の提供です。

https://ja.wordpress.org/team/handbook/block-editor/getting-started/full-site-editing/

と述べられているのは、ここで自由だ便利だ素敵だわ、と私が触感を並べているのが「機能の提供」の一端ということですね。

ほんの一部、触りしか書けませんが、
頭の先から爪先まで。ディティールまで直に触れられてはじめて、借り物じゃなく俺自身という要求に応じるための機能が、つまりFull Site Editing:フルサイト編集なのだな、と。

特に細部ではなく「中核」に触れるようになったテンプレートパーツ=「template-parts」は超おもしろみ。


先に続けて、テンプレートの「アーカイブ」を開いたところ。
スクショの切り取りで横中心はズレていますが、カレントファイル名「アーカイブ」がページ上中央にあり、メニューを開くと、ヘッダー・フッターなどインポートされている「テンプレートパーツ」の種類が確認できます。

ここは是非ともインポートされているヘッダーの要素を見たいので、また「リスト表示」(control + option + O)で「ヘッダー」を選択すると、編集画面に「置換」メニューが登場。

もちろんここで選べるのは「テンプレートパーツ」にあるのを見たデフォルトヘッダーや「ヘッダー (暗い、小)」「ヘッダー (暗い、大)」など。

いま設定中のテンプレートパーツは選択肢に入らないので、全3つあれば2つ表示されます。


置換」をめずらしく色付き再現したのは、ここが肝かなと思うところで。
「テンプレート」という使いまわすファイル:鋳型に対して、「テンプレートパーツ」は更にその中で何度も色々な場所:ファイルで再利用される部品。

テンプレートパーツは細部ではなく「中核」と書いたのは、WPのブロックエディタ:Gutenbergには元々、「テンプレートブロック」や「再利用ブロック」といった各投稿で共有・共用して使い回せる機能があったからです。

機能とは、あれば使えるもので、なければ?
運用でカバーする! とか切ない言い方になりますが、要は投稿Aで使ったものを別投稿Bで再利用したければコピー&ペーストして、文言だけ変える、画像だけ置き換える、といった人力作業。

ブロックエディタをフル活用していたユーザーはその涙ぐましい人力作業の繰り返しからは開放済みなので、言い換えれば「Post Editing」については自由で便利になっている。
それを今度はサイトのエディティングにまで拡張したのが、現ベータ版「テーマ・エディター」の目的「Full Site Editing」プロジェクトの目標なのだと、私は噛み砕いて理解しました。


最後に。

ディティールまで直に触れられてはじめて、借り物じゃなく俺自身と上で書きましたが、「テーマ」はやはり自作でないかぎり借り物の箱ではある、と考えると賃貸住宅がたとえてわかりやすい気がします。

同じマンションの隣部屋で同じ広さ間取りでも、置く家具は自分自身の持ち物。ここが「テンプレートパーツ」ですね。

同じ家具構成でもリアルな部屋は模様替えという配置変えを気やすくできる。
しかし既存テーマは色・トーンを変えるのは簡単でも、配置変えは力や知識がいるわぁ・・・という思いをした運営者は多かったかと。

リアルな部屋では、壁の色を変えるより家具の配置変えの方がよっぽど簡単なのに、WPテーマでは簡易な模様変えといえば、サイドバーのあるなしや、ウィジェットの配置場所をいくつか指定できるとか、制限の頭打ちになる天井は低く感じられたはず。

何故ならこれまでは大家さんの作ったテンプレートの中から、やはり大家さんが用意した色違いや少しだけ型違いの家具を使う、という方式がメインだったから。

これからフルサイトエディティングを楽しむコツとして、テンプレートを直接編集して書き換えてしまうより、テンプレートパーツを作り分けて、ドラえもんの四次元ポケットのように、表からは見えない場所に隠し持っておくのが吉。

パーツの「置換」はドラえもんがポケットから何か出すときの掛け声みたいなものですね!

そしてテンプレートパーツをつくるのも、さらにテンプレートを編集し慣れるにも、ふだんの投稿=いちばん小さな単位の編集画面で、ブロックエディタの「テンプレートブロック」や「再利用ブロック」を使い慣れ親しみ理解していれば、上位の作業へ進むのは楽になります。

先にバリアフリーという単語を使いましたが、従来のレイアウトを変更するにはHTMLの知識が多少なくてはならず、さらにそれをテーマに反映させるにはPHPコードを、たとえコピペであっても自分で開いて書き換えてアップロードする工程が必要でした。
そのすべてをブロックエディタでこなすということは、タイプの違う異質な作業に戸惑ったり煩わされることなく、緩やかな傾斜を自分のペースで着実に上っていけるような光景が目に浮かびます。


ところで過去にあった「テーマに関するメニュー」は何処へ? ・・・も書くつもりでしたが、長くなったので別記事に分けることにしました。(主にウィジェットについて)