WordpressCMS主題開發10-新增搜尋框功能search.php

這節課，我們來研究如何新增搜尋框。

在cms主題中，因為它的內容非常多，很多使用者需要用到搜尋的功能，那麼我們在之前的課程中，也預留了位置。

在header.php中，用來製作搜尋框。

首先開啟header.php，我們先把它原來的js程式碼刪除掉：

<pre class="pure-highlightjs" style="margin: 0px; padding: 0px; font-weight: 400; font-family: inherit; background-color: transparent; border: none; color: rgb(69, 69, 69); font-size: 18px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><script type="text/javascript"> function searchFormSubmit() { if(document.getElementById('searchKey').value==''){ alert('請輸入搜尋內容'); return false; } document.getElementById('searchForm').submit(); } </script></pre>

然後，在header.php中新增搜尋程式碼：

  <div id="page_search_left">
    <div class="sform fl">
    <form id="search" action="<?php bloginfo('url'); ?>/" target="_blank">
    <input id="s" name="s"  maxlength="30" style="vertical-align: middle; margin-bottom:12px;" type="text" value="<?php the_search_query(); ?>"/>
    <input type="image" width="60" height="22" class="searchaction" onClick="if(document.forms['search'].searchinput.value=='- Search -')document.forms['search'].searchinput.value='';" alt="Search" src="<?php bloginfo('template_directory'); ?>/img/sbtn.gif" border="0" />
    </form>
    </div>
  <div style="float:right">

來到網站前臺：

接下來，我們需要在主題資料夾下，建立一個叫做search.php的檔案。它用於顯示搜尋的結果。

搜尋的結果頁面可以和分類頁面是一樣的。所以我們複製下這個分類頁面catagory.php，然後把複製過來的檔案重新命名為search.php。

開啟它，我們需要修改導航標題，導航標題是指這裡：

You must be logged in to view the hidden contents.

所以需要把

<?php wp_title('');?>

替換為：

    // <?php wp_title('');?><?php  $allsearch = &new WP_Query("s=$s&showposts=-1"); $key = wp_specialchars($s, 1); $count = $allsearch->post_count; _e(''); wp_reset_query(); ?>

接著，來到首頁進行搜尋結果測試：

這裡跳轉到了一個錯誤的地址：

http://www.xuhss.com/jeecms/ArtiSearch.do

所以，我們還需要把它原來的表格form去掉：

<pre class="pure-highlightjs" style="margin: 0px; padding: 0px; font-weight: 400; font-family: inherit; background-color: transparent; border: none; color: rgb(69, 69, 69); font-size: 18px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><form target="_blank" action="http://www.xuhss.com/jeecms/ArtiSearch.do" id="searchForm"></pre>

<pre class="pure-highlightjs" style="margin: 0px; padding: 0px; font-weight: 400; font-family: inherit; background-color: transparent; border: none; color: rgb(69, 69, 69); font-size: 18px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"></form></pre>

來到網站前臺，搜尋“2”，但是，還是所有的文章都搜尋出來了，我們回到search.php，把search頁面中間上面的程式碼全部刪除：

<?php if ($posts_perpage) { ?>
<?php $postsperpage = $posts_perpage; ?>
<?php } else { ?>
<?php $postsperpage = 3; ?>
<?php } ?>
<?php
$categoryID=$cat;
$wp_query = new WP_Query('cat=' . $categoryID. 'orderby=date&order=desc&posts_per_page='.$postsperpage.'&paged='.$paged); ?>

來到網站前臺，我們點選搜尋，這樣它就只出現2條含有關鍵詞的搜尋結果。

這樣我們就完成了搜尋頁面的新增。

基本上所有cms主題的功能都已經新增了。包括幻燈片，tab標籤，搜尋的功能。

這個系列的主題開發的教程就講解到這裡。