Wordpress Tips

2017.01.12

MW WP Form で入力要素を動的に出力する

MW WP FORMを使用した際に、クライアント側で入力要素を管理できるカスタマイズのご紹介です。

mw-wp-form_generated_01

通常は、MW WP FORMの各フォームの設定画面から入力するので、
select要素の場合、’children’の中にoptionの項目を入れていきます。

クライアントが更新しやすいように Advance Custom Fields の
オプションページとリピーターフィールドを使用して管理しやすくしていきます。
※今回は Advance Custom Fields Pro プラグインを使用しています。

オプションページの作成

  // オプションページの作成 フォームテスト用
  if( function_exists('acf_add_options_page') ) {
    $option_page = acf_add_options_page(array(
      'page_title'  => 'フォーム テスト用',
      'menu_title'  => 'フォーム テスト用',
      'menu_slug'   => 'form_test',
      'capability'  => 'edit_posts',
      'redirect'  => false
    ));
  }

まず、オプションページの作成します。
fucntions.php に上記の記述を追加します。

フィールドの作成

mw-wp-form_generated_02

オプションページ内にはこのようなリピーターフィールドを作成します。

フォームの作成

mw-wp-form_generated_03

次にフォームを作成します。

fucntions.php からカスタマイズ

  function SELECT_LOOP( $children, $atts ) {
    if ( $atts['name'] == 'test_select' ) { // 'test_select' には該当する要素のname属性
      if( have_rows('test_repeater','option') ) : // 'test_repeater' にはリピーターのフィールド名
        while( have_rows('test_repeater','option') ) : the_row();
          $select = get_sub_field('test_input','option'); // 'test_input' にはリピーター要素のサブフィールド名
          $children[$select] = $select;
        endwhile;
      endif;
    }
    return $children;
  }
  add_filter( 'mwform_choices_mw-wp-form-2554', 'SELECT_LOOP', 10, 2 ); // '2554' にはフォームID

次に、オプションページに入力された内容をフォームのセレクト要素に出力できるように
fucntions.php に下記の記述を追加します。

以上で実装は完了です。

mw-wp-form_generated_04

オプションページにこのような項目を追加してみます。

mw-wp-form_generated_06

フォームの画面ではselect要素として選択できるようになりました。

fucntions.php への記述を調整すれば、select要素だけでなくチェックボックスなどにもカスタマイズ可能です。

Advanced Custom Fieldsを使用して制作したサイト

ジオクリエート株式会社様

新規Webサイト開設のご依頼を承り、更新の利便さや作業時間の軽減を目指しWordPressを導入いたしました。

 

株式会社キュレーションジャパン様  PREMIUM JAPAN(プレミアムジャパン)

「日本のプレミアムを世界へ、日本へ。そして未来へ。」
Webサイトのキャッチコピー通り、日本の技術や文化、食などのプレミアムな情報を発信するメディアサイトです。

制作に携わらさせていただきましたが、面白く、参考になる情報など満載で、
私...

主婦と生活社様 暮らしとおしゃれの編集室

主婦と生活社様の「ナチュリラ」「大人になったら着たい服」「暮らしのおへそ」のWebサイトになります。
「ナチュリラ」「大人になったら着たい服」「暮らしのおへそ」の雑誌と同様にデザインはシンプルにしております。
ぜひ、ご覧ください!!

ご相談・ご依頼に関して、まずは

ください。お気軽にどうぞ