为自定义文章类型添加筛选功能

2019年1月15日00:00:56 1 894 29555字阅读98分31秒

开篇说明

  • 本文针对主题原有的筛选功能进行扩展，因此非该主题的童鞋本文仅供参考
  • 之前的文章《给主题筛选功能增加筛选项 》侧重点是为已有的内置文章类型下的筛选功能添加筛选项，本文的侧重点是为自定义文章类型：视频（video）新增筛选功能
  • 理论上本文的操作过程可以单独实现，但考虑到在此之前我已对原有的筛选功能进行过修改，因此建议在学习本文之前最好可以先阅读一下之前的那篇文章
  • 本文提到的代码位置都是针对修改后的位置而言
  • 本文篇幅较长过程较为复杂，特别是最后缩略图部分略显繁琐甚至啰嗦，请务必仔细阅读，好好理解
  • 本文涉及的文件较多，因此在修改前务必备份好相应的文件

 

预期实现的功能

  1. 不同文章类型分别使用不同的筛选条件
  2. 不同文章类型下的筛选结果页可以分别设置不同的布局（列表和图片布局）
  3. 不同文章类型下的筛选条件不重复调用，主要是避免筛选列表中出现不符合当前筛选环境的筛选标签

 

最终效果预览

 

第一部分：后台相关功能的实现

一、主题选项中追加筛选条件和筛选结果页布局选项

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

$options[] = array(
	'name' => '分类ID对照',
	'desc' => '<ul>'.$cats_id.'</ul>',
	'id' => 'catids',
	'class' => 'fi-catid hidden',
	'type' => 'info'
);

将其移动到

$options[] = array(
	'name' => '',
	'desc' => '输入显示筛选的分类ID，多个分类用英文半角逗号","隔开',
	'id' => 'filter_id',
	'class' => 'hidden',
	'std' => '1,2',
	'type' => 'text'
);

的下面

目的：重新布局【多条件筛选】下的筛选功能。

然后：在这两段代码的下面添加

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

$options[] = array(
	'name' => '',
	'desc' => '筛选VA文字，用于自定义文章类型：视频',
	'id' => 'filters_va_t',
	'class' => 'hidden',
	'std' => '类 别',
	'type' => 'text'
);

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

$options[] = array(
	'name' => '',
	'desc' => '筛选VB文字，用于自定义文章类型：视频',
	'id' => 'filters_vb_t',
	'class' => 'hidden',
	'std' => '语 言',
	'type' => 'text'
);

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

$options[] = array(
	'name' => '',
	'desc' => '筛选VC文字，用于自定义文章类型：视频',
	'id' => 'filters_vc_t',
	'class' => 'hidden',
	'std' => '字 幕',
	'type' => 'text'
);

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

$options[] = array(
	'name' => '',
	'desc' => '筛选VD文字，用于自定义文章类型：视频',
	'id' => 'filters_vd_t',
	'class' => 'hidden',
	'std' => '水 印',
	'type' => 'text'
);

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

$options[] = array(
	'name' => '',
	'desc' => '筛选VE文字，用于自定义文章类型：视频',
	'id' => 'filters_ve_t',
	'class' => 'hidden',
	'std' => '清晰度',
	'type' => 'text'
);

代码说明：

  • 因为我需要用到五个筛选条件，所以加了五个选项（下同，不再赘述）
  • 筛选条件以每两段代码为一组，如果你要增删筛选条件，请按组操作
  • desc、id、std后面的文字可以根据自己的情况修改，但要注意和后面的代码对应上

接着：在同文件中找到代码

$options[] = array(
	'name' => '',
	'desc' => '筛选结果使用图片布局',
	'id' => 'filters_img',
	'class' => 'hidden',
	'std' => '0',
	'type' => 'checkbox'
);

中的

'desc' => '筛选结果使用图片布局',

将其替换为

'desc' => '仅勾选此项可单独针对“内置文章类型”筛选结果使用图片布局',

代码作用：

  • 为了区分接下来将要添加的另一个筛选结果页布局选项
  • 通过这两个选项来实现单独控制筛选结果页布局（列表和图片布局）的目的

最后：在上面所有代码的下面添加

