给主题筛选功能增加筛选项

  • A+
所属分类:建博笔记
摘要

使用这个主题的童鞋都知道该主题有一个筛选功能,默认情况下,该功能只有三个筛选条件可供使用(最新版已增加到五个)。我想对我的 影视资源 分类添加这个功能,但默认的三个筛选条件不够,经过一番琢磨于是就有了这篇文章。

最终效果预览

 

预期实现的功能

  1. 添加筛选标题:点击筛选标题后可展开筛选条件,使筛选功能更灵活
  2. 默认情况下,使筛选功能处于“收起”状态:防止筛选模块太长影响用户体验
  3. 增加筛选条件至六个:丰富筛选条件,使筛选功能更自由,更强大

 

一、后台主题选项功能的追加

本文涉及的文件较多,篇幅较长,操作前请务必备份相关文件。

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

$options[] = array(
	'name' => '',
	'desc' => '筛选 C 文字',
	'id' => 'filters_c_t',
	'class' => 'hidden',
	'std' => '功能',
	'type' => 'text'
);

在其下面添加

$options[] = array(
	'name' => '',
	'desc' => '',
	'id' => 'filters_d',
	'class' => 'fia-catid hidden',
	'std' => '1',
	'type' => 'checkbox'
);

$options[] = array(
	'name' => '',
	'desc' => '筛选 D 文字,用于内置文章类型',
	'id' => 'filters_d_t',
	'class' => 'hidden',
	'std' => '国家地区',
	'type' => 'text'
);

$options[] = array(
	'name' => '',
	'desc' => '',
	'id' => 'filters_e',
	'class' => 'fia-catid hidden',
	'std' => '1',
	'type' => 'checkbox'
);

$options[] = array(
	'name' => '',
	'desc' => '筛选 E 文字,用于内置文章类型',
	'id' => 'filters_e_t',
	'class' => 'hidden',
	'std' => '清晰程度',
	'type' => 'text'
);

$options[] = array(
	'name' => '',
	'desc' => '',
	'id' => 'filters_f',
	'class' => 'fia-catid hidden',
	'std' => '1',
	'type' => 'checkbox'
);

$options[] = array(
	'name' => '',
	'desc' => '筛选 F 文字,用于内置文章类型',
	'id' => 'filters_f_t',
	'class' => 'hidden',
	'std' => '更新状态',
	'type' => 'text'
);

说明:因为我一共需要六个筛选条件,所以额外添加了三个。 这里根据自己的需要增加或删除条件即可,每两小段为一组条件,其中descidstd后面的内容根据自己的情况修改即可,下同。

然后:打开【inc/options/includes/themes-options.php】文件,找到代码

jQuery('#filters').click(function() {
	jQuery('#section-filters_a_t, #section-filters_b_t, #section-filters_c_t, #section-filter_id, .fi-catid, .fia-catid, #section-filters_img').fadeToggle(400);
});

if (jQuery('#filters:checked').val() !== undefined) {
	jQuery('#section-filters_a_t, #section-filters_b_t, #section-filters_c_t, #section-filter_id, .fi-catid, .fia-catid, #section-filters_img').show();
}

将其修改为

jQuery('#filters').click(function() {
	jQuery('#section-filters_a_t, #section-filters_b_t, #section-filters_c_t, #section-filters_d_t, #section-filters_e_t, #section-filters_f_t, #section-filter_id, .fi-catid, .fia-catid, #section-filters_img').fadeToggle(400);
});

if (jQuery('#filters:checked').val() !== undefined) {
	jQuery('#section-filters_a_t, #section-filters_b_t, #section-filters_c_t, #section-filters_d_t, #section-filters_e_t, #section-filters_f_t, #section-filter_id, .fi-catid, .fia-catid, #section-filters_img').show();
}

作用:让新添加的三个筛选条件能够在【主题选项--辅助功能--多条件筛选】中可以正常显示出来,如下图所示:

给主题筛选功能增加筛选项

最后:打开【inc/options/css/options.css】文件,找到代码

#section-filters_a, #section-filters_b, #section-filters_c {
	float: left;
	width: 10px;
	margin: 5px 0 0 0;
}

将其修改为

