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

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

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

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

模板制作步骤

第一步:复制分类目录模板(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 bloginfo('url'); ?> 应替换为:<?php echo esc_url( home_url() ) ?>

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

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

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

同过此代码,我开发了这款有趣的wordpress插件

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

N-Search - 添加搜索区块的wordpress插件

对于哪些嫌自己的搜索栏不够明显的主题很有用,可以在您需要的地方添加上图所示的一个搜索界面

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

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

象牙搜索 - WordPress搜索插件

使用象牙搜索,您可以创建无限数量的搜索表单,并分别配置每个搜索表单以自定义WordPress搜索并在网站内容上执行不同类型的搜索
最后更新: 2020-05-6
WP开发

WordPress开发 - Options Framework轻量级后台框架使用设置举例

2018-11-10 17:16:24

WP开发

分类存档页面-wordpress主题开发

2018-11-23 17:09:01

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
若您的权利被侵害,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索