wordpress 网站多条件筛选功能制作（纯代码）
我们经常在网上看到一些网站，拥有多重筛选功能。例如一些房产网站上，就会经常使用多条件筛选功能，方便用户进行筛选房源。效果如下图：
自己做网站时，如何制作这样的多条件筛选功能呢？下面学做网站论坛就来介绍一下这种多条件筛选功能制作方法。
方法/步骤
- 创建自定义分类，增加多个筛选条件。复制下面的代码，你可以直接复制粘贴到functions.php文件中。
//给post创建四个自定义分类法
add_action (\ 'init\', \'ashu_post_type\');
function ashu_post_type() {
register_taxonomy(
\'province\',
\'post\',
array(
\'label\' => \'省\',
\'rewrite\' => array( \'slug\' => \'province\' ),
\'hierarchical\' => true
)
);
register_taxonomy(
\'city\',
\'post\',
array(
\'label\' => \'市\',
\'rewrite\' => array( \'slug\' => \'city\' ),
\'hierarchical\' => true
)
);
register_taxonomy(
\'genre\',
\'post\',
array(
\'label\' => \'类型\',
\'rewrite\' => array( \'slug\' => \'genre\' ),
\'hierarchical\' => true
)
);
register_taxonomy(
\'price\',
\'post\',
array(
\'label\' => \'价格\',
\'rewrite\' => array( \'slug\' => \'price\' ),
\'hierarchical\' => true
)
);
} - 添加完以上代码后，应该在后台左侧菜单会多出四个自定义分类法：
- 在自己网站的主题文件夹下面建立一个page-sift.php文件，这个文件将作为筛选页面的模板文件。
- 添加重写规则，使得wordpress 网站多条件筛选功能页面也可以伪静态。将下列代码存放到 include/rewrite.php文件中：
//获取筛选页面的Url
function ashuwp_sift_link ( ) {
return home_url ( ) . "/sift" ;
}
/*
*添加query变量
*/
function ashuwp_query_vars ( $public_query_vars ) {
$public_query_vars [ ] = 'ashuwp_page' ;
$public_query_vars [ ] = 'condition' ;
return $public_query_vars ;
}
/*
*sift页面的重写规则,三种url：
*ashuwp.com/sift ashuwp.com/sift/0_0_0_0/ ashuwp.com/sift/0_0_0_0/page/2
*/
function ashuwp_rewrite_rules ( $wp_rewrite ) {
$new_rules = array (
'sift/?$' => 'index.php?ashuwp_page=sift' ,
'sift/([^/]+)/?$' => 'index.php?ashuwp_page=sift&condition=' . $wp_rewrite -> preg_index ( 1 ) ,
'sift/([^/]+)/page/?([0-9]{1,})/?$' => 'index.php?ashuwp_page=sift&condition=' . $wp_rewrite -> preg_index ( 1 ) . '&paged=' . $wp_rewrite -> preg_index ( 2 )
) ;
$wp_rewrite -> rules = $new_rules + $wp_rewrite -> rules ;
}
/*
*载入模板规则
*用page-sift.php作为筛选页面的模板文件
*/
function ashuwp_template_redirect ( ) {
global $wp , $wp_query , $wp_rewrite ;
if ( ! isset ( $wp_query -> query_vars [ 'ashuwp_page' ] ) )
return ;
$reditect_page = $wp_query -> query_vars [ 'ashuwp_page' ] ;
if ( $reditect_page == "sift" ) {
include (get_template_directory ( ) . '/page-sift.php' ) ;
die ( ) ;
}
}
/*
*更新重写规则
*激活主题的时候
*/
function ashuwp_flush_rewrite_rules ( ) {
global $pagenow , $wp_rewrite ;
if ( 'themes.php' == $pagenow && isset ( $_GET [ 'activated' ] ) )
$wp_rewrite -> flush_rules ( ) ;
}
add_action ( 'load-themes.php' , 'ashuwp_flush_rewrite_rules' ) ;
add_action ( 'generate_rewrite_rules' , 'ashuwp_rewrite_rules' ) ;
add_action ( 'query_vars' , 'ashuwp_query_vars' ) ;
add_action ( "template_redirect" , 'ashuwp_template_redirect' ) ; - 将下面代码存放在步骤三新建的page-sift.php文件中；
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>筛选页面教程 </title>
<link rel='stylesheet' id='ashuwp-style-css' href='' type='text/css' media='all' />
</head>
<body>
<div id="site-page">
<div id="header">
<h1 id="logo">
<a href="http://www.treework.cn">treework.cn </a>
</h1>
<h2 class="align-cenetr">阿树工作室--筛选页面教程 </h2>
</div>
<div class="container content">
//1.1 获取所有province分类,将id放入 $province_id数组
$args = array(
'taxonomy'=>'province',
'orderby'=>'id',
'hide_empty'=>0
);
$province_ob = get_categories( $args );
$province_id = array();
foreach($province_ob as $province){
$province_id[] = $province->term_id;
}
//1.2 获取所有city分类,将id放入 $city_id数组
$args = array(
'taxonomy'=>'city',
'orderby'=>'id',
'hide_empty'=>0
);
$city_ob = get_categories( $args );
$city_id = array();
foreach($city_ob as $city){
$city_id[] = $city->term_id;
}
//1.3 获取所有genre分类,将id放入 $genre_id数组
$args = array(
'taxonomy'=>'genre',
'orderby'=>'id',
'hide_empty'=>0
);
$genre_ob = get_categories( $args );
$genre_id = array();
foreach($genre_ob as $genre){
$genre_id[] = $genre->term_id;
}
//1.4 获取所有price分类,将id放入 $price_id数组
$args = array(
'taxonomy'=>'price',
'orderby'=>'id',
'hide_empty'=>0
);
$price_ob = get_categories( $args );
$price_id = array();
foreach($price_ob as $price){
$price_id[] = $price->term_id;
}
//2 参数处理
//2.1 页码
$wp_query->query_vars['paged'] > 1 ? $pagenum = $wp_query->query_vars['paged'] : $pagenum = 1;
/*2.2 从url中获取参数 即url中 0_0_0_0
*将获取到的四个参数放入 $cons 数组中
*/
global $wp_query;
if( isset($wp_query->query_vars['condition']) && $wp_query->query_vars['condition']!='' ){
$condition = $wp_query->query_vars['condition'];
$conditions = explode('_',$condition);
$cons = array();
if(isset($conditions[0])){
$conditions[0] = (int)$conditions[0];
}else{
$conditions[0]=0;
}
if(isset($conditions[1])){
$conditions[1] = (int)$conditions[1];
}else{
$conditions[1]=0;
}
if(isset($conditions[2])){
$conditions[2] = (int)$conditions[2];
}else{
$conditions[2]=0;
}
if(isset($conditions[3])){
$conditions[3] = (int)$conditions[3];
}else{
$conditions[3]=0;
}
//从url中获取到的各分类法分类ID是否真实存在
if( in_array($conditions[0],$province_id) ){
$cons[0]=$conditions[0];
}else{
$cons[0]=0;
}
if( in_array($conditions[1],$city_id) ){
$cons[1]=$conditions[1];
}else{
$cons[1]=0;
}
if( in_array($conditions[2],$genre_id) ){
$cons[2]=$conditions[2];
}else{
$cons[2]=0;
}
if( in_array($conditions[3],$price_id) ){
$cons[3]=$conditions[3];
}else{
$cons[3]=0;
}
$sift_link = ashuwp_sift_link().'/'.$cons[0].'_'.$cons[1].'_'.$cons[2].'_'.$cons[3];
}else{
$cons = array(0,0,0,0);
$sift_link = ashuwp_sift_link().'/0_0_0_0';
}
?>
<div class="sift_query">
<div class="sift_cons">
<div class="sift_li">
<span>省： </span>
<a ($cons[0]==0){ echo 'class="current"'; } ?> href=" (); ?>/0_ [1];?>_ [2];?>_ [3];?>/">不限 </a>
foreach( $province_ob as $province ){
?>
<a href="/ term_id; ?>_ [1]; ?>_ [2]; ?>_ [3];?>" ($cons[0] == $province->term_id){ echo 'class="current"'; } ?>> name; ?> </a>
} ?>
</div>
<div class="sift_li"><span>市： </span><a ($cons[1] == 0){ echo 'class="current"'; } ?> href=" (); ?>/ [0];?>_0_ [2]; ?>_ [3];?>/">不限 </a>
foreach( $city_ob as $city ){ ?>
<a href="/ [0]; ?>_ term_id; ?>_ [2]; ?>_ [3];?>" ($cons[1] == $city->term_id){ echo 'class="current"'; } ?>> name; ?> </a>
} ?>
</div>
<div class="sift_li"><span>类型： </span><a ($cons[2] == 0){ echo 'class="current"'; } ?> href=" (); ?>/ [0];?>_ [1]; ?>_0_ [3];?>/">不限 </a>
foreach( $genre_ob as $genre ){ ?>
<a href="/ [0]; ?>_ [1]; ?>_ term_id; ?>_ [3];?>" ($cons[2] == $genre->term_id){ echo 'class="current"'; } ?>> name; ?> </a>
} ?>
</div>
<div class="sift_li"><span>价格： </span><a ($cons[3] == 0){ echo 'class="current"'; } ?> href=" (); ?>/ [0];?>_ [1]; ?>_ [2]; ?>_0/">不限 </a>
foreach( $price_ob as $price ){ ?>
<a href="/ [0]; ?>_ [1]; ?>_ [2]; ?>_ term_id; ?>" ($cons[3] == $price->term_id){ echo 'class="current"'; } ?>> name; ?> </a>
} ?>
</div>
</div>
//代码来源：学做网站论坛https://www.xuewangzhan.com/ 将获取到的参数组合为query_posts的参数
$tax_query = array(
'relation'=> 'AND',
);
//province
if( $cons[0] != 0 ){
$tax_query[] = array(
'taxonomy'=>'province',
'field'=>'id',
'terms'=>$cons[0]
);
}
//city
if( $cons[1] != 0 ){
$tax_query[] = array(
'taxonomy'=>'city',
'field'=>'id',
'terms'=>$cons[1]
);
}
//genre
if( $cons[2] != 0 ){
$tax_query[] = array(
'taxonomy'=>'genre',
'field'=>'id',
'terms'=>$cons[2]
);
}
//price
if( $cons[3] != 0 ){
$tax_query[] = array(
'taxonomy'=>'price',
'field'=>'id',
'terms'=>$cons[3]
);
}
$args = array(
'paged' => $pagenum,
'tax_query'=> $tax_query
);
global $ashuwp_query;
$ashuwp_query = new WP_Query( $args );
?>
<div class="query_count">共找到 found_posts;?>个符合条件的内容 </div>
</div>
if($ashuwp_query->have_posts()) : ?>
<div id="post_list">
($ashuwp_query->have_posts()) : $ashuwp_query->the_post(); ?>
<div class="post">
<a href=""> ();?></a>
</div>
</div>
<div id="ashuwp_page">
$pagination = paginate_links( array(
'base' => $links.'/page/%#%',
'format' => '/page/%#%',
'prev_text' => '上一页',
'next_text' => '下一页',
'total' => $ashuwp_query->max_num_pages,
'current' => $pagenum
) );
if ( $pagination ) {
echo $pagination;
}
?>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<p>网站底部 </p>
</div>
</div>
</body>
</html> - 这样，wordpress 网站多条件筛选功能就制作好了。
示例下载
下载的文件为一个极简单的主题，效果预览步骤：
1.下面提供了拥有这种功能的简单的WORDPRESS 主题，下载主题并安装，并设置好伪静态
2.添加几篇文章到自定义分类法中
3.直接访问筛选页面的url，比如：URL/sift 或者URL/sift/0_1_1_0等等。
主题下载：https://pan.baidu.com/s/1a8_XxNy7B3HUA1ji84g_dA
www.ysidc.top 云速博客,IT技术,idc资讯,基础运维,原创教程,web环境部署,WordPress教程,技术分享,LAMP,LNMP,wdcp,mysql,mssql,centos,discuz教程