wordpress做文章筛选的有很多需求,但是一般主题都不具备这样的功能,我们就要单独的去写这样的多重筛选功能,而今天咱们说个比用分类法应该更简单,更强大。
前台效果:通过url传递参数。
字段筛选前端
后台效果:使用自定义字段。范例中使用自己的ashuwp_framework框架添加的自定义字段,都是复选框。
筛选后端

一、添加自定义字段

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

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

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

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

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

二、前台输出筛选地址

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

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

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


西片->www.xxxx.com/destinations?area=west

南片->www.xxxx.com/destinations?area=south

...

春节->www.xxxx.com/destinations?area=west&season=spring

夏季->www.xxxx.com/destinations?area=west&season=summer

...

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


西片->www.xxxx.com/destinations?season=spring&area=west

南片->www.xxxx.com/destinations?season=spring&area=south

...

春节->www.xxxx.com/destinations?area=west&season=spring

夏季->www.xxxx.com/destinations?area=west&season=summer

...

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

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


<?php
$base = 'www.xxxx.com/destinations';
$params = array(
  'area'=>'west',
  'season'=>'spring',
);
//下面代码将会输出www.xxxx.com/destinations?area=west&season=spring
echo esc_url( add_query_arg( $params, $base ) );
?>

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


<?php
$base = get_post_type_archive_link('destination'); //筛选页面的地址
$area_sort = get_query_var('area'); //从url中获取地域参数
$season_sort = get_query_var('season'); //从url中获取季节参数
//注意,由于本筛选有两个参数,季节和地域,所以要将地域参数让如季节筛选的url中,季节的参数放入地域筛选的url中
//检测获取到的季节参数是否正常
$area_params = array(); //地域的参数数组
if(in_array($season_sort,array('all','spring','summer','autumn','winter'))){
  $area_params['season'] = $season_sort; //若季节正常,将季节参数放入地域筛选的url中
}
//检测获取到的地域参数是否正常
$season_params = array(); //季节的参数数组
if(in_array($area_sort,array('all','center','east','west','south'))){
  $season_params['area'] = $area_sort; //若地域正常,将地域参数放入季节筛选的url中
}
$selected = 'class="selected"';
?>
<div class="group clearfix">
  <div class="group_title">位置:</div>
  <div class="list clearfix">
    <?php
    //将地域数组的地域设置为all
    $area_params['area'] = 'all';
    ?>
    <a <?php if($area_sort=='all') echo $selected; ?> href="<?php echo esc_url( add_query_arg( $area_params, $base ) ); ?>">全境</a>
    <?php
    //将地域数组的地域设置为center
    $area_params['area'] = 'center';
    ?>
    <a <?php if($area_sort=='center') echo $selected; ?> href="<?php echo esc_url( add_query_arg( $area_params, $base ) ); ?>">城区周边</a>
    <?php $area_params['area'] = 'west'; ?>
    <a <?php if($area_sort=='west') echo $selected; ?> href="<?php echo esc_url( add_query_arg( $area_params, $base ) ); ?>">西片</a>
    <?php $area_params['area'] = 'south'; ?>
    <a <?php if($area_sort=='south') echo $selected; ?> href="<?php echo esc_url( add_query_arg( $area_params, $base ) ); ?>">南片</a>
    <?php $area_params['area'] = 'east'; ?>
    <a <?php if($area_sort=='east') echo $selected; ?> href="<?php echo esc_url( add_query_arg( $area_params, $base) ); ?>">东片</a>
  </div>
</div>
<div class="group clearfix">
  <div class="group_title">季节:</div>
  <div class="list clearfix">
    <?php $season_params['season'] = 'all';?>
    <a <?php if($season_sort=='all') echo $selected; ?> href="<?php echo esc_url( add_query_arg( $season_params, $base ) ); ?>">全部</a>
    <?php $season_params['season'] = 'spring';?>
    <a <?php if($season_sort=='spring') echo $selected; ?> href="<?php echo esc_url( add_query_arg( $season_params, $base ) ); ?>">春季</a>
    <?php $season_params['season'] = 'summer';?>
    <a <?php if($season_sort=='summer') echo $selected; ?> href="<?php echo esc_url( add_query_arg( $season_params, $base ) ); ?>">夏季</a>
    <?php $season_params['season'] = 'autumn';?>
    <a <?php if($season_sort=='autumn') echo $selected; ?> href="<?php echo esc_url( add_query_arg( $season_params, $base ) ); ?>">秋季</a>
    <?php $season_params['season'] = 'winter';?>
    <a <?php if($season_sort=='winter') echo $selected; ?> href="<?php echo esc_url( add_query_arg( $season_params, $base ) ); ?>">冬季</a>
  </div>
</div>
瑞课支付