web-dev-qa-db-ja.com

エントリ数が制限されていない多値入力フィールドを実装する

ユーザーが設定ページにいくつでもフレーズを入力する必要があるアプリケーション（プラグイン）を開発しています。これらはプラグインによって使用されます。

次のように入力値をキャプチャするためにこれを実装しました。

register_setting('my_group', 'my_options', 'my_validate');

設定ページは次のように入力フォームを指します。

function my_options_page() {
  echo '<div class="wrap">';
    echo '<h2>'.esc_html( get_admin_page_title() ).'</h2>';
    echo '<h3>Setup / Settings</h3>';
    settings_errors();
    echo '<form action="options.php" method="post">';
      settings_fields("my_group");
      echo '<table class="form-table">';
        echo '<tr valign="top"><th colspan="2">Data Input</th></tr>';
        echo '<tr valign="top"><th scope="row">Phrase [1]</th><td><input name="my_options['phrases'][0]" value="" size="32" type="text"></td></tr>';
        echo '<tr valign="top"><th scope="row">Phrase [2]</th><td><input name="my_options['phrases'][1]" value="" size="32" type="text"></td></tr>';
        echo '<tr valign="top"><th scope="row">Phrase [3]</th><td><input name="my_options['phrases'][2]" value="" size="32" type="text"></td></tr>';
      echo '</table>';
    echo '</form>';
  echo '</div>';
}

これにより、ユーザーは3つのフレーズを入力できます。 register_settingsで宣言されているデータ検証は次のとおりです。

function my_validate($input){
  foreach ($input['phrases'] as $i => $phrase) {
    $output['phrase'][$i] = esc_html($phrase);
  }
  return $output;
}

3つの入力からこれを拡張するためにフォームに必要なだけの入力フィールドを追加できることを認識していますが、フォームが完成したときに処理されるフレーズをユーザーがいくつでも追加できるようにしたい送信され、$ output ['phrase'] []配列に格納されます。

ユーザーが入力したいだけのフレーズをとる複数入力フィールドを実装する方法はありますか？

これに取り組むためのアイデアや提案は歓迎されます。

phpformssettings
2
WPDavid

ユーザーが入力したいだけのフレーズをとる複数入力フィールドを実装する方法はありますか？

はい、あります - ユーザーが数字を入力するinputフィールドを追加できます。これは、追加したいフレーズの数です。

しかし、私はJavaScript/jQueryソリューションを使いたいと思います。ここでは 繰り返し可能フィールドスクリプト like this を使います。 demo を試してみて、スクリプト/コードを使用する際に支援が必要かどうかをお知らせください。

そして、私はあなたのphrasesフィールドでそのソリューション/スクリプトをどのように実装したかです：

まず、 スクリプトファイル を登録してエンキューします。例えば：

add_action( 'admin_menu', 'my_add_admin_menu' );
function my_add_admin_menu() {
    // I used `add_options_page()`, but you can use similar function. The point
    // is, we'd need the `$hook_suffix` variable.
    $hook_suffix = add_options_page( 'WPSE 309235', 'WPSE 309235', 'manage_options', 'wpse-309235', 'my_options_page' );

    // Registers and enqueues our repeatable field script. You shouldn't "hotlink"
    // to CodePen. Instead, save the file to my-repeatable-field.js and upload it
    // to your site, and then link to that file.
    add_action( 'load-' . $hook_suffix, function(){
        wp_register_script( 'my-repeatable-field', 'https://codepen.io/anon/pen/vaJaGZ.js', [ 'jquery' ], '20180727' );
        wp_enqueue_script( 'my-repeatable-field' );
    } );
}

次に、必要なHTMLとclassの名前を追加/使用します。

これはmy_options_page()関数の修正版です。主な変更は、開始<table>タグを含むtable内です。

function my_options_page() {
  echo '<div class="wrap">';
    echo '<h2>'.esc_html( get_admin_page_title() ).'</h2>';
    echo '<h3>Setup / Settings</h3>';
    //settings_errors(); // In my case, this isn't necessary.
    echo '<form action="options.php" method="post">';
      settings_fields("my_group");
      echo '<table class="form-table repeatable-field">';
        $phrases_arr = my_options( 'phrases' );
        $count = count( $phrases_arr );

        echo '<tr valign="top"><th colspan="2">Data Input</th></tr>';
        // Displays 3 initial rows.
        $rows = max( $count, 3 );
        for ( $i = 0, $j = 1; $i < $rows; $i++, $j++ ) {
            $phrase_str = isset( $phrases_arr[ $i ] ) ? $phrases_arr[ $i ] : '';
            echo '<tr valign="top" class="repeatable-field-row">' .
                '<th scope="row">Phrase [<span class="repeatable-field-number">' . $j . '</span>]</th>' .
                '<td><input name="my_options[phrases][]" value="' . esc_attr( $phrase_str ) . '" size="32" type="text" class="repeatable-field-input">' .
                    '<span class="repeatable-field-buttons"></span></td>' .
            '</tr>';
        }

        $phrases_url = my_options( 'phrases_url' );
        echo '<tr valign="top">' .
            '<th>Phrases URL (*Non-repeatable* Field)</th>' .
            '<td><input type="text" name="my_options[phrases_url]" value="' . esc_attr( $phrases_url ) . '" class="regular-text" placeholder="URL"></td>' .
        '</tr>';
      echo '</table>';
      submit_button();
    echo '</form>';
  echo '</div>';
}

スクリプトの部分はこれですべてです。しかしながら、

修正されたmy_options_page()機能コードには、データベースからオプションを取得するために作成したmy_options()への呼び出しがあります。これがコードです：

function my_options( $key = null ) {
    $options = wp_parse_args( get_option( 'my_options' ), [
        'phrases'     => [],
        'phrases_url' => '',
    ] );

    // Returns a single option.
    if ( $key ) {
        return isset( $options[ $key ] ) ? $options[ $key ] : null;
    }

    // Returns all the options.
    return $options;
}

私はまたmy_validate()機能コードを修正しました：

function my_validate($input){
  $phrases_arr = [];

  foreach ($input['phrases'] as $phrase) {
    if ( $phrase = esc_html( $phrase ) ) {
      $phrases_arr[] = $phrase;
    }
  }

  $input['phrases'] = $phrases_arr;

  return $input;
}

フルコード

..利用可能です ここ 。

2
Sally CJ