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

ファイルの準備ができたら、いよいよ中身を作りたいところですが、もう一つだけ先にやっておきたいことがあります。

この記事でやること：

• contentSize・wideSize でサイトの幅を決める
• 調整ツールと余白の設定を有効にする
• templateParts でヘッダー・フッターを登録する

contentSize・wideSizeって何？

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

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

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

サイドバーの有無

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

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

【WordPress】ブロックテーマのレイアウトをシミュレーターで体感しよう！ 目次まず触ってみよう！レイアウトシミュレーター「本文幅 contentSize」って何？「幅広ブロック wideSize」は何のためにある？画面いっぱいに広げる　―　全幅ブロック（alignfull）ブロックの間隔も調整 […]

appearanceToolsについて

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

appearanceTools: true で使えるようになる主な調整

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

useRootPaddingAwareAlignmentsについて

useRootPaddingAwareAlignments は、サイト全体の左右の余白（padding）を統一管理する設定です。
少し長い名前ですが、やっていることはシンプルです。

templatePartsについて

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

登録しないとどうなる？

• サイトエディターの「テンプレートパーツ」一覧に表示されない
• エディターから直接編集できない
• area の指定がないとヘッダー・フッターとして正しく機能しない

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

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

{
  "version": 3,
  "settings": {
    "appearanceTools": true,
    "useRootPaddingAwareAlignments": true,
    "layout": {
      "contentSize": "800px",
      "wideSize": "1200px"
    }
  },
  "styles": {},
  "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"  ← カンマなし
}

"palette": [ ← [] 複数の色を並べるから配列
  {        ← {} 1つの色のまとまり
    "slug": "primary",
    "color": "#fff2b2"
  },       ← カンマあり（次の{}がまだある）
  {        ← {} 2つ目の色
    "slug": "secondary",
    "color": "#a7d9dd"
  }        ← カンマなし（最後）
]