有在淘宝、京东等商城购买过东西的用户大概都知道，在搜索产品的时候可以通过筛选产品条件细分查询，从而获得更加精确的结果（如下图）。那么在wordpress中如何实现相似的结果？下面是亘古博客分享的通过jQuery、wordpress自定义分类法实现的多重关键词筛选查询功能。
注：以下方法仅对标签页面有效，且略有问题，因此仅供参考，如果要实际运用请自行仔细调试。
一、添加自定义分类法：
<code>
/* 自定义分类法 */
// 增加心情
// 增加天气
// 搜索关键字 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文件，并添加以下代码：
<code>
<?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="external nofollow" 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：需要搜索按钮
<code>
$('.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：不需要搜索按钮（演示站）：
$('.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 + ‘/子目录名称/?（子目录名称为自己的子目录名称）
![[WordPress教程] jQuery+自定义分类法实现wordpress多关键词筛选查询 -静鱼客栈](https://www.52jyu.cn/wp-content/uploads/2021/09/2021092513321581.png)
![[WordPress教程] wordpress判断是否首页的if(is_home())不起作用？ -静鱼客栈](https://www.52jyu.cn/wp-content/themes/ceomax/timthumb.php?src=https://www.52jyu.cn/wp-content/uploads/2021/09/2021092513321581.png&h=200&w=300&zc=1&a=t&q=100&s=1)
