Twenty Twenty-Twoは2022年版のデフォルトテーマ

Twenty Twenty-Twoとは

WordPressテーマ Twenty Twenty-Twoは、WordPress 5.9で初めて導入されたデフォルトのブロックテーマです。これまでのWordPressテーマとは異なり、フルサイト編集 (Full Site Editing: FSE) の機能を最大限に活用できるように設計されています。

Twenty Twenty-Twoの主な特徴

Twenty Twenty-Twoが従来のテーマと一線を画す点は、その柔軟性とカスタマイズ性にあります。

• フルサイト編集への対応:
  • サイト全体のレイアウト（ヘッダー、フッター、サイドバーなど）をブロックエディターで直接編集できます。
  • WordPress 5.9で導入されたサイトエディターを通じて、サイトのあらゆる部分を視覚的にカスタマイズできます。
  • 「Customizer（カスタマイザー）」ではなく、サイトエディターでの編集が推奨されています。
• 豊富なブロックパターン:
  • あらかじめデザインされたブロックパターンが多数用意されており、数回のクリックでプロフェッショナルなレイアウトを作成できます。
  • ヘッダー、フッター、ページレイアウトなど、様々な用途に対応するパターンがあります。
• グローバルスタイル (Global Styles):
  • サイト全体の色、タイポグラフィ、レイアウトなどを一括で変更できる機能です。
  • 個々のブロックだけでなく、サイト全体のデザインを統一的に調整できます。
• テンプレートとテンプレートパーツ:
  • 投稿や固定ページのテンプレートを編集・作成・管理できます。
  • ヘッダーやフッターなどのテンプレートパーツもブロックとして編集可能です。
• 軽量で柔軟性のあるデザイン:
  • 鳥の多様性や汎用性からインスピレーションを得た、軽やかで力強いタイポグラフィと自然の色を取り入れたカラーパレットが特徴です。
  • 最小限のCSSを使用し、theme.jsonとグローバルスタイルによってスタイルが設定されています。
• カスタマイズの自由度:
  • 単一ページのサイトからブログ、ビジネスサイト、ポートフォリオまで、あらゆる種類のウェブサイトを独自のビジョンに合わせて作成できます。

Twenty Twenty-Twoが目指すもの

Twenty Twenty-Twoは、「誰もが真にユニークなウェブサイトを持つべきだ」という考えに基づいて開発されました。WordPressの進化に合わせて、ユーザーがコードを書くことなく、より直感的にサイトをデザイン・構築できるようにすることを目指しています。

このテーマは、WordPressのブロックエディターとフルサイト編集の可能性を探求するための理想的なテーマであり、WordPressの将来の方向性を示すものと言えるでしょう。

※最新の情報を公式ページで確認ください

Twenty Twenty-Twoの使い方

WordPress のデフォルトテーマである Twenty Twenty-Two は、フルサイト編集 (Full Site Editing, FSE) に対応した最初のテーマです。従来のテーマカスタマイザーではなく、ブロックエディターをベースとした新しい方法でサイト全体を編集します。

ここでは、Twenty Twenty-Two の基本的な使い方とカスタマイズのポイントを説明します。

1. フルサイト編集 (FSE) とは

Twenty Twenty-Two を使う上で最も重要なのが、この フルサイト編集 の概念です。

• 従来のカスタマイザーの代替: 以前のテーマにあった「カスタマイズ」メニューは Twenty Twenty-Two にはありません。サイト全体のデザインやレイアウトは、すべてブロックエディターを使って行います。
• サイト全体をブロックで構成: ヘッダー、フッター、投稿テンプレート、固定ページテンプレートなど、サイトのあらゆる要素がブロックとして扱われ、編集できます。
• グローバルスタイル: サイト全体のフォント、色、レイアウトなどのデザインをまとめて設定できます。

2. Twenty Twenty-Two の主要機能と使い方

2.1. エディター画面へのアクセス

WordPress 管理画面の 「外観」 にある 「エディター」 をクリックします。これが Twenty Twenty-Two のフルサイト編集画面です。

2.2. テンプレートの編集

エディター画面では、サイトの各部分に適用される テンプレート を編集できます。

• テンプレートの種類: ホームページ、単一投稿ページ、固定ページ、アーカイブページ、404ページなど、様々なテンプレートが用意されています。
• テンプレートの選択: エディター画面の上部にあるタイトル部分をクリックすると、編集したいテンプレートを選択できます。
• ブロックの追加・編集: 各テンプレートはブロックの集合体です。テキスト、画像、ボタン、ナビゲーション、投稿ループなどのブロックを追加、移動、削除してレイアウトを自由に作成できます。
• テンプレートパーツ: ヘッダーやフッターなど、複数のテンプレートで共通して使われる部分は「テンプレートパーツ」として独立して編集できます。これにより、一度変更すればすべての関連するテンプレートに反映されます。

2.3. グローバルスタイルのカスタマイズ

サイト全体の見た目を統一して変更できるのが グローバルスタイル です。

• スタイルパネルを開く: エディター画面の右上にある「スタイル」アイコン（円の半分が黒いアイコン、または歯車アイコン内にある）をクリックします。
• 主な設定項目:
  • タイポグラフィ: サイト全体や各ブロックのフォント、文字サイズ、行間などを設定します。
  • 色: サイトの背景色、テキスト色、リンク色、ブロックの背景色など、カラーパレットを定義し、適用できます。
  • レイアウト: コンテンツの幅や余白などを調整します。
• ブロックごとのスタイル: グローバルスタイルだけでなく、個々のブロックに対しても個別のスタイル設定を行うことができます。

2.4. ブロックパターンを活用する

Twenty Twenty-Two には、あらかじめデザインされた豊富な ブロックパターン が含まれています。

