html如何做出多重筛选效果,用自定义字段做文章多重筛选

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

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

2017-06-26更新。

如果你不会代码，照着教程也会出错，或者你懒得写，你可以试试我们的付费拓展。

敬告：代码很长，手打难免出错，若是出现错误，请谅解。

前言

1. 本范例实现的筛选页面可用于分类页面、单页面。

2. 本筛选范例是通过文章的自定义字段来实现的。

3. 筛选页面的url，以分类页面为例：http://www.ashuwp.com/category1/?genre=love&year=y2017&area=china。通过在url后面加参数实现。

一、配置筛选数据。

用于筛选的数据要先确定好，所以阿树先把要筛选的数据写入一个二维数组中，同时由于这个数组在前台后台都会使用到，所以用一个函数来返回，即执行函数ashuwp_get_sift_array()就可以获取到这个二维数组。

本范例以一个电影站的筛选为例，配置了3个筛选项(可自行增减)，分别是“类型”、“年代”、“地区”。

提示：下面php代码应该添加到主题的functions.php文件。

//准备一个筛选数据的数组。

//需要多次用到，用一个函数来获取。

function ashuwp_get_sift_array(){

$sift_array = array(

//类型

'genre'=> array(

'love'=>'爱情片',

'literary'=>'文艺片',

'action'=>'动作片',

'war'=>'战争片',

'other'=>'其他'

),

//数组key避免用纯数字，以免筛选文章时不精确

//将key缓存a\b\c也可

'year'=> array(

'y2017'=>'2017',

'y2016'=>'2016',

'y2015'=>'2015',

'old'=>'更早',

),

'area'=> array(

'china'=>'国产',

'usa'=>'美国',

'europe'=>'欧洲',

'other'=>'其他'

)

);

return $sift_array;

}

二、添加自定义字段

在后台建立自定义字段，在添加文章时选择对应的数据。

方法一：使用Ashuwp Framework框架的话，参考配置数据以及效果图如下

提示：下面代码为使用Ashuwp Framework框架的配置代码。

//文章筛选面板

$sift_boxinfo = array(

'title' => '筛选信息',

'id'=>'sift_box',

'page'=>array('post'), //文章类型

'context'=>'normal',

'priority'=>'high',

'callback'=>''

);

$sift_array = ashuwp_get_sift_array(); //获取筛选数组

$sift_meta[] = array(

'name' => '类型',

'id'   => 'genre', //id

'desc' => '',

'std'  => '',

'subtype'=> $sift_array['genre'], //地区选项

'type' => 'checkbox',

);

$sift_meta[] = array(

'name' => '年代',

'id'   => 'year', //id

'desc' => '',

'std'  => '',

'subtype'=> $sift_array['year'], //地区选项

'type' => 'checkbox',

);

$sift_meta[] = array(

'name' => '国家或地区',

'id'   => 'area', //id

'desc' => '',

'std'  => '',

'subtype'=> $sift_array['area'], //地区选项

'type' => 'checkbox',

);

$sift_box = new ashuwp_postmeta_feild($sift_meta, $sift_boxinfo);

方法二：使用wordpress自带的自定义栏目，添加数据方法如下图

三、文章查询

通过从url中获取筛选的参数，查询对应的文章数据。

1. 添加用于查询的参数，这里指的是使我们的参数可以用get_query_var函数获取，当然如果使用$_GET变量来获取的话，可以省略这一段内容。

提示：下面php代码应该添加到主题的functions.php文件。

自己添加的query vars应尽量避免wp默认已经存在的，比如本教程中的year实际上wp默认已经存在，请实际使用时避免。那些已经存在呢？请查看文档：https://codex.wordpress.org/WordPress_Query_Vars。

//筛选参数

//筛选页面的url类似为 http://www.ashuwp.com/xxx?genre=love&year=2016&area=china

function ashuwp_add_query_vars($public_query_vars) {

$public_query_vars[] = 'genre';

$public_query_vars[] = 'year';

$public_query_vars[] = 'area';

return $public_query_vars;

}

add_action('query_vars', 'ashuwp_add_query_vars');

2. 通过pre_get_posts钩子来控制文章查询

//文章筛选代码

//通过pre_get_posts钩子筛选

add_action('pre_get_posts','ashuwp_sift_posts_per_page');

