Twenty Twenty-Four は、WordPress 6.4 に合わせて公開された公式のデフォルトテーマで、ブロックテーマとして作られています。従来の「カスタマイザー」ではなく、「外観」→「エディター」（サイトエディター）でヘッダーや色、フォント、ページのひな形まで編集するのが特徴です。この記事では、有効化してから最初に行う設定、スタイルバリエーションとパターンの使い方、テンプレートの編集、日本語サイトで気になるフォントの調整、変更を安全に管理する方法までを解説します。
Twenty Twenty-Fourの特徴
Twenty Twenty-Four は「ビジネス」「個人ブログ・執筆」「ポートフォリオ」の3つの用途を想定して作られており、それぞれに向いたパターン（あらかじめ組まれたブロックの組み合わせ）が多数同梱されています。パターンを並べるだけで、トップページやサービス紹介ページの形を短時間で作れます。
一方で、ブロックテーマであることから、クラシックテーマに慣れた人は戸惑う点もあります。
- 「外観」→「カスタマイズ」が基本的に表示されない（追加CSSなどは、サイトエディター側から編集する）
- ウィジェットやメニューの専用画面がなく、ヘッダー・フッターのブロックとして編集する
- 変更内容はテーマファイルではなくデータベースに保存される
なお、2026年10月現在、デフォルトテーマとしては後継の Twenty Twenty-Five も公開されています。Twenty Twenty-Four は引き続き WordPress.org から入手・更新でき、操作の考え方はほかのブロックテーマとも共通です。
インストールと有効化
WordPress 6.4 以降を新規にインストールした環境には、Twenty Twenty-Four が最初から入っていることがあります。入っていない場合は、「外観」→「テーマ」→「新規テーマを追加」で「Twenty Twenty-Four」を検索してインストールし、有効化します。WP-CLI なら次のとおりです。
wp theme install twentytwentyfour --activate既存サイトのテーマを切り替える場合は、事前にバックアップを取ってください。クラシックテーマから切り替えると、ウィジェットに置いていた内容やメニューの配置、テーマ独自のショートコードなどがそのままでは表示されません。本番サイトでは、ステージング環境で表示を確認してから切り替えるのが安全です。
サイトエディターの基本
有効化したら「外観」→「エディター」を開きます。左側に、ナビゲーション、スタイル、ページ、テンプレート、パターンといった項目が並びます（表記と並びは WordPress のバージョンで変わることがあります）。
- スタイル: サイト全体の色・文字・余白などを決める
- テンプレート: 投稿ページ、固定ページ、アーカイブなど、ページの種類ごとのひな形を編集する
- パターン: ヘッダー・フッターなどのテンプレートパーツや、自作のパターンを管理する
- ナビゲーション: ヘッダーなどに置くメニューの項目を管理する
最初は「スタイルで全体の雰囲気を決める→ヘッダーとフッターを整える→トップページを作る」の順に進めると、手戻りが少なく済みます。
スタイルで全体のデザインを決める
「スタイル」を開くと、Twenty Twenty-Four に用意されたスタイルバリエーションが一覧で表示されます。バリエーションは、配色とフォントの組み合わせをまとめて切り替える仕組みです。クリックするとサイト全体に反映され、気に入らなければ別のものに戻せます。
バリエーションを選んだあと、さらに細かく変えたい場合は、スタイルの編集画面から「タイポグラフィ」「色」「レイアウト」などを調整します。ここで変えた値はサイト全体に効くため、個別のブロックで色や文字サイズを直接指定するより、まずここで決めておくほうが後からの統一感を保てます。
ヘッダー・フッターとナビゲーションを整える
ヘッダーとフッターは「テンプレートパーツ」として管理されています。「パターン」の中のテンプレートパーツ一覧からヘッダーを開くと、サイトのロゴ、サイトのタイトル、ナビゲーションなどのブロックで構成されていることが分かります。
メニューの項目は、ナビゲーションブロックを選択して、ページへのリンクを追加・並べ替えて作ります。初期状態では固定ページの一覧が自動的に表示される設定になっていることがあり、ページを増やすたびにメニューが勝手に長くなる原因になるため、表示したいページだけを手動で追加する形にしておくと管理しやすくなります。
フッターには、Twenty Twenty-Four のクレジット表記などが入っています。不要な部分は通常のブロックと同じように削除・編集できます。
トップページとテンプレートを編集する
「設定」→「表示設定」で、ホームページに最新の投稿を表示するか、固定ページを表示するかを決めます。これによって、トップページに使われるテンプレートが変わります。
- 最新の投稿を表示する場合: ブログのホーム用のテンプレートが使われる
- 固定ページを表示する場合: そのページ用のテンプレート、またはフロントページ用のテンプレートが使われる
トップページを作り込むなら、テンプレートを開き、不要なブロックを削除してから、ブロック挿入ツールの「パターン」タブで Twenty Twenty-Four のパターンを追加していくのが早道です。パターンは挿入後はふつうのブロックの集まりになるので、文章や画像を自分のものに差し替えて使います。
テンプレートの編集はサイト全体に影響します。たとえば「投稿」のテンプレートを変えると、すべての記事の表示が変わります。特定の記事だけ違うレイアウトにしたい場合は、新しいテンプレートを追加して、記事の編集画面でそのテンプレートを選びます。
日本語サイトでのフォントの調整
Twenty Twenty-Four に同梱されているフォントは欧文用で、日本語の文字は含まれていません。日本語の部分は閲覧者の端末にあるフォントで表示されるため、端末によって見え方が違ったり、欧文と和文の印象がちぐはぐになったりします。
気になる場合は、子テーマの theme.json でフォントの指定を上書きします。子テーマは次の2ファイルで作れます。
/*
Theme Name: Twenty Twenty-Four Child
Template: twentytwentyfour
*/上を style.css として保存し、同じフォルダに theme.json を置きます。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"typography": {
"fontFamilies": [
{
"name": "日本語ゴシック",
"slug": "ja-sans",
"fontFamily": "\"Hiragino Sans\", \"Hiragino Kaku Gothic ProN\", \"Noto Sans JP\", Meiryo, sans-serif"
}
]
}
},
"styles": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--ja-sans)"
}
}
}子テーマの theme.json は親テーマの設定に重ねて読み込まれるため、変えたい部分だけを書けば済みます。ただし fontFamilies は配列ごと置き換わるため、親テーマのフォントも選択肢に残したい場合は、親テーマの定義を写して追記します。
もう1つの注意点は、サイトエディターの「スタイル」でフォントを変更すると、その内容がデータベースに保存され、theme.json より優先されることです。ファイルを書き換えても表示が変わらないときは、スタイルの画面で手動の変更が残っていないかを確認します。
変更内容の保存と戻し方
サイトエディターで編集したテンプレートやスタイルは、テーマファイルではなくデータベースに保存されます。そのため、テーマを更新しても編集内容は消えません。逆に、テーマ側の更新でテンプレートが改善されても、自分で編集したテンプレートには反映されない点を覚えておいてください。
編集したテンプレートを元に戻したいときは、テンプレート一覧で対象を選び、カスタマイズをリセットする操作を行います。また、サイトエディターのメニューからは、編集内容を含めたテーマ一式を zip でエクスポートする機能も使えます。大きく作り変える前にエクスポートしておけば、作業前の状態を手元に残せます。
まとめ
- Twenty Twenty-Four はブロックテーマで、設定は「外観」→「エディター」のサイトエディターで行う。用途別のパターンが多く、トップページを短時間で作れる
- 全体の配色とフォントはスタイルバリエーションとスタイルの編集で決め、個別ブロックでの直接指定は最小限にする
- 同梱フォントは欧文用なので、日本語サイトでは子テーマの
theme.jsonでフォントを指定する。スタイル画面での変更が優先される点に注意する - 編集内容はデータベースに保存されるため、大きな変更の前にはバックアップとエクスポートで元に戻せる状態にしておく