我正在尝试为我正在处理的主题的自定义小部件中的预定义标签集创建动态输入字段.我希望实现这样的目标:
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','Math' => array( 'coursecode' => 'Math 2043','Physics' => array( 'coursecode' => 'Physics 2075',) ); ?> <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“添加”按钮不再有效,我不知道如何保存数据以便以后访问.
解决方法
尝试这个代码,我测试了它,它的工作原理. 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','dynamic_widget_domain')) ); $this->courses = array( 'Chemistry' => array( 'coursecode' => 'Chemistry 2059','Biology' => array( 'coursecode' => 'Biology 3029','Math' => array( 'coursecode' => 'Math 2043','Physics' => array( 'coursecode' => 'Physics 2075',) ); 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']); // 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)