Question

我正在尝试为我正在处理的主题的自定义窗口小部件中的预定义标签集创建动态输入字段。我希望实现这样的目标：

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;按钮不再有效，我不知道如何保存数据以便以后访问。

知道如何为标签制作动态输入字段吗？它不必与我分享的要点中的代码类似，但最好能让我的修改工作。

Answer 1

尝试此代码，我测试了它，它的工作原理。 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)

Answer 2

我认为自定义此插件可能会达到目的：https://wordpress.org/plugins/advanced-custom-fields-table-field/installation/

Answer 3

        <?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');

<强>更新

似乎工作正常。

Answer 4

<强>更新即可。

        <?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');

Answer 5

我个人遇到的主要问题是无法使用使用js动态创建行时$this->get_field_name( '{{field}}' )。以下是我解决问题的方法：

function getFieldName(field){
    var pattern = '<?=$this->get_field_name( "{{field}}" )?>';
    return pattern.replace('{{field}}', field);
}

我知道这不是你的问题，但它可能对某人有帮助。

WordPress小部件中的动态输入字段

5 个答案: