自定义文章类型分类列表页添加幻灯

发表评论
38

A+

所属分类：建博笔记

本文基于begin主题创建，非该主题的童鞋仅供参考。

预期实现的功能

自定义文章类型：视频分类列表页添加幻灯
可自定义幻灯开启/关闭
可自定义幻灯显示数量
可自定义幻灯跳转链接
可自定义幻灯文章排序

效果预览

PC端效果预览

移动端效果预览

PC端动态预览：点击这里

移动端动态预览：请使用手机浏览器打开https://isdola.com/videos/avonline/

各种屏幕尺寸适配性：请使用浏览器的F12功能自行查看

一、后台主题选项中添加自定义文章类型：视频幻灯选项

首先：打开inc/options/begin-options.php文件，大约132~161行的位置，找到代码

$options[] = array(
'name' => '首页幻灯',
'desc' => '显示',
'id' => 'slider',
'class' => 'be_ico',
'std' => '0',
'type' => 'checkbox'
);
$options[] = array(
'name' => '',
'desc' => '自定义排序，需给幻灯中的文章添加排序编号',
'id' => 'show_order',
'std' => '0',
'class' => 'hidden',
'type' => 'checkbox'
);
$options[] = array(
'name' => '',
'desc' => '幻灯显示篇数',
'id' => 'slider_n',
'std' => '2',
'class' => 'mini hidden',
'type' => 'text'
);
$options[] = array(
'id' => 'clear'
);

在下面（也可以在你喜欢的地方）添加

$options[] = array(
'name' => '视频分类页幻灯',
'desc' => '显示',
'id' => 'video_slider',
'class' => 'be_ico',
'std' => '0',
'type' => 'checkbox'
);
$options[] = array(
'name' => '',
'desc' => '自定义排序，需给幻灯中的文章添加排序编号',
'id' => 'video_show_order',
'std' => '0',
'class' => 'hidden',
'type' => 'checkbox'
);
$options[] = array(
'name' => '',
'desc' => '幻灯显示篇数',
'id' => 'video_slider_n',
'std' => '2',
'class' => 'mini hidden',
'type' => 'text'
);
$options[] = array(
'id' => 'clear'
);

代码作用：

向主题选项中添加自定义文章类型：视频分类列表页幻灯显示开关
添加自定义排序开关
添加幻灯显示数量

然后：打开inc/options/includes/themes-options.php文件，大约137~143行的位置，找到代码

jQuery('#slider').click(function() {
jQuery('#section-show_order, #section-slider_n').fadeToggle(400);
});
if (jQuery('#slider:checked').val() !== undefined) {
jQuery('#section-show_order, #section-slider_n').show();
}

在下面（也可以在你喜欢的地方）添加

jQuery('#video_slider').click(function() {
jQuery('#section-video_show_order, #section-video_slider_n').fadeToggle(400);
});
if (jQuery('#video_slider:checked').val() !== undefined) {
jQuery('#section-video_show_order, #section-video_slider_n').show();
}

代码作用：

让添加的功能可以正常显示和使用

完成上面的操作后就可以在后台--主题选项--首页设置中看到相关的选项了，如下图所示：

Ps：具体显示在哪个位置和你在begin-options.php文件中添加的位置有关。

二、后台自定义文章类型：视频文章编辑页添加幻灯设置面板

打开inc/meta-boxs.php文件，大约489~497行的位置，找到代码

// 文章标题幻灯
$header_show_meta_boxes =
array(
"header_img" => array(
"name" => "header_img",
"std" => "",
"title" => "输入图片地址，一行一个不能有回行和空格，图片尺寸必须相同",
"type"=>"textarea"),
);

在上面（也可以在你喜欢的地方）添加

