WordPress 后台添加自定义 Meta 列表（视频分集）

WordPress 默认分享的视频都是独立的，而对于一些想通过 WordPress 做视频分享站的小伙伴来说，分集视频的分享便成了一个问题，似乎 WordPress 并不适合做视频站。因为自己网站有时候会分享一些视频，有一部分视频难免就是分集视频，而要一集一集的分享显然不太靠谱，于是最近抽了些时间研究了下分集视频分享的问题，最终以 meta 信息存储了各集的视频连接，然后前端通过 video.js 根据不同链接加载不同视频了，虽然不是太完美，但大致可以用了，这里简单分享下后台添加自定义 Meta 列表的方法，有需要的小伙伴可以参考一下。后台效果如下：

在了解本篇文章前，先温习下 Meta 信息的使用比较好，推荐下面两篇文章：

• WordPress 后台添加文章自定义 Meta 信息
• WordPress学习——add_meta_box()详解

下面我们简单说下后台添加自定义 Meta 列表的方式。

生成函数

将以下代码添加到主题 functions.php 文件中：

// 文章新增视频列表 Meta
/**==================== 新增视频列表开始 ====================*/
function video_list_meta(){
	global $list_meta_box;
	$list_meta_box = array(
		'name' => 'video_list_info',
		"std"   => "",
		'title' => "",
		'type' => 'group',
		'submeta' => array(
			array(
				'title' => '序号',
				'name'   => 'sort',
				'std'  => '',
				'type' => 'text'
			),
			array(
				'title' => '标题',
				'name'   => 'title',
				'std'  => '',
				'type' => 'text'
			),
			array(
				'title' => '链接',
				'name'   => 'link',
				'std'  => '',
				'type' => 'text'
			),
			array(
				'title' => '海报',
				'name'   => 'poster',
				'std'  => '',
				'type' => 'text'
			),
		),
	);
	
	add_action('admin_menu', 'my_list_meta_box_create');
	add_action('save_post', 'my_list_meta_box_save');
	
	function my_list_meta_box_create() {
		if ( function_exists('add_meta_box') ) {
			add_meta_box( 'video_lists_id', '视频列表', 'my_list_meta_box_init', 'post', 'normal', 'high' );
		}
	}
	// 初始化 Meta 信息
	function my_list_meta_box_init( $post_id ) {
		global $list_meta_box,$html_format;
		global $post;
		$post_id = $post -> ID;
		$total_num = get_post_meta($post_id, 'video_total_num', true) ? get_post_meta($post_id, 'video_total_num', true) : 1 ;
		$update_num = get_post_meta($post_id, 'video_update_num', true) ? get_post_meta($post_id, 'video_update_num', true) : 1;
		echo '
		<div class="meta-list-field">
			<div class="meta-list-sum">
				<label class="field-label" for="video-total-num-id" >总集数</label><input type="text" name="video_total_num" id="video-total-num-id" value="'.$total_num.'" class="field-input" />
				<label class="field-label" for="video-update-num-id" >更新至</label><input type="text" name="video_update_num" id="video-update-num-id" value="'.$update_num.'" class="field-input" />
			</div>
			<div class="meta-lists">';
				// 获取已有更新视频列表
				for ($i=1; $i<=$update_num; $i++){
					if ($i == 1){
						$html_format_old .= '
						<div class="meta-list-item first-item">
							<div class="meta-list-item-group">';
					}else{
						$html_format_old .= '
						<div class="meta-list-item">
							<div class="meta-list-item-group">';
					}
					if(is_array($list_meta_box['submeta'])){
						foreach ( $list_meta_box['submeta'] as $sub_meta ){
							$meta_box_key = $list_meta_box['name'].'_'.$i.'_'.$sub_meta['name'];
							$item_value = get_post_meta($post_id, $meta_box_key, true);
							
							$format = '<div class="meta-item header %s"><label for="%s">%s</label><input type="text" name="%s" id="%s" value="%s"/></div>';
							$mixed_arg0 = $sub_meta['name'];
							$mixed_arg1 = $meta_box_key;
							$mixed_arg2 = $sub_meta['title'];
							$mixed_arg3 = $item_value ? $item_value : $sub_meta['std'];
							$html_format_old .= sprintf( $format, $mixed_arg0, $mixed_arg1, $mixed_arg2, $mixed_arg1, $mixed_arg1, $mixed_arg3 );
						}
					}else{
						echo 'Error：submeta 不是一个数组集合！！！';
					}
					if ($i < $update_num){
						$html_format_old .= '
								<a href="#" style="visibility: hidden;" class="delete-item button-secondary '.$i.'" id = "'.$post_id.'";>删除</a>
							</div>
						</div>';
					}else{
						$html_format_old .= '
								<a href="#" class="delete-item button-secondary '.$i.'" id = "'.$post_id.'";>删除</a>
							</div>
						</div>';
					}
				} 
				// 生成新增视频列表组
				$html_format = '
				<div class="meta-list-item">
					<div class="meta-list-item-group">';
					if(is_array($list_meta_box['submeta'])){
						foreach ( $list_meta_box['submeta'] as $sub_meta ){
							$format = '<div class="meta-item %s"><label for="%s">%s</label><input type="text" name="%s" id="%s" value="%s"/></div>';
							$mixed_arg0 = $sub_meta['name'];
							$mixed_arg1 = $list_meta_box['name'].'_{{i}}_'.$sub_meta['name'];
							$mixed_arg2 = $sub_meta['title'];
							$mixed_arg3 = $sub_meta['std'];
							$html_format .= sprintf( $format, $mixed_arg0, $mixed_arg1, $mixed_arg2, $mixed_arg1, $mixed_arg1, $mixed_arg3 );
						}
					}else{
						echo 'Error：submeta 不是一个数组集合！！！';
					}
				$html_format .= '
						<a href="#" class="delete-item button-secondary '.$i.'" id = "'.$post_id.'";>删除</a>
					</div>
				</div>';
					
				echo '
				<script type="text/html" id="framework-html-'.$list_meta_box['name'].'">'.$html_format.'</script>
				'.$html_format_old.'
				<a href="#" class="add-item button-secondary" data-name="framework-html-'.$list_meta_box['name'].'">添加</a>
			</div>
		</div>';
		echo '<input type="hidden" name="list_meta_box_input" id="list-meta-box-input-id" value="'.wp_create_nonce( plugin_basename(__FILE__) ).'" />';
	}
	// 遍历剧集信息生成 Meta
	function my_list_meta_box_save( $post_id ) {
		global $list_meta_box;
		global $post;
		$post_id = $post -> ID;
		
		if ( !wp_verify_nonce( isset($_POST['list_meta_box_input']) ? $_POST['list_meta_box_input'] : '', plugin_basename(__FILE__) ))
			return;
		if ( !current_user_can( 'edit_posts', $post_id ))
			return;	
		// 总集数
		creat_my_post_meta($post_id, 'video_total_num');
		// 更新至
		creat_my_post_meta($post_id, 'video_update_num');
		//分集
		$update_num_new = isset($_POST['video_update_num']) ? $_POST['video_update_num'] : '';
		for ($i=1; $i<=$update_num_new; $i++) {
			foreach( $list_meta_box['submeta'] as $sub_meta ) {
				$meta_box_key = $list_meta_box['name'].'_'.$i.'_'.$sub_meta['name'];
				creat_my_post_meta($post_id, $meta_box_key);
			}
		}
	}
	// 提交 Meta 到数据库
	function creat_my_post_meta($post_id, $meta_box_key){
		
		$new_data = isset($_POST[ $meta_box_key ]) ? $_POST[ $meta_box_key ] : '';
		
		if( get_post_meta( $post_id, $meta_box_key ) == "" ){
			add_post_meta( $post_id, $meta_box_key, $new_data, true );
		}elseif( $new_data != get_post_meta( $post_id, $meta_box_key, true ) ){
			update_post_meta( $post_id, $meta_box_key, $new_data );
		}elseif($new_data == ""){
			delete_post_meta( $post_id, $meta_box_key, get_post_meta( $post_id, $meta_box_key, true ) );
		}
	}

}
video_list_meta();
/**==================== 新增视频列表结束 ====================*/

