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

  • A+
所属分类：建博笔记

预期实现的功能

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

 

效果预览

 

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

首先：打开【inc/options/begin-options.php】文件，找到代码

$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】文件，找到代码

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();
}

代码作用：

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

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

具体显示位置和你在【begin-options.php】文件中添加的位置有关。

 

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

打开【inc/meta-boxs.php】文件，找到代码

// 文章标题幻灯
$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');
这部分代码本来也可以不添加，直接调用首页幻灯对应的面板代码即可。但考虑到代码的独立性，避免日后因为其他需求的原因造成代码混乱，所以单独注册了这个面板。

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

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

 

三、向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 } ?>

完成以上操作后，在自定义文章类型：视频文章的【幻灯面板】中添加图片后就可以在前台看到效果了。

 

五、注意事项

  • 注意事项一

如果你在【主题选项--基本设置】中启用了【显示分类图片】功能

同时你又启用了幻灯功能的话，那么建议你在自定义文章类型：【视频--视频分类】中（包括子分类）不要设置【图片描述】和【分类图片】

否则前台就会同时输出幻灯和分类图片，布局就会很难看，就像下图这样：

上图是幻灯，下图是分类图片

  • 注意事项二

幻灯左上角的标题位置和样式我是直接使用的主题的原有样式，如果你只想调整幻灯标题的位置和样式但又不想调整其他分类中的对应位置的标题位置和样式的话，建议你修改“第四步”操作中的第36行代码的class类名，并在【style.css】中针对这个类名重新设计一个样式。

  • 注意事项三

由于个人能力有限，这个幻灯会同时显示在主分类列表页和子分类列表页。如果你想让幻灯只显示在主分类列表而不显示在子分类列表中，请自行修改代码。

另外，由于我的自定义文章类型：视频的主分类只有一个（该分类下有多个子分类），因此在有多个主分类的情况下是否显示同一个幻灯我就不清楚了，没有进一步测试。如果你有多个主分类，而这些主分类想实现不同的幻灯文章的话，也需要你自己进一步测试和改进代码。

若文章图片、下载链接、网盘密码等信息出错，请留言反馈，博主将第一时间更新！如果喜欢，请打赏支持本站，谢谢大家！
isdola

发表评论

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