function ashuwp_sift_posts_per_page($query){

//is_category()即为分类页面有效，自行更换。

//$query->is_main_query()使得仅对默认的页面主查询有效

//!is_admin()避免影响后台文章列表

if(is_category() && $query->is_main_query() && !is_admin()){

$sift_array = ashuwp_get_sift_array(); //获取筛选数组

//从筛选数组中获取筛选的有效值值

/*例如类型的值

* $genre_keys = array( 'love', 'literary', 'action', 'war', 'other');

*/

$genre_keys = array_keys( $sift_array['genre'] ); //类型

$year_keys = array_keys( $sift_array['year'] ); //年代

$area_keys = array_keys( $sift_array['area'] ); //地区

$relation = 0; //用于计数筛选项目数

//从url中获取要筛选的参数,放入数组中

$sift_vars = array();

$sift_vars['genre'] = get_query_var('genre'); //从url获取类型

$sift_vars['year'] = get_query_var('year');

$sift_vars['area'] = get_query_var('area');

$meta_query = array(

'relation' => 'OR',

);

//判断类型是否合法,即是否存在于我们的配置数组中

//将筛选参数加入带

if( in_array( $sift_vars['genre'], $genre_keys ) ){

$meta_query[] = array(

'key'=>'genre',

'value'=> $sift_vars['genre'],

'compare'=>'LIKE', //使用LIKE匹配可适应多选

);

$relation++;

}

//判断年代是否合法

if( in_array( $sift_vars['year'], $year_keys ) ){

$meta_query[] = array(

'key'=>'year',

'value'=> $sift_vars['year'],

'compare'=>'LIKE',

);

$relation++;

}

//判断地区是否合法

if( in_array( $sift_vars['area'], $area_keys ) ){

$meta_query[] = array(

'key'=>'area',

'value'=> $sift_vars['area'],

'compare'=>'LIKE',

);

$relation++;

}

if($relation){

//若大于两个筛选

if($relation>=2){

$meta_query['relation'] = 'AND'; //多项筛选同时满足

}

$query->set('meta_query',$meta_query);

}

}

}

三、前台代码

范例代码以在分类页面中为例。

提示：下面代码为部分范例代码，应该将下列代码添加到主题分类模板需要显示筛选的位置。

//前台页面以在分类模板为例

//在分类模板中，使用get_queried_object获取当前分类

$currentterm = get_queried_object();

$base_url = get_term_link($currentterm,'category'); //获取当前分类的url

$sift_array = ashuwp_get_sift_array(); //获取筛选数组

//拆分数组，将all加上

/*范例，最终

* $genre_array = array( 'all'=>'全部', 'love'=>'爱情片', 'literary'=>'文艺片', 'action'=>'动作片', 'war'=>'战争片', 'other'=>'其他' );

* $genere_keys = array( 'all', 'love', 'literary', 'action', 'war', 'other');

*/

$genre_array['all'] = '全部'; //先建立数组，让all在最前面

$genre_array = array_merge( $genre_array, $sift_array['genre']); //用array_merge合并数组

$genre_keys = array_keys($genre_array);

$year_array['all'] = '全部';

$year_array = array_merge( $year_array, $sift_array['year']);

$year_keys = array_keys($year_array);

$area_array['all'] = '全部';

$area_array = array_merge( $area_array, $sift_array['area']);

$area_keys = array_keys($area_array);

//从url中获取要筛选的参数，放入数组中，默认为all

$sift_vars = array();

$sift_vars['genre'] = get_query_var('genre', 'all'); //从url获取类型

$sift_vars['year'] = get_query_var('year', 'all');

$sift_vars['area'] = get_query_var('area', 'all');

//为add_query_arg函数的参数做准备

$genre_params = array();

$year_params = array();

$area_params = array();

//判断类型是否合法，给另外N项加上

if( in_array( $sift_vars['genre'], $genre_keys ) ){

$year_params['genre'] = $sift_vars['genre'];

$area_params['genre'] = $sift_vars['genre'];

}

//判断年代是否合法，给另外N项加上

if( in_array( $sift_vars['year'], $year_keys ) ){

$genre_params['year'] = $sift_vars['year'];

$area_params['year'] = $sift_vars['year'];

}

//判断地区是否合法，给另外N项加上

if( in_array( $sift_vars['area'], $area_keys ) ){

$genre_params['area'] = $sift_vars['area'];

$year_params['area'] = $sift_vars['area'];

}

$selected = 'class="selected"';

//输出筛选项

//html标签仅做参考

?>

• 类型：

  foreach( $genre_array as  $key=>$name ){

  $genre_params['genre'] = $key;

  ?>

   href="<?php  echo esc_url( add_query_arg( $genre_params, $base_url ) ); ?>"><?php  echo $name; ?>

  }

  ?>

• 年代：

  foreach( $year_array as  $key=>$name ){

  $year_params['year'] = $key;

  ?>

   href="<?php  echo esc_url( add_query_arg( $year_params, $base_url ) ); ?>"><?php  echo $name; ?>

  }

  ?>

• 地区：

  foreach( $area_array as  $key=>$name ){

  $area_params['area'] = $key;

  ?>

   href="<?php  echo esc_url( add_query_arg( $area_params, $base_url ) ); ?>"><?php  echo $name; ?>

  }

  ?>

总结

end.