【转载】为 WordPress 添加可重复使用的自定义metabox 字段

这个是今天逛网站,在知更鸟网站发现的代码,可以实现在编辑文章的时候无限添加字段的代码,比如你要在文章中放一组图片、音乐、视频等等相同类型的东西,事后还能继续添加就可以用这个代码写。

演示:

图片[1]-【转载】为 WordPress 添加可重复使用的自定义metabox 字段 - KEKC博客-KEKC博客

代码一

add_action('admin_init', 'add_meta_boxes', 1);
function add_meta_boxes() {
add_meta_box( 'repeatable-fields', '选项卡名称', 'repeatable_meta_box_display', 'post', 'normal', 'high');
}
function repeatable_meta_box_display() {
global $post;
$repeatable_fields = get_post_meta($post->ID, 'repeatable_fields', true);
wp_nonce_field( 'repeatable_meta_box_nonce', 'repeatable_meta_box_nonce' );
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.metabox_submit').click(function(e) {
e.preventDefault();
$('#publish').click();
});
$('#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;
});
$('#repeatable-fieldset-one tbody').sortable({
opacity: 0.6,
revert: true,
cursor: 'move',
handle: '.sort'
});
});
</script>
<table id="repeatable-fieldset-one" width="100%">
<thead>
<tr>
<th width="2%"></th>
<th width="30%">字段名称</th>
<th width="60%">字段内容</th>
<th width="2%"></th>
</tr>
</thead>
<tbody>
<?php
if ( $repeatable_fields ) :
foreach ( $repeatable_fields as $field ) {
?>
<tr>
<td><a class="button remove-row" href="#">-</a></td>
<td><input type="text" class="widefat" name="name[]" value="<?php if($field['name'] != '') echo esc_attr( $field['name'] ); ?>" /></td>
<td><input type="text" class="widefat" name="url[]" value="<?php if ($field['url'] != '') echo esc_attr( $field['url'] ); else echo 'http://'; ?>" /></td>
<td><a class="sort">|||</a></td>
</tr>
<?php
}
else :
// show a blank one
?>
<tr>
<td><a class="button remove-row" href="#">-</a></td>
<td><input type="text" class="widefat" name="name[]" /></td>
<td><input type="text" class="widefat" name="url[]" value="http://" /></td>
<td><a class="sort">|||</a></td>
</tr>
<?php endif; ?>
<!-- empty hidden one for jQuery -->
<tr class="empty-row screen-reader-text">
<td><a class="button remove-row" href="#">-</a></td>
<td><input type="text" class="widefat" name="name[]" /></td>
<td><input type="text" class="widefat" name="url[]" value="http://" /></td>
<td><a class="sort">|||</a></td>
</tr>
</tbody>
</table>
<p><a id="add-row" class="button" href="#">添加</a>
<input type="submit" class="metabox_submit" value="保存" />
</p>
<?php
}
add_action('save_post', 'repeatable_meta_box_save');
function repeatable_meta_box_save($post_id) {
if ( ! isset( $_POST['repeatable_meta_box_nonce'] ) ||
! wp_verify_nonce( $_POST['repeatable_meta_box_nonce'], 'repeatable_meta_box_nonce' ) )
return;
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
return;
if (!current_user_can('edit_post', $post_id))
return;
$old = get_post_meta($post_id, 'repeatable_fields', true);
$new = array();
$names = $_POST['name'];
$urls = $_POST['url'];
$count = count( $names );
for ( $i = 0; $i < $count; $i++ ) {
if ( $names[$i] != '' ) :
$new[$i]['name'] = stripslashes( strip_tags( $names[$i] ) );
if ( $urls[$i] == 'http://' )
$new[$i]['url'] = '';
else
$new[$i]['url'] = stripslashes( $urls[$i] ); // and however you want to sanitize
endif;
}
if ( !empty( $new ) && $new != $old )
update_post_meta( $post_id, 'repeatable_fields', $new );
elseif ( empty($new) && $old )
delete_post_meta( $post_id, 'repeatable_fields', $old );
}
add_action('admin_init', 'add_meta_boxes', 1);
function add_meta_boxes() {
  add_meta_box( 'repeatable-fields', '选项卡名称', 'repeatable_meta_box_display', 'post', 'normal', 'high');
}
 
