wordpress进阶教程(四十):文章筛选功能

前几天一网友找我写一个筛选功能,他要做一个关于房产信息的网站,希望访客能在网页上根据条件筛选符合条件的文章。

根据他的功能要求,我给他的建议是,给每个筛选条件建立自定义分类法。比如他需求是根据四个条件来筛选,省、市、类型、价格。

其次,筛选页面我还是根据习惯使用了以前的伪静态方法,使访问的url地址类型为:www.ashuwp.com/sift/、www.ashuwp.com/sift/0_0_0_0、www.ashuwp.com/sift/1_23_33_32/  后面以下划线分割的字符,就是我们要筛选的参数,分别为四个分类的ID。然后根据这四个ID值,来筛选符合条件的文章。最终效果:sift

要做这种功能,内容较多,文章最后面直接提供一个我已经写好了此功能的极简单主题,安装即可用。

注意:本文内容仅仅在伪静态状态下可用,win主机,不管你伪不伪静态,,,都勿用。

步骤一:建立自定义分类法。

本教程讲述的内容中用到了四个筛选条件:省、市、类型、价格。所以,我就给建立四个自定义分类法(使用默认的post)。使用下述代码,你可以直接复制粘贴到functions.php文件中。关于自定义分类法,你也可以访问wordpress进阶教程(三):创建自定义分类法

下列代码存放在本教程提供的主题中的 include/taxonomy.php文件中

  1. //给post创建四个自定义分类法
  2. add_action('init', 'ashu_post_type');
  3. function ashu_post_type() {
  4.   register_taxonomy(
  5.     'province',
  6.     'post',
  7.     array(
  8.       'label' => '省',
  9.       'rewrite' => array( 'slug' => 'province' ),
  10.       'hierarchical' => true
  11.     )
  12.   );
  13.   register_taxonomy(
  14.     'city',
  15.     'post',
  16.     array(
  17.       'label' => '市',
  18.       'rewrite' => array( 'slug' => 'city' ),
  19.       'hierarchical' => true
  20.     )
  21.   );
  22.   register_taxonomy(
  23.     'genre',
  24.     'post',
  25.     array(
  26.       'label' => '类型',
  27.       'rewrite' => array( 'slug' => 'genre' ),
  28.       'hierarchical' => true
  29.     )
  30.   );
  31.   register_taxonomy(
  32.     'price',
  33.     'post',
  34.     array(
  35.       'label' => '价格',
  36.       'rewrite' => array( 'slug' => 'price' ),
  37.       'hierarchical' => true
  38.     )
  39.   );
  40. }

添加完代码,应该在后台文章下面会多出四个自定义分类法:taxonomy

步骤二:添加筛选默认,重写规则。

1. 先在主题文件夹下面建立一个page-sift.php文件(文件名无要求,与下面代码中对应即可),这个文件将作为筛选页面的模板文件。

2.添加重写规则,使得用户访问类似www.ashuwp.com/sift、www.ashuwp.com/sift/0_0_0_0类型url时,不会出现404,而且能正确加载模板。

关于wordpress重写规则,你也可以访问wordpress进阶教程(16):添加一个重写规则,构建新页面初试

下列代码存放在本教程提供的主题中的 include/rewrite.php文件中:

  1. //获取筛选页面的Url
  2. function ashuwp_sift_link(){
  3.   return home_url()."/sift";
  4. }
  5. /*
  6. *添加query变量
  7. */
  8. function ashuwp_query_vars($public_query_vars) {
  9.     $public_query_vars[] = 'ashuwp_page';
  10.     $public_query_vars[] = 'condition';
  11.     return $public_query_vars;
  12. }
  13. /*
  14. *sift页面的重写规则,三种url:
  15. *ashuwp.com/sift   ashuwp.com/sift/0_0_0_0/    ashuwp.com/sift/0_0_0_0/page/2
  16. */
  17. function ashuwp_rewrite_rules( $wp_rewrite ){
  18.   $new_rules = array(
  19.     'sift/?$' => 'index.php?ashuwp_page=sift',
  20.     'sift/([^/]+)/?$' => 'index.php?ashuwp_page=sift&condition='.$wp_rewrite->preg_index(1),
  21.     'sift/([^/]+)/page/?([0-9]{1,})/?$' => 'index.php?ashuwp_page=sift&condition='.$wp_rewrite->preg_index(1).'&paged='.$wp_rewrite->preg_index(2)
  22.   );
  23.   $wp_rewrite->rules = $new_rules + $wp_rewrite->rules;
  24. }
  25. /*
  26. *载入模板规则
  27. *用page-sift.php作为筛选页面的模板文件
  28. */
  29. function ashuwp_template_redirect(){
  30.   global $wp,$wp_query,$wp_rewrite;
  31.   if( !isset($wp_query->query_vars['ashuwp_page']) )
  32.     return;
  33.   $reditect_page =  $wp_query->query_vars['ashuwp_page'];
  34.   if ($reditect_page == "sift"){
  35.     include(get_template_directory().'/page-sift.php');
  36.     die();
  37.   }
  38. }
  39. /*
  40. *更新重写规则
  41. *激活主题的时候
  42. */
  43. function ashuwp_flush_rewrite_rules() {
  44.   global $pagenow$wp_rewrite;
  45.   if ( 'themes.php' == $pagenow && isset( $_GET['activated'] ) )
  46.     $wp_rewrite->flush_rules();
  47. }
  48. add_action( 'load-themes.php', 'ashuwp_flush_rewrite_rules' );
  49. add_action('generate_rewrite_rules', 'ashuwp_rewrite_rules' );
  50. add_action('query_vars', 'ashuwp_query_vars');
  51. add_action("template_redirect", 'ashuwp_template_redirect');

