梦主博客 / 网站文章 / jQuery+自定义分类法实现wordpress多关键词筛选查询
jQuery+自定义分类法实现wordpress多关键词筛选查询
网站文章 2026-09-21 07:03:59 3 0

有在淘宝、京东等商城购买过东西的用户大概都知道，在搜索产品的时候可以通过筛选产品条件细分查询，从而获得更加精确的结果（如下图）。那么在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

文章说明
本文标签：
无标签
©版权声明
本站提供的一切软件、教程和游戏辅助仅限用于娱乐和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络收集，版权争议与本站无关。如有侵权请邮件与我们联系处理。敬请谅解！6594404@qq.com
相关文章
站点统计
文章 19963
分类 6
标签 41
友链 4
分类
热门文章
标签云
极品ID网名情侣网名emlog教程活动分享美团免单七夕活动快手极速版QQ音乐活动微信活动
本站资源来自互联网收集，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系站长并出示版权证明以便删除。敬请谅解！侵权删帖/违法举报/投稿等事物联系邮箱：6594404@qq.com
川公网安备51172502000183号 蜀ICP备2022027223号-1
Theme by emlog. Hello World