首页 > 主题开发 > cms主题开发 > WordpressCMS主题开发10-添加搜索框功能search.php
2018
06-20

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

这节课,我们来研究如何添加搜索框。

在cms主题中,因为它的内容非常多,很多用户需要用到搜索的功能,那么我们在之前的课程中,也预留了位置。

在header.php中,用来制作搜索框。

首先打开header.php,我们先把它原来的js代码删除掉:

<script type="text/javascript">
function searchFormSubmit() {
	if(document.getElementById('searchKey').value==''){
		alert('请输入搜索内容');
		return false;
	}
	document.getElementById('searchForm').submit();	
}
</script>

然后,在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。

打开它,我们需要修改导航标题,导航标题是指这里:

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

所以需要把

<?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去掉:

<form target="_blank" action="http://www.xuhss.com/jeecms/ArtiSearch.do" id="searchForm">
</form>

来到网站前台,搜索“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标签,搜索的功能。

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

 

 

 

最后编辑:
作者:MrBang
WordPress迷

留下一个回复