#section-filters_a, #section-filters_b, #section-filters_c, #section-filters_d, #section-filters_e, #section-filters_f {
	float: left;
	width: 10px;
	margin: 5px 0 0 0;
}

作用:让新添加的三个筛选条件的样式与已有样式一致,如下图所示:

给主题筛选功能增加筛选项

 

二、后台文章编辑页面模块的追加

打开【inc/filter-tag.php】文件,在最后添加

if (zm_get_option('filters_d')) {
	// 筛选标签 D
	add_action( 'init', 'create_filtersd' );
	function create_filtersd() {
		$labels = array(
			'name' => '筛选 D-国家地区',
			'singular_name' => 'filtersd' ,
			'search_items' => '搜索标签',
			'edit_item' => '编辑标签',
			'update_item' => '更新标签',
			'add_new_item' => '添加新标签',
		);
		register_taxonomy( 'filtersd','post',array(
			'hierarchical' => false,
			'rewrite' => array( 'slug' => $filtersd ),
			'labels' => $labels
		));
	}
}

if (zm_get_option('filters_e')) {
	// 筛选标签 E
	add_action( 'init', 'create_filterse' );
	function create_filterse() {
		$labels = array(
			'name' => '筛选 E-清晰程度',
			'singular_name' => 'filterse' ,
			'search_items' => '搜索标签',
			'edit_item' => '编辑标签',
			'update_item' => '更新标签',
			'add_new_item' => '添加新标签',
		);
		register_taxonomy( 'filterse','post',array(
			'hierarchical' => false,
			'rewrite' => array( 'slug' => $filterse ),
			'labels' => $labels
		));
	}
}

if (zm_get_option('filters_f')) {
	// 筛选标签 F
	add_action( 'init', 'create_filtersf' );
	function create_filtersf() {
		$labels = array(
			'name' => '筛选 F-更新状态',
			'singular_name' => 'filtersf' ,
			'search_items' => '搜索标签',
			'edit_item' => '编辑标签',
			'update_item' => '更新标签',
			'add_new_item' => '添加新标签',
		);
		register_taxonomy( 'filtersf','post',array(
			'hierarchical' => false,
			'rewrite' => array( 'slug' => $filtersf ),
			'labels' => $labels
		));
	}
}

作用:让新增的三个筛选条件显示在文章编辑页面和“文章”菜单中,如下图所示:

给主题筛选功能增加筛选项

如果你看不到新增的这三个筛选模块的话,请点击右上角的【显示选项】,勾选对应的模块。

给主题筛选功能增加筛选项

 

三、前台输出模块的追加

1、添加筛选标题

首先:打开【inc/filter.php】文件,在代码

<div class="filter-box">

下面添加

<div class="filter-box-title">
	<span></span>
</div>
<div class="filter-box-main">

然后:在该文件的最后添加

</div>

2、添加筛选条件

在同文件中找到代码

<?php if (zm_get_option('filters_c')) { ?>
	<div class="clear"></div>
	<div class="filter-main">
	<span class="filter-name">
		<i class="be be-sort"></i><?php echo zm_get_option('filters_c_t'); ?>
	</span>
	<span class="filtertag" id="filtersc"<?php if($filtersc!=''){echo ' data="'.strtolower(urlencode(urldecode(urldecode($filtersc)))).'"';}?>>
		<?php
		$terms = get_terms("filtersc");
		$count = count($terms);
		if ( $count > 0 ){
			foreach ( $terms as $term ) {
				if(strtolower(urlencode(urldecode(urldecode($filtersc))))==$term->slug){
					echo '<a class="filter-tag filter-on" data="'. $term->slug .'">' . $term->name . '</a>';
				}else{
					echo '<a class="filter-tag" data="'. $term->slug .'">' . $term->name . '</a>';
				}
			}
		}
		?>
	</span>
	</div>
<?php } ?>

在其下面添加

