学做网站培训课程介绍

当前位置:

wordpress高级搜索,WordPress按分类搜索功能制作

网站制作过程中,在网站中需要添加搜索功能,我们一般会制作一个wordpress搜索功能(search.php)模板,这种搜索功能是直接搜索网上站的内容。例如学做网站论坛的搜索功能(https://www.xuewangzhan.net/search/),如下图。

wordpress搜索功能

但在实际自己建网站过程中,需要制作wordpress实战搜索功能,让用户可以按分类进行搜索,效果图如下:

wordpress实战搜索,WordPress按分类搜索功能制作J0

wordpress实战搜索制作方法

实战搜索之按分类进行搜索制作

第一步:新建一个HTML页面,取名为searchform.php(搜索框模板),将下面的HTML代码粘贴进去。


<form id="searchform" name="searchform" method="get" action="<?php bloginfo('home'); ?>/" >
<ul>
<li>
<p>
<?php $select = wp_dropdown_categories('class=search_select&show_option_all=全站搜索&orderby=name&hierarchical=0&selected=-1&hide_empty=0&depth=1');?>
</p>
</li>
<li>
<input type="text" name="s" id="s" maxlength="34" value=""/>
</li>
<li>
<input type="submit" value="搜 索" />
</li>
</ul>
</form>

第二步,在自己网站的style.css的特别下方粘贴以下的CSS样式代码,来控制搜索框样式。

.search_select{height:35px;line-height:35px;width:180px}
.sck{height:33px;width:528px;border:1px solid #999;padding:0 10px;background:#FFF;font-size:16px;}
.sckal{height:34px;width:100px;border:1px solid #999;line-height:34px;text-align:center; background-color:#36F;color:#FFF;font-size:15px;font-weight:bold}

第三步:在需要显示搜索框的位置,放上以下的PHP调用搜索框代码即可。(更多wordpress调用标签,见wordpress程序开发手册

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

wordpress还有另外一种方法实现实战搜索,选项框选择的实战搜索,如下图:

wordpress实战搜索,WordPress按分类搜索功能制作5L427

这个需要wordpress设计者手动填写分类的ID,这种搜索的源代码如下:(安装方法与第一个功能一样)

<div>
<form id="index_search" name="index_search" method="get" action="<?php bloginfo('home’); ?>/">
<p><input type="text" name="s" id="s" value=""/> <input type="submit" value=" 搜 索 " /></p>
<p>
<label for="s_type5" style="width:50px"><input type="radio" name="cat" id="cat" value="all" checked>全站</label>
<label for="s_type1" style="width:50px"><input type="radio" name="cat" id="cat" value="4" checked>主题</label>
<label for="s_type2" style="width:50px"><input type="radio" name="cat" id="cat" value="6">插件</label>
<label for="s_type3" style="width:50px"><input type="radio" name="cat" id="cat" value="3">主机</label>
<label for="s_type4" style="width:50px"><input type="radio" name="cat" id="cat" value="10">经验</label>
</p>
</form>
</div>

还有一种下拉式实战搜索功能代码:(安装方法与第一个功能一样)

<form action="<?php bloginfo('home'); ?>" method="get">
<div>
<input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" />
<select style="" name="cat" class="search-option">
<option value="4" selected="selected">宝贝</option>
<option value="2">问答</option>
<option value="3">品牌</option>
</select>
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>

《“wordpress高级搜索,WordPress按分类搜索功能制作”》 有 1 条评论

  1. 学做网站讲师说道:

    以上的wordpress实战搜索功能均能正常使用 ,如果出现错误,请检查一下双引号和单引号是否为英文状态下的。

发表回复

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

相关教程

  • 漂亮的wordpress淘客模板 图文教程 (112746 次浏览)
    今天再次给大家分享一款自己仿的一个wordpress淘客模板。这个模板是我自己在别人模板的基础上进行二次开发,自己比较喜欢。注意:此模板不支持IE6,
  • 插件介绍在网站中插入幻灯片可以让网站更加绚丽,例如学做网站论坛首页顶部左侧就是一个幻灯片,这种方式是直接借助js文件,然后嵌入到网站主题中的.
  • 网站数据库实战管理是一种可以执行SQL命令的功能管理界面,具有很高的执行效率,但同时也存在着巨大的安全隐患。为了广大用户的网站空间安全,默认情
  • (特别全)网站收录提交链接及各大搜索引擎站长工具百度网站收录提交http://www.baidu.com/search/url_submit.html百度自动提交百
  • 以图搜图,顾名思义就是上传一张图片,网站搜索并显示与之类似的图片。对于我们草根站长来说,特别实用,怎么利用好它,就需要发挥你的想象力。1、T
  • 网站服务器有哪些分类 图文教程 (126619 次浏览)
    网站服务器的等级:共享IP空间 < 独立IP < VPS < 租用服务器 < 自己的服务器对于个人自己做网站的话,刚开始可选择共享IP空间,也就是虚
  • 在课程我们讲到,我们在建站时,可以建立页面和分类目录,然后在网站导航上调用页面与分类目录。更换页面的顺序,我们可以在后台修改每个页面的排
  • 纯代码Wordpress前台投稿功能制作方法,很多建网站学员学习了Wordpress教程后,使用Wordpress 程序建了网站。但如果每天都是自己更新文章,感觉会有点
  • 多站点 (Multisite) 功能是 WordPress 3.0  后版本的一个重要更新,整合了 WordPress MU 内核。后台自动升级内核后,无法直接使用该功能。需要通过手
  • 网站制作流程是什么 视频教程 (1270965 次浏览)
    相信很多朋友第一次接触到网络,接触到建站,会被域名、空间、解析、建站程序等各种问题困扰,甚至都不清楚网站制作流程,也不知该如何下手开始做自己
  • 以下是我们学做网站论坛建站培训课程的所有内容:【只需支付680元的培训费用,就可以学习以下所有课程。】零基础网站制作培训报名地址:https://w