这里我主要是生成的视频列表，如果你想生成其他列表，代码中有注释，改下即可。

JS 新增项目

因为需要点击新增/删除按钮添加或移除统一行数据，所以需要通过  引入自定义 JS 代码，引入方式：

// 后台加载 JS 文件
function my_backstage_js() {
	wp_register_script( 'backstage_js', get_template_directory_uri() . '/js/backstage.js' );  
	wp_enqueue_script( 'backstage_js' ); 
}

JS 代码如下：

// 视频列表后台增加分集
jQuery(document).ready(function($){
	
	$('.meta-list-field').on('click','a.add-item',function(){
		
		$(".meta-list-item .delete-item").css("visibility","hidden")
		
		if(event){ event.preventDefault(); }
		meta_lists = $(this).closest('.meta-lists');  // 向上查找第一个类名为 meta-lists 的祖先元素
		data_name = $(this).attr('data-name');
		html_format = $('#' + data_name).html();
		count = 0;
		count = meta_lists.find('.meta-list-item').length + 1;
		$('#video-update-num-id').val(count);
		html_temp = html_format.replace(/({{i}})/g,count);
		$(this).before(html_temp);
		
	});
		
	$('.meta-list-field').on('click','a.delete-item',function(){
		
		item_num = $(".meta-list-item").length
		
		event.preventDefault();
		meta_lists = $(this).closest('.meta-lists');
		count = 0;
		count = meta_lists.find('.meta-list-item').length - 1;
		$('#video-update-num-id').val(count);
		$(this).closest('.meta-list-item').remove();
		if($(".meta-list-item").length >1){
			$(".meta-list-item .delete-item:last").css("visibility","visible");
		}
	});	
	
});

