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

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

 

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

一、添加自定义分类法:
/* 自定义分类法 */ // 增加心情 // 增加天气 // 搜索关键字 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文件,并添加以下代码:
<?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:需要搜索按钮

$('.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 + '/子目录名称/?(子目录名称为自己的子目录名称)

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

jQuery+自定义分类法实现wordpress多关键词筛选查询:等您坐沙发呢!

发表评论

表情
还能输入210个字