WordPress 后台添加自定义 Meta 列表(视频分集)

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

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

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

生成函数

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

扫码关注公众号

本段内容已被隐藏,您需要扫码关注微信公众号,发送【验证码】获取最新验证码查看。

注意:验证码10分钟内有效!


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

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

以上。

恭喜,此资源为免费资源,请先
注意:本站资源多为网络收集,如涉及版权问题请及时与站长联系,我们会在第一时间内与您协商解决。如非特殊说明,本站所有资源解压密码均为:blog.quietguoguo.com。
五月 1

历史上的今天

未经允许不得转载

文章标题:蝈蝈要安静 » WordPress 后台添加自定义 Meta 列表(视频分集)

原文链接:https://blog.quietguoguo.com/3969.html

发布信息:文章由【蝈蝈要安静】于<2020-05-01>发布于【主题修改】分类下

相关标签:||

相关推荐

评论 (2)

  • 昵称(必填)
  • 邮箱(必填)
  • QQ(选填)
  • 网址(选填)
  1. #0

    请教前端模板怎么调用列表,谢谢

    lpgjt4周前 (09-28)回复