Npcink Blog
切换菜单

搜索功能(search.php)模板制作 - Wordpress 模板开发

搜索功能(search.php)模板制作

最后更新于
本页目录1 节

搜索功能是任何网站都必须的功能，通过搜索功能，用户可以快速的在我们的网站上找到自己需要的内容。在 WordPress 模板制作教程中，搜索功能也需要制作出来，这就是搜索功能模板(search.php)。

Wordpress模板开发-搜索功能(search.php)模板制作

模板制作步骤

第一步：复制分类目录模板（archive.php），直接重命名为 search.php。用于显示用户的搜索结果内容；

第二步：在主题文件夹里新建一个 searchform.php，放入以下代码，这是一个独立的搜索框的代码。

<form method="get" id="searchform" action="?php echo esc_url( home_url() ) ?>">
<input class="searchInput" type="text" value="输入关键字" name="s" id="s"/>
<input type="submit" value="搜 索" onClick="if(document.forms['search'].searchinput.value=='- Search -')document.forms['search'].searchinput.value='';" alt="Search" />
</form>
<script type="text/javascript">
$(document).ready(function(){
// 当鼠标聚焦在搜索框
$('#s').focus(
function() {
if($(this).val() == '输入关键字') {
$(this).val('').css({color:"#454545"});
}
}
// 当鼠标在搜索框失去焦点
).blur(
function(){
if($(this).val() == '') {
$(this).val('输入关键字').css({color:"#333333"});
}
}
);
});
</script>

第三步：在需要显示搜索框的位置，使用以下的代码去调用这个搜索框。

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

第四步：网站搜索框可以被任何其它模板调用，用户通过搜索框搜索某个词时，搜索结果就会通过 search.php 模板展示出来。

同过此代码，我开发了这款有趣的 WordPress 插件：

如果您需要更加强大的搜索功能，可以参考这款插件：