【WordPress ブロックテーマ自作③】theme.jsonの最初の一歩｜レイアウト幅とパーツ登録

先にやっておきたいtheme.jsonの設定があります。この設定は2回に分けて進めます。

この記事ではレイアウト幅とパーツ登録、次の記事ではカラーパレットの設定を行います。

theme.jsonはブロックテーマの「設定ファイル」です。色・幅・フォント・パーツ登録など、サイト全体に関わる設定をここで管理します。

contentSize・wideSizeって何？

テンプレートを組む前に、サイトの「幅」を決めておきましょう。

theme.json で設定する幅は2種類

💡 迷ったら contentSize: 800px・wideSize: 1200px からスタートするのがおすすめです。あとから調整できます。

サイドバーの有無

contentSize・wideSizeはページのレイアウトによって役割が変わります。

👇 実際に体感してみよう
「ピンとこない…」という方は、まずシミュレーターで動かしてみるのが一番です。

【WordPress】ブロックテーマのレイアウトをシミュレーターで体感しよう！ ブロックテーマのレイアウト、なんとなく触っているけど「なぜこうなるの？」と思ったことはありませんか？ 実は、ブロックテーマのレイアウトは たった3つの「幅…

appearanceToolsについて

appearanceTools: trueは、サイトエディターで使えるデザイン調整ツールを有効にする設定です。
エディターの設定パネルから余白・枠線・文字色などを調整するメニューを表示します。

使えるようになる主な調整

• ブロックの余白（padding・margin）
• 枠線の太さ・色・角丸
• リンクの色
• 見出しの文字色

useRootPaddingAwareAlignmentsについて

useRootPaddingAwareAlignments は、サイト全体の左右の余白（padding）を統一管理する設定です。

templatePartsについて

templateParts は、ヘッダーやフッターなどの共通パーツをWordPressに登録する設定です。

登録しないと、サイトエディターの「テンプレートパーツ」一覧に表示されず、ヘッダー・フッターとして正しく機能しません。

theme.jsonにまとめて追加しよう

ここまでの設定をまとめると、theme.json はこうなります。

{
  "version": 3,
  "settings": {
    "appearanceTools": true,
    "useRootPaddingAwareAlignments": true,
    "layout": {
      "contentSize": "800px",
      "wideSize": "1200px"
    }
  },
  "styles": {
    "spacing": {
      "padding": {
        "top": "0px",
        "right": "20px",
        "bottom": "0px",
        "left": "20px"
      }
    }
  },
  "templateParts": [
    { "name": "header", "title": "ヘッダー", "area": "header" },
    { "name": "footer", "title": "フッター", "area": "footer" },
    { "name": "sidebar", "title": "サイドバー", "area": "uncategorized" }
  ]
}

サイドバー不要で、{ "name": "sidebar", "title": "サイドバー", "area": "uncategorized" }を削除した場合：
{ "name": "footer", "title": "フッター", "area": "footer" }← ,カンマを必ず削除しましょう。

JSONで迷子になったら

{
  "slug": "primary",
  "color": "#fff2b2",  ← カンマ
}

{
  "slug": "primary",
  "color": "#fff2b2"  ← カンマなし
}