实现条目数量不受限制的多值输入字段

时间:2018-07-22 作者:WPDavid

我正在开发一个应用程序(插件),用户需要在设置页面中输入任意数量的短语,插件将使用这些短语。

我实现了这一点,以捕获输入值,如下所示:

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\\u settings中声明的数据验证为:

function my_validate($input){
  foreach ($input[\'phrases\'] as $i => $phrase) {
    $output[\'phrase\'][$i] = esc_html($phrase);
  }
  return $output;
}
我知道,我可以根据需要在表单中添加任意多的输入字段,以从3个输入中进行扩展,但是,我希望用户能够添加任意数量的短语,这些短语将在提交表单时进行处理,并存储到$output[\'phrase][]数组中。

是否有某种方法可以实现一个多输入字段,该字段可以容纳用户想要输入的尽可能多的短语?

欢迎提出任何想法或建议。

1 个回复
最合适的回答,由SO网友:Sally CJ 整理而成

有没有什么方法可以实现一个多输入字段,该字段可以容纳用户想要输入的任意多个短语?

是的,有&mdash;您可以添加input 用户将在其中输入数字的字段,该数字是他/她要添加的额外短语的数量。

但我会使用JavaScript/jQuery解决方案,其中我们使用类似的可重复字段脚本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;
}
完整代码。。可用here.

结束

相关推荐

对于home_url/某些页面URL,会调用什么php?

对于大多数专家来说,这听起来很愚蠢,但对于初学者来说,这到底是什么还不清楚。访问home_url/year/month URL。例如domain.com/2018/05 显示该特定月份的所有帖子。显然是一样的.php 被调用domain.com/2018 也一样(除非有更多的结果)。我到处看了看archives.php (我有)但它与实际渲染的内容不一致。在我读到的一些地方date.php 我也是,但我没有这样的档案。现在我对归档文件特别感兴趣,但有了这个问题,我正在寻找一种通用方法来确切了解特定URL涉