フィールドテンプレートのテーマ上書き

Form Plant は、各フィールド ( テキスト・ラジオ・チェックボックス等 ) の 出力 HTML そのもの を、お使いのテーマにテンプレートファイルをコピーするだけで差し替えられます。プラグイン本体を改変せずに、入力欄のマークアップを完全にコントロールできます。

2 種類のレイアウトカスタマイズの違い

Form Plant にはレイアウトを変える方法が 2 つあります。目的に応じて使い分けてください。

方法	変えられる範囲	設定場所
HTML テンプレート	フォーム全体の構造・並び ( ラベルや囲み `<div>` 等 ) を `[fplant_field name="..."]` などのショートタグで組む	管理画面の「レイアウト編集」
本ページ ( テーマ上書き )	1 つ 1 つの入力欄の HTML そのもの ( `<input>` のクラスや構造 )	テーマ内のテンプレートファイル

「入力欄を囲む配置」を変えたいだけなら HTML テンプレート、「<input> 自体の出力を変えたい」ならテーマ上書きが適しています。両方を併用することもできます。

上書きの仕組み (テンプレートの探索順序)

Form Plant はフィールドを描画するとき、次の順序でテンプレートファイルを探し、最初に見つかったものを使います。テーマ側が見つかればそちらが優先され、無ければプラグイン同梱のデフォルトにフォールバックします。

優先	探索パス
1. 子テーマ	`wp-content/themes/お使いの子テーマ/form-plant/form-fields/text.php`
2. 親テーマ	`wp-content/themes/お使いのテーマ/form-plant/form-fields/text.php`
3. プラグイン ( 既定 )	`wp-content/plugins/form-plant/templates/form-fields/text.php`

コピー先は templates/ を付けない

プラグイン側は templates/form-fields/text.php ですが、テーマにコピーするときは templates/ を外し、テーマ直下に form-plant/form-fields/text.php という構成で置きます。ディレクトリ名 form-plant/ は固定です。

上書きの手順

テキスト入力欄 ( text.php ) を例にします。

プラグインの元ファイルをコピーします。
- コピー元: wp-content/plugins/form-plant/templates/form-fields/text.php
- コピー先: wp-content/themes/お使いの子テーマ/form-plant/form-fields/text.php
コピー先のファイルを編集して、出力 HTML を好きなように変更します。
保存すれば、以降そのフィールド型はテーマ側のテンプレートで描画されます。

確認画面の表示も変えたい場合は、confirm-fields/text.php も同様にコピーします ( コピー先は form-plant/confirm-fields/text.php ) 。

wp-content/
└── themes/
    └── お使いの子テーマ/
        └── form-plant/
            ├── form-fields/
            │   └── text.php       ← 入力画面の上書き
            └── confirm-fields/
                └── text.php       ← 確認画面の上書き

子テーマを推奨

親テーマを直接編集すると、テーマ更新時に変更が失われます。テンプレートは子テーマに置くことを推奨します。

上書きできるテンプレート一覧

form-fields/（入力画面）と confirm-fields/（確認画面）に、フィールド型ごとに同じ名前のファイルが対で用意されています。変更が必要なファイルだけをテーマにコピーしてください。

入力画面 (`form-fields/`)

ファイル	フィールド型
`text.php`	テキスト
`textarea.php`	テキストエリア
`email.php`	メールアドレス
`tel.php`	電話番号
`url.php`	URL
`number.php`	数値
`date.php`	日付 ( カレンダー )
`date_select.php`	日付 ( プルダウン )
`time.php`	時刻
`select.php`	セレクトボックス
`radio.php`	ラジオボタン
`checkbox.php`	チェックボックス
`name_parts.php`	氏名 ( 姓名分割 )
`name_kana.php`	ふりがな
`password.php`	パスワード
`postal_code.php`	郵便番号
`prefecture.php`	都道府県
`address.php`	住所
`custom_mail_tag.php`	カスタムメールタグ
`file.php`	ファイル
`hidden.php`	隠しフィールド
`html.php`	HTML ( 自由記述 )

住所フィールドのロケール別テンプレート

住所 ( address ) には日本語専用の address-ja.php も同梱されており、日本語環境では address-ja.php が優先されます。日本語サイトで住所欄を上書きする場合は form-plant/form-fields/address-ja.php をコピーしてください。

確認画面 (`confirm-fields/`)

入力画面と同じファイル名 ( text.php、radio.php、… ) を confirm-fields/ に置くと、確認画面の表示を上書きできます。加えて、全項目をまとめて表示する次のテンプレートがあります。

ファイル	用途
`all_fields.php`	全フィールドの一覧表示 ( テーブル形式 )
`all_fields_div.php`	全フィールドの一覧表示 ( `div` 形式 )

ラッパー・埋め込み

ファイル	用途
`confirmation.php`	確認画面全体のラッパー
`form-wrapper.php`	フォーム全体のラッパー
`embed.php`	iframe 埋め込み用のフォーム全体

これらはテーマ直下の form-plant/（サブディレクトリ無し）に置きます。例: form-plant/confirmation.php。

