WordPress教程

WordPress 添加可重复使用的自定义metabox 字段

阿里云

所谓 WordPress metabox,就是类似文章编辑框下面 WP 自带的自定义字段的设置面板,通过 add_meta_box() 可以添加自定义面板,方便地输入相关信息,并在前端调用实现一些功能。

基本的面板添加代码网上很多,本文分享两个可重复使用的自定义 metabox 字段面板。

也想出现在这里?联系我们
创客主机

section

代码一

预设两个字段,可重复添加,并以组数存储在数据库 wp_postmeta 表中

  1.     add_action('admin_init', 'add_meta_boxes', 1);
  2.     function add_meta_boxes() {
  3.     	add_meta_box( 'repeatable-fields', 'Audio Playlist', 'repeatable_meta_box_display', 'post', 'normal', 'high');
  4.     }
  5.  
  6.     function repeatable_meta_box_display() {
  7.     	global $post;
  8.  
  9.     	$repeatable_fields = get_post_meta($post->ID, 'repeatable_fields', true);
  10.  
  11.  
  12.     	wp_nonce_field( 'repeatable_meta_box_nonce', 'repeatable_meta_box_nonce' );
  13.     ?>
  14.     	<script type="text/javascript">
  15.     jQuery(document).ready(function($) {
  16.     	$('.metabox_submit').click(function(e) {
  17.     		e.preventDefault();
  18.     		$('#publish').click();
  19.     	});
  20.     	$('#add-row').on('click', function() {
  21.     		var row = $('.empty-row.screen-reader-text').clone(true);
  22.     		row.removeClass('empty-row screen-reader-text');
  23.     		row.insertBefore('#repeatable-fieldset-one tbody>tr:last');
  24.     		return false;
  25.     	});
  26.     	$('.remove-row').on('click', function() {
  27.     		$(this).parents('tr').remove();
  28.     		return false;
  29.     	});
  30.  
  31.     	$('#repeatable-fieldset-one tbody').sortable({
  32.     		opacity: 0.6,
  33.     		revert: true,
  34.     		cursor: 'move',
  35.     		handle: '.sort'
  36.     	});
  37.     });
  38.     	</script>
  39.  
  40.     	<table id="repeatable-fieldset-one" width="100%">
  41.     	<thead>
  42.     		<tr>
  43.     			<th width="2%"></th>
  44.     			<th width="30%">Name</th>
  45.     			<th width="60%">URL</th>
  46.     			<th width="2%"></th>
  47.     		</tr>
  48.     	</thead>
  49.     	<tbody>
  50.     	<?php
  51.  
  52.     	if ( $repeatable_fields ) :
  53.  
  54.     		foreach ( $repeatable_fields as $field ) {
  55.     ?>
  56.     	<tr>
  57.     		<td><a class="button remove-row" href="#">-</a></td>
  58.     		<td><input type="text" class="widefat" name="name[]" value="<?php if($field['name'] != '') echo esc_attr( $field['name'] ); ?>" /></td>
  59.  
  60.     		<td><input type="text" class="widefat" name="url[]" value="<?php if ($field['url'] != '') echo esc_attr( $field['url'] ); else echo 'http://'; ?>" /></td>
  61.     		<td><a class="sort">|||</a></td>
  62.  
  63.     	</tr>
  64.     	<?php
  65.     		}
  66.     	else :
  67.     		// show a blank one
  68.     ?>
  69.     	<tr>
  70.     		<td><a class="button remove-row" href="#">-</a></td>
  71.     		<td><input type="text" class="widefat" name="name[]" /></td>
  72.  
  73.  
  74.     		<td><input type="text" class="widefat" name="url[]" value="http://" /></td>
  75.     <td><a class="sort">|||</a></td>
  76.  
  77.     	</tr>
  78.     	<?php endif; ?>
  79.  
  80.     	<!-- empty hidden one for jQuery -->
  81.     	<tr class="empty-row screen-reader-text">
  82.     		<td><a class="button remove-row" href="#">-</a></td>
  83.     		<td><input type="text" class="widefat" name="name[]" /></td>
  84.  
  85.  
  86.     		<td><input type="text" class="widefat" name="url[]" value="http://" /></td>
  87.     <td><a class="sort">|||</a></td>
  88.  
  89.     	</tr>
  90.     	</tbody>
  91.     	</table>
  92.  
  93.     	<p><a id="add-row" class="button" href="#">Add another</a>
  94.     	<input type="submit" class="metabox_submit" value="Save" />
  95.     	</p>
  96.  
  97.     	<?php
  98.     }
  99.  
  100.     add_action('save_post', 'repeatable_meta_box_save');
  101.     function repeatable_meta_box_save($post_id) {
  102.     	if ( ! isset( $_POST['repeatable_meta_box_nonce'] ) ||
  103.     		! wp_verify_nonce( $_POST['repeatable_meta_box_nonce'], 'repeatable_meta_box_nonce' ) )
  104.     		return;
  105.  
  106.     	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
  107.     		return;
  108.  
  109.     	if (!current_user_can('edit_post', $post_id))
  110.     		return;
  111.  
  112.     	$old = get_post_meta($post_id, 'repeatable_fields', true);
  113.     	$new = array();
  114.  
  115.  
  116.     	$names = $_POST['name'];
  117.     	$urls = $_POST['url'];
  118.  
  119.     	$count = count( $names );
  120.  
  121.     	for ( $i = 0; $i < $count; $i++ ) {
  122.     		if ( $names[$i] != '' ) :
  123.     			$new[$i]['name'] = stripslashes( strip_tags( $names[$i] ) );
  124.  
  125.  
  126.     		if ( $urls[$i] == 'http://' )
  127.     			$new[$i]['url'] = '';
  128.     		else
  129.     			$new[$i]['url'] = stripslashes( $urls[$i] ); // and however you want to sanitize
  130.     		endif;
  131.     	}
  132.  
  133.     	if ( !empty( $new ) && $new != $old )
  134.     		update_post_meta( $post_id, 'repeatable_fields', $new );
  135.     	elseif ( empty($new) && $old )
  136.     		delete_post_meta( $post_id, 'repeatable_fields', $old );
  137.     }