$options[] = array(
	'name' => '',
	'desc' => '仅勾选此项可单独针对“自定义文章类型：视频”筛选结果使用图片布局',
	'id' => 'filters_img_v',
	'class' => 'hidden',
	'std' => '0',
	'type' => 'checkbox'
);

代码作用：

  • 配合原有的筛选结果页布局选项，实现“不同文章类型下的筛选结果页显示不同布局”的目的

完成上面“步骤一”中的操作后，这个文件中关于筛选部分的完整代码应该是这样的：展开

$options[] = array(
	'name' => '多条件筛选',
	'desc' => '启用',
	'id' => 'filters',
	'class' => 'be_ico',
	'std' => '1',
	'type' => 'checkbox'
);

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

$options[] = array(
	'name' => '',
	'desc' => '筛选A文字，用于内置文章类型',
	'id' => 'filters_a_t',
	'class' => 'hidden',
	'std' => '影片类别',
	'type' => 'text'
);

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

$options[] = array(
	'name' => '',
	'desc' => '筛选B文字，用于内置文章类型',
	'id' => 'filters_b_t',
	'class' => 'hidden',
	'std' => '风格类型',
	'type' => 'text'
);

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

$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'
);

$options[] = array(
	'name' => '',
	'desc' => '输入显示筛选的分类ID，多个分类用英文半角逗号","隔开',
	'id' => 'filter_id',
	'class' => 'hidden',
	'std' => '1,2',
	'type' => 'text'
);

$options[] = array(
	'name' => '分类ID对照',
	'desc' => '<ul>'.$cats_id.'</ul>',
	'id' => 'catids',
	'class' => 'fi-catid hidden',
	'type' => 'info'
);

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

$options[] = array(
	'name' => '',
	'desc' => '筛选VA文字，用于自定义文章类型：视频',
	'id' => 'filters_va_t',
	'class' => 'hidden',
	'std' => '类 别',
	'type' => 'text'
);

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

$options[] = array(
	'name' => '',
	'desc' => '筛选VB文字，用于自定义文章类型：视频',
	'id' => 'filters_vb_t',
	'class' => 'hidden',
	'std' => '语 言',
	'type' => 'text'
);

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

$options[] = array(
	'name' => '',
	'desc' => '筛选VC文字，用于自定义文章类型：视频',
	'id' => 'filters_vc_t',
	'class' => 'hidden',
	'std' => '字 幕',
	'type' => 'text'
);

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

$options[] = array(
	'name' => '',
	'desc' => '筛选VD文字，用于自定义文章类型：视频',
	'id' => 'filters_vd_t',
	'class' => 'hidden',
	'std' => '水 印',
	'type' => 'text'
);

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

$options[] = array(
	'name' => '',
	'desc' => '筛选VE文字，用于自定义文章类型：视频',
	'id' => 'filters_ve_t',
	'class' => 'hidden',
	'std' => '清晰度',
	'type' => 'text'
);

$options[] = array(
	'name' => '',
	'desc' => '仅勾选此项可单独针对“内置文章类型”筛选结果使用图片布局',
	'id' => 'filters_img',
	'class' => 'hidden',
	'std' => '0',
	'type' => 'checkbox'
);

$options[] = array(
	'name' => '',
	'desc' => '仅勾选此项可单独针对“自定义文章类型：视频”筛选结果使用图片布局',
	'id' => 'filters_img_v',
	'class' => 'hidden',
	'std' => '0',
	'type' => 'checkbox'
);

$options[] = array(
	'id' => 'clear'
);

 

二、为新增的筛选条件和筛选结果页布局选项添加显示判断

打开【inc/options/includes/themes-options.php】文件，找到代码

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

将其替换为

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-filters_va_t, #section-filters_vb_t, #section-filters_vc_t, #section-filters_vd_t, #section-filters_ve_t, #section-filter_id, .fi-catid, .fia-catid, #section-filters_img, #section-filters_img_v').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-filters_va_t, #section-filters_vb_t, #section-filters_vc_t, #section-filters_vd_t, #section-filters_ve_t, #section-filter_id, .fi-catid, .fia-catid, #section-filters_img, #section-filters_img_v').show();
}

代码作用：

  • 让在“步骤一”中新增的功能可以在后台主题选项中正常显示出来，如下图所示：

 