function repeatable_meta_box_display() {
  global $post;
 
  $repeatable_fields = get_post_meta($post->ID, 'repeatable_fields', true);
 
 
  wp_nonce_field( 'repeatable_meta_box_nonce', 'repeatable_meta_box_nonce' );
?>
  <script type="text/javascript">
jQuery(document).ready(function($) {
  $('.metabox_submit').click(function(e) {
    e.preventDefault();
    $('#publish').click();
  });
  $('#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;
  });
 
  $('#repeatable-fieldset-one tbody').sortable({
    opacity: 0.6,
    revert: true,
    cursor: 'move',
    handle: '.sort'
  });
});
  </script>
 
  <table id="repeatable-fieldset-one" width="100%">
  <thead>
    <tr>
      <th width="2%"></th>
      <th width="30%">字段名称</th>
      <th width="60%">字段内容</th>
      <th width="2%"></th>
    </tr>
  </thead>
  <tbody>
  <?php
 
  if ( $repeatable_fields ) :
 
    foreach ( $repeatable_fields as $field ) {
?>
  <tr>
    <td><a class="button remove-row" href="#">-</a></td>
    <td><input type="text" class="widefat" name="name[]" value="<?php if($field['name'] != '') echo esc_attr( $field['name'] ); ?>" /></td>
 
    <td><input type="text" class="widefat" name="url[]" value="<?php if ($field['url'] != '') echo esc_attr( $field['url'] ); else echo 'http://'; ?>" /></td>
    <td><a class="sort">|||</a></td>
    
  </tr>
  <?php
    }
  else :
    // show a blank one
?>
  <tr>
    <td><a class="button remove-row" href="#">-</a></td>
    <td><input type="text" class="widefat" name="name[]" /></td>
 
 
    <td><input type="text" class="widefat" name="url[]" value="http://" /></td>
<td><a class="sort">|||</a></td>
    
  </tr>
  <?php endif; ?>
 
  <!-- empty hidden one for jQuery -->
  <tr class="empty-row screen-reader-text">
    <td><a class="button remove-row" href="#">-</a></td>
    <td><input type="text" class="widefat" name="name[]" /></td>
 
 
    <td><input type="text" class="widefat" name="url[]" value="http://" /></td>
<td><a class="sort">|||</a></td>
    
  </tr>
  </tbody>
  </table>
 
  <p><a id="add-row" class="button" href="#">添加</a>
  <input type="submit" class="metabox_submit" value="保存" />
  </p>
  
  <?php
}
 
