WordPress小部件中的动态输入字段
Rai*_*Man 8 javascript wordpress jquery widget
我正在尝试为我正在处理的主题的自定义小部件中的预定义标签集创建动态输入字段.我希望实现这样的目标:
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是化学,生物,数学和物理(只有预定义的标签,4 max)和FieldONE和FieldTWO是动态的输入,我想输入每个当然不同的术语.
所以,如果我点击( + ),两个领域FieldOne,并FieldTWO为标签创建.如果我单击( - ),则两个字段都将被删除.
我尝试使用这个Gist,它创建了与metabox类似的动态输入,到目前为止我得到了这个:
<?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"添加"按钮不再有效,我不知道如何保存数据以便以后访问.
任何想法如何为标签制作动态输入字段？它不必与我分享的要点中的代码类似,但最好能让我的修改工作.
小智 6
试试这个代码，我对其进行了测试，并且可以正常工作。js代码需要插入页脚而不是小部件中，否则单击按钮将被执行两次。
在函数widget（）中，您将看到显示输入值的循环。
<?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 $courses;
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'))
);
$this->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',
)
);
add_action( 'in_admin_footer',array( $this,'jsfooter'));
}
public function jsfooter() {
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function( $ ){
$(document ).off('click').on('click','div.open .add-row' , function() {
var row = $(this).closest('tr').clone(true);
row.find('input').each(function(){
$(this).val("");
});
// row.insertBefore( '#repeatable-fieldset-one tbody>tr:last' );
$(this).parents('tr').after(row);
return false;
});
$( document).on('click', 'div.open .remove-row',function() {
if ($(this).parents('tbody').find('tr').length >1) {
$(this).parents('tr').remove();
}
return false;
});
});
</script>
<?php
}
// widget
public function widget($args, $instance)
{
$title = apply_filters('widget_title', $instance['title']);
// This is where you run the code and display the output
foreach ($this->courses as $course_key => $course_info) {
echo $course_info['coursecode'] .'<br>';
foreach ($instance['repeat'][$course_key ]["fall"] as $k=>$field) {
echo 'Fall Term ' . $field .' / ';
echo 'Winter Term ' . $instance['repeat'][$course_key ]["winter"][$k] .'<br>';
}
}
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= isset ( $instance['repeat'] ) ? $instance['repeat'] : array();
?>
<?php foreach ($this->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>
<th width="8%"></th>
</tr>
</thead>
<tbody>
<?php
if ($repeatable_fields[$course_key ]["fall"] || $repeatable_fields[$course_key ]["winter"]) :
foreach ($repeatable_fields[$course_key ]["fall"] as $k=>$field) {
?>
<tr>
<td><input type="text" class="widefat" name="<?php echo $this->get_field_name( 'repeat' )?>[<?php echo $course_key;?>][fall][]" value="<?php echo $field; ?>" /></td>
<td><input type="text" class="widefat" name="<?php echo $this->get_field_name( 'repeat' )?>[<?php echo $course_key;?>][winter][]" value="<?php echo $repeatable_fields[$course_key ]["winter"][$k]; ?>" /></td>
<td><a class="button remove-row" href="#">Remove</a></td>
<td><a class="button add-row" class="button" href="#">Add</a></td>
</tr>
<?php
} else :
// show a blank one
?>
<tr>
<td><input type="text" class="widefat" name="<?php echo $this->get_field_name( 'repeat' )?>[<?php echo $course_key;?>][fall][]" /></td>
<td><input type="text" class="widefat" name="<?php echo $this->get_field_name( 'repeat' )?>[<?php echo $course_key;?>][winter][]" value="" /></td>
<td><a class="button remove-row" href="#">Remove</a></td>
<td><a class="button add-row" class="button" href="#">Add</a></td>
</tr>
<?php endif; ?>
</tbody>
</table>
<?php } ?>
<!-- empty hidden one for jQuery -->
<?php
}
// update
public function update($new_instance, $old_instance)
{
$instance = array();
$instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';
$instance['repeat'] = array();
if ( isset ( $new_instance['repeat'] ) )
{
foreach ( $new_instance['repeat'] as $k =>$value )
{
$instance['repeat'][$k] = $value;
}
}
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');
数据将存储在$ instance ['repeat“]中的数组中（以了解我如何进行循环）
array (size=4)
'Chemistry' =>
array (size=2)
'fall' =>
array (size=1)
0 => string 'AAA' (length=3)
'winter' =>
array (size=1)
0 => string 'BBBBBBB' (length=7)
'Biology' =>
array (size=2)
'fall' =>
array (size=2)
0 => string 'CCCCCC' (length=6)
1 => string 'EEEEEEE' (length=7)
'winter' =>
array (size=2)
0 => string 'DDDD' (length=4)
1 => string 'FFFFFFFF' (length=8)
'Math' =>
array (size=2)
'fall' =>
array (size=1)
0 => string 'GGGGGGG' (length=7)
'winter' =>
array (size=1)
0 => string 'HHHHHH' (length=6)
'Physics' =>
array (size=2)
'fall' =>
array (size=1)
0 => string 'IIIIIIIII' (length=9)
'winter' =>
array (size=1)
0 => string 'JJJJJJJJ' (length=8)
小智 1
我认为自定义此插件可能会达到目的：https://wordpress.org/plugins/advanced-custom-fields-table-field/installation/