零基础建站培训教程介绍

WordPress专题页面仿站步骤

page页面和搜索功能制作

1、制作page页面,复制single.php

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注