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

01989

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

演示：

图片[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 );
}

调用：

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

调用：

<?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; ?>
© 版权声明
文章版权声明 1、本网站名称：KEKC博客
2、本站网址：https://www.kekc.cn
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ2551654928进行删除处理。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报

THE END
wordpress
喜欢就支持一下吧
点赞9 分享
KEKC的头像-KEKC博客
解决deepl不给白嫖-KEKC博客
解决deepl不给白嫖
解决deepl不给白嫖
2年前 8678
子比主题附加组件-KEKC博客
子比主题附加组件
子比主题附加组件
2年前 7101
子比主题附加组件重构版插件-KEKC博客
子比主题附加组件重构版插件
子比主题附加组件重构版插件
2年前 5756
收集的15个QQ机器人框架源码-KEKC博客
收集的15个QQ机器人框架源码
收集的15个QQ机器人框架源码
2年前 4907
子比主题美化插件全开源版-KEKC博客
子比主题美化插件全开源版
子比主题美化插件全开源版
1年前 3639
学习通自动签到&极速抢答神器下载-KEKC博客
学习通自动签到&极速抢答神器下载
学习通自动签到&极速抢答神器下载
4年前 3564
相关推荐
子比主题附加组件-KEKC博客
子比主题附加组件
子比主题附加组件
2年前 7101
子比主题附加组件重构版插件-KEKC博客
子比主题附加组件重构版插件
子比主题附加组件重构版插件
2年前 5756
用子比主题以来写过的部分插件-KEKC博客
用子比主题以来写过的部分插件
用子比主题以来写过的部分插件
11个月前 2429
简单实现子比主题卡密充值余额和积分（已修复并支持PHP8.1）-KEKC博客
简单实现子比主题卡密充值余额和积分（已修复并支持PHP8.1）
简单实现子比主题卡密充值余额和积分（已修复并支持PHP8.1）
2年前 2168
WordPress2022 后台美化 QuarterAdmin-KEKC博客
WordPress2022 后台美化 QuarterAdmin
WordPress2022 后台美化 QuarterAdmin
2年前 1225
WordPress开发框架整理-KEKC博客
WordPress开发框架整理
WordPress开发框架整理
2年前 965
评论 抢沙发
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
常用语
请选择评论常用语：
  • 1、谢谢博主分享！
  • 2、博主NB，666
  • 3、感谢楼主分享！
  • 4、感谢大佬分享！
  • 5、教程很好用，谢谢！
 夸夸
夸夸
还有吗！没看够！
表情
[aoman][baiyan][bishi][bizui][cahan][ciya][dabing][daku][deyi][doge][fadai][fanu][fendou][ganga][guzhang][haixiu][hanxiao][zuohengheng][zhuakuang][zhouma][zhemo][zhayanjian][zaijian][yun][youhengheng][yiwen][yinxian][xu][xieyanxiao][xiaoku][xiaojiujie][xia][wunai][wozuimei][weixiao][weiqu][tuosai][tu][touxiao][tiaopi][shui][se][saorao][qiudale][qinqin][qiaoda][piezui][penxue][nanguo][liulei][liuhan][lenghan][leiben][kun][kuaikule][ku][koubi][kelian][keai][jingya][jingxi][jingkong][jie][huaixiao][haqian][aini][OK][qiang][quantou][shengli][woshou][gouyin][baoquan][aixin][bangbangtang][xiaoyanger][xigua][hexie][pijiu][lanqiu][juhua][hecai][haobang][caidao][baojin][chi][dan][kulou][shuai][shouqiang][yangtuo][youling]
代码

请输入代码：

确认
图片

    暂无评论内容

随机文章

1wordpress在适当页面查看支持的Hook

2宝塔面板安装插件/软件出现校验hash失败的解决办法

3WordPress在开发插件的时候获取到当前登录用户

4微博热搜top15脚本 QQ最新hook机器人实现网站在线状态监控

5飞舞云代理最低开通6.8折代理（活动时间截至时间2020年9月30日）

6批量替换wordpress文章中的字段