• パターンの挿入: ブロックを追加する際に「パターン」タブを選択すると、ヘッダー、フッター、ページレイアウト、ギャラリー、CTA（Call To Action）など、様々な目的のパターンを利用できます。
• 効率的なデザイン: これらのパターンを使うことで、ゼロからレイアウトを組む手間を省き、プロフェッショナルなデザインを素早く実現できます。

2.5. その他の重要な機能

• ナビゲーションブロック: サイトのメニューを作成・編集するには、「ナビゲーション」ブロックを使用します。
• クエリーループブロック: 投稿の一覧（ブログ記事のリストなど）を表示するには、「クエリーループ」ブロックを使います。これにより、表示する投稿の種類、数、並び順などを細かく制御できます。

3. Twenty Twenty-Two を使いこなすためのヒント

• まずは触ってみる: 実際にエディター画面を操作し、ブロックの追加や移動、スタイルの変更などを試してみるのが一番の近道です。
• リスト表示を活用する: 複雑なレイアウトを編集する際は、エディター画面の左上にある「リスト表示」アイコン（3本線のリストアイコン）をクリックすると、ブロックの階層構造が一目でわかり、目的のブロックを選択しやすくなります。
• Undo/Redo (元に戻す/やり直す): 編集を間違えても、エディター画面上部の矢印アイコンで簡単に元に戻したり、やり直したりできます。
• 公式ドキュメントやチュートリアルを活用する: WordPress.org の公式ドキュメントや、YouTube などで公開されているチュートリアル動画を見ると、より詳細な情報を得られます。
• 子テーマの検討 (上級者向け): もしテーマファイルを直接編集して大きなカスタマイズを行いたい場合は、将来のアップデートで変更が上書きされないように、子テーマ を作成することをおすすめします。ただし、フルサイト編集ではほとんどのカスタマイズがエディター内で完結するため、子テーマの必要性は以前より低くなっています。

Twenty Twenty-Two は、従来のWordPressテーマとは大きく異なるアプローチをとっていますが、慣れると非常に柔軟でパワフルなサイト構築ツールとなります。ぜひ色々と試して、あなただけのサイトを作り上げてください。

Twenty Twenty-Twoの注意点

このテーマはブロックテーマであり、従来のテーマとは異なる特性を持つため、いくつか留意すべき点があります。

以下に主な注意点を挙げます。

1. ブロックエディター（フルサイト編集）への習熟が必要

• 従来のテーマとの違い: Twenty Twenty-Twoは、WordPress 5.9で導入されたフルサイト編集（Full Site Editing – FSE）に対応したブロックテーマです。従来のテーマのようにカスタマイザーで細かく設定するのではなく、サイトのヘッダー、フッター、サイドバーなども含め、すべてブロックエディターで編集します。
• 学習曲線: ブロックエディターでのサイト全体の構築に慣れていない場合、最初は戸惑うかもしれません。ブロックの概念、パターン、テンプレート、スタイルなど、新しい用語や操作方法を学ぶ必要があります。
• 推奨: WordPressの公式ドキュメントや、FSEに関するチュートリアルなどで事前に学習しておくことをお勧めします。

2. カスタマイズの自由度と複雑さ

• 高い自由度: FSEの導入により、従来のテーマではPHPコードを編集する必要があった部分も、ブロックエディター上で視覚的に編集できるようになりました。これにより、デザインの自由度は格段に向上しています。
• どこを編集しているか意識する必要がある: テンプレート、テンプレートパーツ、投稿・固定ページなど、編集している対象がどこなのかを常に意識する必要があります。誤って共通のテンプレートを編集してしまうと、サイト全体に影響が出てしまう可能性があります。
• CSSの知識も役立つ場面がある: 基本的にはブロックエディターで完結しますが、さらに細かいデザイン調整を行いたい場合は、追加CSSの知識が役立つこともあります。

3. プラグインとの相性

• FSE対応プラグインの選択: すべてのプラグインがFSEに完全に対応しているわけではありません。特に、従来型のテーマを前提としたページビルダープラグインなどは、Twenty Twenty-Twoとの相性が悪い場合があります。
• 事前に確認: 導入したいプラグインがTwenty Twenty-TwoやFSEと互換性があるか、事前にプラグインのドキュメントやレビューを確認することをお勧めします。

4. パフォーマンス

• 最適化の余地: Twenty Twenty-Two自体は軽量に設計されていますが、ブロックを多用したり、画像などのアセットを最適化せずに使用したりすると、サイトの表示速度に影響が出る可能性があります。
• パフォーマンス最適化の意識: 画像の圧縮、キャッシュプラグインの利用など、一般的なWordPressのパフォーマンス最適化の知識は引き続き重要です。

5. 子テーマの作成

• カスタマイズの推奨: Twenty Twenty-Twoを直接編集するのではなく、子テーマを作成してカスタマイズを行うことを強くお勧めします。これにより、テーマのアップデート時にカスタマイズが上書きされてしまうのを防ぐことができます。
• 子テーマの作り方も従来とは異なる場合がある: ブロックテーマの子テーマの作り方やカスタマイズ方法は、従来のテーマとは少し異なる点があるため、関連情報を確認してください。

6. 情報の少なさ（リリース当初と比較して改善傾向）

• 日本語情報: リリース当初は、FSEやブロックテーマに関する日本語の情報が少なめでしたが、現在は徐々に増えてきています。しかし、まだ従来のテーマに比べると、解決策を見つけるのに時間がかかる場合があるかもしれません。
• 公式情報やコミュニティの活用: 公式ドキュメントやWordPressのフォーラム、コミュニティなどを積極的に活用することをお勧めします。

これらの注意点を理解した上でTwenty Twenty-Twoを使用することで、WordPressの新しい体験を最大限に活用できるでしょう。