// 添加到视频分类页幻灯
$show_video_meta_boxes =
array(
"video_show" => array(
"name" => "video_show",
"std" => "",
"title" => "输入图片链接地址，则显示在视频分类页幻灯中，图片宽度大于760px，尺寸必须相同",
"type"=>"text"),
"video_go_url" => array(
"name" => "video_show_url",
"std" => "",
"title" => "输入链接地址，可让幻灯跳转到任意链接页面",
"type"=>"text"),
"video_show_order" => array(
"name" => "video_show_order",
"std" => "",
"title" => "输入数值，实现幻灯排序，数值越大越靠前",
"type"=>"text"),
);
// 面板内容
function show_video_meta_boxes() {
global $post, $show_video_meta_boxes;
//获取保存
foreach ($show_video_meta_boxes as $meta_box) {
$meta_box_value = get_post_meta($post->ID, $meta_box['name'] . '', true);
if ($meta_box_value != "")
//将默认值替换为已保存的值
$meta_box['std'] = $meta_box_value;
echo '<input type="hidden" name="' . $meta_box['name'] . '_noncename" id="' . $meta_box['name'] . '_noncename" value="' . wp_create_nonce(plugin_basename(__FILE__)) . '" />';
//选择类型输出不同的html代码
switch ($meta_box['type']) {
case 'title':
echo '<h4>' . $meta_box['title'] . '</h4>';
break;
case 'text':
echo '<h4>' . $meta_box['title'] . '</h4>';
echo '<span class="form-field"><input type="text" size="40" name="' . $meta_box['name'] . '" value="' . $meta_box['std'] . '" /></span><br />';
break;
case 'textarea':
echo '<h4>' . $meta_box['title'] . '</h4>';
echo '<textarea id="seo-excerpt" cols="40" rows="2" name="' . $meta_box['name'] . '">' . $meta_box['std'] . '</textarea><br />';
break;
case 'radio':
echo '<h4>' . $meta_box['title'] . '</h4>';
$counter = 1;
foreach ($meta_box['buttons'] as $radiobutton) {
$checked = "";
if (isset($meta_box['std']) && $meta_box['std'] == $counter) {
$checked = 'checked = "checked"';
}
echo '<input ' . $checked . ' type="radio" class="kcheck" value="' . $counter . '" name="' . $meta_box['name'] . '_value"/>' . $radiobutton;
$counter++;
}
break;
case 'checkbox':
if (isset($meta_box['std']) && $meta_box['std'] == 'true') $checked = 'checked = "checked"';
else $checked = '';
echo '<br /><label><input type="checkbox" name="' . $meta_box['name'] . '" value="true" ' . $checked . ' />';
echo '' . $meta_box['title'] . '</label><br />';
break;
}
}
}
// 创建面板
function show_video_meta_box() {
global $theme_name;
if (function_exists('add_meta_box')) {
add_meta_box('show_video_meta_box', '将文章添加到视频分类页幻灯', 'show_video_meta_boxes', 'video', 'normal', 'high');
}
}
// 保存数据
function save_show_video_postdata($post_id) {
global $post, $show_video_meta_boxes;
foreach ($show_video_meta_boxes as $meta_box) {
if (!wp_verify_nonce($_POST[$meta_box['name'] . '_noncename'], plugin_basename(__FILE__))) {
return $post_id;
}
if ('page' == $_POST['post_type']) {
if (!current_user_can('edit_page', $post_id)) return $post_id;
} else {
if (!current_user_can('edit_post', $post_id)) return $post_id;
}
$data = $_POST[$meta_box['name'] . ''];
if (get_post_meta($post_id, $meta_box['name'] . '') == "") add_post_meta($post_id, $meta_box['name'] . '', $data, true);
elseif ($data != get_post_meta($post_id, $meta_box['name'] . '', true)) update_post_meta($post_id, $meta_box['name'] . '', $data);
elseif ($data == "") delete_post_meta($post_id, $meta_box['name'] . '', get_post_meta($post_id, $meta_box['name'] . '', true));
}
}
// 触发
add_action('admin_menu', 'show_video_meta_box');
add_action('save_post', 'save_show_video_postdata');

代码说明：

这部分代码本来也可以不添加，直接调用首页幻灯对应的面板代码即可。但考虑到代码的独立性，避免日后因为其他需求的原因造成代码混乱，所以单独注册了这个面板。

添加代码后，就可以在自定义文章类型：视频文章编辑页中看到这个面板了，如下图所示：

Ps：如果你看不到这个面板的话，请在右上角的显示选项中勾选这个面板。

三、向meta-delete.php文件追加数据删除

打开inc/meta-delete.php文件，找到第4行开始的数组

array(
......
);

在这个数组中的任意行添加

"video_show" => array("name" => "video_show"),
"video_go_url" => array("name" => "video_show_url"),
"video_show_order" => array("name" => "video_show_order"),

代码作用：

当添加的幻灯文章数量大于主题选项中设定的数量时，最早发布的文章中的幻灯数据将被删除
由于各种原因需要删除原来添加过的幻灯或文章时，可使数据同步到前台

作用解释：

因为你在面板中删除了幻灯图片，但数据库中还是有这个数据的，如果不彻底从数据库中删除这个数据的话，前台会误认为“原来的这篇文章还是应该显示在幻灯中，只不过是幻灯图片丢失”的假象。那样的话，幻灯中就会只显示该文章的标题而不显示幻灯图片，达不到你预期的“不想显示在幻灯中”的效果了。

四、前台幻灯模块输出

打开template/header-sub.php文件，在第一行代码

<?php if (!is_search() && !is_tag() && is_archive()) { ?>

下面添加

<?php if (get_post_type()=='video' && zm_get_option('video_slider') && !is_paged()) { ?>
<div class="header-sub">
<div id="slideshow" class="wow fadeInUp" data-wow-delay="0.3s">
<ul class="rslides" id="slider">
<?php if (zm_get_option('video_show_order')) { ?>
<?php
$args = array(
'post_type' => 'video',
'posts_per_page' => zm_get_option('video_slider_n'),
'meta_key' => 'video_show',
'meta_key' => 'video_show_order',
'orderby' => 'meta_value',
'order' => 'date'
);
query_posts($args);
?>
<?php } else { ?>
<?php
$args = array(
'post_type' => 'video',
'posts_per_page' => zm_get_option('video_slider_n'),
'meta_key' => 'video_show'
);
query_posts($args);
?>
<?php } ?>
<?php while (have_posts()) : the_post(); $do_not_duplicate[] = $post->ID; $do_show[] = $post->ID; ?>
<?php $image = get_post_meta($post->ID, 'video_show', true); ?>
<?php $go_url = get_post_meta($post->ID, 'video_show_url', true); ?>
<li>
<?php if ( get_post_meta($post->ID, 'video_show_url', true) ) : ?>
<a href="<?php echo $video_go_url; ?>" target="_blank" rel="external nofollow"><img src="<?php echo $image; ?>" alt="<?php the_title(); ?>" /></a>
<?php else: ?>
<a href="<?php the_permalink() ?>" rel="bookmark"><img src="<?php echo $image; ?>" alt="<?php the_title(); ?>" /></a>
<?php endif; ?>
<p class="slider-caption"><?php the_title(); ?></p>
</li>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</ul>
</div>
</div>
<?php } ?>