由此,添加完代码后,你可以尝试重新启用你的主题,看访问类似www.ashuwp.com/sift地址的时候是否会出现404,如果是空白页,那就对了,因为我们的筛选页面模板page-sift.php还没有添加内容,所以是空白页。

步骤三、筛选页面模板

前面步骤二中,我们已经为筛选页面建立了页面模板page-sift.php,而且使用wordpress的url重写使得我们的筛选url能正确载入模板。接下来就要完善筛选页面的内容。

筛选页面的内容较多,直接贴出,部分代码有注释。大概思路就是:
1. 先获取所有分类法的所有分类ID,有两个用途:判断从url获取的分类ID是否存在、输出筛选页面中筛选条件的url。
2.从url中获取四个ID参数。
3.输出筛选条件列表。注意判断当前访问、以及“不限”的条件
4.根据条件查询文章。
下面代码存在放本教程提供的主题的page-sift.php文件中
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>阿树工作室--筛选页面教程</title>
  6. <link rel='stylesheet' id='ashuwp-style-css'  href='<?php echo get_stylesheet_uri(); ?>' type='text/css' media='all' />
  7. </head>
  8. <body>
  9. <div id="site-page">
  10. <div id="header">
  11. <h1 id="logo">
  12.  <a href="http://www.treework.cn">treework.cn</a>
  13. </h1>
  14. <h2 class="align-cenetr">阿树工作室--筛选页面教程</h2>
  15. </div>
  16. <div class="container content">
  17. <?php
  18. //1.1 获取所有province分类,将id放入 $province_id数组
  19. $args = array(
  20.   'taxonomy'=>'province',
  21.   'orderby'=>'id',
  22.   'hide_empty'=>0
  23. );
  24. $province_ob = get_categories( $args );
  25. $province_id = array();
  26. foreach($province_ob as $province){
  27.   $province_id[] = $province->term_id;
  28. }
  29. //1.2 获取所有city分类,将id放入 $city_id数组
  30. $args = array(
  31.   'taxonomy'=>'city',
  32.   'orderby'=>'id',
  33.   'hide_empty'=>0
  34. );
  35. $city_ob = get_categories( $args );
  36. $city_id = array();
  37. foreach($city_ob as $city){
  38.   $city_id[] = $city->term_id;
  39. }
  40. //1.3 获取所有genre分类,将id放入 $genre_id数组
  41. $args = array(
  42.   'taxonomy'=>'genre',
  43.   'orderby'=>'id',
  44.   'hide_empty'=>0
  45. );
  46. $genre_ob = get_categories( $args );
  47. $genre_id = array();
  48. foreach($genre_ob as $genre){
  49.   $genre_id[] = $genre->term_id;
  50. }
  51. //1.4 获取所有price分类,将id放入 $price_id数组
  52. $args = array(
  53.   'taxonomy'=>'price',
  54.   'orderby'=>'id',
  55.   'hide_empty'=>0
  56. );
  57. $price_ob = get_categories( $args );
  58. $price_id = array();
  59. foreach($price_ob as $price){
  60.   $price_id[] = $price->term_id;
  61. }
  62. //2 参数处理
  63. //2.1 页码
  64. $wp_query->query_vars['paged'] > 1 ? $pagenum = $wp_query->query_vars['paged'] : $pagenum = 1;
  65. /*2.2 从url中获取参数 即url中 0_0_0_0
  66. *将获取到的四个参数放入 $cons 数组中
  67. */
  68. global $wp_query;
  69. if( isset($wp_query->query_vars['condition']) && $wp_query->query_vars['condition']!='' ){
  70.   $condition = $wp_query->query_vars['condition'];
  71.   $conditions = explode('_',$condition);
  72.   $cons = array();
  73.   if(isset($conditions[0])){
  74.     $conditions[0] = (int)$conditions[0];
  75.   }else{
  76.     $conditions[0]=0;
  77.   }
  78.   if(isset($conditions[1])){
  79.     $conditions[1] = (int)$conditions[1];
  80.   }else{
  81.     $conditions[1]=0;
  82.   }
  83.   if(isset($conditions[2])){
  84.     $conditions[2] = (int)$conditions[2];
  85.   }else{
  86.     $conditions[2]=0;
  87.   }
  88.   if(isset($conditions[3])){
  89.     $conditions[3] = (int)$conditions[3];
  90.   }else{
  91.     $conditions[3]=0;
  92.   }
  93.   //从url中获取到的各分类法分类ID是否真实存在
  94.   if( in_array($conditions[0],$province_id) ){
  95.     $cons[0]=$conditions[0];
  96.   }else{
  97.     $cons[0]=0;
  98.   }
  99.   if( in_array($conditions[1],$city_id) ){
  100.     $cons[1]=$conditions[1];
  101.   }else{
  102.     $cons[1]=0;
  103.   }
  104.   if( in_array($conditions[2],$genre_id) ){
  105.     $cons[2]=$conditions[2];
  106.   }else{
  107.     $cons[2]=0;
  108.   }
  109.   if( in_array($conditions[3],$price_id) ){
  110.     $cons[3]=$conditions[3];
  111.   }else{
  112.     $cons[3]=0;
  113.   }
  114.   $sift_link = ashuwp_sift_link().'/'.$cons[0].'_'.$cons[1].'_'.$cons[2].'_'.$cons[3];
  115. }else{
  116.   $cons = array(0,0,0,0);
  117.   $sift_link = ashuwp_sift_link().'/0_0_0_0';
  118. }
  119. ?>
  120. <div class="sift_query">
  121. <div class="sift_cons">
  122. <div class="sift_li">
  123. <span>省:</span>
  124. <a <?php if($cons[0]==0){ echo 'class="current"'; } ?> href="<?php echo ashuwp_sift_link(); ?>/0_<?php echo $cons[1];?>_<?php echo $cons[2];?>_<?php echo $cons[3];?>/">不限</a>
  125. <?php
  126. foreach$province_ob as $province ){
  127. ?>
  128.   <a href="<?php echo ashuwp_sift_link(); ?>/<?php echo $province->term_id; ?>_<?php echo $cons[1]; ?>_<?php echo $cons[2]; ?>_<?php echo $cons[3];?>" <?php if($cons[0] == $province->term_id){ echo 'class="current"'; } ?>><?php echo $province->name; ?></a>
  129. <?php } ?>
  130. </div>
  131. <div class="sift_li"><span>市:</span><a <?php if($cons[1] == 0){ echo 'class="current"'; } ?> href="<?php echo ashuwp_sift_link(); ?>/<?php echo $cons[0];?>_0_<?php echo $cons[2]; ?>_<?php echo $cons[3];?>/">不限</a>
  132. <?php
  133. foreach$city_ob as $city ){ ?>
  134.     <a href="<?php echo ashuwp_sift_link(); ?>/<?php echo $cons[0]; ?>_<?php echo $city->term_id; ?>_<?php echo $cons[2]; ?>_<?php echo $cons[3];?>" <?php if($cons[1] == $city->term_id){ echo 'class="current"'; } ?>><?php echo $city->name; ?></a>
  135. <?php } ?>
  136. </div>
  137. <div class="sift_li"><span>类型:</span><a <?php if($cons[2] == 0){ echo 'class="current"'; } ?> href="<?php echo ashuwp_sift_link(); ?>/<?php echo $cons[0];?>_<?php echo $cons[1]; ?>_0_<?php echo $cons[3];?>/">不限</a>
  138. <?php
  139. foreach$genre_ob as $genre ){ ?>
  140.     <a href="<?php echo ashuwp_sift_link(); ?>/<?php echo $cons[0]; ?>_<?php echo $cons[1]; ?>_<?php echo $genre->term_id; ?>_<?php echo $cons[3];?>" <?php if($cons[2] == $genre->term_id){ echo 'class="current"'; } ?>><?php echo $genre->name; ?></a>
  141. <?php } ?>
  142. </div>
  143. <div class="sift_li"><span>价格:</span><a <?php if($cons[3] == 0){ echo 'class="current"'; } ?> href="<?php echo ashuwp_sift_link(); ?>/<?php echo $cons[0];?>_<?php echo $cons[1]; ?>_<?php echo $cons[2]; ?>_0/">不限</a>
  144. <?php
  145. foreach$price_ob as $price ){ ?>
  146.     <a href="<?php echo ashuwp_sift_link(); ?>/<?php echo $cons[0]; ?>_<?php echo $cons[1]; ?>_<?php echo $cons[2]; ?>_<?php echo $price->term_id; ?>" <?php if($cons[3] == $price->term_id){ echo 'class="current"'; } ?>><?php echo $price->name; ?></a>
  147. <?php } ?>
  148. </div>
  149. </div>
  150. <?php
  151. //将获取到的参数组合为query_posts的参数
  152. $tax_query = array(
  153.     'relation'=> 'AND',
  154. );
  155. //province
  156. if$cons[0] != 0 ){
  157.     $tax_query[] = array(
  158.         'taxonomy'=>'province',
  159.         'field'=>'id',
  160.         'terms'=>$cons[0]
  161.     );
  162. }
  163. //city
  164. if$cons[1] != 0 ){
  165.     $tax_query[] = array(
  166.         'taxonomy'=>'city',
  167.         'field'=>'id',
  168.         'terms'=>$cons[1]
  169.     );
  170. }
  171. //genre
  172. if$cons[2] != 0 ){
  173.     $tax_query[] = array(
  174.         'taxonomy'=>'genre',
  175.         'field'=>'id',
  176.         'terms'=>$cons[2]
  177.     );
  178. }
  179. //price
  180. if$cons[3] != 0 ){
  181.     $tax_query[] = array(
  182.         'taxonomy'=>'price',
  183.         'field'=>'id',
  184.         'terms'=>$cons[3]
  185.     );
  186. }
  187. $args = array(
  188.     'paged' => $pagenum,
  189.     'tax_query'=> $tax_query
  190. );
  191. global $ashuwp_query;
  192. $ashuwp_query = new WP_Query( $args );
  193. ?>
  194. <div class="query_count">共找到<?php echo $ashuwp_query->found_posts;?>个符合条件的内容</div>
  195. </div>
  196. <?php
  197. if($ashuwp_query->have_posts()) : ?>
  198. <div id="post_list">
  199. <?php while($ashuwp_query->have_posts()) : $ashuwp_query->the_post(); ?>
  200. <div class="post">
  201.   <a href="<?php the_permalink();?>"><?php the_title();?></a>
  202. </div>
  203. <?php endwhile;?>
  204. </div>
  205. <?php endif; ?>
  206. <div id="ashuwp_page">
  207. <?php
  208. $pagination = paginate_links( array(
  209.   'base' => $links.'/page/%#%',
  210.   'format' => '/page/%#%',
  211.   'prev_text' => '上一页',
  212.   'next_text' => '下一页',
  213.   'total' => $ashuwp_query->max_num_pages,
  214.   'current' => $pagenum
  215. ) );
  216. if ( $pagination ) {
  217.     echo $pagination;
  218. }
  219. ?>
  220. </div>
  221. </div>
  222. </div><!--site-page-->
  223. <div id="footer">
  224. <div class="container">
  225. <p>阿树工作室,联系作者admin@treework.cn</p>
  226. </div>
  227. </div>
  228. </body>
  229. </html>

文件下载

下载的文件为一个极简单的主题,效果预览步骤:

1.下载主题并安装,并设置好伪静态

2.添加几篇文章到自定义分类法中

3.直接访问筛选页面的url,比如www.ashuwp.com/sift 或者www.ashuwp.com/sift/0_1_1_0等等。

好了,阿树只能帮网友们到这了。

阿树工作室-筛选功能

以下内容为2016年3月增加:
有网友提到如何修改页面的标题,这里给出一个简单粗暴的范例,如果你需要更自由的修改方式,请参考官网关于wp_title函数的介绍:

  1. //修改筛选页面的标题
  2. add_filter('wp_title','ashuwp_sift_page_title',10,1);
  3. function ashuwp_sift_page_title($title){
  4.     global $wp_query;
  5.     //与载入模板的判断类似
  6.     if( isset($wp_query->query_vars['ashuwp_page']) && $wp_query->query_vars['ashuwp_page']=='sift' ){
  7.     $title = '筛选页面-阿树工作室';
  8.   }
  9.     return $title;
  10. }

本篇教程之前的几篇教程是

本篇教程之后的几篇教程是

没有找到你要找的内容?你可以通过搜索你要找的内容,或者给我们留言。

已有50条评论

小黑进行回复 取消回复