05-01
阅读(1540)
WordPress 默认分享的视频都是独立的，而对于一些想通过 WordPress 做视频分享站的小伙伴来说，分集视频的分享便成了一个问题，似乎 WordPress 并不适合做视频站。因为自己网站有时候会分享一些视频，有一部分视频难免就是分集视频，而要一集一集的分享显然不太靠谱，于是最近抽了些时间研究了下分集视频分享的问题，最终以 meta 信息存储了各集的视频连接，然后前端通过 video.js 根据不同链接加载不同视频了，虽然不是太完美，但大致可以用了，这里简单分享下后台添加自定义 Meta 列表的方法，有需要的小伙伴可以参考一下。后台效果如下：
在了解本篇文章前，先温习下 Meta 信息的使用比较好，推荐下面两篇文章：
下面我们简单说下后台添加自定义 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;
}
以上。
喜欢(
赏个钱儿 
分享海报
QQ
微信
邮箱