样式美化

默认的样式比较丑，建议通过 wp_enqueue_style() 引入后台样式文件，引入方式：

// 后台加载 CSS 文件
function my_backstage_css() {
    wp_enqueue_style( "backstage_css", get_template_directory_uri() . "/css/backstage.css" );
}
add_action('admin_init', 'my_backstage_css');

样式内容如下，当然你也可以自己再改改。

/* 列表样式 */
.meta-list-field{
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0;
	border: 0;
}
.meta-list-field .meta-list-sum{
	display: block;
	width: 100%;
	height: 30px;
	margin: 10px 0;
	padding: 0;
	border: 0;
	line-height: 30px;
	font-size: 14px;
	font-weight: bold;
}
.meta-list-field .meta-list-sum .field-label{
	display: inline-block;
	width: auto;
	height: 100%;
	margin: 0 15px 0 0;
	border: 0;
	padding: 0;
	vertical-align: baseline;
}
.meta-list-field .meta-list-sum .field-input{
	display: inline-block;
	width: 60px;
	height: 100%;
	margin: 0 30px 0 0;
	padding: 0 10px 0 0;
	text-align: right;
}
.meta-list-field .meta-lists{
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
	border: 0;
	padding: 0;
	overflow: hidden;
}
.meta-list-field .meta-list-item{
	display: block;
	width: 100%;
	height: auto;
	margin: 5px 0;
	padding: 0;
	border: 0;
}
.meta-list-field .meta-list-item .meta-list-item-group{
	display: flex;
	flex-direction: row;
	width: 100%;
	height: auto;
	margin: 0 auto;
	border: 0;
	padding: 0;
}
.meta-list-field .meta-list-item .meta-item{
	display: inline-block;
	width: auto;
	height: auto;
	margin: 0 10px 0 0;
	border: 0;
	padding: 0;
	overflow: hidden;
}
.meta-list-field .meta-list-item a{
	display: block;
	flex-basis: 60px;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}
.meta-list-field .meta-list-item.first-item a{
	visibility: hidden;
}
.meta-list-field .meta-list-item .sort{
	flex-grow: 1;
	width: 5%;
}
.meta-list-field .meta-list-item .title{
	flex-grow: 1;
	width: 15%;
}
.meta-list-field .meta-list-item .link{
	flex-grow: 1;
	width: 40%;
}
.meta-list-field .meta-list-item .poster{
	flex-grow: 1;
	width: 40%;
}
.meta-list-field .meta-list-item .meta-item label{
	display: none;
	float: left;
	width: 100%;
	margin: 0 auto 5px;
	padding: 0;
	text-overflow: ellipsis;
	text-align: center;
	white-space: nowrap;
	word-wrap: break-word;
	word-break: break-word;
	overflow: hidden;
}
.meta-list-field .first-item .meta-item label{
	display: block;
}
.meta-list-field .meta-list-item .meta-item input{
	display: block;
	width: 100%;
	height: 30px;
	margin: 0 auto;
	padding: 3px 5px;
	line-height: 30px;
}
.meta-list-field .meta-list-item .sort input{
	text-align: center;
	font-weight: bold;
}

以上。