WordPressの標準テーマ Twenty Twenty-One とテーマの未来像

カテゴリー:

タグ:


 ワードプレスに初期設定で付いてくるテーマが、Twenty Twenty-One に切り替わりました。札幌Geezerもテストサイトを用いてカスタマイズして見ましたので、その使用感と、見えてきたテーマの将来像をまとめておきます。

◆ デザインを意識せざるを得ない、デザイン?

Twenty Twenty-One の紹介画像。
Twenty Twenty-One の紹介画像

 画像は、wordpress.org の Twenty Twenty-One のページに掲載されているものです(リンクになっています)。

 左側が固定ページのイメージで、右側は投稿のイメージ。なんだか、ものすごくアートですよね!

 背景色は初期設定になっていたのですが、インストールして有効化した直後に、札幌Geezerが受けた印象は、真っ白です。「さぁ、ここからはご自由にどうぞ!」と言われているようで、実はなんだかとても嬉しくなってしまいました。

 使われている画像が写真ではなくて絵画ということも影響しているのかも知れませんが、「ワードプレスは、アートな方々にも使っていただけますよ」というメッセージが込められている気がしてきます。

 右側の投稿イメージを観てみると、トップに画像がドーンときていて、本文の1行の幅は短めになっていることがわかりますよね。この感じだと、自分の作品集(ポートフォリオ)として使うのに、ピッタリとはまるのではないでしょうか?

 公式サイトには、スマホで眺めた時のイメージも、画像で紹介されています:

Twenty Twenty-One をスマホで表示した際のイメージ。パステル色を背景に数種類並べられている
Twenty Twenty-One スマホでの表示イメージ

 美しいです!最近は、手芸品などをECサイトで販売されている方の数が急増しているそうですが、ECサイトでは書き切れないことをサイトにして紹介する際に使うテーマとして、人気が出そうな気がします。

 最近は、ECサイトでもスマホからの利用が多いようですから、こうしたシンプルなデザインのほうがウケもよいように思います。

◆ Twenty Twenty-One は、使い方もシンプルそのもの

 下の画像は、Twenty Twenty-One のカスタマイズ画面(「外観」→「カスタマイズ」)から、メニュー部分を切り取ったものです。

Twenty Twenty-One テーマのカスタマイズ画面に表示されるメニュー項目部分のスクリーンショット
Twenty Twenty-One カスタマイズメニュー

 基本的な項目だけですから、ワードプレスに慣れている方であれば、使い方に困るということはなさそうです。

 Twenty Twenty との比較では、色の指定に『ダークモード』が加わったことと、『抜粋の設定』が加わったことです。

 抜粋の設定は、投稿ページ(投稿を新しいものから順に自動的に表示するページ)で、個々の投稿を表示する際に、本文の全文を表示するか、抜粋のみの表示にするかを選択する項目です。

 抜粋を選択すると、投稿編集画面の右側メニューの「抜粋」から入力した文章を表示してくれます。入力し忘れても本文の最初の部分のみを表示するようになっています。

 Twenty Twenty からの変更点としては、もう一点、フッターに配置されているウィジェットエリアがひとつにまとめられた形になっていることです。ひとつしかなくても、見る側の画面のサイズ次第で自動的に横に並べられますので、このほうが分かりやすいと思います。

 余談になりますが、テーマのカスタマイズ画面のメニュー項目は、テーマを選ぶ際に見るべき箇所のひとつです。トップページのレイアウトに工夫をしているテーマは、ここに設定項目があります。またコーディングしないで、何を変更できるのかをこのメニュー項目で知ることができます。

◆ Twenty Twenty-One は、ブロックエディターを使うことを想定している

テストサイトのトップページのスクリーンショット
テストサイトのトップ画面

 札幌Geezerは、標準テーマの使用感をテストサイト(こちら)を用いて毎回試しています。

 Twenty Twenty-One でも、サイトを作成してみました。

 投稿ページの表示については、テーマによってレイアウトが決まっていますので、トップページなどの「固定ページのレイアウトをどうするのか」が、みなさんも興味のあるところだと思います。

 でも、本文エリアを、どのような構成にしてレイアウトするかは、

Twenty Twenty-One の機能で決まるのではなくて、
初期設定の編集画面(ブロックエディター)をいかに使うかで決まる

ということをまずはご理解下さい。

 ブロックエディター(ワードプレスの現在の初期設定の編集画面)では、従来は、コーディングが出来なければ実現しなかったようなレイアウトが、ブロックを組み合わせるだけで出来るようになったことがたくさんあります。

 作成したテストサイトでも、ブロックを組み合わせることで、トップッページのコンテンツをレイアウトしていますので、参考にしてみて下さい。

 ここまでくると、

テーマをカスタマイズするというよりは、ページを自分好みにレイアウトする感覚

です。

◇ テーマに組み込まれたブロックパターンとは?

 ブロックパターンは、WordPress 5.5 に組み込まれていたものですが、Twenty Twenty-One ではそれを活用する形で、テーマとして(←ここが重要)ブロックパターンを提供しています。

 ブロックパターンとは、あらかじめ複数のブロックを組み合わせておいて、それをあたかもひとつのブロックのように扱うものです。

 複雑なブロックの組合せが最初から提供されていれば、ワードプレスでのページの作成が、ページビルダー(説明はこちら)のようになります。

 参考までに、Twenty Twenty-One が提供しているブロックパターンを使う手順を動画にしてみました(37秒)。

