学做网站培训课程介绍

当前位置:

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

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关教程

  • 漂亮的wordpress淘客模板 图文教程 (112746 次浏览)
    今天再次给大家分享一款自己仿的一个wordpress淘客模板。这个模板是我自己在别人模板的基础上进行二次开发,自己比较喜欢。注意:此模板不支持IE6,
  • 插件介绍在网站中插入幻灯片可以让网站更加绚丽,例如学做网站论坛首页顶部左侧就是一个幻灯片,这种方式是直接借助js文件,然后嵌入到网站主题中的.
  • 仿制这个紧固件网站模板过程中,遇到了很多问题,所以折腾了很久。特别感谢启亚老师和学做网站论坛,让我学会了模板制作。闲放不多说了,切入正题。
  • 作者: 赵志强Email: 2012782616@qq.com详细内容:专门仿制各类行业模板网站,设有专门网站公司。欢迎各位教师和同学指导。网址:www.yuncheng0
  • (特别全)网站收录提交链接及各大搜索引擎站长工具百度网站收录提交http://www.baidu.com/search/url_submit.html百度自动提交百
  • 以图搜图,顾名思义就是上传一张图片,网站搜索并显示与之类似的图片。对于我们草根站长来说,特别实用,怎么利用好它,就需要发挥你的想象力。1、T
  • 纯代码Wordpress前台投稿功能制作方法,很多建网站学员学习了Wordpress教程后,使用Wordpress 程序建了网站。但如果每天都是自己更新文章,感觉会有点
  • 多站点 (Multisite) 功能是 WordPress 3.0  后版本的一个重要更新,整合了 WordPress MU 内核。后台自动升级内核后,无法直接使用该功能。需要通过手