Twenty Twenty-FourはWordPress 6.4の新しいデフォルトテーマ
目次
Twenty Twenty-Fourとは
Twenty Twenty-Fourは、WordPress 6.4と同時にリリースされたデフォルトテーマです。これまでのデフォルトテーマとは異なり、特定の用途に特化するのではなく、多様なウェブサイトに対応できる汎用性の高いブロックテーマとして設計されています。
主な特徴は以下の通りです。
主な特徴
- フルサイト編集 (Full Site Editing) に完全対応: WordPress 5.9以降で導入された「サイトエディタ」を最大限に活用し、ヘッダー、フッター、固定ページコンテンツなど、ウェブサイト全体のあらゆる要素をブロックで編集できます。これにより、細部にわたるデザインのカスタマイズが容易になります。
- 豊富なパターンとテンプレート: これまでのデフォルトテーマの中で最も多くのブロックパターンを搭載しています。ビジネスオーナー、フォトグラファーやアーティスト、ブロガーやライターなど、さまざまなユーザーのニーズに合わせたテンプレートやフルページデザインが用意されており、サイト構築のプロセスを大幅にスピードアップできます。
- 例: 「About」ページ、ポートフォリオ、ブログの投稿一覧、お問い合わせフォーム、チームメンバーの紹介、お客様の声など。
- スタイルバリエーション: 複数のスタイルバリエーションが用意されており、色やタイポグラフィを簡単に切り替えることができます。これにより、デザインの雰囲気を手軽に変更し、サイトのブランドイメージに合わせることが可能です。
- 柔軟なフォント設定: デフォルトでは「Cardo」（見出し）とシステムフォントのサンセリフ体（本文）が使用されていますが、「Inter」や「Jost」、「Instrument Sans」などの代替フォントも選択できます。また、ブラウザの表示領域に応じてフォントサイズが変化する「流体タイポグラフィ（Fluid typography）」も採用されています。
- アクセシビリティ対応: アクセシビリティに配慮した設計がされており、より多くのユーザーが利用しやすいウェブサイトを構築できます。
- レスポンシブデザイン: あらゆるデバイスで適切に表示されるよう、レスポンシブデザインに対応しています。
Twenty Twenty-Fourが想定する主なユーザー
Twenty Twenty-Fourは、特に以下の3つのタイプのユーザーを念頭に置いてデザインされています。
- 小規模ビジネスオーナー
- フォトグラファーやアーティスト
- ライターやブロガー
これらのユーザーが、専門知識がなくても簡単にプロフェッショナルなウェブサイトを構築できるよう、機能が充実しています。
Twenty Twenty-Fourは、サイトエディタとブロックパターンの強力な組み合わせにより、コーディングの知識がなくても、ドラッグ＆ドロップでサイトを構築できるというWordPressの新しい方向性を示すテーマと言えるでしょう。
Twenty Twenty-Fourの使い方
WordPress のデフォルトテーマである Twenty Twenty-Four は、WordPress 5.9 から導入された「サイトエディター（フルサイト編集）」機能を最大限に活用するように設計されたブロックテーマです。これにより、従来のテーマカスタマイザーに頼らず、サイト全体をブロックで編集・カスタマイズできます。
Twenty Twenty-Four の主な使い方と特徴は以下の通りです。
1. サイトエディター（フルサイト編集）によるカスタマイズ
Twenty Twenty-Four は、サイトのヘッダー、フッター、コンテンツエリアなど、すべての要素をブロックで編集できる「サイトエディター」を使用します。
- アクセス方法: WordPress ダッシュボードの「外観」→「エディター」からアクセスできます。
- テンプレートの編集: 「すべてのアーカイブ」「ブログホーム」「ページ」などのテンプレートを編集して、各ページのレイアウトをデザインできます。例えば、固定ページのテンプレートを「タイトルなし」や「サイドバー付き」などに変更することも可能です。
- ヘッダーとフッターの編集: ヘッダーにはロゴやサイトタイトル、ナビゲーションメニュー、フッターには著作権情報などをブロックとして配置し、直接編集できます。ナビゲーションメニューには、既存のページへのリンクや、検索ボックスなどのブロックを追加できます。
- テンプレートパーツの活用: ヘッダーやフッターなど、サイト内で繰り返し使用する部分を「テンプレートパーツ」として保存し、再利用することで効率的にサイトを構築できます。
2. ブロックパターンを活用したデザイン
Twenty Twenty-Four には、あらかじめデザインされた様々な「ブロックパターン」が豊富に用意されています。これらを活用することで、簡単に魅力的なページを作成できます。
- ページ作成時のパターン選択: 新しいページや投稿を作成する際に、白紙の状態から始めるのではなく、用意されたフルページパターン（例：About ページ、ブログホーム、ポートフォリオホームなど）を選択して挿入できます。
- 部分的なパターンの追加: 記事やページの途中に、特定の機能を持つブロックの組み合わせ（例：お問い合わせセクション、チームメンバー紹介、ギャラリーなど）をパターンとして挿入することも可能です。
- パターンの保存と再利用: 自分で作成したブロックの組み合わせを「パターン」として保存し、後で再利用することもできます。
3. スタイルバリエーションによる全体的なデザイン変更
Twenty Twenty-Four には、サイト全体の配色やフォントなどを一括で変更できる「スタイルバリエーション」が用意されています。
- スタイルの選択: サイトエディターの「スタイル」パネルから、プリセットされたスタイルバリエーション（例：Default、Onyx、Mint、Rustなど）を選択するだけで、サイトの見た目をガラッと変えることができます。
- 個別のカスタマイズ: スタイルバリエーションを選択した後でも、特定のブロックや要素の色、フォント、タイポグラフィなどを個別に調整することが可能です。Twenty Twenty-Four では、Inter や Cardo といったフォントがデフォルトで利用できます。
4. その他の特徴
- 柔軟性と汎用性: ビジネス、ポートフォリオ、ブログなど、様々なタイプのウェブサイトに対応できるように設計されています。
- レスポンシブ対応: あらゆるデバイスで適切に表示されるように設計されています。
- Fluid typography（流体タイポグラフィ）: ブラウザの表示領域に応じてフォントサイズが変化し、より柔軟な表示が可能です。
- ブロックバリエーション: リストのチェックマーク、ナビゲーションリンクの矢印、見出しのアスタリスクなど、特定のブロックにバリエーションが追加されています。
基本的な使い方フロー
- Twenty Twenty-Four を有効化する: WordPress ダッシュボードの「外観」→「テーマ」から Twenty Twenty-Four を有効化します。
- サイトエディターを開く: 「外観」→「エディター」をクリックしてサイトエディターに入ります。
- グローバルスタイルの設定: サイト全体のフォント、色、レイアウトなどを設定したい場合は、「スタイル」アイコンをクリックして、スタイルバリエーションを選択したり、個別の設定を調整したりします。
- テンプレートの編集: 「テンプレート」タブから、編集したいテンプレート（例：ページ、ブログホームなど）を選択し、ヘッダー、フッター、メインコンテンツなどをブロックで編集します。
- 新しいページや投稿の作成: 「固定ページ」または「投稿」で新規追加を行い、ブロックエディターでコンテンツを作成します。この際、フルページパターンを挿入してカスタマイズすることもできます。
- ブロックパターンの活用: 必要に応じて、ブロックインサーター（「+」ボタン）からブロックパターンを挿入します。
- 保存: 変更を保存するには、画面右上の「保存」ボタンをクリックします。
Twenty Twenty-Four は、WordPress のフルサイト編集機能を学ぶのに最適なテーマです。ブロックエディターに慣れることで、より自由にサイトをデザインできるようになるでしょう。
Twenty Twenty-Fourの注意点
WordPressのデフォルトテーマであるTwenty Twenty-Fourは、ブロックエディターに特化した「フルサイト編集」を前提に設計されており、多くの利点がある一方で、従来のWordPressのカスタマイズに慣れている方にとっては注意すべき点もあります。
以下に主な注意点を挙げます。
1. フルサイト編集への慣れが必要
- 従来のカスタマイザーとは異なる: Twenty Twenty-Fourは、サイト全体のデザインをブロックエディターで編集する「フルサイト編集」が中心です。従来のテーマカスタマイザー（外観 > カスタマイズ）では設定できない項目が多く、慣れるまでに時間がかかる可能性があります。
- ブロックエディターの理解: サイトの構造、ヘッダー、フッター、テンプレートなどをブロックとして捉え、ブロックエディターで編集していくことになります。ブロックの概念や操作に慣れることが重要です。
- テーマユニットテストデータとの相違: フルサイト編集は、既存のコンテンツをテーマに合うように調整するのではなく、テーマのテンプレートにコンテンツを流し込む形になります。既存サイトからの移行や、テーマユニットテストデータを使用する際に、表示崩れや意図しないレイアウトになる可能性があります。
2. 子テーマの作成・カスタマイズ方法の変化
- PHPファイルの直接編集は避ける: 従来のテーマのように
header.phpやfooter.phpなどのPHPファイルを直接編集してカスタマイズすることは推奨されません。テーマのアップデート時に変更が上書きされるリスクが高まります。 - テンプレートやテンプレートパーツの編集: 基本的には、フルサイト編集のサイトエディター内でテンプレートやテンプレートパーツを編集・作成することでカスタマイズを行います。
- functions.phpの役割: 特定の機能を追加したい場合は、子テーマの
functions.phpを利用することになりますが、デザインのカスタマイズは主にサイトエディターで行います。
3. プラグインとの相性
- フルサイト編集対応プラグインの確認: フルサイト編集に完全に対応していないプラグインを使用すると、予期せぬ表示崩れや機能不全が発生する可能性があります。使用したいプラグインがフルサイト編集に対応しているか確認が必要です。
- ブロックベースのプラグインが推奨: レイアウトやコンテンツの追加には、ブロックベースのプラグイン（例: Pattern Libraryを提供するプラグイン）がよりスムーズに連携できます。
4. SEO対策とパフォーマンス
- 初期設定の確認: 必要に応じて、サイトタイトル、キャッチフレーズ、ディスクリプションなどの初期設定が適切に行われているか確認が必要です。
- 画像の最適化: フルサイト編集は画像が多くなりがちなので、画像の最適化（圧縮、適切なサイズ設定）はパフォーマンス向上に不可欠です。
- キャッシュプラグインの活用: サイトの表示速度を向上させるために、キャッシュプラグインの導入を検討しましょう。
5. 既存サイトからの移行
- バックアップの重要性: テーマ変更前に必ずサイト全体のバックアップを取ってください。
- 段階的な移行: 既存サイトのデザインが大きく異なる場合は、テスト環境で十分に確認してから本番環境に適用することをおすすめします。
まとめ
Twenty Twenty-Fourは、今後のWordPressの主流となる「フルサイト編集」を体験・習得するための素晴らしいテーマです。しかし、従来のカスタマイズ方法に慣れていると戸惑うこともあるかもしれません。
これらの注意点を踏まえ、フルサイト編集の概念を理解し、ブロックエディターの操作に慣れることで、Twenty Twenty-Fourの持つ柔軟性と可能性を最大限に引き出すことができるでしょう。
