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 \'
\';
echo \'\';
}
// 遍历剧集信息生成 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;
}
以上。