文章筛选功能以前写过一个教程 WordPress 进阶教程 (四十): 文章筛选功能，通过加多个分类法来实现。

过了这么久，经常有人找我要定制文章筛选功能，现再放出代码使用自定义字段实现，而且用自定义字段实现文章筛选，比用分类法应该更简单，更强大。

以阿树自己建立的一个网站作为例子：游炎陵，这是为了推广家乡旅游建立的。示例页面：http://youyanling.com/destinations 。

前台效果：通过 url 传递参数。

后台效果：使用自定义字段。范例中使用自己的 ashuwp_framework 框架添加的自定义字段，都是复选框。

 

一、添加自定义字段

添加自定义字段的方法不再赘述，可以使用我们的框架，也可以使用自己的方法添加。

范例网站添加的两个自定义字段的名称分别为：destination_location 和 destination_season 。

自定义字段是复选框，所以值也是固定的，当然可能是字符串也可能是数组。

地域的值可能是 center 、 east 、 west 、 south，若多选了，保存的值是数组。

季节的值可能是 spring 、 summer 、 autumn 、 winter，若多选了，保存的值四号数组。

二、前台输出筛选地址

筛选列表各个项的 url 有多种可能：

刚打开页面时，筛选列表的 url，只需要一个参数。

西片->http://youyanling.com/destinations?area=west

南片->http://youyanling.com/destinations?area=south

...

春季->http://youyanling.com/destinations?season=spring

夏季->http://youyanling.com/destinations?season=summer

...

若点击了其中一项，比如点击了 「西片」 之后，此时筛选项目中地域的 url 不需要改变，但是季节的所有 url 都需要加上已经选中的 area=west 。如下

西片->http://youyanling.com/destinations?area=west

南片->http://youyanling.com/destinations?area=south

...

春节->http://youyanling.com/destinations?area=west&season=spring

夏季->http://youyanling.com/destinations?area=west&season=summer

...

同理，两种筛选都点击之后，此时每个筛选项目的 url 都需要带两个参数，且互相加上对方已经选中的参数。比如点击了 「西片」，「春季」 两项之后。

西片->http://youyanling.com/destinations?season=spring&area=west

南片->http://youyanling.com/destinations?season=spring&area=south

...

春节->http://youyanling.com/destinations?area=west&season=spring

夏季->http://youyanling.com/destinations?area=west&season=summer

...

而上面这种格式的 url 都是用 add_query_arg 函数输出。

用法范例 (输出我们需要的带两个参数的 url)

  1. <?php
  2. $base = 'http://youyanling.com/destinations';
  3. $params = array(
  4.   'area'=>'west',
  5.   'season'=>'spring',
  6. );
  8. //下面代码将会输出 http://youyanling.com/destinations?area=west&season=spring
  9. echo esc_url( add_query_arg( $params, $base ) );
  10. ?>

