WordPress小部件中的动态输入字段
我正在尝试为我正在处理的主题的自定义窗口小部件中的预定义标签集创建动态输入字段。我希望实现这样的目标：
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个），FieldONE和FieldTWO是动态输入，我想为每个输入不同的术语课程。
因此，如果我点击( + )，则会为该标签创建两个字段FieldOne和FieldTWO。如果我点击( - )，则会删除这两个字段。
我尝试使用this 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＆＃34; Add＆＃34;按钮不再有效，我不知道如何保存数据以便以后访问。
知道如何为标签制作动态输入字段吗？它不必与我分享的要点中的代码类似，但最好能让我的修改工作。
5 个答案:
答案 0 :(得分：5)
尝试此代码，我测试了它，它的工作原理。 js代码需要插入页脚而不是小部件中，否则单击按钮将被执行两次。
在函数小部件（）中，您将看到显示输入值的循环。
<?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 [＆＃39; repeat＆＃34;]中的数组中（以了解我是如何制作循环的）
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 :(得分：1)
答案 2 :(得分：0)
<?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(
'dynamic_widget', __('Dynamic Widget', 'dynamic_widget_domain'),
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',
'id' => 'test1',
),
'Biology' => array(
'coursecode' => 'Biology 3029',
'professor' => 'Dr. James Bond',
'id' => 'test2',
),
'Math' => array(
'coursecode' => 'Math 2043',
'id' => 'test3',
),
'Physics' => array(
'coursecode' => 'Physics 2075',
'id' => 'test4',
)
);
$Inc=1;
foreach ($courses as $course_key => $course_info) {
echo $Inc;
?>
<label><?php echo $course_info['coursecode']; ?></label>
<table id="repeatable-fieldset-<?php echo $course_info['id']; ?>" width="100%" class="tableclass">
<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 addrowbtn" 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 addrowbtn" href="#">Add</a></td>
</tr>
<tr class="tablerowclone">
<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 addrowbtn" href="#">Add</a></td>
</tr>
<?php endif; } ?>
<? $Inc++; } ?>
</tbody>
</table>
<style>
.tablerowclone{display:none;}
</style>
</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function( $ ){
jQuery(document).off().on('click',' .addrowbtn', function(event) {
event.preventDefault();
var row = jQuery(this).closest(".tableclass").find("tr:last").clone();
row.removeClass( 'tablerowclone' );
//row.insertBefore( '#repeatable-fieldset-one tbody>tr:last' );
row.insertBefore(jQuery(this).closest(".tableclass").find("tbody tr.tablerowclone"));
return false;
});
jQuery(document).on('click', '.remove-row' , function() {
var RowLenth = jQuery(this).closest("tbody").children().length;
if(RowLenth>2){
jQuery(this).parents('tr').remove();
}
return false;
});
});
</script>
<?php
}
public function update($new_instance, $old_instance){
$instance = array();
$instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';
return $instance;
}
}
function wpb_load_widget()
{
register_widget('dynamic_widget');
}
add_action('widgets_init', 'wpb_load_widget');
<强>更新
似乎工作正常。
答案 3 :(得分：0)
<强>更新即可。
<?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(
'dynamic_widget', __('Dynamic Widget', 'dynamic_widget_domain'),
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',
'id' => 'test1',
),
'Biology' => array(
'coursecode' => 'Biology 3029',
'professor' => 'Dr. James Bond',
'id' => 'test2',
),
'Math' => array(
'coursecode' => 'Math 2043',
'id' => 'test3',
),
'Physics' => array(
'coursecode' => 'Physics 2075',
'id' => 'test4',
)
);
$Inc=1;
foreach ($courses as $course_key => $course_info) {
echo $Inc;
?>
<label><?php echo $course_info['coursecode']; ?></label>
<table id="repeatable-fieldset-<?php echo $course_info['id']; ?>" width="100%" class="tableclass">
<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 addrowbtn" 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 addrowbtn" href="#">Add</a></td>
</tr>
<tr class="tablerowclone">
<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 addrowbtn" href="#">Add</a></td>
</tr>
<?php endif; } ?>
<? $Inc++; } ?>
</tbody>
</table>
<style>
.tablerowclone{display:none;}
</style>
</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function( $ ){
jQuery(document).off().on('click',' .addrowbtn', function(event) {
event.preventDefault();
var row = jQuery(this).closest(".tableclass").find("tr:last").clone();
row.removeClass( 'tablerowclone' );
//row.insertBefore( '#repeatable-fieldset-one tbody>tr:last' );
row.insertBefore(jQuery(this).closest(".tableclass").find("tbody tr.tablerowclone"));
return false;
});
jQuery(document).on('click', '.remove-row' , function() {
var RowLenth = jQuery(this).closest("tbody").children().length;
if(RowLenth>2){
jQuery(this).parents('tr').remove();
}
return false;
});
});
</script>
<?php
}
public function update($new_instance, $old_instance){
$instance = array();
$instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';
return $instance;
}
}
function wpb_load_widget()
{
register_widget('dynamic_widget');
}
add_action('widgets_init', 'wpb_load_widget');
答案 4 :(得分：0)
我个人遇到的主要问题是无法使用
使用js动态创建行时$this->get_field_name( '{{field}}' )。
以下是我解决问题的方法：
function getFieldName(field){
var pattern = '<?=$this->get_field_name( "{{field}}" )?>';
return pattern.replace('{{field}}', field);
}
我知道这不是你的问题，但它可能对某人有帮助。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？