テンプレートで使える変数

テンプレートは、描画処理の中でそのまま読み込まれます。次の変数が使えます。

入力画面フィールド

変数	型	説明
`$field`	array	フィールド設定。`$field['name']`、`$field['type']`、`$field['placeholder']`、`$field['options']` ( 選択肢系 ) 、`$field['custom_id']`、`$field['custom_class']` など
`$value`	string / array	現在の入力値・初期値
`$form_id`	int	フォーム ID
`$form_settings`	array	フォーム設定

確認画面フィールド

変数	型	説明
`$field`	array	フィールド設定
`$value`	mixed	送信された値
`$filename`	string	ファイルフィールドのファイル名

カスタムテンプレートの例 (`text.php`)

<?php
/**
 * テキスト入力フィールド ( テーマ上書き版 )
 *
 * @var array  $field   フィールド設定
 * @var string $value   フィールドの値
 * @var int    $form_id フォーム ID
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

$field_id    = ! empty( $field['custom_id'] ) ? $field['custom_id'] : 'fplant-field-' . $field['name'];
$field_class = 'fplant-field fplant-field-text my-custom-class';
?>
<div class="my-input-wrapper">
    <input
        type="text"
        id="<?php echo esc_attr( $field_id ); ?>"
        name="<?php echo esc_attr( $field['name'] ); ?>"
        class="<?php echo esc_attr( $field_class ); ?>"
        value="<?php echo esc_attr( $value ); ?>"
        placeholder="<?php echo esc_attr( $field['placeholder'] ?? '' ); ?>"
    >
</div>

上書き時に守るべきこと

入力欄の HTML はバリデーションや送信処理と連動しています。次の点を必ず守ってください。

壊してはいけない約束

name 属性は $field['name'] のままにする。これが送信データのキーであり、サーバー側バリデーションと一致しないと値が拾われません。ラジオ・チェックボックスで複数の <input> を出す場合も同じ $field['name'] を使います。
$value を出力する ( value="..."、ラジオ/セレクトの checked / selected 等 ) 。確認画面からの戻りや再入力時に値を保持するために必要です。
必ずエスケープする ( esc_attr() / esc_html() / esc_textarea() ) 。XSS 対策です。
セレクトの先頭の空の <option value=""> など、未選択を表す要素は残す ( 必須バリデーションのため ) 。

エラー時のスタイルについて

「エラーのときだけ入力欄を装飾したい」場合、テンプレート ( PHP ) の中でエラー有無を判定することはできません。バリデーションは AJAX で行われ、テンプレートが描画される時点ではエラーがまだ存在しないためです ( テンプレートに渡るのは $field / $value 等のみで、エラー情報は含まれません ) 。

エラー状態は、JavaScript がラッパー .fplant-field-group に fplant-field-has-error クラスを付与することで表現されます。デフォルトレイアウトではこのラッパーが自動で付くため、上書きした text.php などはそのままで、次の CSS だけでエラー時の装飾ができます。

.fplant-field-group.fplant-field-has-error .fplant-field {
    border-color: #d63638;
}

独自 HTML テンプレートと併用する場合

独自 HTML テンプレート ( レイアウト編集 ) を使っている場合は、.fplant-field-group ラッパーを自分で書く必要があります。詳しくは HTML テンプレート → エラー時に入力欄を装飾するを参照してください。

制限事項・補足

上書きできるのは対応フィールド型のみです。Form Plant が認識するフィールド型 ( ホワイトリスト ) 以外のファイルを置いても描画されません。独自のフィールド型を追加する場合は fplant_allowed_field_types / fplant_field_types フィルターで型を登録してください。
ファイルパスはセキュリティ検証されます ( .. や許可外の文字を含むパス、テーマ外への参照は拒否されます ) 。
プログラムでテンプレートのパスを差し替えたい場合は fplant_locate_template フィルターも使えます。詳しくは PHP フックリファレンスを参照してください。

add_filter( 'fplant_locate_template', function ( $template, $template_name, $template_path ) {
    // $template_name 例: 'form-fields/text.php'
    if ( 'form-fields/text.php' === $template_name ) {
        $custom = get_stylesheet_directory() . '/my-forms/text.php';
        if ( file_exists( $custom ) ) {
            return $custom;
        }
    }
    return $template;
}, 10, 3 );

プラグイン更新の影響を受けません。テーマにコピーしたテンプレートはそのまま使われ続けます。ただしプラグインのメジャーアップデートでデフォルトテンプレートの構造が変わることがあるため、更新後は表示やバリデーションが意図どおりか確認することをおすすめします。

上書きの仕組み (テンプレートの探索順序)​

上書きの手順​

上書きできるテンプレート一覧​

入力画面 (form-fields/)​

確認画面 (confirm-fields/)​

ラッパー・埋め込み​

テンプレートで使える変数​

入力画面フィールド​

確認画面フィールド​

カスタムテンプレートの例 (text.php)​

上書き時に守るべきこと​

エラー時のスタイルについて​

制限事項・補足​