不管懂没懂，反正前台输出筛选列表得用如下代码 (下面代码是范例的真实代码加了注释)，在需要出现筛选列表的位置加入如下代码。

  1. <?php
  2. $base = get_post_type_archive_link('destination'); //筛选页面的地址
  3. $area_sort = get_query_var('area'); //从 url 中获取地域参数
  4. $season_sort = get_query_var('season'); //从 url 中获取季节参数
  6. //注意，由于本筛选有两个参数，季节和地域，所以要将地域参数让如季节筛选的 url 中，季节的参数放入地域筛选的 url 中
  8. //检测获取到的季节参数是否正常
  9. $area_params = array(); //地域的参数数组
  10. if(in_array($season_sort,array('all','spring','summer','autumn','winter'))){
  11.   $area_params['season'] = $season_sort; //若季节正常，将季节参数放入地域筛选的 url 中
  12. }
  14. //检测获取到的地域参数是否正常
  15. $season_params = array(); //季节的参数数组
  16. if(in_array($area_sort,array('all','center','east','west','south'))){
  17.   $season_params['area'] = $area_sort; //若地域正常，将地域参数放入季节筛选的 url 中
  18. }
  20. $selected = 'class="selected"';
  21. ?>
  22. <div class="group clearfix">
  23.   <div class="group_title"> 位置：</div>
  24.   <div class="list clearfix">
  25.     <?php
  26.     //将地域数组的地域设置为 all
  27.     $area_params['area'] = 'all';
  28.     ?>
  29.     <a <?php if($area_sort=='all') echo $selected; ?> href="<?php echo esc_url( add_query_arg( $area_params, $base ) ); ?>"> 全境</a>
  30.     <?php
  31.     //将地域数组的地域设置为 center
  32.     $area_params['area'] = 'center';
  33.     ?>
  34.     <a <?php if($area_sort=='center') echo $selected; ?> href="<?php echo esc_url( add_query_arg( $area_params, $base ) ); ?>"> 城区周边</a>
  35.     <?php $area_params['area'] = 'west'; ?>
  37.     <a <?php if($area_sort=='west') echo $selected; ?> href="<?php echo esc_url( add_query_arg( $area_params, $base ) ); ?>"> 西片</a>
  39.     <?php $area_params['area'] = 'south'; ?>
  40.     <a <?php if($area_sort=='south') echo $selected; ?> href="<?php echo esc_url( add_query_arg( $area_params, $base ) ); ?>"> 南片</a>
  41.     <?php $area_params['area'] = 'east'; ?>
  43.     <a <?php if($area_sort=='east') echo $selected; ?> href="<?php echo esc_url( add_query_arg( $area_params, $base) ); ?>"> 东片</a>
  44.   </div>
  45. </div>
  46. <div class="group clearfix">
  47.   <div class="group_title"> 季节：</div>
  48.   <div class="list clearfix">
  49.     <?php $season_params['season'] = 'all';?>
  50.     <a <?php if($season_sort=='all') echo $selected; ?> href="<?php echo esc_url( add_query_arg( $season_params, $base ) ); ?>"> 全部</a>
  51.     <?php $season_params['season'] = 'spring';?>
  52.     <a <?php if($season_sort=='spring') echo $selected; ?> href="<?php echo esc_url( add_query_arg( $season_params, $base ) ); ?>"> 春季</a>
  53.     <?php $season_params['season'] = 'summer';?>
  54.     <a <?php if($season_sort=='summer') echo $selected; ?> href="<?php echo esc_url( add_query_arg( $season_params, $base ) ); ?>"> 夏季</a>
  55.     <?php $season_params['season'] = 'autumn';?>
  56.     <a <?php if($season_sort=='autumn') echo $selected; ?> href="<?php echo esc_url( add_query_arg( $season_params, $base ) ); ?>"> 秋季</a>
  57.     <?php $season_params['season'] = 'winter';?>
  58.     <a <?php if($season_sort=='winter') echo $selected; ?> href="<?php echo esc_url( add_query_arg( $season_params, $base ) ); ?>"> 冬季</a>
  59.   </div>
  60. </div>

三、增加可查询变量

前台输出地址和等下后台都要用到从 url 中获取参数，都使用了 get_query_var 这个函数，不过这个函数获取参数还需要将你要查询的变量加入到 「公共可查询变量中」，这个我也不知道怎么翻译。

 使用如下代码使得 area 和 season 两个参数可用 (在 functions.php 文件中加入如下代码) 。

  1. function ashu_query_vars($public_query_vars) {
  2.   $public_query_vars[] = 'area';
  3.   $public_query_vars[] = 'season';
  4.   return $public_query_vars;
  5. }
  6. add_action('query_vars', 'ashu_query_vars');

当然，你也可以使用 $_GET 方法来获取变量。

四、按条件输出文章

有了前面三步，至少在前台显示的 url 是可以正常工作。

第四步也就是最后一步，让前台的文章输出我们想要的。

要点：1. 使用 pre_get_posts 钩子来改变文章查询的参数  2. 如何使用自定义字段查询文章。
(在 functions.php 文件中加入如下代码)

  1. add_action('pre_get_posts','ashuwp_custom_posts_per_page'); //使用 pre_get_posts 钩子来改变查询文章的参数
  3. function ashuwp_custom_posts_per_page($query){
  5.   //范例中的页面是 destination 的归档页面，所以使用 is_post_type_archive 来判断页面
  6.   if(is_post_type_archive('destination') && $query->is_main_query() && !is_admin()){
  8.     $relation = 0; //用来计数有几个参数
  9.     $area_sort = get_query_var('area'); //获取地域参数
  10.     $season_sort = get_query_var('season'); //获取季节参数
  12.     $meta_query = array(
  13.       'relation' => 'OR',
  14.     );
  16.     //判断季节是否合法，此处就不需要 all 了，因为 all 就是所有
  17.     if(in_array($season_sort,array('spring','summer','autumn','winter'))){
  18.       $meta_query[] = array(
  19.             'key'=>'destination_season', //自定义字段的名称
  20.         'value'=> $season_sort,
  21.         'compare'=>'LIKE', //因为自定义字段值可能保存为数组，所以按字段查询文章时使用 LIKE
  22.           );
  23.       $relation++;
  24.     }
  26.     //判断地域是否合法
  27.     if(in_array($area_sort,array('center','east','west','south','center'))){
  28.       $meta_query[] = array(
  29.             'key'=>'destination_location',
  30.         'value'=> $area_sort,
  31.         'compare'=>'LIKE',
  32.           );
  33.       $relation++;
  34.     }
  36.     //如果有两个参数，relation 要设置为 AND，即两个条件都要满足
  37.     if($relation){
  38.       if($relation==2){
  39.         $meta_query['relation'] = 'AND';
  40.       }
  41.       $query->set('meta_query',$meta_query);
  42.     }
  43.   }
  44. }

END 。