前端调用

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

section

代码二

在上面的基础上,附加了下拉选项字段。

  1.     function hhs_get_sample_options() {
  2.     	$options = array (
  3.     		'Option 1' => 'option1',
  4.     		'Option 2' => 'option2',
  5.     		'Option 3' => 'option3',
  6.     		'Option 4' => 'option4',
  7.     	);
  8.  
  9.     	return $options;
  10.     }
  11.  
  12.     add_action('admin_init', 'hhs_add_meta_boxes', 1);
  13.     function hhs_add_meta_boxes() {
  14.     	add_meta_box( 'repeatable-fields', 'Repeatable Fields', 'hhs_repeatable_meta_box_display', 'post', 'normal', 'default');
  15.     }
  16.  
  17.     function hhs_repeatable_meta_box_display() {
  18.     	global $post;
  19.  
  20.     	$repeatable_fields = get_post_meta($post->ID, 'repeatable_fields', true);
  21.     	$options = hhs_get_sample_options();
  22.  
  23.     	wp_nonce_field( 'hhs_repeatable_meta_box_nonce', 'hhs_repeatable_meta_box_nonce' );
  24.     	?>
  25.     	<script type="text/javascript">
  26.     	jQuery(document).ready(function( $ ){
  27.     		$( '#add-row' ).on('click', function() {
  28.     			var row = $( '.empty-row.screen-reader-text' ).clone(true);
  29.     			row.removeClass( 'empty-row screen-reader-text' );
  30.     			row.insertBefore( '#repeatable-fieldset-one tbody>tr:last' );
  31.     			return false;
  32.     		});
  33.  
  34.     		$( '.remove-row' ).on('click', function() {
  35.     			$(this).parents('tr').remove();
  36.     			return false;
  37.     		});
  38.     	});
  39.     	</script>
  40.  
  41.     	<table id="repeatable-fieldset-one" width="100%">
  42.     	<thead>
  43.     		<tr>
  44.     			<th width="40%">Name</th>
  45.     			<th width="12%">Select</th>
  46.     			<th width="40%">URL</th>
  47.     			<th width="8%"></th>
  48.     		</tr>
  49.     	</thead>
  50.     	<tbody>
  51.     	<?php
  52.  
  53.     	if ( $repeatable_fields ) :
  54.  
  55.     	foreach ( $repeatable_fields as $field ) {
  56.     	?>
  57.     	<tr>
  58.     		<td><input type="text" class="widefat" name="name[]" value="<?php if($field['name'] != '') echo esc_attr( $field['name'] ); ?>" /></td>
  59.  
  60.     		<td>
  61.     			<select name="select[]">
  62.     			<?php foreach ( $options as $label => $value ) : ?>
  63.     			<option value="<?php echo $value; ?>"<?php selected( $field['select'], $value ); ?>><?php echo $label; ?></option>
  64.     			<?php endforeach; ?>
  65.     			</select>
  66.     		</td>
  67.  
  68.     		<td><input type="text" class="widefat" name="url[]" value="<?php if ($field['url'] != '') echo esc_attr( $field['url'] ); else echo 'http://'; ?>" /></td>
  69.  
  70.     		<td><a class="button remove-row" href="#">Remove</a></td>
  71.     	</tr>
  72.     	<?php
  73.     	}
  74.     	else :
  75.     	// show a blank one
  76.     	?>
  77.     	<tr>
  78.     		<td><input type="text" class="widefat" name="name[]" /></td>
  79.  
  80.     		<td>
  81.     			<select name="select[]">
  82.     			<?php foreach ( $options as $label => $value ) : ?>
  83.     			<option value="<?php echo $value; ?>"><?php echo $label; ?></option>
  84.     			<?php endforeach; ?>
  85.     			</select>
  86.     		</td>
  87.  
  88.     		<td><input type="text" class="widefat" name="url[]" value="http://" /></td>
  89.  
  90.     		<td><a class="button remove-row" href="#">Remove</a></td>
  91.     	</tr>
  92.     	<?php endif; ?>
  93.  
  94.     	<!-- empty hidden one for jQuery -->
  95.     	<tr class="empty-row screen-reader-text">
  96.     		<td><input type="text" class="widefat" name="name[]" /></td>
  97.  
  98.     		<td>
  99.     			<select name="select[]">
  100.     			<?php foreach ( $options as $label => $value ) : ?>
  101.     			<option value="<?php echo $value; ?>"><?php echo $label; ?></option>
  102.     			<?php endforeach; ?>
  103.     			</select>
  104.     		</td>
  105.  
  106.     		<td><input type="text" class="widefat" name="url[]" value="http://" /></td>
  107.  
  108.     		<td><a class="button remove-row" href="#">Remove</a></td>
  109.     	</tr>
  110.     	</tbody>
  111.     	</table>
  112.  
  113.     	<p><a id="add-row" class="button" href="#">Add another</a></p>
  114.     	<?php
  115.     }
  116.  
  117.     add_action('save_post', 'hhs_repeatable_meta_box_save');
  118.     function hhs_repeatable_meta_box_save($post_id) {
  119.     	if ( ! isset( $_POST['hhs_repeatable_meta_box_nonce'] ) ||
  120.     	! wp_verify_nonce( $_POST['hhs_repeatable_meta_box_nonce'], 'hhs_repeatable_meta_box_nonce' ) )
  121.     		return;
  122.  
  123.     	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
  124.     		return;
  125.  
  126.     	if (!current_user_can('edit_post', $post_id))
  127.     		return;
  128.  
  129.     	$old = get_post_meta($post_id, 'repeatable_fields', true);
  130.     	$new = array();
  131.     	$options = hhs_get_sample_options();
  132.  
  133.     	$names = $_POST['name'];
  134.     	$selects = $_POST['select'];
  135.     	$urls = $_POST['url'];
  136.  
  137.     	$count = count( $names );
  138.  
  139.     	for ( $i = 0; $i < $count; $i++ ) {
  140.     		if ( $names[$i] != '' ) :
  141.     			$new[$i]['name'] = stripslashes( strip_tags( $names[$i] ) );
  142.  
  143.     			if ( in_array( $selects[$i], $options ) )
  144.     				$new[$i]['select'] = $selects[$i];
  145.     			else
  146.     				$new[$i]['select'] = '';
  147.  
  148.     			if ( $urls[$i] == 'http://' )
  149.     				$new[$i]['url'] = '';
  150.     			else
  151.     				$new[$i]['url'] = stripslashes( $urls[$i] ); // and however you want to sanitize
  152.     		endif;
  153.     	}
  154.  
  155.     	if ( !empty( $new ) && $new != $old )
  156.     		update_post_meta( $post_id, 'repeatable_fields', $new );
  157.     	elseif ( empty($new) && $old )
  158.     		delete_post_meta( $post_id, 'repeatable_fields', $old );
  159.     }

前端调用

  1.     <?php $repeatable_fields = get_post_meta( $post->ID, 'repeatable_fields', true );  if ( $repeatable_fields ) : ?>
  2.     	<div class="list">
  3.     		<?php foreach ( $repeatable_fields as $field ) { ?>
  4.     			<div class="row">
  5.     				<?php if( $field['name'] != '' ) echo '<span class="field">'. esc_attr( $field['name'] ) . '</span>'; ?>
  6.     				<?php if( $field['select'] != '' ) echo '<span class="field">'. esc_attr( $field['select'] ) . '</span>'; ?>
  7.     				<?php if( $field['url'] != '' ) echo '<span class="field">'. esc_attr( $field['url'] ) . '</span>'; ?>
  8.     			</div>
  9.     		<?php } ?>
  10.     	</div>
  11.     <?php endif; ?>

WordPress 添加可重复使用的自定义 metabox 字段

已有 260 人购买
查看演示升级 VIP立刻购买

收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!