<?php if (zm_get_option('filters_d')) { ?>
	<div class="clear"></div>
	<div class="filter-main">
		<span class="filter-name">
			<i class="be be-sort"></i><?php echo zm_get_option('filters_d_t'); ?>
		</span>
		<span class="filtertag" id="filtersd"<?php if($filtersd!=''){echo ' data="'.strtolower(urlencode(urldecode(urldecode($filtersd)))).'"';}?>>
			<?php
				$terms = get_terms("filtersd");
				$count = count($terms);
				if ( $count > 0 ){
					foreach ( $terms as $term ) {
						if(strtolower(urlencode(urldecode(urldecode($filtersd))))==$term->slug){
							echo '<a class="filter-tag filter-on" data="'. $term->slug .'">' . $term->name . '</a>';
						}else{
							echo '<a class="filter-tag" data="'. $term->slug .'">' . $term->name . '</a>';
						}
					}
				}
			?>
		</span>
	</div>
<?php } ?>

<?php if (zm_get_option('filters_e')) { ?>
	<div class="clear"></div>
	<div class="filter-main">
		<span class="filter-name">
			<i class="be be-sort"></i><?php echo zm_get_option('filters_e_t'); ?>
		</span>
		<span class="filtertag" id="filterse"<?php if($filterse!=''){echo ' data="'.strtolower(urlencode(urldecode(urldecode($filterse)))).'"';}?>>
			<?php
				$terms = get_terms("filterse");
				$count = count($terms);
				if ( $count > 0 ){
					foreach ( $terms as $term ) {
						if(strtolower(urlencode(urldecode(urldecode($filterse))))==$term->slug){
							echo '<a class="filter-tag filter-on" data="'. $term->slug .'">' . $term->name . '</a>';
						}else{
							echo '<a class="filter-tag" data="'. $term->slug .'">' . $term->name . '</a>';
						}
					}
				}
			?>
		</span>
	</div>
<?php } ?>

<?php if (zm_get_option('filters_f')) { ?>
	<div class="clear"></div>
	<div class="filter-main">
		<span class="filter-name">
			<i class="be be-sort"></i><?php echo zm_get_option('filters_f_t'); ?>
		</span>
		<span class="filtertag" id="filtersf"<?php if($filtersf!=''){echo ' data="'.strtolower(urlencode(urldecode(urldecode($filtersf)))).'"';}?>>
			<?php
			$terms = get_terms("filtersf");
			$count = count($terms);
			if ( $count > 0 ){
				foreach ( $terms as $term ) {
					if(strtolower(urlencode(urldecode(urldecode($filtersf))))==$term->slug){
						echo '<a class="filter-tag filter-on" data="'. $term->slug .'">' . $term->name . '</a>';
					}else{
						echo '<a class="filter-tag" data="'. $term->slug .'">' . $term->name . '</a>';
					}
					}
				}
			?>
		</span>
	</div>
<?php } ?>

3、前台 CSS 样式调整

打开【style.css】文件,找到代码

/** 筛选 **/
.filter-box {
	background: #fff;
	margin: 0 0 10px 0;
	padding: 10px 5px 8px 5px;
	border: 1px solid #ddd;
	border-radius: 2px;
}

.filter-main {
	float: left;
}

.filter-name {
	float: left;
	font-weight: bold;
	line-height: 35px;
	height: 100%;
	padding: 0 10px;
}

.filter-name .be {
	font-weight: normal;
	margin: 0 5px 0 0;
}

.filtertag {
	display: block;
	line-height: 25px;
	margin: 0 0 0 100px;
}

.filter-tag {
	float: left;
	background: #fff;
	color: #666;
	cursor: pointer;
	text-align: center;
	display: block;
	margin: 3px 5px 5px 0;
	padding: 0 5px;
	border-radius: 2px;
	border: 1px solid #fff;
}

.filter-tag:hover {
	color: #3690cf;
}

.filter-on {
	color: #fff !important;
	background: #3690cf;
	border: 1px solid #3690cf;
}

将其替换为

/** 筛选 **/
.filter-box {
	background: #fff;
	margin: 0 0 10px 0;
	padding: 10px 5px 8px 5px;
	border: 1px solid #ddd;
	border-radius: 2px;
}

.filter-box-title {
	cursor: pointer;
}

.filter-box-title, .filter-name {
	font-weight: bold;
	line-height: 35px;
	height: 100%;
	padding: 0 10px;
}

