jQuery+自定义分类法实现wordpress多关键词筛选查询

WordPress教程 2722

有在淘宝、京东等商城购买过东西的用户大概都知道，在搜索产品的时候可以通过筛选产品条件细分查询，从而获得更加精确的结果（如下图）。那么在wordpress中如何实现相似的结果？下面是亘古博客分享的通过jQuery、wordpress自定义分类法实现的多重关键词筛选查询功能。

jQuery+自定义分类法实现wordpress多关键词筛选查询

注：以下方法仅对标签页面有效，且略有问题，因此仅供参考，如果要实际运用请自行仔细调试。

一、添加自定义分类法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

/* 自定义分类法 */
// 增加心情
// 增加天气
// 搜索关键字 register_taxonomy
add_action( 'init', 'create_mood' );
function create_mood() {
$labels = array(
	'name' => _x( '心情标签', '当时心情' ),
	'singular_name' => _x( 'mood', 'taxonomy singular name' ),
	'search_items' =>  __( '心情搜索' ),
	'all_items' => __( '全部心情' ),
	'parent_item' => __( '上级心情' ),
	'parent_item_colon' => __( '上级心情:' ),
	'edit_item' => __( '修改标签' ),
	'update_item' => __( '更新标签' ),
	'add_new_item' => __( '增加新的心情标签' ),
	'new_item_name' => __( '新心情名字' ),
	);
 
  register_taxonomy('mood','post',array(
	'hierarchical' => false,
	'labels' => $labels
	));
}
add_action( 'init', 'create_weather' );
function create_weather() {
$labels = array(
	'name' => _x( '天气标签', '当时天气' ),
	'singular_name' => _x( 'weather', 'taxonomy singular name' ),
	'search_items' =>  __( '天气搜索' ),
	'all_items' => __( '全部天气' ),
	'parent_item' => __( '上级天气' ),
	'parent_item_colon' => __( '上级天气:' ),
	'edit_item' => __( '修改标签' ),
	'update_item' => __( '更新标签' ),
	'add_new_item' => __( '增加新的天气标签' ),
	'new_item_name' => __( '新天气名字' ),
	);
 
  register_taxonomy('weather','post',array(
	'hierarchical' => false,
	'labels' => $labels
	));
}
// -- END ----------------------------------------
二、创建tag.php文件，并添加以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

<?php if (!defined('AUTH_KEY')){header('HTTP/1.0 404 Not Found');die ('请不要直接加载这个页面。谢谢！');};?>
<?php get_header(); ?>
<div class="box boxA">	
	<form action="<?php bloginfo('url'); ?>" id="searchform" method="get">
			<input type="text" value="" name="s" class="sKey" autocomplete="off">
			<input type="submit" value="搜索" class="sSubmit">
	</form>
</div>
<div class="box filter">
	<p class="tagfilter" id="tag" <?php if($_GET['tag']!=''){echo ' data="'.$_GET["tag"].'"';}?>><b>标签：</b> <?php
	$terms = get_terms("post_tag");
	$count = count($terms);
	if ( $count > 0 ){
	foreach ( $terms as $term ) {
		if(strtolower(urlencode($_GET['tag']))==$term->slug){
			echo '<a data="'. $term->slug .'" style="border-color: orange;">' . $term->name . '</a>';
		}else{
			echo '<a data="'. $term->slug .'">' . $term->name . '</a>';
		}
	}
	}
	?> </p>
	<p class="tagfilter" id="mood"<?php if($_GET['mood']!=''){echo ' data="'.$_GET["mood"].'"';}?>><b>心情：</b>
	<?php
	$terms = get_terms("mood");
	$count = count($terms);
	if ( $count > 0 ){
	foreach ( $terms as $term ) {
		if(strtolower(urlencode($_GET['mood']))==$term->slug){
			echo '<a data="'. $term->slug .'" style="border-color: orange;">' . $term->name . '</a>';
		}else{
			echo '<a data="'. $term->slug .'">' . $term->name . '</a>';
		}
	}
	}
	?></p>
	<p class="tagfilter" id="weather" <?php if($_GET['weather']!=''){echo ' data="'.$_GET["weather"].'"';}?>><b>天气：</b> <?php
	$terms = get_terms("weather");
	$count = count($terms);
	if ( $count > 0 ){
	foreach ( $terms as $term ) {
		if(strtolower(urlencode($_GET['weather']))==$term->slug){
			echo '<a data="'. $term->slug .'" style="border-color: orange;">' . $term->name . '</a>';
		}else{
			echo '<a data="'. $term->slug .'">' . $term->name . '</a>';
		}
	}
	}
	?> </p>
	<button id="filterSub" class="right">查询</button>
