2026年7月24日
2026年7月24日
WordPressのTwenty Twenty-Fourテーマでパターンブロックを活用してページを作る方法
Twenty Twenty-Four には、ヒーローエリアや料金表、よくある質問、ページ全体のレイアウトまで、多数のブロックパターンが同梱されています。これらを挿入して文章と画像を差し替えるだけで、デザインの整ったページを短時間で作れます。この記事では、テーマのパターンの探し方と挿入方法、同期パターンとの違い、テンプレート内のパターンを編集するときの注意点、画像の差し替えといったつまずきやすい点を、ブロックエディターを使う立場から説明します。
自作のパターンをテーマに登録する開発者向けの手順は、別記事「テーマでカスタムブロックパターンを登録する方法」で扱っています。本記事は、テーマが用意しているパターンを使いこなす側の話です。
Twenty Twenty-Fourとパターンの関係
Twenty Twenty-Four は WordPress 6.4 と同時に公開されたブロックテーマです。WordPress 6.7 以降のデフォルトテーマは Twenty Twenty-Five に替わっていますが、Twenty Twenty-Four も引き続き配布・更新されています(2026年10月現在)。
このテーマの特徴は、ページを構成する部品の多くがパターンとして用意されていることです。トップページやテンプレートも、内部ではパターンを読み込む形で組み立てられています。そのため、テーマの見た目を自分のサイトに流用したいときは、パターンを入口にすると効率よく進められます。
パターンは、挿入した時点でただのブロックの集まりになります。挿入後に文章や色を変えても、元のパターンやほかのページには影響しません。後から変えたくなったらブロック単位で自由に編集できる、という点を押さえておくと安心して使えます。
パターンを探して挿入する
投稿や固定ページの編集画面では、次の手順でパターンを挿入します。
- 画面左上の「+」(ブロック挿入ツール)を開きます。
- 「パターン」タブを選びます。
- カテゴリーを選ぶか、検索欄にキーワードを入れて絞り込みます。Twenty Twenty-Four 独自のカテゴリーと、WordPress コアのカテゴリー(バナー、行動喚起、テキストなど)が並びます。
- 一覧のプレビューをクリックすると、カーソルのある位置に挿入されます。
検索は英語のパターン名でもヒットすることがあるため、日本語で見つからないときは「hero」「pricing」「faq」なども試してください。挿入されたパターンはグループやカラムで構成されているので、画面上部の「ドキュメント概観」(リスト表示)を開くと、どのブロックがどう入れ子になっているかを確認できます。文章を差し替える前に構造を見ておくと、余白や背景色をどのブロックで変えればよいかが分かり、編集で迷いにくくなります。
新しい固定ページはページ全体のパターンから始める
新規の固定ページを作ると、ページ全体のレイアウトを選ぶ画面が表示されることがあります。これは、テーマが「ページの本文用」として登録したパターンを、最初の選択肢として提示する仕組みです。Twenty Twenty-Four にはこうしたページ単位のパターンが含まれているため、会社概要やポートフォリオのような構成を丸ごと下敷きにできます。
表示されない場合でも、ブロック挿入ツールの「パターン」タブからページ用のカテゴリーを選べば、同じパターンを後から挿入できます。白紙から始めるより、近い構成のパターンを入れてから不要なセクションを削るほうが、余白や見出しのサイズがテーマ全体と揃いやすくなります。
画像の差し替えで気をつけること
パターンに入っているサンプル画像は、多くの場合テーマのフォルダ内(wp-content/themes/twentytwentyfour/assets/ 配下)の画像を直接参照しています。そのまま公開すると、次のような問題が起きます。
- テーマを変更・削除すると画像が表示されなくなる
- 画像がメディアライブラリに登録されていないので、代替テキストやサイズを管理しにくい
- サンプル画像がそのまま残り、サイトの内容と合わない
画像ブロックを選んでツールバーの「置換」から、メディアライブラリの画像に差し替えてください。差し替えたら代替テキストも入力します。背景画像を使ったカバーブロックの場合も、同じく「置換」で変更できます。
同期パターンで共通部分を使い回す
複数のページに同じお問い合わせ案内やバナーを置き、まとめて更新したい場合は「同期パターン」を使います。WordPress 6.3 で、従来の「再利用ブロック」が同期パターンとして整理されました。
- Twenty Twenty-Four のパターンを挿入し、文章や画像を自分のサイト用に整えます。
- 対象のブロック(外側のグループ)を選び、ツールバーのオプションメニューから「パターンを作成」を選びます。
- 名前を付け、「同期」をオンにして作成します。
同期パターンは、どこか1か所で編集すると、置いてあるすべてのページに反映されます。一方で、ページごとに少しだけ内容を変えたい場合は、同期をやめて通常のブロックに戻す(切り離す)必要があります。WordPress 6.6 以降は、同期パターンの中の一部のブロックだけページごとに内容を上書きできる仕組みもありますが、対応するブロックや操作の表記はバージョンによって異なります。
作成した同期パターンは、外観 → エディター → パターン の画面で一覧・編集できます。テーマのパターンと自分で作ったパターンが分かれて表示されるので、整理もここで行います。
テンプレートの中のパターンを編集するときの注意
Twenty Twenty-Four のテンプレート(ブログのトップ、個別投稿など)は、内部でパターンを読み込んでいます。テーマのファイルを見ると、テンプレートの中に次のような記述があります。
<!-- wp:pattern {"slug":"twentytwentyfour/パターン名"} /-->
これは「ここに指定したパターンを展開する」という意味のパターンブロックです。サイトエディター(外観 → エディター)でテンプレートを開いて編集すると、パターンの中身が通常のブロックとして展開され、編集後のテンプレートはテーマのファイルではなくデータベースに保存されます。
この仕組みから、次の点に注意してください。
- テンプレートを編集した後は、テーマの更新でパターンが改善されても、その変更は編集済みのテンプレートには反映されません。
- 編集前の状態に戻したいときは、サイトエディターのテンプレート一覧から、カスタマイズを取り消す操作でテーマの初期状態に戻せます。戻すと自分の変更は消えるので、必要な部分は先に控えておきます。
- 大きく作り替える前に、サイトのバックアップを取っておくと安心です。
テーマのファイル自体を書き換えてパターンを変えたい場合は、Twenty Twenty-Four を直接編集せず、子テーマを作って作業してください。親テーマのファイルを編集すると、更新時に上書きされて消えます。
スタイルを変えるとパターンの見た目も変わる
Twenty Twenty-Four のパターンは、色や文字サイズにテーマのプリセット(theme.json で定義された値)を使っています。そのため、外観 → エディター → スタイル で配色のバリエーションやフォントを切り替えると、挿入済みのパターンも含めてサイト全体の見た目が揃って変わります。
逆に、パターンを挿入した後で個々のブロックに任意のカラーコードを指定すると、その部分だけスタイルの切り替えに追従しなくなります。色を変えるときは、できるだけパレットの色から選ぶのがコツです。
まとめ
- Twenty Twenty-Four には多数のパターンが同梱されており、ブロック挿入ツールの「パターン」タブから挿入できます。挿入後は通常のブロックとして自由に編集できます。
- 新規固定ページでは、ページ全体のパターンを下敷きにすると構成と余白を揃えやすくなります。
- サンプル画像はテーマのフォルダを参照しているため、メディアライブラリの画像に差し替え、代替テキストを入力します。
- 複数ページで共通の部分は同期パターンにしてまとめて管理します。
- テンプレート内のパターンを編集すると内容はデータベースに保存され、テーマ更新の影響を受けなくなります。戻す方法とバックアップを確認してから作業してください。