三、为新增的筛选功能添加样式，使其与主题原有筛选功能样式保持一致

打开【inc/options/css/options.php】文件，找到代码

#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;
}

将其替换为

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

此时，刷新后台就可以看到样式都正常了，如下图所示：

 

四、后台“视频”文章编辑页面及左侧“视频”菜单下追加筛选模块

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

if (zm_get_option('filters_va')) {
	// 筛选标签VA
	add_action( 'init', 'create_filtersva' );
	function create_filtersva() {
		$labels = array(
			'name' => '筛选VA-类 别',
			'singular_name' => 'filtersva' ,
			'search_items' => '搜索标签',
			'edit_item' => '编辑标签',
			'update_item' => '更新标签',
			'add_new_item' => '添加新标签',
		);
		register_taxonomy( 'filtersva','video',array(
			'hierarchical' => false,
			'rewrite' => array( 'slug' => $filtersva ),
			'labels' => $labels
		));
	}
}

if (zm_get_option('filters_vb')) {
	// 筛选标签VB
	add_action( 'init', 'create_filtersvb' );
	function create_filtersvb() {
		$labels = array(
			'name' => '筛选VB-语 言',
			'singular_name' => 'filtersvb' ,
			'search_items' => '搜索标签',
			'edit_item' => '编辑标签',
			'update_item' => '更新标签',
			'add_new_item' => '添加新标签',
		);
		register_taxonomy( 'filtersvb','video',array(
			'hierarchical' => false,
			'rewrite' => array( 'slug' => $filtersvb ),
			'labels' => $labels
		));
	}
}

if (zm_get_option('filters_vc')) {
	// 筛选标签VC
	add_action( 'init', 'create_filtersvc' );
	function create_filtersvc() {
		$labels = array(
			'name' => '筛选VC-字 幕',
			'singular_name' => 'filtersvc' ,
			'search_items' => '搜索标签',
			'edit_item' => '编辑标签',
			'update_item' => '更新标签',
			'add_new_item' => '添加新标签',
		);
		register_taxonomy( 'filtersvc','video',array(
			'hierarchical' => false,
			'rewrite' => array( 'slug' => $filtersvc ),
			'labels' => $labels
		));
	}
}

if (zm_get_option('filters_vd')) {
	// 筛选标签VD
	add_action( 'init', 'create_filtersvd' );
	function create_filtersvd() {
		$labels = array(
			'name' => '筛选VD-水 印',
			'singular_name' => 'filtersvd' ,
			'search_items' => '搜索标签',
			'edit_item' => '编辑标签',
			'update_item' => '更新标签',
			'add_new_item' => '添加新标签',
		);
		register_taxonomy( 'filtersvd','video',array(
			'hierarchical' => false,
			'rewrite' => array( 'slug' => $filtersvd ),
			'labels' => $labels
		));
	}
}

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

代码说明：

  • 代码中的video是我的自定义文章类型：视频的别名，请修改成你自己的自定义文章类型别名。因为添加了五个筛选条件，对应的就有五个筛选模块，要改的话就要改五个地方。

完成“步骤四”操作后就可以在后台【视频】文章编辑页面和左侧【视频】菜单下看到新增的这五个筛选模块了，如下图所示：

[mark_c]如果你看不到这些模块的话，需要在右上角的【显示选项】中勾选这些模块。[/mark_c]

 

第二部分：前台相关功能的实现

五、头部文件添加判断

打开【template/header-sub.php】文件，找到代码