Twenty Twenty-One で提供されているブロックパターン

 いかがですか?とても簡単にできてしまいます。

 このように使う側としては、パターンを選んで差し込み画像やテキストを差し替えるだけでイメージ通りのレイアウトが出来上がってします。

 今後のテーマは、どのようなブロックパターンを提供しているかが、人気になるかどうかの分かれ道のひとつになりそうな予感です。

◇ 文字の大きさのカスタマイズ方法

 Twenty Twenty-One に限ったことではないのですが、最初にカスタマイズしたくなるのは、文字の大きさでしょう。日本語フォントだと、アルファベットのようにエレガントになりませんので、その変更だけはカスタマイズメニューの『追加css』を使うことになります。

 テストサイトで使用しているcssの一部を示しておきましたので、これをそのまま「追加css」の欄に貼り付けて試してみて下さい。

 あ、念のためにバックアップを取るか子テーマを作成してから作業することを、強くお勧めします。

.widget-title {
	font-size:2rem;
}

.entry-title {
	font-size:2.5rem;
}

.singular .entry-title {
	font-size:4.2rem;
}

h2 {
	font-size:2.2rem;
}

◇ 自分のサイトがクラシックエディターになっている場合

 Twenty Twenty-One に限らずですが、クラシックエディター(旧タイプの編集画面)を使っている場合には、本文部分を自由にレイアウトするのは、難しいと思います。

 現在の標準編集画面となっているブロックエディターと、クラシックエディターの切り替えは簡単ですし、慣れるまでは両者を切り替えながら使うこともできるようになっていますので、この機会に試してみることをお勧めします。

 切り替えの手順については、こちらの動画を参考にして下さい。ポイントを3点押さえるだけで、便利に使えます:

クラシックエディターとブロックエディターの切り替えは便利にできている

◆ Twenty Twenty-One の拡張版 “TT1 Blocks” は、ワードプレステーマの未来像!

 さて、これからワードプレスを使い始める方であれば、Twenty Twenty-One を取りあえずの選択とする理由が、実はもうひとつあります。

TT1 Blocks テーマのイメージ画像
開発中の新テーマ: TT1 Blocks

 それは、Twenty Twenty-One を拡張する形で、現在開発が進められているテーマ “TT1 Blocks(ティーティーワンブロック)” の存在です。

 ブロックの組合せで、サイトのページが構成できることになったとは言っても、それは、今のところは本文エリアだけの話です。

 でもこれが、サイトのタイトルやメニュー、フッター部分までも含めて、全てブロックを組み合わせることで出来上がってしまうとしたら、どうでしょう?

 例えば、メニューはトップ画像の中に収めるとか、メニュー項目の中に「申し込みボタン」を配置するとか、いろいろと便利なことになりそうな予感がしてきます。

 TT1 Block は、ページ全体をブロックで構成してしまいましょうというテーマになっています。すでにワードプレスの公式ライブラリーには登録済みですので、試しにインストールして使って見ることができるように、既になっています(あくまでテスト用です)。

◇ ワードプレスのテーマは、進化し続けている!

 このように、ページのレイアウトがブロックで構成されるようになったおかげで、ワードプレスのテーマも大きく変わり始めているのが現在だだと思います。

 もちろん、初心者にも使いやすくなっているワケで、コーディングのお勉強は、プロにお任せしておいてよさそうな雰囲気です。

初期画面に、ブロックのレイアウトが最初から表示されている部分のスクリーンショット
Artpop の初期画面

 で、蛇足ついでに、もうひとつ新しいパターンのテーマを紹介しておきましょう、”Artpop” です。

 このテーマは、インストール直後に、左の画像ように出来上がりのイメージが画面に表示されるようになっています。

 以前のワードプレスには、これがなかったために、初心者には分かりにくかったのですが、これなら安心です。

 このテーマもやはり、ブロックエディターの特徴を活かしたつくりになっているようです。

◆ Twenty Twenty-One を削除せずに残しておくべき理由

(2022年9月4日追記)

 Twenty Twenty-One は、カスタマイザー(「外観」→「カスタマイズ」)が提供されている最後の標準テーマになりそうです。現在提供されている Twenty Twenty-Two (詳しくはこちら)では、「テーマエディター」に変更になり、カスタマイザー機能は提供されていません。

 ワードプレスが提供している標準テーマは、プラグインなどの更新時などに、何か問題が生じたときに「まずはそれに切り替えて同じ現象が発生するかどうか」を確認するためのものでもあります。

 なので、カスタマイザー機能がついている他のテーマをお使いのみなさんは、Twenty Twenty-One は削除せずに、残しておきましょう。削除してしまった方は、インストールしておくことを強くお勧めします。

◆ まとめ

 というわけで、「アートの力って偉大だ」と改めて感じさせてくれた、Twenty Twenty-One 。今後はワードプレスは初めてという皆さんに、お勧めするテーマのひとつになりそうです。

 札幌Geezerの場合は特にそうかも知れませんが、投稿する記事は理屈っぽくてドライな感じになりがちです。添付する画像や配色に、もっと意識を向けたいと思った次第です。

 でもこうして、ワードプレスにハマっていくというよりは、その周辺のことを含めて、ハマっていくんですね。

 だからこそ面白いわけですから、これで、いいのだ♫♫

関連する他の投稿

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください