有没有什么方法可以实现一个多输入字段,该字段可以容纳用户想要输入的任意多个短语?
是的,有—您可以添加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.