<?php if (in_category(explode(',',zm_get_option('filter_id') ) ) && !is_single() && !is_home() && !is_author() && !is_search()) { ?>

将其替换为

<?php if ((in_category(explode(',',zm_get_option('filter_id') ) ) || get_post_type()=='video' ) && !is_single() && !is_home() && !is_author() && !is_search()) { ?>

代码作用：

  • 增加一个是否是自定义文章类型：视频（video）的判断，以使下面将要添加在前台显示的五个筛选条件可以在前台正常输出

 

六、添加前台筛选功能并做文章类型判断

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

<div class="filter-box-main">

在其下面添加

<?php if (in_category(explode(',',zm_get_option('filter_id') ) ) && !is_single() && !is_home() && !is_author() && !is_search()) { ?>

代码作用：

  • 用来判断原有的筛选条件是否只在内置文章类型中才显示，与下面将要新增的五个筛选条件做区分

然后：在同文件最后三行代码

		<div class="clear"></div>
	</div>
</div>

的上面添加

<?php } ?>
<?php if(get_post_type()=='video') {?>
	<?php if (zm_get_option('filters_va')) { ?>
		<div class="clear"></div>
		<div class="filter-main">
			<span class="filter-name"><i class="be be-sort"></i><?php echo zm_get_option('filters_va_t'); ?></span>
			<span class="filtertag" id="filtersva"<?php if($filtersva!=''){echo ' data="'.strtolower(urlencode(urldecode(urldecode($filtersva)))).'"';}?>>
				<?php
					$terms = get_terms("filtersva");
					$countcount = count($terms);
					if ( $count > 0 ){
						foreach ( $terms as $term ) {
							if(strtolower(urlencode(urldecode(urldecode($filtersva))))==$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_vb')) { ?>
		<div class="clear"></div>
		<div class="filter-main">
			<span class="filter-name"><i class="be be-sort"></i><?php echo zm_get_option('filters_vb_t'); ?></span>
			<span class="filtertag" id="filtersvb"<?php if($filtersvb!=''){echo ' data="'.strtolower(urlencode(urldecode(urldecode($filtersvb)))).'"';}?>>
				<?php
					$terms = get_terms("filtersvb");
					$countcount = count($terms);
					if ( $count > 0 ){
						foreach ( $terms as $term ) {
							if(strtolower(urlencode(urldecode(urldecode($filtersvb))))==$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_vc')) { ?>
		<div class="clear"></div>
		<div class="filter-main">
			<span class="filter-name"><i class="be be-sort"></i><?php echo zm_get_option('filters_vc_t'); ?></span>
			<span class="filtertag" id="filtersvc"<?php if($filtersvc!=''){echo ' data="'.strtolower(urlencode(urldecode(urldecode($filtersvc)))).'"';}?>>
				<?php
				$terms = get_terms("filtersvc");
				$countcount = count($terms);
					if ( $count > 0 ){
						foreach ( $terms as $term ) {
							if(strtolower(urlencode(urldecode(urldecode($filtersvc))))==$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_vd')) { ?>
		<div class="clear"></div>
		<div class="filter-main">
			<span class="filter-name"><i class="be be-sort"></i><?php echo zm_get_option('filters_vd_t'); ?></span>
			<span class="filtertag" id="filtersvd"<?php if($filtersvd!=''){echo ' data="'.strtolower(urlencode(urldecode(urldecode($filtersvd)))).'"';}?>>
				<?php
					$terms = get_terms("filtersvd");
					$countcount = count($terms);
					if ( $count > 0 ){
							foreach ( $terms as $term ) {
								if(strtolower(urlencode(urldecode(urldecode($filtersvd))))==$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_ve')) { ?>
		<div class="clear"></div>
		<div class="filter-main">
			<span class="filter-name"><i class="be be-sort"></i><?php echo zm_get_option('filters_ve_t'); ?></span>
			<span class="filtertag" id="filtersve"<?php if($filtersve!=''){echo ' data="'.strtolower(urlencode(urldecode(urldecode($filtersve)))).'"';}?>>
				<?php
					$terms = get_terms("filtersve");
					$countcount = count($terms);
					if ( $count > 0 ){
						foreach ( $terms as $term ) {
							if(strtolower(urlencode(urldecode(urldecode($filtersve))))==$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 }?>

代码说明：

  • 第1行：用来结束上一步操作中的第5行的判断
  • 第2行：用来判断新增的五个筛选条件是否只在自定义文章类型：视频（video）下才输出
  • 第3~111行：用来输出新增的五个筛选条件
  • 第112行：用来结束第3行的判断

完成“步骤五”、“步骤六”的操作后，这个文件的完整代码如下：展开

<div class="filter-box">
	<div class="filter-box-title"><span></span></div>
	<div class="filter-box-main">
	<?php if (in_category(explode(',',zm_get_option('filter_id') ) ) && !is_single() && !is_home() && !is_author() && !is_search()) { ?>
		<?php if (zm_get_option('filters_a')) { ?>
			<div class="filter-main">
				<span class="filter-name"><i class="be be-sort"></i><?php echo zm_get_option('filters_a_t'); ?></span>
				<span class="filtertag" id="filtersa"<?php if($filtersa!=''){echo ' data="'.strtolower(urlencode(urldecode(urldecode($filtersa)))).'"';}?>>
					<?php
						$terms = get_terms("filtersa");
						$countcount = count($terms);
						if ( $count > 0 ){
							foreach ( $terms as $term ) {
								if(strtolower(urlencode(urldecode(urldecode($filtersa))))==$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_b')) { ?>
			<div class="clear"></div>
			<div class="filter-main">
				<span class="filter-name"><i class="be be-sort"></i><?php echo zm_get_option('filters_b_t'); ?></span>
				<span class="filtertag" id="filtersb"<?php if($filtersb!=''){echo ' data="'.strtolower(urlencode(urldecode(urldecode($filtersb)))).'"';}?>>
					<?php
						$terms = get_terms("filtersb");
						$countcount = count($terms);
						if ( $count > 0 ){
							foreach ( $terms as $term ) {
								if(strtolower(urlencode(urldecode(urldecode($filtersb))))==$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_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");
						$countcount = 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");
						$countcount = 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");
						$countcount = 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");
						$countcount = 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 } ?>
	<?php } ?>

	<?php if(get_post_type()=='video') {?>
		<?php if (zm_get_option('filters_va')) { ?>
			<div class="clear"></div>
			<div class="filter-main">
				<span class="filter-name"><i class="be be-sort"></i><?php echo zm_get_option('filters_va_t'); ?></span>
				<span class="filtertag" id="filtersva"<?php if($filtersva!=''){echo ' data="'.strtolower(urlencode(urldecode(urldecode($filtersva)))).'"';}?>>
					<?php
						$terms = get_terms("filtersva");
						$countcount = count($terms);
						if ( $count > 0 ){
							foreach ( $terms as $term ) {
								if(strtolower(urlencode(urldecode(urldecode($filtersva))))==$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_vb')) { ?>
			<div class="clear"></div>
			<div class="filter-main">
				<span class="filter-name"><i class="be be-sort"></i><?php echo zm_get_option('filters_vb_t'); ?></span>
				<span class="filtertag" id="filtersvb"<?php if($filtersvb!=''){echo ' data="'.strtolower(urlencode(urldecode(urldecode($filtersvb)))).'"';}?>>
					<?php
						$terms = get_terms("filtersvb");
						$countcount = count($terms);
						if ( $count > 0 ){
							foreach ( $terms as $term ) {
								if(strtolower(urlencode(urldecode(urldecode($filtersvb))))==$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_vc')) { ?>
			<div class="clear"></div>
			<div class="filter-main">
				<span class="filter-name"><i class="be be-sort"></i><?php echo zm_get_option('filters_vc_t'); ?></span>
				<span class="filtertag" id="filtersvc"<?php if($filtersvc!=''){echo ' data="'.strtolower(urlencode(urldecode(urldecode($filtersvc)))).'"';}?>>
					<?php
						$terms = get_terms("filtersvc");
						$countcount = count($terms);
						if ( $count > 0 ){
							foreach ( $terms as $term ) {
								if(strtolower(urlencode(urldecode(urldecode($filtersvc))))==$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_vd')) { ?>
			<div class="clear"></div>
			<div class="filter-main">
				<span class="filter-name"><i class="be be-sort"></i><?php echo zm_get_option('filters_vd_t'); ?></span>
				<span class="filtertag" id="filtersvd"<?php if($filtersvd!=''){echo ' data="'.strtolower(urlencode(urldecode(urldecode($filtersvd)))).'"';}?>>
					<?php
						$terms = get_terms("filtersvd");
						$countcount = count($terms);
						if ( $count > 0 ){
							foreach ( $terms as $term ) {
								if(strtolower(urlencode(urldecode(urldecode($filtersvd))))==$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_ve')) { ?>
			<div class="clear"></div>
			<div class="filter-main">
				<span class="filter-name"><i class="be be-sort"></i><?php echo zm_get_option('filters_ve_t'); ?></span>
				<span class="filtertag" id="filtersve"<?php if($filtersve!=''){echo ' data="'.strtolower(urlencode(urldecode(urldecode($filtersve)))).'"';}?>>
					<?php
						$terms = get_terms("filtersve");
						$countcount = count($terms);
						if ( $count > 0 ){
							foreach ( $terms as $term ) {
								if(strtolower(urlencode(urldecode(urldecode($filtersve))))==$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 }?>
	<div class="clear"></div>
	</div>
</div>

 

七、添加地址栏参数传递

首先：打开【js/script.php】文件，找到代码

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');

在其下面添加

var filtersva = $('#filtersva').attr('data');
var filtersvb = $('#filtersvb').attr('data');
var filtersvc = $('#filtersvc').attr('data');
var filtersvd = $('#filtersvd').attr('data');
var filtersve = $('#filtersve').attr('data');

然后：再往下的位置找到代码

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

在其上面添加

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

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

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

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

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

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

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

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

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

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

重要说明：如果你在完成这一步操作（包括后续操作）后去测试时发现：当你点击筛选条件中的任何一个筛选标签（包括添加在主题原有的筛选条件中的筛选标签）时，页面无论如何都不会跳转到筛选结果页或筛选结果页显示404错误时，你需要将用来获取URL地址部分的代码稍做调整，具体如下：

在这个文件中找到代码

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 + '/?';
	// }
}

为了便于理解，在此附上这个文件中关于筛选部分的完整代码展开

// 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');
	var filtersva = $('#filtersva').attr('data');
	var filtersvb = $('#filtersvb').attr('data');
	var filtersvc = $('#filtersvc').attr('data');
	var filtersvd = $('#filtersvd').attr('data');
	var filtersve = $('#filtersve').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 (typeof(filtersva) != 'undefined') {
		if (url.substr( - 1) != '?') {
			url += '&';
		}

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

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

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

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

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

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

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

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

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

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

 

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

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

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>筛选结果';
}

将其修改为

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

完成“第八步”操作后，当你点击筛选标签时就可以在筛选结果页的导航中看到效果了，如下图所示：

 

九、添加筛选结果页布局判断

打开【taxonomy.php】文件，找到代码

<?php if (zm_get_option('filters_img')) { ?>

将其替换为

<?php if (zm_get_option('filters_img_v') && (get_post_type()=='video') || zm_get_option('filters_img') && (get_post_type()!=='video')) { ?>

代码作用：

  • 通过在【taxonomy.php】文件中添加文章类型判断，并结合下面的代码来实现“不同文章类型下的筛选结果页使用不同布局”的目的。

 

十、调整“图片布局 ”中缩略图调用函数

  • 主题缩略图函数调用原理

主题本身集成了多种缩略图显示方式，这些缩略图的尺寸是可以自定义的，具体可以在【主题选项--基本设置--缩略图自动裁剪设置】中查看。

而这些缩略图所调用的函数体也是不同的。比如“标准缩略图”调用的是“标准缩略图”函数体，“视频缩略图”调用的是“视频缩略图”函数体，“图片布局”调用的是“图片布局缩略图”函数体，等等。而在这些函数体内部，他们的执行过程一般是这样的：

首先判断文章编辑页面（含自定义文章类型下的文章编辑页面）是否设置了自定义缩略图地址，如果设置了这个地址则使用这个地址作为缩略图显示；如果没有设置，则获取正文中的第一张图片作为缩略图显示；如果正文中没有图片，则获取特色图像作为缩略图显示（如果你在后台主题选项中启用了特色图像功能的话）；如果特色图像中也没有设置，则调用随机缩略图作为缩略图显示。

  • 调整函数调用原因

第一个原因：查看【多条件筛选--筛选结果使用图片布局】选项所对应的代码时发现，他调用的是“标准缩略图”函数体，并没有调用“图片布局缩略图”函数体。

第二个原因：即使调用了“图片布局缩略图”函数体，也无法获取自定义文章类型中的自定义缩略图地址作为缩略图显示在筛选结果页（即使你在自定义文章类型下的文章中设置了自定义缩略图）。因为自定义文章类型：视频中的自定义缩略图地址只被“视频缩略图”函数体调用，因此在“图片布局缩略图”函数体内部，由于他获取不到自定义文章类型中的自定义缩略图地址，他就只能依次获取正文中的图片、特色图像，如果都没有，就直接调用“随机缩略图”函数了。

第三个原因：对于自定义文章类型：视频中的视频文章，一般情况下我都会设置自定义缩略图作为缩略图显示在视频分类下，而视频文章正文中很少单独添加图片。

由于以上三个原因的存在，造成了默认情况下当我在后台【多条件筛选】功能中启用

这两个功能时，前台筛选结果页的缩略图显示会出现问题，具体表现在两个地方：

  • 第一个地方：当两个选项都不启用时，此时内置文章类型下的筛选结果页显示为

这样的显示是正常的，但是在自定义文章类型：视频下的筛选结果页显示为

可以明显看到，自定义文章类型：视频下的筛选结果页缩略图显示是有问题的，他显示的是随机缩略图而不是我在视频文章中设置的自定义图片。至于样式问题是主题本身代码不够完善造成的，至于怎么修正暂且不管（后面会提到）。

[mark_c]当【筛选结果页使用图片布局】选项不启用时，筛选结果页则以默认的“列表布局”方式显示筛选结果。[/mark_c]

  • 第二个地方：仅启用第二个选项时，此时自定义文章类型：视频下的筛选结果页显示为

同样的，是由于他无法获取自定义文章类型中的自定义缩略图地址造成的。

  • 解决思路

由于自定义文章类型：视频下的分类默认就是图片布局的，而“视频缩略图”函数体又可以获取视频文章中自定义的缩略图地址，因此通过添加判断，让自定义文章类型：视频的筛选结果页调用“视频缩略图”函数体，从而让自定义文章类型：视频的筛选结果页使用“图片布局”时可以正常显示想要的图片。

所以，假如你的自定义文章类型中设置了自定义缩略图地址，而你又希望“筛选结果页”调用这个地址的话，你就需要和我一样修改相关的代码，具体看下面操作。

  • 调整函数调用操作方法

打开【taxonomy.php】文件，找到代码

<?php if (zm_get_option('lazy_s')) { zm_thumbnail_h(); } else { zm_thumbnail(); } ?>

将其替换为

<?php
	if (zm_get_option('lazy_s') && get_post_type()=='video') { 
		videos_thumbnail_h(); 
	} elseif (zm_get_option('lazy_s')) { 
		zm_thumbnail_h(); 
	} else {
		zm_thumbnail();
	}
?>

修改后，就可以看到图片显示都正常了，如下图所示：

需要注意的几个地方：

  • 使用修改后的代码，你需要为视频文章设置自定义的缩略图地址，或让你想要显示在筛选结果页中的图片出现在正文或特色图像中，否则他会显示随机缩略图
  • 建议内置文章类型不勾选【筛选结果页使用图片布局】选项，自定义文章类型：视频勾选【筛选结果页使用图片布局】选项，这样可以促使博客结构更加多样化
  • 如果自定义文章类型：视频不勾选【筛选结果页使用图片布局】选项的话，会造成筛选结果页样式出现问题（就是前面看到的那个效果）
  • 如果你坚持自定义文章类型：视频不勾选【筛选结果页使用图片布局】选项的话，你需要修改【style.css】文件中相关的样式。我觉得没这个必要所以没有进一步修改，如果你觉得有这个需要，那还需要你自己慢慢修改了，但我个人还是不建议这么操作

 

对于整篇文章，需要注意的地方：

  1. 由于添加的筛选条件较多，涉及的文件也较多，因此当你修改了【筛选条件】中的id时，你要确保这个id所对应的每个地方都正确修改了
  2. 在后台新增筛选条件并启用后，需要在【后台--设置--固定链接】中重新点一次【保存更改】按钮，不然前台可能无法正常显示
  3. 当你完成整个操作，并在前台测试筛选功能时，发现筛选结果页总是提示404错误，你需要参考“步骤七”中的“重要说明”
  4. 其他文中提到需要注意的地方

最后，感谢大家的阅读！

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

发表评论

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

目前评论：1   其中：访客  1   博主  0
    • avatar 免费SSR节点 1
      2019年2月3日 14:20 1F
      回复

      不错的文章！