内置文章类型分类列表页添加幻灯

2019年5月12日08:55:24 评论 584 7568字阅读25分13秒
摘 要

关于幻灯，可以任意调用你想调用的文章在你想展示的位置。同时，幻灯其实就是以图片的形式来展示这些文章，相比文字而言，图片更加直观，也更容易让访客产生浏览的兴趣，或许这也是我喜欢使用幻灯的原因之一吧。

第一部分 前言、效果预览、功能介绍、涉及的问题

一、前言

不知道为什么我非常喜欢用幻灯，在博客里到处可见各种形式的幻灯，比如首页幻灯、企业幻灯、文章标题幻灯、侧边栏幻灯小工具等等。之前也特别针对自定义文章类型：视频添加了分类列表页幻灯和文章标题幻灯，详情请 点击这里 。

本来只是想简单的针对 影视资源 分类添加内置文章类型分类列表页幻灯（以下简称：幻灯）的，后来考虑到后续博客发展，可能也需要对其他分类使用幻灯，于是干脆一次性实现这个功能，免得以后需要的时候再次修改代码。

 

二、效果预览

 

三、预期实现的功能

  • 可自定义幻灯的开启/关闭
  • 可自定义幻灯的显示数量
  • 可自定义幻灯的跳转链接
  • 可自定义幻灯的文章排序
  • 可自定义幻灯的显示分类
  • 可自定义幻灯的文章标题显示/隐藏
  • 当前分类列表页幻灯只调用当前分类（含子分类）下的幻灯文章

 

第二部分 功能实现过程

[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]

 

第三部分 注意事项

当同时启用【分类列表页幻灯】和【显示分类图片】时，会造成前台布局成冗余。关于这个问题，先来看一下处理前的前台展示效果：

从上图中可以看到，当同时启用【分类列表页幻灯】和【显示分类图片选项】时，在前台就会同时显示幻灯和分类图片，这使得前台布局冗余，而且也没这个必要。

解决办法：对设置了分类列表页幻灯的那些分类，删除其对应在【文章--分类目录】中的【分类图片】和【图像描述】即可。

继续阅读
如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: