在前面的建站教程中，我們講了如何制作Wordpress搜索功能，可以實(shí)現(xiàn)單一內(nèi)容的搜索。但在實(shí)際網(wǎng)站建設(shè)過(guò)程中，往往需要多重篩選、多條件搜索功能。如下圖所示：

這就是一種多重篩選、多條件搜索功能，需要同時(shí)滿足三個(gè)條件，才會(huì)顯示出內(nèi)容。如果使用WordPress制作出這樣的多重篩選、多條件搜索功能呢？下面跟著學(xué)做網(wǎng)站論壇一起來(lái)制作這個(gè)功能吧！

方法/步驟

1. 使用Dreamweaver cs6軟件，新建一個(gè)HTML網(wǎng)頁(yè)，保存為searchform.php，然后，將以下的代碼放到searchform.php里并保存到模板文件夾；

   
   <form method="get" id="searchform" action="<?php bloginfo('home'); ?>">
   
   
   
   <div style=""><input name="username" type="text" placeholder="姓名"/></div>
   
   <div style=""><input name="s" id="s" type="text" placeholder="證件號(hào)碼"/></div>
   
   <div style=""><input name="bianhao" type="text" placeholder="證書(shū)編號(hào)"/></div>
   
   
   
   <div><input id="searchsubmit" type="submit" value="查詢" class="but" /></div>
   
   </form>
   
   

2. 復(fù)制Wordpress模板里的分類目錄模板代碼，另存為search.php。放到自己的模板文件夾里。
3. 將search.php模板代碼里的循環(huán)代碼全部刪除，替換為以下的條件搜索循環(huán)代碼；

   
   <?php
   
   $haoma=$_GET['s'];//證件號(hào)碼
   
   $username = $_GET['username']; //姓名
   
   $bianhao = $_GET['bianhao']; //證書(shū)編號(hào)
   
   $mood1 = get_post_meta($post->ID, 'username', true);
   
   $mood2 = get_post_meta($post->ID,"bianhao",true);
   
   
   
   /*
   
   echo $username . "<br/>";
   
   echo $bianhao . "<br/>";
   
   echo $mood1 . "<br/>";
   
   echo $mood2 . "<br/>";
   
   */
   
   
   
   if( $username==$mood1 && $bianhao==$mood2) { ?>
   
   
   
   ?<div class="zhenshu">
   
   
   
   ?<table width="100%">
   
   ? <tr>
   
   ?   <td width="13%">姓名：</td>
   
   ?   <td width="87%"><?php echo get_post_meta($post->ID, 'username', true);?></td>
   
   ? </tr>
   
   ? <tr>
   
   ?   <td>證件號(hào)碼：</td>
   
   ?   <td><?php the_title(); ?></td>
   
   ? </tr>
   
   ? <tr>
   
   ?   <td>證書(shū)編號(hào)：</td>
   
   ?   <td><?php echo get_post_meta($post->ID,"bianhao",true);?></td>
   
   ? </tr>
   
   ? <tr>
   
   ?   <td colspan="2" class="tplr"><img src="<?php echo get_first_image(); ?>" alt="<?php the_title(); ?>縮略圖" /></td>   
   
   ? </tr>
   
   
   
   </table> 
   
   ?</div> 
   
   <?php 
   
   } else { 
   
   echo '請(qǐng)?zhí)顚?xiě)正確的信息后，再查詢！';
   
   }
   
   ?>
   
   

4. 將以下的CSS樣式代碼，粘貼到style.css中，用于控制搜索結(jié)果的樣式；

   
   .zhenshu table {
   
   ?           margin: 0 auto;
   
   ?           width: 100%;
   
   ?           border:1px solid #999;
   
   ?           border-collapse: collapse;
   
   ?       }
   
   .zhenshu th,.zhenshu td {
   
   ?          padding:15px;
   
   ?           border: 1px solid #999;
   
   ?       }
   
   .tplr{text-align:center;}
   
   

5. 在網(wǎng)站后臺(tái)發(fā)文章里，創(chuàng)建自定義欄目。（如果沒(méi)有，可以參考：wordpress自定義欄目設(shè)置方法）
6. 文章底部設(shè)置二個(gè)自定義欄目項(xiàng)，名稱分稱是【username】和【bianhao】，并填寫(xiě)相應(yīng)的值。如下圖：
   
7. 文章標(biāo)題填寫(xiě)【證件號(hào)碼】，內(nèi)容只需要上傳證書(shū)圖片即可。
8. 在需要顯示搜索框的位置，使用以下的代碼進(jìn)行調(diào)用：

   
   <?php include( TEMPLATEPATH . '/searchform.php' ); ?>
   
   

9. 這樣我們自己建網(wǎng)站時(shí)，就可以實(shí)現(xiàn)多重篩選、多條件搜索功能了。

標(biāo)簽： 代碼 建網(wǎng)站 建站 建站教程 搜索 網(wǎng)站建設(shè)

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