WordPressのブロックテーマでサイトを構築する際、検索ブロックやコメント欄、カテゴリーのプルダウン選択、お問い合わせフォームといった「入力欄（input・textarea・select）」のデザインを整えるには、これまでstyle.cssへ個別にセレクタを記述する必要がありました。しかし近年のWordPressコアおよびGutenbergのアップデートによって、theme.jsonのstyles.elementsに「textInput」と「select」が標準追加され、さらにサイトエディタ側には変更箇所だけを素早く抽出できる「Customized（変更済み）フィルター」が整備されています。

これらの機能を活用すると、独自のCSSファイルを増やすことなくサイト全体のフォーム部品をテーマの配色・余白プリセットと連動させることができ、後からエディタ上で上書きしたブロックの追跡も容易になります。本記事では、theme.jsonでの具体的な記述方法とグローバルスタイルの管理手順を図解とともに整理します。

従来のフォーム装飾が抱えていた課題とtheme.jsonによる一元化

これまでのブロックテーマ開発では、見出し（heading）やリンク（link）、ボタン（button）はtheme.jsonから一括指定できたものの、テキスト入力欄やセレクトボックスに対応する要素キーが存在していませんでした。そのため、検索ブロックやコメントフォーム、さらに外部プラグインが出力する絞り込みフォームの見た目を揃えるには、input[type=”text”]やinput[type=”email”]、textarea、selectといったセレクタをstyle.cssへ手動で列挙する必要がありました。

手動CSSによる管理では、サイトエディタ上でカラーパレットやフォントサイズを変更してもフォーム部品のスタイルに反映されにくく、ダークモードやスタイルバリエーションを切り替えた際に入力欄だけ配色が浮いてしまう原因にもなっていました。theme.jsonのstyles.elements.textInputおよびstyles.elements.selectを使うことで、こうしたフォーム部品も他のブロックと同じデザイントークン（CSS変数）の仕組みに統合できます。

styles.elementsで指定できる3つの主要フォーム要素

theme.jsonのstyles.elementsセクションでは、フォームに関連する要素として主に以下の3つを組み合わせて定義します。

特にtextInputは、単一行の各種inputタグだけでなく複数行のtextareaタグもまとめて対象とするため、1つの設定ブロックを書くだけでサイト内のテキスト入力エリア全体のトーンを揃えられます。

textInput・selectに設定できるスタイル属性と記述例

textInputとselectには、背景色・文字色（color）、枠線・角丸（border）、文字サイズ・行間（typography）、内側の余白（spacing.padding）などを指定できます。

theme.json（version 3）での実装コード例

以下は、テーマのカラープリセット変数（var(–wp–preset–color–*)）を使って、テキスト入力欄とセレクトボックスの枠線・角丸・余白・文字サイズを統一するtheme.jsonの記述例です。

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "styles": {
    "elements": {
      "textInput": {
        "color": {
          "background": "var(--wp--preset--color--base)",
          "text": "var(--wp--preset--color--contrast)"
        },
        "border": {
          "color": "#cbd5e1",
          "radius": "6px",
          "style": "solid",
          "width": "1px"
        },
        "typography": {
          "fontSize": "1rem",
          "lineHeight": "1.6"
        },
        "spacing": {
          "padding": {
            "top": "0.7rem",
            "bottom": "0.7rem",
            "left": "0.9rem",
            "right": "0.9rem"
          }
        }
      },
      "select": {
        "color": {
          "background": "var(--wp--preset--color--base)",
          "text": "var(--wp--preset--color--contrast)"
        },
        "border": {
          "color": "#cbd5e1",
          "radius": "6px",
          "style": "solid",
          "width": "1px"
        },
        "typography": {
          "fontSize": "1rem",
          "lineHeight": "1.6"
        },
        "spacing": {
          "padding": {
            "top": "0.7rem",
            "bottom": "0.7rem",
            "left": "0.9rem",
            "right": "2.2rem"
          }
        }
      }
    }
  }
}

スマートフォンでの自動ズームを防ぐ文字サイズ設計

iOS（Safari）などのモバイルブラウザでは、入力欄（inputやselect）のfont-sizeが16px（1rem）未満になっていると、ユーザーがタップした瞬間に画面全体が自動的に拡大（ズーム）される挙動があります。theme.jsonのtypography.fontSizeで「1rem（16px相当）」以上を標準値として指定しておくと、スマートフォンでも画面が揺れずに快適に入力できます。

グローバルスタイルの「変更済み（Customized）」管理と運用手順

theme.jsonで基本スタイルを整えたあと、サイトエディタ（外観 ＞ エディター ＞ スタイル）から個別のブロックや要素の装飾を調整していくと、「どのブロックのスタイルを初期値から変更したか」が把握しづらくなることがあります。そこで役立つのが、WordPress 7.2で強化されたグローバルスタイルのCustomized（変更済み）抽出機能です。

• theme.jsonにサイト全体の標準値を定義する：まずはtextInput・select・buttonの基本スタイルをtheme.json側に記述し、テーマの初期状態としてどのページでも整ったフォームが表示されるようにします。
• Customizedフィルターで上書き箇所を点検する：サイトエディタのスタイル一覧で「変更済み（Customized）」フィルターを有効にすると、テーマの初期設定からカスタマイズが加えられたブロックだけを一覧表示できます。意図せず特定ブロックだけ余白や枠線が変わっていないかを点検する際に便利です。
• キーボード操作時のフォーカス表示を確認する：フォーム要素の枠線（border）を変更した際は、Tabキーでフォーカスを移動したときに現在位置が判別できるか（outline表示が消えていないか）を必ずブラウザ上で確認してください。

まとめ：theme.jsonの要素定義でフォームUIの品質と保守性を高めよう

WordPressの「theme.json」におけるフォーム要素スタイリング（textInput・select）とグローバルスタイルの管理機能は、これまで追加CSSに頼らざるを得なかったフォーム周りのデザインをブロックテーマの標準機構へ統合する実用的なアップデートです。

ブロックテーマの新規構築や既存テーマのリファクタリングを行う際は、ぜひstyle.cssのフォーム用記述をtheme.jsonのelements設定へ集約してみてください。