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

来到网站前台：

wordpress search.php - WordpressCMS主题开发10-添加搜索框功能search.php

接下来，我们需要在主题文件夹下，创建一个叫做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标签，搜索的功能。

这个系列的主题开发的教程就讲解到这里。