WordPress如何仿制网站搜索功能
本课程视频是VIP会员课程,学习请进入VIP学习区。
WordPress如何仿制网站搜索功能步骤:
1、仿制网站搜索功能;
2、制作搜索功能
2-1、在搜索框位置放这个代码:
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
2-2、在主题文件夹里新建一个searchform.php,放入以下代码:
<div id="sousu">
<form method="get" id="searchform" action="<?php bloginfo('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>
</div>
2-3、在CSS中放入控制搜索框样式的代码并调整
#sousu{display:inline-block;margin-top:58px;}
#sousu input[type="text"]{width:177px;height:25px;border:1px solid #3598db;box-sizing:border-box;vertical-align:top;font-size:12px;}
#sousu input[type="submit"]{width:40px;height:25px;color:#fff;background:#3598db;border:1px solid #3598db;box-sizing:border-box;font-size:14px}
2-4、直接复制分类目录页面制作search.php,才能实现搜索功能。直接复制分类目录页面
2-5、调试搜索功能和界面
3、控制显示的分类和不显示的分类:排除:exclude="" 包括:include=""