第一部分 前言、效果预览、功能介绍、涉及的问题
一、前言
不知道为什么我非常喜欢用幻灯,在博客里到处可见各种形式的幻灯,比如首页幻灯、企业幻灯、文章标题幻灯、侧边栏幻灯小工具等等。之前也特别针对自定义文章类型:视频添加了分类列表页幻灯和文章标题幻灯,详情请 点击这里 。
本来只是想简单的针对 影视资源 分类添加内置文章类型分类列表页幻灯(以下简称:幻灯)的,后来考虑到后续博客发展,可能也需要对其他分类使用幻灯,于是干脆一次性实现这个功能,免得以后需要的时候再次修改代码。
二、效果预览
三、预期实现的功能
- 可自定义幻灯的开启/关闭
- 可自定义幻灯的显示数量
- 可自定义幻灯的跳转链接
- 可自定义幻灯的文章排序
- 可自定义幻灯的显示分类
- 可自定义幻灯的文章标题显示/隐藏
- 当前分类列表页幻灯只调用当前分类(含子分类)下的幻灯文章
第二部分 功能实现过程
[mark_b]操作前请备份相关数据,务必![/mark_b]
五、主题选项添加幻灯设置项
首先:打开【/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 } ?>
作用:通过判断幻灯的启用与否来调用相关代码。当不启用该功能时,可以减少文件的调用,加快页面访问速度。
通过上面的操作,幻灯功能已经可以正常使用了,只需在文章编辑页面对幻灯面板做相应设置即可。
[mark_b]
要想幻灯功能正常显示,需要设置至少两篇文章作为幻灯文章,否则前台不能正常显示幻灯。
[/mark_b]
第三部分 注意事项
当同时启用【分类列表页幻灯】和【显示分类图片】时,会造成前台布局成冗余。关于这个问题,先来看一下处理前的前台展示效果:
从上图中可以看到,当同时启用【分类列表页幻灯】和【显示分类图片选项】时,在前台就会同时显示幻灯和分类图片,这使得前台布局冗余,而且也没这个必要。
解决办法:对设置了分类列表页幻灯的那些分类,删除其对应在【文章--分类目录】中的【分类图片】和【图像描述】即可。