add_action('save_post', 'repeatable_meta_box_save');
function repeatable_meta_box_save($post_id) {
  if ( ! isset( $_POST['repeatable_meta_box_nonce'] ) ||
    ! wp_verify_nonce( $_POST['repeatable_meta_box_nonce'], 'repeatable_meta_box_nonce' ) )
    return;
 
  if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
    return;
 
  if (!current_user_can('edit_post', $post_id))
    return;
 
  $old = get_post_meta($post_id, 'repeatable_fields', true);
  $new = array();
 
 
  $names = $_POST['name'];
  $urls = $_POST['url'];
 
  $count = count( $names );
 
  for ( $i = 0; $i < $count; $i++ ) {
    if ( $names[$i] != '' ) :
      $new[$i]['name'] = stripslashes( strip_tags( $names[$i] ) );
 
 
    if ( $urls[$i] == 'http://' )
      $new[$i]['url'] = '';
    else
      $new[$i]['url'] = stripslashes( $urls[$i] ); // and however you want to sanitize
    endif;
  }
 
  if ( !empty( $new ) && $new != $old )
    update_post_meta( $post_id, 'repeatable_fields', $new );
  elseif ( empty($new) && $old )
    delete_post_meta( $post_id, 'repeatable_fields', $old );
}
add_action('admin_init', 'add_meta_boxes', 1); function add_meta_boxes() { add_meta_box( 'repeatable-fields', '选项卡名称', 'repeatable_meta_box_display', 'post', 'normal', 'high'); } function repeatable_meta_box_display() { global $post; $repeatable_fields = get_post_meta($post->ID, 'repeatable_fields', true); wp_nonce_field( 'repeatable_meta_box_nonce', 'repeatable_meta_box_nonce' ); ?> <script type="text/javascript"> jQuery(document).ready(function($) { $('.metabox_submit').click(function(e) { e.preventDefault(); $('#publish').click(); }); $('#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; }); $('#repeatable-fieldset-one tbody').sortable({ opacity: 0.6, revert: true, cursor: 'move', handle: '.sort' }); }); </script> <table id="repeatable-fieldset-one" width="100%"> <thead> <tr> <th width="2%"></th> <th width="30%">字段名称</th> <th width="60%">字段内容</th> <th width="2%"></th> </tr> </thead> <tbody> <?php if ( $repeatable_fields ) : foreach ( $repeatable_fields as $field ) { ?> <tr> <td><a class="button remove-row" href="#">-</a></td> <td><input type="text" class="widefat" name="name[]" value="<?php if($field['name'] != '') echo esc_attr( $field['name'] ); ?>" /></td> <td><input type="text" class="widefat" name="url[]" value="<?php if ($field['url'] != '') echo esc_attr( $field['url'] ); else echo 'http://'; ?>" /></td> <td><a class="sort">|||</a></td> </tr> <?php } else : // show a blank one ?> <tr> <td><a class="button remove-row" href="#">-</a></td> <td><input type="text" class="widefat" name="name[]" /></td> <td><input type="text" class="widefat" name="url[]" value="http://" /></td> <td><a class="sort">|||</a></td> </tr> <?php endif; ?> <!-- empty hidden one for jQuery --> <tr class="empty-row screen-reader-text"> <td><a class="button remove-row" href="#">-</a></td> <td><input type="text" class="widefat" name="name[]" /></td> <td><input type="text" class="widefat" name="url[]" value="http://" /></td> <td><a class="sort">|||</a></td> </tr> </tbody> </table> <p><a id="add-row" class="button" href="#">添加</a> <input type="submit" class="metabox_submit" value="保存" /> </p> <?php } add_action('save_post', 'repeatable_meta_box_save'); function repeatable_meta_box_save($post_id) { if ( ! isset( $_POST['repeatable_meta_box_nonce'] ) || ! wp_verify_nonce( $_POST['repeatable_meta_box_nonce'], 'repeatable_meta_box_nonce' ) ) return; if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return; if (!current_user_can('edit_post', $post_id)) return; $old = get_post_meta($post_id, 'repeatable_fields', true); $new = array(); $names = $_POST['name']; $urls = $_POST['url']; $count = count( $names ); for ( $i = 0; $i < $count; $i++ ) { if ( $names[$i] != '' ) : $new[$i]['name'] = stripslashes( strip_tags( $names[$i] ) ); if ( $urls[$i] == 'http://' ) $new[$i]['url'] = ''; else $new[$i]['url'] = stripslashes( $urls[$i] ); // and however you want to sanitize endif; } if ( !empty( $new ) && $new != $old ) update_post_meta( $post_id, 'repeatable_fields', $new ); elseif ( empty($new) && $old ) delete_post_meta( $post_id, 'repeatable_fields', $old ); }

调用:

<?php $repeatable_fields = get_post_meta( $post->ID, 'repeatable_fields', true ); if ( $repeatable_fields ) : ?>
<div class="list">
<?php foreach ( $repeatable_fields as $field ) { ?>
<div class="row">
<?php if( $field['name'] != '' ) echo '<span class="field">'. esc_attr( $field['name'] ) . '</span>'; ?>
<?php if( $field['url'] != '' ) echo '<span class="field">'. esc_attr( $field['url'] ) . '</span>'; ?>
</div>
<?php } ?>
</div>
<?php endif; ?>
<?php $repeatable_fields = get_post_meta( $post->ID, 'repeatable_fields', true );  if ( $repeatable_fields ) : ?>
  <div class="list">
    <?php foreach ( $repeatable_fields as $field ) { ?>
      <div class="row">
        <?php if( $field['name'] != '' ) echo '<span class="field">'. esc_attr( $field['name'] ) . '</span>'; ?>
        <?php if( $field['url'] != '' ) echo '<span class="field">'. esc_attr( $field['url'] ) . '</span>'; ?>
      </div>
    <?php } ?>
  </div>
<?php endif; ?>
<?php $repeatable_fields = get_post_meta( $post->ID, 'repeatable_fields', true ); if ( $repeatable_fields ) : ?> <div class="list"> <?php foreach ( $repeatable_fields as $field ) { ?> <div class="row"> <?php if( $field['name'] != '' ) echo '<span class="field">'. esc_attr( $field['name'] ) . '</span>'; ?> <?php if( $field['url'] != '' ) echo '<span class="field">'. esc_attr( $field['url'] ) . '</span>'; ?> </div> <?php } ?> </div> <?php endif; ?>

代码二

多添加了一组选项列表,如图:

图片[2]-【转载】为 WordPress 添加可重复使用的自定义metabox 字段 - KEKC博客-KEKC博客

代码:

function hhs_get_sample_options() {
$options = array (
'Option 1' => 'option1',
'Option 2' => 'option2',
'Option 3' => 'option3',
'Option 4' => 'option4',
);
return $options;
}
add_action('admin_init', 'hhs_add_meta_boxes', 1);
function hhs_add_meta_boxes() {
add_meta_box( 'repeatable-fields', 'Repeatable Fields', 'hhs_repeatable_meta_box_display', 'post', 'normal', 'default');
}
function hhs_repeatable_meta_box_display() {
global $post;
$repeatable_fields = get_post_meta($post->ID, 'repeatable_fields', true);
$options = hhs_get_sample_options();
wp_nonce_field( 'hhs_repeatable_meta_box_nonce', 'hhs_repeatable_meta_box_nonce' );
?>
<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>
<table id="repeatable-fieldset-one" width="100%">
<thead>
<tr>
<th width="40%">Name</th>
<th width="12%">Select</th>
<th width="40%">URL</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>
<select name="select[]">
<?php foreach ( $options as $label => $value ) : ?>
<option value="<?php echo $value; ?>"<?php selected( $field['select'], $value ); ?>><?php echo $label; ?></option>
<?php endforeach; ?>
</select>
</td>
<td><input type="text" class="widefat" name="url[]" value="<?php if ($field['url'] != '') echo esc_attr( $field['url'] ); else echo 'http://'; ?>" /></td>
<td><a class="button remove-row" href="#">Remove</a></td>
</tr>
<?php
}
else :
// show a blank one
?>
<tr>
<td><input type="text" class="widefat" name="name[]" /></td>
<td>
<select name="select[]">
<?php foreach ( $options as $label => $value ) : ?>
<option value="<?php echo $value; ?>"><?php echo $label; ?></option>
<?php endforeach; ?>
</select>
</td>
<td><input type="text" class="widefat" name="url[]" value="http://" /></td>
<td><a class="button remove-row" href="#">Remove</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>
<select name="select[]">
<?php foreach ( $options as $label => $value ) : ?>
<option value="<?php echo $value; ?>"><?php echo $label; ?></option>
<?php endforeach; ?>
</select>
</td>
<td><input type="text" class="widefat" name="url[]" value="http://" /></td>
<td><a class="button remove-row" href="#">Remove</a></td>
</tr>
</tbody>
</table>
<p><a id="add-row" class="button" href="#">Add another</a></p>
<?php
}
add_action('save_post', 'hhs_repeatable_meta_box_save');
function hhs_repeatable_meta_box_save($post_id) {
if ( ! isset( $_POST['hhs_repeatable_meta_box_nonce'] ) ||
! wp_verify_nonce( $_POST['hhs_repeatable_meta_box_nonce'], 'hhs_repeatable_meta_box_nonce' ) )
return;
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
return;
if (!current_user_can('edit_post', $post_id))
return;
$old = get_post_meta($post_id, 'repeatable_fields', true);
$new = array();
$options = hhs_get_sample_options();
$names = $_POST['name'];
$selects = $_POST['select'];
$urls = $_POST['url'];
$count = count( $names );
for ( $i = 0; $i < $count; $i++ ) {
if ( $names[$i] != '' ) :
$new[$i]['name'] = stripslashes( strip_tags( $names[$i] ) );
if ( in_array( $selects[$i], $options ) )
$new[$i]['select'] = $selects[$i];
else
$new[$i]['select'] = '';
if ( $urls[$i] == 'http://' )
$new[$i]['url'] = '';
else
$new[$i]['url'] = stripslashes( $urls[$i] ); // and however you want to sanitize
endif;
}
if ( !empty( $new ) && $new != $old )
update_post_meta( $post_id, 'repeatable_fields', $new );
elseif ( empty($new) && $old )
delete_post_meta( $post_id, 'repeatable_fields', $old );
}
function hhs_get_sample_options() {
  $options = array (
    'Option 1' => 'option1',
    'Option 2' => 'option2',
    'Option 3' => 'option3',
    'Option 4' => 'option4',
  );
  
  return $options;
}
 
add_action('admin_init', 'hhs_add_meta_boxes', 1);
function hhs_add_meta_boxes() {
  add_meta_box( 'repeatable-fields', 'Repeatable Fields', 'hhs_repeatable_meta_box_display', 'post', 'normal', 'default');
}
 
function hhs_repeatable_meta_box_display() {
  global $post;
 
  $repeatable_fields = get_post_meta($post->ID, 'repeatable_fields', true);
  $options = hhs_get_sample_options();
 
  wp_nonce_field( 'hhs_repeatable_meta_box_nonce', 'hhs_repeatable_meta_box_nonce' );
  ?>
  <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>
  
  <table id="repeatable-fieldset-one" width="100%">
  <thead>
    <tr>
      <th width="40%">Name</th>
      <th width="12%">Select</th>
      <th width="40%">URL</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>
      <select name="select[]">
      <?php foreach ( $options as $label => $value ) : ?>
      <option value="<?php echo $value; ?>"<?php selected( $field['select'], $value ); ?>><?php echo $label; ?></option>
      <?php endforeach; ?>
      </select>
    </td>
  
    <td><input type="text" class="widefat" name="url[]" value="<?php if ($field['url'] != '') echo esc_attr( $field['url'] ); else echo 'http://'; ?>" /></td>
  
    <td><a class="button remove-row" href="#">Remove</a></td>
  </tr>
  <?php
  }
  else :
  // show a blank one
  ?>
  <tr>
    <td><input type="text" class="widefat" name="name[]" /></td>
  
    <td>
      <select name="select[]">
      <?php foreach ( $options as $label => $value ) : ?>
      <option value="<?php echo $value; ?>"><?php echo $label; ?></option>
      <?php endforeach; ?>
      </select>
    </td>
  
    <td><input type="text" class="widefat" name="url[]" value="http://" /></td>
  
    <td><a class="button remove-row" href="#">Remove</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>
      <select name="select[]">
      <?php foreach ( $options as $label => $value ) : ?>
      <option value="<?php echo $value; ?>"><?php echo $label; ?></option>
      <?php endforeach; ?>
      </select>
    </td>
    
    <td><input type="text" class="widefat" name="url[]" value="http://" /></td>
      
    <td><a class="button remove-row" href="#">Remove</a></td>
  </tr>
  </tbody>
  </table>
  
  <p><a id="add-row" class="button" href="#">Add another</a></p>
  <?php
}
 
add_action('save_post', 'hhs_repeatable_meta_box_save');
function hhs_repeatable_meta_box_save($post_id) {
  if ( ! isset( $_POST['hhs_repeatable_meta_box_nonce'] ) ||
  ! wp_verify_nonce( $_POST['hhs_repeatable_meta_box_nonce'], 'hhs_repeatable_meta_box_nonce' ) )
    return;
  
  if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
    return;
  
  if (!current_user_can('edit_post', $post_id))
    return;
  
  $old = get_post_meta($post_id, 'repeatable_fields', true);
  $new = array();
  $options = hhs_get_sample_options();
  
  $names = $_POST['name'];
  $selects = $_POST['select'];
  $urls = $_POST['url'];
  
  $count = count( $names );
  
  for ( $i = 0; $i < $count; $i++ ) {
    if ( $names[$i] != '' ) :
      $new[$i]['name'] = stripslashes( strip_tags( $names[$i] ) );
      
      if ( in_array( $selects[$i], $options ) )
        $new[$i]['select'] = $selects[$i];
      else
        $new[$i]['select'] = '';
    
      if ( $urls[$i] == 'http://' )
        $new[$i]['url'] = '';
      else
        $new[$i]['url'] = stripslashes( $urls[$i] ); // and however you want to sanitize
    endif;
  }
 
  if ( !empty( $new ) && $new != $old )
    update_post_meta( $post_id, 'repeatable_fields', $new );
  elseif ( empty($new) && $old )
    delete_post_meta( $post_id, 'repeatable_fields', $old );
}
function hhs_get_sample_options() { $options = array ( 'Option 1' => 'option1', 'Option 2' => 'option2', 'Option 3' => 'option3', 'Option 4' => 'option4', ); return $options; } add_action('admin_init', 'hhs_add_meta_boxes', 1); function hhs_add_meta_boxes() { add_meta_box( 'repeatable-fields', 'Repeatable Fields', 'hhs_repeatable_meta_box_display', 'post', 'normal', 'default'); } function hhs_repeatable_meta_box_display() { global $post; $repeatable_fields = get_post_meta($post->ID, 'repeatable_fields', true); $options = hhs_get_sample_options(); wp_nonce_field( 'hhs_repeatable_meta_box_nonce', 'hhs_repeatable_meta_box_nonce' ); ?> <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> <table id="repeatable-fieldset-one" width="100%"> <thead> <tr> <th width="40%">Name</th> <th width="12%">Select</th> <th width="40%">URL</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> <select name="select[]"> <?php foreach ( $options as $label => $value ) : ?> <option value="<?php echo $value; ?>"<?php selected( $field['select'], $value ); ?>><?php echo $label; ?></option> <?php endforeach; ?> </select> </td> <td><input type="text" class="widefat" name="url[]" value="<?php if ($field['url'] != '') echo esc_attr( $field['url'] ); else echo 'http://'; ?>" /></td> <td><a class="button remove-row" href="#">Remove</a></td> </tr> <?php } else : // show a blank one ?> <tr> <td><input type="text" class="widefat" name="name[]" /></td> <td> <select name="select[]"> <?php foreach ( $options as $label => $value ) : ?> <option value="<?php echo $value; ?>"><?php echo $label; ?></option> <?php endforeach; ?> </select> </td> <td><input type="text" class="widefat" name="url[]" value="http://" /></td> <td><a class="button remove-row" href="#">Remove</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> <select name="select[]"> <?php foreach ( $options as $label => $value ) : ?> <option value="<?php echo $value; ?>"><?php echo $label; ?></option> <?php endforeach; ?> </select> </td> <td><input type="text" class="widefat" name="url[]" value="http://" /></td> <td><a class="button remove-row" href="#">Remove</a></td> </tr> </tbody> </table> <p><a id="add-row" class="button" href="#">Add another</a></p> <?php } add_action('save_post', 'hhs_repeatable_meta_box_save'); function hhs_repeatable_meta_box_save($post_id) { if ( ! isset( $_POST['hhs_repeatable_meta_box_nonce'] ) || ! wp_verify_nonce( $_POST['hhs_repeatable_meta_box_nonce'], 'hhs_repeatable_meta_box_nonce' ) ) return; if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return; if (!current_user_can('edit_post', $post_id)) return; $old = get_post_meta($post_id, 'repeatable_fields', true); $new = array(); $options = hhs_get_sample_options(); $names = $_POST['name']; $selects = $_POST['select']; $urls = $_POST['url']; $count = count( $names ); for ( $i = 0; $i < $count; $i++ ) { if ( $names[$i] != '' ) : $new[$i]['name'] = stripslashes( strip_tags( $names[$i] ) ); if ( in_array( $selects[$i], $options ) ) $new[$i]['select'] = $selects[$i]; else $new[$i]['select'] = ''; if ( $urls[$i] == 'http://' ) $new[$i]['url'] = ''; else $new[$i]['url'] = stripslashes( $urls[$i] ); // and however you want to sanitize endif; } if ( !empty( $new ) && $new != $old ) update_post_meta( $post_id, 'repeatable_fields', $new ); elseif ( empty($new) && $old ) delete_post_meta( $post_id, 'repeatable_fields', $old ); }

调用:

<?php $repeatable_fields = get_post_meta( $post->ID, 'repeatable_fields', true ); if ( $repeatable_fields ) : ?>
<div class="list">
<?php foreach ( $repeatable_fields as $field ) { ?>
<div class="row">
<?php if( $field['name'] != '' ) echo '<span class="field">'. esc_attr( $field['name'] ) . '</span>'; ?>
<?php if( $field['select'] != '' ) echo '<span class="field">'. esc_attr( $field['select'] ) . '</span>'; ?>
<?php if( $field['url'] != '' ) echo '<span class="field">'. esc_attr( $field['url'] ) . '</span>'; ?>
</div>
<?php } ?>
</div>
<?php endif; ?>
<?php $repeatable_fields = get_post_meta( $post->ID, 'repeatable_fields', true );  if ( $repeatable_fields ) : ?>
  <div class="list">
    <?php foreach ( $repeatable_fields as $field ) { ?>
      <div class="row">
        <?php if( $field['name'] != '' ) echo '<span class="field">'. esc_attr( $field['name'] ) . '</span>'; ?>
        <?php if( $field['select'] != '' ) echo '<span class="field">'. esc_attr( $field['select'] ) . '</span>'; ?>
        <?php if( $field['url'] != '' ) echo '<span class="field">'. esc_attr( $field['url'] ) . '</span>'; ?>
      </div>
    <?php } ?>
  </div>
<?php endif; ?>
<?php $repeatable_fields = get_post_meta( $post->ID, 'repeatable_fields', true ); if ( $repeatable_fields ) : ?> <div class="list"> <?php foreach ( $repeatable_fields as $field ) { ?> <div class="row"> <?php if( $field['name'] != '' ) echo '<span class="field">'. esc_attr( $field['name'] ) . '</span>'; ?> <?php if( $field['select'] != '' ) echo '<span class="field">'. esc_attr( $field['select'] ) . '</span>'; ?> <?php if( $field['url'] != '' ) echo '<span class="field">'. esc_attr( $field['url'] ) . '</span>'; ?> </div> <?php } ?> </div> <?php endif; ?>
© 版权声明
THE END
喜欢就支持一下吧
点赞9 分享
May we all have the power to love ourselves and others.
愿我们,都有能力爱自己,有余力爱别人
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称常用语 夸夸
夸夸
还有吗!没看够!
表情代码图片快捷回复

    暂无评论内容