在網站製作過程中,在網站中需要新增搜尋功能,如何在自己的網站上新增按分類來搜尋功能呢?效果圖如下:

WordPress 按分類搜尋目前很少人在用,99% 的 WordPress 都是用普通的搜尋方式,程式碼如下:

<form action="<?php bloginfo('url』); ?>" method="get" id="search">
<input name="s" type="text" />
<input type="submit" value="" />
</form>

個人還是比較喜歡高階的搜尋方法,按分類進行搜尋,程式碼如下:

<form id="searchform" name="searchform" method="get" action="<?php bloginfo('home'); ?>/" >
<ul>
<li>
<p>
<?php $select = wp_dropdown_categories('class=search_select&show_option_all=全站搜尋&orderby=name&hierarchical=0&selected=-1&depth=1');?>
</p>
</li>
<li>
<input type="text" name="s" id="s" maxlength="34" value=""/>
</li>
<li>
<input type="submit" value="搜 索"  />
</li>
</ul>
</form>

然後再放一下 CSS 控制樣式

.search_select{height:35px;line-height:35px;width:180px}
.sck{height:33px;width:528px;border:1px solid #999;padding:0 10px;background:#FFF;font-size:16px;}
.sckal{height:34px;width:100px;border:1px solid #999;line-height:34px;text-align:center; background-color:#36F;color:#FFF;font-size:15px;font-weight:bold}

WordPress 還有另外一種方法實現高階搜尋,選項框選擇的高階搜尋,這個需要 WordPress 設計者手動填寫分類的 ID,這種搜尋的原始碼如下:

<div>
<form id="index_search" name="index_search" method="get" action="<?php bloginfo('home』); ?>/">
<p><input type="text" name="s" id="s" value=""/> <input type="submit" value=" 搜 索 " /></p>
<p>
<label for="s_type5" style="width:50px"><input type="radio" name="cat" id="cat" value="all" checked> 全站</label>
<label for="s_type1" style="width:50px"><input type="radio" name="cat" id="cat" value="4" checked> 主題</label>
<label for="s_type2" style="width:50px"><input type="radio" name="cat" id="cat" value="6"> 外掛</label>
<label for="s_type3" style="width:50px"><input type="radio" name="cat" id="cat" value="3"> 主機</label>
<label for="s_type4" style="width:50px"><input type="radio" name="cat" id="cat" value="10"> 經驗</label>
</p>
</form>
</div>

還有一種高階搜尋功能程式碼:

<form action="<?php bloginfo('home'); ?>" method="get">
<div>
<input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" />
<select style="" name="cat" >
<option value="4" selected="selected"> 寶貝</option>
<option value="2"> 問答</option>
<option value="3"> 品牌</option>
</select>
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>