MW WP Form v4 からテーマにファイルをおくだけで入力フィールドを上書きできるようになります

先日「実行プロセスを大幅に見直した MW WP Form v4 を開発中です」という記事を書きましたが、いくつか新機能がありますので事前にちょっとずつお知らせしていこうと思います。

テーマから入力フィールドの上書きが可能に

MW WP Form は、これまでもフォーム作成画面でフォームタグを設置するときに class を設定したり、id を設定したりすることはできましたが、入力フィールドの HTML タグ自体を大幅に変更することはできませんでした。MW WP Form v4 からは、テーマに入力フィールド用のテンプレートを置くことで HTML タグを含め入力フィールドをまるごと上書きできるようになります。

例えば、テキストフィールドのデフォルトのテンプレートは次のようになっています。

<input type="text"
    name="<?php echo esc_attr( $name ); ?>"
    <?php echo MWF_Functions::generate_input_attribute( 'id', $id ); ?>
    <?php echo MWF_Functions::generate_input_attribute( 'class', $class ); ?>
    <?php echo MWF_Functions::generate_input_attribute( 'size', $size ); ?>
    <?php echo MWF_Functions::generate_input_attribute( 'maxlength', $maxlength ); ?>
    <?php echo MWF_Functions::generate_input_attribute( 'value', $value ); ?>
    <?php echo MWF_Functions::generate_input_attribute( 'placeholder', $placeholder ); ?>
    <?php echo MWF_Functions::generate_input_attribute( 'data-conv-half-alphanumeric', $conv_half_alphanumeric ); 
    ?>
/>

https://github.com/inc2734/mw-wp-form/blob/feature/refactoring/templates/form-fields/text.php

これを、例えばテキストフィールドは必ず <span class="text-field"><input type="..."></span> のように囲みたい、みたいになったときは、/themes/使用中テーマ/mw-wp-form/form-fields/text.php にファイルをコピーし、それを改変することで構造を変更することができます。CSS フレームワークや UI コンポーネントライブラリによっては標準的な入力フィールドだけではなく、一定の HTML を組み立てることでそのライブラリオリジナルの入力フィールドを作れるものもあったりするので、そういうときに便利なのではないかと思います。例えばラジオボタンの見た目をトグルボタンにしちゃうとか。

MWF_Functions::generate_input_attribute() メソッドについて

`MWF_Functions::generate_input_attribute()` はフォーム作成画面で属性の入力があった場合にだけその属性を HTML に設定することができるメソッドになります。例えばテンプレート内に <?php echo MWF_Functions::generate_input_attribute( 'id', $id ); ?> と書いたとして、フォーム作成画面で ID を設定すれば id="foo" のような属性が設定され、もし入力がなければ何も設定されない、という動作になります。

MW WP Form v4 の公開時期について

テストコードも全面的に書き直して、動作確認もだいたいできたので、そう遠くない時期にアップデートを行おうかなと考えています。ちょうど今月 WordCamp Kyoto 2017 が開催されるのでその前後とか、ちょっと落ち着いて7月頭とか…。今のところまだ何も報告を頂いたりはしていませんが、僕も WordCamp Kyoto には参加しますので、何かおかしなところがあればそのときに教えていただいても! ということで開発版は下記よりダウンロードできます。ではではー

MW WP Form v4 (開発版) のダウンロードはこちら