第一部分 前言、效果预览、功能介绍、涉及的问题
一、前言
不知道为什么我非常喜欢用幻灯，在博客里到处可见各种形式的幻灯，比如首页幻灯、企业幻灯、文章标题幻灯、侧边栏幻灯小工具等等。之前也特别针对自定义文章类型：视频添加了分类列表页幻灯和文章标题幻灯，详情请 点击这里 。
本来只是想简单的针对 影视资源 分类添加内置文章类型分类列表页幻灯（以下简称：幻灯）的，后来考虑到后续博客发展，可能也需要对其他分类使用幻灯，于是干脆一次性实现这个功能，免得以后需要的时候再次修改代码。
二、效果预览
三、预期实现的功能
- 可自定义幻灯的开启/关闭
- 可自定义幻灯的显示数量
- 可自定义幻灯的跳转链接
- 可自定义幻灯的文章排序
- 可自定义幻灯的显示分类
- 可自定义幻灯的文章标题显示/隐藏
- 当前分类列表页幻灯只调用当前分类（含子分类）下的幻灯文章
第二部分 功能实现过程
操作前请备份相关数据，务必！
五、主题选项添加幻灯设置项
首先：打开【/inc/options/begin-options.php】文件，在适当位置添加代码
$options[] = array( 'name' => '文章分类归档页幻灯', 'desc' => '显示', 'id' => 'post_cat_slider', 'class' => 'be_ico', 'std' => '0', 'type' => 'checkbox' ); $options[] = array( 'name' => '', 'desc' => '自定义排序，需给幻灯中的文章添加排序编号', 'id' => 'post_cat_show_order', 'std' => '0', 'class' => 'hidden', 'type' => 'checkbox' ); $options[] = array( 'name' => '', 'desc' => '幻灯显示篇数', 'id' => 'post_cat_slider_n', 'std' => '2', 'class' => 'mini hidden', 'type' => 'text' ); $options[] = array( 'name' => '', 'desc' => '输入分类ID，多个ID用英文半角逗号","隔开', 'id' => 'post_cat_id', 'class' => 'hidden', 'std' => '1,2', 'type' => 'text' ); $options[] = array( 'name' => '分类ID对照', 'desc' => '<ul>'.$cats_id.'</ul>', 'id' => 'catid', 'class' => 'post_cat_catid hidden', 'type' => 'info' ); $options[] = array( 'id' => 'clear' );
我加在了【主题选项--首页设置--首页幻灯】功能下面。添加代码后，就可以在对应的位置看到这个功能了。
然后：打开【/inc/options/includes/themes-options.php】文件，在适当位置添加代码
jQuery('#post_cat_slider').click(function() {
jQuery('#section-post_cat_show_order, #section-post_cat_slider_n, #section-post_cat_id, .post_cat_catid').fadeToggle(400);
});
if (jQuery('#post_cat_slider:checked').val() !== undefined) {
jQuery('#section-post_cat_show_order, #section-post_cat_slider_n, #section-post_cat_id, .post_cat_catid').show();
}
这段代码主要用来给刚才添加的幻灯功能一个展开/闭合的功能。当不启用幻灯功能时，里面的设置项是不可见性状态，当勾选启用幻灯功能时，显示相关设置项。
六、添加幻灯面板
打开【/inc/meta-boxes.php】文件，在适当位置添加代码（如果你不确定应该添加在哪里，那就添加在文件最后）
// 文章分类归档页幻灯
$show_post_cat_meta_boxes =
array(
"cat_show" => array(
"name" => "cat_show",
"std" => "",
"title" => "输入图片链接地址，则显示在文章分类归档页幻灯中，图片宽度大于760px，尺寸必须相同",
"type"=>"text"),
"cat_go_url" => array(
"name" => "cat_show_url",
"std" => "",
"title" => "输入链接地址，可让幻灯跳转到任意链接页面",
"type"=>"text"),
"cat_show_order" => array(
"name" => "cat_show_order",
"std" => "",
"title" => "输入数值，实现幻灯排序，数值越大越靠前",
"type"=>"text"),
"cat_slide_title" => array(
"name" => "cat_slide_title",
"std" => "",
"title" => "自定义标题内容",
"type"=>"text"),
"no_cat_slide_title" => array(
"name" => "no_cat_slide_title",
"std" => "",
"title" => "不显示标题文字",
"type"=>"checkbox"),
);
// 面板内容
function show_post_cat_meta_boxes() {
global $post, $show_post_cat_meta_boxes;
//获取保存
foreach ($show_post_cat_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_post_cat_meta_box() {
global $theme_name;
if (function_exists('add_meta_box')) {
add_meta_box('show_post_cat_meta_box', '文章分类归档页幻灯', 'show_post_cat_meta_boxes', 'post', 'normal', 'high');
}
}
// 保存数据
function save_show_post_cat_postdata($post_id) {
global $post, $show_post_cat_meta_boxes;
foreach ($show_post_cat_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_post_cat_meta_box');
add_action('save_post', 'save_show_post_cat_postdata');
添加后就可以在文章编辑页面看到这个面板了。
同时，为了避免误操作导致面板中的数据丢失，需要在【/inc/meta-delete.php】文件中的
$one_delete = array( ... );
内添加下面的代码，位置随意
"no_cat_slide_title" => array("name" => "no_cat_slide_title"),
七、添加幻灯主体代码
在【/template】目录下新建一个名为【post-cat-slider.php】的文件，并添加代码
<?php if (zm_get_option('post_cat_slider')) { ?>
<?php if (in_category(explode(',',zm_get_option('post_cat_id')))) { ?>
<?php if (!is_search() && !is_tag() && is_archive()) { ?>
<div class="header-sub">
<div id="slideshow" class="wow fadeInUp" data-wow-delay="0.3s">
<div id="slider-home" class="slider-home">
<?php if (zm_get_option('post_cat_show_order')) { ?>
<?php
$args = array(
'cat' => array(get_query_var('cat')),
'posts_per_page' => zm_get_option('post_cat_slider_n'),
'post_type' => 'any',
'meta_key' => 'cat_show',
'meta_key' => 'cat_show_order',
'orderby' => 'meta_value',
'order' => 'date',
'ignore_sticky_posts' => 1
);
query_posts($args);
?>
<?php } else { ?>
<?php
$args = array(
'cat' => array(get_query_var('cat')),
'posts_per_page' => zm_get_option('post_cat_slider_n'),
'post_type' => 'any',
'meta_key' => 'cat_show',
'ignore_sticky_posts' => 1
);
query_posts($args);
?>
<?php } ?>
<?php while (have_posts()) : the_post(); $do_not_duplicate[] = $post->ID; $do_show[] = $post->ID; ?>
<div id="post-<?php the_ID(); ?>" <?php post_class('post'); ?>>
<?php if ( get_post_meta($post->ID, 'cat_show', true) ) : ?>
<?php $image = get_post_meta($post->ID, 'cat_show', true); ?>
<?php $go_url = get_post_meta($post->ID, 'cat_show_url', true); ?>
<?php if ( $go_url ) : ?>
<a href="<?php echo $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; ?>
<?php if ( get_post_meta($post->ID, 'no_cat_slide_title', true) ) : ?>
<?php else: ?>
<?php if ( get_post_meta($post->ID, 'cat_slide_title', true) ) : ?>
<?php $cat_slide_title = get_post_meta($post->ID, 'cat_slide_title', true); ?>
<p class="slider-home-title slider-home-title-custom"><?php echo $cat_slide_title; ?></p>
<?php else: ?>
<p class="slider-home-title"><?php the_title(); ?></p>
<?php endif; ?>
<?php endif; ?>
<?php endif; ?>
</div>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</div>
</div>
<div class="clear"></div>
</div>
<?php } ?>
<?php } ?>
<?php } else { ?>
<div class="clear"></div>
<?php } ?>
八、首页添加幻灯调用判断
打开主题根目录下的【header.php】文件，在
<?php get_template_part( 'template/header-slider' ); ?>
上面添加
<?php if (zm_get_option('post_cat_slider')) { ?><?php get_template_part( 'template/post-cat-slider' ); ?><?php } ?>
作用：通过判断幻灯的启用与否来调用相关代码。当不启用该功能时，可以减少文件的调用，加快页面访问速度。
通过上面的操作，幻灯功能已经可以正常使用了，只需在文章编辑页面对幻灯面板做相应设置即可。
要想幻灯功能正常显示，需要设置至少两篇文章作为幻灯文章，否则前台不能正常显示幻灯。
第三部分 注意事项
当同时启用【分类列表页幻灯】和【显示分类图片】时，会造成前台布局成冗余。关于这个问题，先来看一下处理前的前台展示效果：
从上图中可以看到，当同时启用【分类列表页幻灯】和【显示分类图片选项】时，在前台就会同时显示幻灯和分类图片，这使得前台布局冗余，而且也没这个必要。
解决办法：对设置了分类列表页幻灯的那些分类，删除其对应在【文章--分类目录】中的【分类图片】和【图像描述】即可。
继续阅读
如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！
评论