</div>
<div id="indexMain" class="box">
	<div class="posts">
	<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
		<div class="post">
		<div class="title">
			<div class="avatar left"><?php echo get_avatar( get_the_author_email()); ?></div>
			<h3><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
			<div class="meta">
				<span><?php the_author(); ?></span>
				<span><?php the_time('Y.m.d') ?></span>
				<span><?php the_category(' , ') ?></span>
				<span><?php comments_popup_link( "0 条评论", "1 条评论", "% 条评论" );?></span>
				<?php the_tags('<span>标签：',' , ','</span>') ?>
				<?php the_terms( $post->ID,'mood','<span>心情：',' , ','</span>'); ?>
				<?php the_terms( $post->ID,'weather','<span>天气：',' , ','</span>'); ?>
			</div>
		</div>
		<div class="line"></div>		
		<div class="content">
		<?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 500,"..."); ?>
		</div>
		</div>
	<?php endwhile; ?>
	<?php endif; ?>
	<div class="navigation">	
	</div>
	</div>
	<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>
三、添加jquery代码：

代码1：需要搜索按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

$('.tagfilter a').click(function() {
		var papaDate = $(this).parent('.tagfilter').attr('data');
		$(this).parent('.tagfilter').find('a').css('borderColor', '');
		if(papaDate == undefined | papaDate == "" | papaDate != $(this).attr('data')) {
			$(this).css('borderColor', 'orange').parent('.tagfilter').attr('data', $(this).attr('data'));
		} else if(papaDate == $(this).attr('data')) {
			$(this).css('borderColor', '').parent('.tagfilter').attr('data', '');
		} else {
			$(this).css('borderColor', '').parent('.tagfilter').attr('data', '');
		}
	});
	$('#filterSub').click(function() {
		var urlNow = 'http://' + window.location.host + '/?';
		var url = urlNow;
		var mood = $('#mood').attr('data');
		var weather = $('#weather').attr('data');
		var tag = $('#tag').attr('data');
		if(typeof(mood) != 'undefined') {
			if(mood.length > 0) {
				url += 'mood=' + mood;
			}
		}
		if(typeof(weather) != 'undefined') {
			if(url.substr(-1) != '?') {
				url += '&';
			}
			if(weather.length > 0) {
				url += 'weather=' + weather;
			}
		}
		if(typeof(tag) != 'undefined') {
			if(url.substr(-1) != '?') {
				url += '&';
			}
			if(tag.length > 0) {
				url += 'tag=' + tag;
			}
		}
		if(urlNow != url) {
			window.location.href = url;
		}
	})

代码2：不需要搜索按钮（演示站）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

$('.tagfilter a').click(function() {
		var papaDate = $(this).parent('.tagfilter').attr('data');
		$(this).parent('.tagfilter').find('a').css('borderColor', '');
		if(papaDate == undefined | papaDate == "" | papaDate != $(this).attr('data')) {
			$(this).css('borderColor', 'orange').parent('.tagfilter').attr('data', $(this).attr('data'));
		} else if(papaDate == $(this).attr('data')) {
			$(this).css('borderColor', '').parent('.tagfilter').attr('data', '');
		} else {
			$(this).css('borderColor', '').parent('.tagfilter').attr('data', '');
		}
		var urlNow = 'http://' + window.location.host + '/?';
		var url = urlNow;
		var mood = $('#mood').attr('data');
		var weather = $('#weather').attr('data');
		var tag = $('#tag').attr('data');
		if(typeof(mood) != 'undefined') {
			if(mood.length > 0) {
				url += 'mood=' + mood;
			}
		}
		if(typeof(weather) != 'undefined') {
			if(url.substr(-1) != '?') {
				url += '&';
			}
			if(weather.length > 0) {
				url += 'weather=' + weather;
			}
		}
		if(typeof(tag) != 'undefined') {
			if(url.substr(-1) != '?') {
				url += '&';
			}
			if(tag.length > 0) {
				url += 'tag=' + tag;
			}
		}
		if(urlNow != url) {
			window.location.href = url;
		}
		/*
		var bigi = $('.tagfilter').length;
		var arr = new Array();
		var url = 'http://' + window.location.host + '/?tag=';
		for(var i = 0; i < bigi; i++) {
			if($('.tagfilter').eq(i).attr('data') != undefined & $('.tagfilter').eq(i).attr('data') != "") {
				if(i != 0 & url.substr(-1) != '+') {
					url += '+';
				}
				url += $('.tagfilter').eq(i).attr('data');
			}
		}
		window.location.href = url;*/
	})

注：如果网站是子目录，请把代码中的http://' + window.location.host + '/?修改为http://' + window.location.host + '/子目录名称/?（子目录名称为自己的子目录名称）

效果演示：http://www.gengu.org/tag/lol

精品推荐：