wordpress 網(wǎng)站多條件篩選功能制作（純代碼）

2018-11-02 來源：學(xué)做網(wǎng)站論壇

我們經(jīng)常在網(wǎng)上看到一些網(wǎng)站，擁有多重篩選功能。例如一些房產(chǎn)網(wǎng)站上，就會經(jīng)常使用多條件篩選功能，方便用戶進(jìn)行篩選房源。效果如下圖：

網(wǎng)站多條件篩選功能

自己做網(wǎng)站時，如何制作這樣的多條件篩選功能呢？下面學(xué)做網(wǎng)站論壇就來介紹一下這種多條件篩選功能制作方法。

方法/步驟

創(chuàng)建自定義分類，增加多個篩選條件。復(fù)制下面的代碼，你可以直接復(fù)制粘貼到functions.php文件中。


//給post創(chuàng)建四個自定義分類法

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\' => \'市\(zhòng)',

?     \'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

?   )

? );

}

添加完以上代碼后，應(yīng)該在后臺左側(cè)菜單會多出四個自定義分類法：
在自己網(wǎng)站的主題文件夾下面建立一個page-sift.php文件，這個文件將作為篩選頁面的模板文件。

添加重寫規(guī)則，使得wordpress 網(wǎng)站多條件篩選功能頁面也可以偽靜態(tài)。將下列代碼存放到 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頁面的重寫規(guī)則,三種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;

}

/*

*載入模板規(guī)則

*用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();

? }

}

/*

*更新重寫規(guī)則

*激活主題的時候

*/

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文件中；


<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<title>篩選頁面教程</title>

<link rel='stylesheet' id='ashuwp-style-css'  href='<?php echo get_stylesheet_uri(); ?>' 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">

<?php

//1.1 獲取所有province分類,將id放入 $province_id數(shù)組

$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數(shù)組

$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 獲取所有g(shù)enre分類,將id放入 $genre_id數(shù)組

$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數(shù)組

$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 參數(shù)處理

//2.1 頁碼

$wp_query->query_vars['paged'] > 1 ? $pagenum = $wp_query->query_vars['paged'] : $pagenum = 1;

/*2.2 從url中獲取參數(shù) 即url中 0_0_0_0

*將獲取到的四個參數(shù)放入 $cons 數(shù)組中

*/

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 <?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>

<?php

foreach( $province_ob as $province ){

?>

? <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>

<?php } ?>

</div>

<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>

<?php

foreach( $city_ob as $city ){ ?>

?   <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>

<?php } ?>

</div>

<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>

<?php

foreach( $genre_ob as $genre ){ ?>

?   <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>

<?php } ?>

</div>

<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>

<?php

foreach( $price_ob as $price ){ ?>

?   <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>

<?php } ?>

</div>

</div>

<?php

//代碼來源：學(xué)做網(wǎng)站論壇https://www.xuewangzhan.com/ 將獲取到的參數(shù)組合為query_posts的參數(shù)

$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">共找到<?php echo $ashuwp_query->found_posts;?>個符合條件的內(nèi)容</div>

</div>

<?php

if($ashuwp_query->have_posts()) : ?>

<div id="post_list">

<?php while($ashuwp_query->have_posts()) : $ashuwp_query->the_post(); ?>

<div class="post">

? <a href="<?php the_permalink();?>"><?php the_title();?></a>

</div>

<?php endwhile;?>

</div>

<?php endif; ?>

<div id="ashuwp_page">

<?php

$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><!--site-page-->

<div id="footer">

<div class="container">

<p>網(wǎng)站底部</p>

</div>

</div>

</body>

</html>

這樣，wordpress 網(wǎng)站多條件篩選功能就制作好了。

示例下載

下載的文件為一個極簡單的主題，效果預(yù)覽步驟：

1.下面提供了擁有這種功能的簡單的WORDPRESS 主題，下載主題并安裝，并設(shè)置好偽靜態(tài)

2.添加幾篇文章到自定義分類法中

3.直接訪問篩選頁面的url，比如：URL/sift 或者URL/sift/0_1_1_0等等。

主題下載：https://pan.baidu.com/s/1a8_XxNy7B3HUA1ji84g_dA

標(biāo)簽：代碼

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。

上一篇:wordpress留言評論實現(xiàn)倒序顯示

下一篇:wordpress如何在文章中插入視頻

相關(guān)文章

最新資訊

熱門推薦

為學(xué)習(xí)和知識分享目的，本站文章部分自網(wǎng)絡(luò)，本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：2653426586@qq.com QQ：2653426586

如有其他需求，請聯(lián)系：2653426586@qq.com QQ：2653426586

友情鏈接：網(wǎng)絡(luò)安全運維經(jīng)驗 IT技術(shù)分享運維隨筆錄鮮花東郊到家往約到家

中文字幕在线观看,亚洲а∨天堂久久精品9966,亚洲成a人片在线观看你懂的,亚洲av成人片无码网站,亚洲国产精品无码久久久五月天

wordpress 網(wǎng)站多條件篩選功能制作（純代碼）

方法/步驟

示例下載