【发布时间】：2017-04-26 18:29:29
【问题描述】：
我正在尝试为我正在处理的主题的自定义小部件中的一组预定义标签创建动态输入字段。我想实现这样的目标：
CourseName FieldONE FieldTWO
-------------------------------------------------------------
Chemistry Sprint 2015 Summer 2015 ( - )
Spring 2016 Summer 2016 ( - )
( + )
-------------------------------------------------------------
Biology Sprint 2015 Summer 2015 ( - )
Fall 2015 Winter 2015 ( - )
Spring 2016 Summer 2016 ( - )
( + )
--------------------------------------------------------------
Math Fall 2015 Winter 2015 ( - )
( + )
--------------------------------------------------------------
Physics Fall 2015 Winter 2015 ( - )
( + )
--------------------------------------------------------------
其中CourseName 是 Chemistry 、Biology、Math 和 Physics（仅预定义标签，最多 4 个），FieldONE 和 FieldTWO 是动态输入，我想为每门课程输入不同的术语。
因此，如果我单击( + )，则会为该标签创建两个字段FieldOne 和FieldTWO。如果我点击( - )，这两个字段都会被删除。
我尝试使用this Gist 创建与元框类似的动态输入，到目前为止我得到了这个：
<?php
/*
Plugin Name: Dynamic Fields Widget
Description: Dynamic Fields
Version: 0.0
Author: Rain Man
*/
// Creating the widget
class dynamic_widget extends WP_Widget
{
public function __construct()
{
parent::__construct(
// Base ID of your widget
'dynamic_widget',
// Widget name will appear in UI
__('Dynamic Widget', 'dynamic_widget_domain'),
// Widget description
array('description' => __('Sample Dynamic Widget', 'dynamic_widget_domain'))
);
}
// widget
public function widget($args, $instance)
{
$title = apply_filters('widget_title', $instance['title']);
// This is where you run the code and display the output
echo __('Hello, World!', 'dynamic_widget_domain');
echo $args['after_widget'];
}
// form
public function form($instance)
{
if (isset($instance[ 'title' ])) {
$title = $instance[ 'title' ];
} else {
$title = __('New title', 'dynamic_widget_domain');
}
// Widget admin form
$repeatable_fields = array();
$courses = array(
'Chemistry' => array(
'coursecode' => 'Chemistry 2059',
'professor' => 'Dr. James Bond',
),
'Biology' => array(
'coursecode' => 'Biology 3029',
'professor' => 'Dr. James Bond',
),
'Math' => array(
'coursecode' => 'Math 2043',
'professor' => 'Dr. James Bond',
),
'Physics' => array(
'coursecode' => 'Physics 2075',
'professor' => 'Dr. James Bond',
)
);
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function( $ ){
$( '#add-row' ).on('click', function() {
var row = $( '.empty-row.screen-reader-text' ).clone(true);
row.removeClass( 'empty-row screen-reader-text' );
row.insertBefore( '#repeatable-fieldset-one tbody>tr:last' );
return false;
});
$( '.remove-row' ).on('click', function() {
$(this).parents('tr').remove();
return false;
});
});
</script>
<?php foreach ($courses as $course_key => $course_info) { ?>
<label><?php echo $course_info['coursecode']; ?></label>
<table id="repeatable-fieldset-one" width="100%">
<thead>
<tr>
<th width="40%">Fall Term</th>
<th width="40%">Winter Term</th>
<th width="8%"></th>
</tr>
</thead>
<tbody>
<?php
if ($repeatable_fields) :
foreach ($repeatable_fields as $field) {
?>
<tr>
<td><input type="text" class="widefat" name="name[]" value="<?php if ($field['name'] != '') {
echo esc_attr($field['name']);
} ?>" /></td>
<td>
</td>
<td><input type="text" class="widefat" name="url[]" value="<?php if ($field['url'] != '') {
echo esc_attr($field['url']);
} else {
echo '';
} ?>" /></td>
<td><a class="button remove-row" href="#">Remove</a></td>
<td><a id="add-row" class="button" href="#">Add</a></td>
</tr>
<?php
} else :
// show a blank one
?>
<tr>
<td><input type="text" class="widefat" name="name[]" /></td>
<td><input type="text" class="widefat" name="url[]" value="" /></td>
<td><a class="button remove-row" href="#">Remove</a></td>
<td><a id="add-row" class="button" href="#">Add</a></td>
</tr>
<?php endif; ?>
<? } ?>
<!-- empty hidden one for jQuery -->
<tr class="empty-row screen-reader-text">
<td><input type="text" class="widefat" name="name[]" /></td>
<td><input type="text" class="widefat" name="url[]" value="" /></td>
<td><a class="button remove-row" href="#">Remove</a></td>
<td><a id="add-row" class="button" href="#">Add</a></td>
</tr>
</tbody>
</table>
</p>
<?php
}
// update
public function update($new_instance, $old_instance)
{
$instance = array();
$instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';
return $instance;
}
} // Class dynamic_widget ends here
// Register and load the widget
function wpb_load_widget()
{
register_widget('dynamic_widget');
}
add_action('widgets_init', 'wpb_load_widget');
这是一个截图：
现在有很多问题，首先javascript“添加”按钮不再起作用，我不知道如何保存数据以便以后访问。
知道如何为标签制作动态输入字段吗？它不必与我分享的 gist 中的代码相似，但最好让我的修改生效。
【问题讨论】：
-
首先你要添加 jQuery（并且不正确），这在 Wordpress 中通常不需要并且可能会导致冲突问题
-
@TimHallman 是的，这只是为了测试，javascript 没有工作，所以我通过添加 jquery 库来测试它。
-
嗨@RainMan 你需要这个小部件在前端可见吗？这个字段应该从用户那里收集数据并且管理员用户可以访问，对吗？
-
@oserk 是的，没错
标签： javascript jquery wordpress widget