.filter-box-title::after, .off-filter-box-main::after {
	font-family: be;
	font-size: 15px !important;
	color: #777;
}

.filter-box-title::before {
	content: "展开筛选";
}

.off-filter-box-title::before {
	content: "关闭筛选";
}

.filter-box-title::after {
	content: "\e76f";
	float: rightright;
}

.off-filter-box-main::after {
	content: "\e77b";
	float: rightright;
}

.filter-box-main {
	display: none;
}

.filter-box-main-display {
	display: block;
}

.filter-main {
	float: left;
}

.filter-name {
	float: left;
}

.filter-name .be {
	font-weight: normal;
	margin: 0 5px 0 0;
}

.filtertag {
	display: block;
	line-height: 25px;
	margin: 0 0 0 100px;
}

.filter-tag {
	float: left;
	background: #fff;
	color: #666;
	cursor: pointer;
	text-align: center;
	display: block;
	margin: 3px 5px 5px 0;
	padding: 0 5px;
	border-radius: 2px;
	border: 1px solid #fff;
}

.filter-tag:hover {
	color: #3690cf;
}

.filter-on {
	color: #fff !important;
	background: #3690cf;
	border: 1px solid #3690cf;
}

说明:其中的

.filter-box-title::before {
	content: "展开筛选";
}

.off-filter-box-title::before {
	content: "关闭筛选";
}

用来动态显示筛选标题,当筛选功能收起时显示“展开筛选”,当筛选功能展开时显示“关闭筛选”,如果不喜欢这个标题名字,自己修改就好。

4、添加展开/收起功能

打开【js/script.js】文件,找到注释

// filters

在其下面添加

$(".filter-box-title").click(function() {
	$ (this).toggleClass ("off-filter-box-title");
	$ (this).toggleClass ("off-filter-box-main");
	$ (".filter-box-main").toggleClass ("filter-box-main-display");
});

5、添加地址栏参数传递

首先:在同文件中找到代码

var url = urlNow;
var filtersa = $('#filtersa').attr('data');
var filtersb = $('#filtersb').attr('data');
var filtersc = $('#filtersc').attr('data');

在其下面添加

var filtersd = $('#filtersd').attr('data');
var filterse = $('#filterse').attr('data');
var filtersf = $('#filtersf').attr('data');

然后:在再下面点的位置找到代码

if (typeof(filtersc) != 'undefined') {
	if (url.substr( - 1) != '?') {
		url += '&';
	}

	if (filtersc.length > 0) {
		url += 'filtersc=' + filtersc;
	}
}

在其后面添加

if (typeof(filtersd) != 'undefined') {
	if (url.substr( - 1) != '?') {
		url += '&';
	}

	if (filtersd.length > 0) {
		url += 'filtersd=' + filtersd;
	}
}

if (typeof(filterse) != 'undefined') {
	if (url.substr( - 1) != '?') {
		url += '&';
	}

	if (filterse.length > 0) {
		url += 'filterse=' + filterse;
	}
}

if (typeof(filtersf) != 'undefined') {
	if (url.substr( - 1) != '?') {
		url += '&';
	}
	
	if (filtersf.length > 0) {
		url += 'filtersf=' + filtersf;
	}
}

至此,关于// filters部分的完整代码应该是这样的:展开

// filters
$(".filter-box-title").click(function() {
	$ (this).toggleClass ("off-filter-box-title");
	$ (this).toggleClass ("off-filter-box-main");
	$ (".filter-box-main").toggleClass ("filter-box-main-display");
});

$('.filtertag a').click(function() {
	var papaDate = $(this).parent('.filtertag').attr('data');
	$(this).parent('.filtertag').find('a').css('borderColor', '');
	if (papaDate == undefined | papaDate == "" | papaDate != $(this).attr('data')) {
		$(this).css('borderColor', '#ddd').parent('.filtertag').attr('data', $(this).attr('data'));
	} else if (papaDate == $(this).attr('data')) {
		$(this).css('borderColor', '').parent('.filtertag').attr('data', '');
	} else {
		$(this).css('borderColor', '').parent('.filtertag').attr('data', '');
	}

	var ishttps = 'https:' == document.location.protocol ? true: false;
	if(ishttps){
		var urlNow = 'https://' + window.location.host + '/?';
	}else{
		if (window.location.host=="127.0.0.1" || window.location.host=="localhost" ){
			var urlNow = 'http://' + window.location.host + '/wordpress/?';
		}else{
			var urlNow = 'http://' + window.location.host + '/?';
		}
	}

	var url = urlNow;
	var filtersa = $('#filtersa').attr('data');
	var filtersb = $('#filtersb').attr('data');
	var filtersc = $('#filtersc').attr('data');
	var filtersd = $('#filtersd').attr('data');
	var filterse = $('#filterse').attr('data');
	var filtersf = $('#filtersf').attr('data');
	if (typeof(filtersa) != 'undefined') {
		if (filtersa.length > 0) {
			url += 'filtersa=' + filtersa;
		}
	}

	if (typeof(filtersb) != 'undefined') {
		if (url.substr( - 1) != '?') {
			url += '&';
		}

		if (filtersb.length > 0) {
			url += 'filtersb=' + filtersb;
		}
	}

	if (typeof(filtersc) != 'undefined') {
		if (url.substr( - 1) != '?') {
			url += '&';
		}

		if (filtersc.length > 0) {
			url += 'filtersc=' + filtersc;
		}
	}

	if (typeof(filtersd) != 'undefined') {
		if (url.substr( - 1) != '?') {
			url += '&';
		}

		if (filtersd.length > 0) {
			url += 'filtersd=' + filtersd;
		}
	}

	if (typeof(filterse) != 'undefined') {
		if (url.substr( - 1) != '?') {
			url += '&';
		}

		if (filterse.length > 0) {
			url += 'filterse=' + filterse;
		}
	}

	if (typeof(filtersf) != 'undefined') {
		if (url.substr( - 1) != '?') {
			url += '&';
		}

		if (filtersf.length > 0) {
			url += 'filtersf=' + filtersf;
		}
	}

	if (urlNow != url) {
		window.location.href = url;
	}
})

重要说明:如果你在完成整个操作(包括后续操作)后去测试时发现:当你点击筛选条件中的任何一个筛选内容(包括添加在主题原有的筛选条件中的筛选内容)时,页面无论如何都不会跳转到筛选结果页或筛选结果页显示 404 错误时,你需要将这部分代码中的

if(ishttps){
	var urlNow = 'https://' + window.location.host + '/?';
}else{
	if (window.location.host=="127.0.0.1" || window.location.host=="localhost" ){
		var urlNow = 'http://' + window.location.host + '/wordpress/?';
	}else{
		var urlNow = 'http://' + window.location.host + '/?';
	}
}

修改为

if(ishttps){
	var urlNow = 'https://' + window.location.host + '/?';
}else{
	// if (window.location.host=="127.0.0.1" || window.location.host=="localhost" ){
		// var urlNow = 'http://' + window.location.host + '/wordpress/?';
	// }else{
		var urlNow = 'http://' + window.location.host + '/?';
	// }
}

6、导航栏中追加“筛选结果”

打开【inc/inc.php】文件,找到代码

if ( is_tax('filtersa') || is_tax('filtersb') || is_tax('filtersc') ) {
	echo '<i class="be be-arrowright"></i>筛选结果';
}

将其修改为

if ( is_tax('filtersa') || is_tax('filtersb') || is_tax('filtersc') || is_tax('filtersd') || is_tax('filterse') || is_tax('filtersf') ) {
	echo '<i class="be be-arrowright"></i>筛选结果';
}

作用:当用户点击筛选内容时,页面会跳转到筛选结果页,而导航栏中并不会显示“筛选结果”,所以需要在此追加“筛选结果”,其具体的显示位置如下图所示:

给主题筛选功能增加筛选项

 

最后总结

至此,文章的整个实现过程已经结束了,剩下的事情就是在后台启用【多条件筛选】功能,并设置相关的选项,然后在文章编辑页面的筛选模块中分别输入想要显示的筛选内容即可。

重要说明:启用【多条件筛选】功能后,需要在【后台--设置--固定链接】中点一下【保存更改】按钮,否则前台可能不能正常显示筛选功能或筛选功能不能正常使用。

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

发表评论

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