您现在的位置是:首页 > 网站制作 > WordpressWordpress
WordPress多重筛选、多条件搜索功能制作
杰帅2023-07-16【Wordpress】人已围观
简介在前面的建站教程中,我们讲了如何制作Wordpress搜索功能,可以实现单一内容的搜索。但在实际网站建设过程中,往往需要多重筛选、多条件搜索功能。如下图所示:
在前面的建站教程中,我们讲了如何制作Wordpress搜索功能,可以实现单一内容的搜索。但在实际网站建设过程中,往往需要多重筛选、多条件搜索功能。如下图所示:

这就是一种多重筛选、多条件搜索功能,需要同时满足三个条件,才会显示出内容。如果使用WordPress制作出这样的多重筛选、多条件搜索功能呢?下面跟着学做网站论坛一起来制作这个功能吧!
方法/步骤
1. 使用Dreamweaver cs6软件,新建一个HTML网页,保存为searchform.php,然后,将以下的代码放到searchform.php里并保存到模板文件夹;
<form method="get" id="searchform" action="<?php bloginfo('home'); ?>">
<div style=""><input name="username" type="text" placeholder="姓名"/></div>
<div style=""><input name="s" id="s" type="text" placeholder="证件号码"/></div>
<div style=""><input name="bianhao" type="text" placeholder="证书编号"/></div>
<div><input id="searchsubmit" type="submit" value="查询" class="but" /></div>
</form>
2. 复制Wordpress模板里的分类目录模板代码,另存为search.php。放到自己的模板文件夹里。
3. 将search.php模板代码里的循环代码全部删除,替换为以下的条件搜索循环代码;
<?php
$haoma=$_GET['s'];//证件号码
$username = $_GET['username']; //姓名
$bianhao = $_GET['bianhao']; //证书编号
$mood1 = get_post_meta($post->ID, 'username', true);
$mood2 = get_post_meta($post->ID,"bianhao",true);
/*
echo $username . "<br/>";
echo $bianhao . "<br/>";
echo $mood1 . "<br/>";
echo $mood2 . "<br/>";
*/
if( $username==$mood1 && $bianhao==$mood2) { ?>
<div class="zhenshu">
<table width="100%">
<tr>
<td width="13%">姓名:</td>
<td width="87%"><?php echo get_post_meta($post->ID, 'username', true);?></td>
</tr>
<tr>
<td>证件号码:</td>
<td><?php the_title(); ?></td>
</tr>
<tr>
<td>证书编号:</td>
<td><?php echo get_post_meta($post->ID,"bianhao",true);?></td>
</tr>
<tr>
<td colspan="2" class="tplr"><img src="<?php%20echo%20get_first_image();%20?>" alt="<?php the_title(); ?>缩略图" /></td>
</tr>
</table>
</div>
<?php
} else {
echo '请填写正确的信息后,再查询!';
}
?>
4.将以下的CSS样式代码,粘贴到style.css中,用于控制搜索结果的样式;
.zhenshu table {
margin: 0 auto;
width: 100%;
border:1px solid #999;
border-collapse: collapse;
}
.zhenshu th,.zhenshu td {
padding:15px;
border: 1px solid #999;
}
.tplr{text-align:center;}
5. 在网站后台发文章里,创建自定义栏目。(如果没有,可以参考:wordpress自定义栏目设置方法)
6. 文章底部设置二个自定义栏目项,名称分称是【username】和【bianhao】,并填写相应的值。如下图:

7. 文章标题填写【证件号码】,内容只需要上传证书图片即可。
8. 在需要显示搜索框的位置,使用以下的代码进行调用:
<?php include( TEMPLATEPATH . '/searchform.php' ); ?>
9. 这样我们自己建网站时,就可以实现多重筛选、多条件搜索功能了。
Tags:wordpress教程 多条件搜索 多重筛选
很赞哦! ()
上一篇:wordpress网站搬家教程
相关文章
随机图文
如何将WordPress文章迁移到Shopify:使用WP All Export插件的完整指南
如果您正在将WordPress网站迁移到Shopify,并希望将文章内容一起迁移,WP All Export插件是一个理想的解决方案。通过这款插件,您可以轻松导出WordPress中的文章,并将其转换为适合Shopify的CSV格式。wordpress 上传的图片不显示的问题 base64,data:image/gif
wp_reset_postdata 和 wp_reset_query 的作用与区别
什么时候使用wp_reset_query,什么时候用wp_reset_postdata?WordPress 页面模板(Page Template)下拉列表不显示的原因及解决方法
WordPress 的自定义页面模板是一个非常强大好用的功能,使用它新建一些静态页面(Page),添加上一些数据调用的函数,再在网页上做一个导航连接到对应的页面就可以实现很多自定义的功
文章评论
本站推荐
标签云
猜你喜欢
- 目前市场上最流行的开源建站系统有哪些?
- WordPress 3D旋转彩色标签云
- WordPress过滤器(Filters):apply_filters和add_filter 用法和实例
- WordPress企业主题制作(定制)应该注意哪些事项?
- WordPress调用置顶文章显示置顶数量的三种方法
- WordPress官网打不开429 Too Many Requests的解决方法
- wordpress nginx多站点rewrite(重写)规则
- WordPress电商网站搭建全指南,从零开始轻松实现在线销售
- WordPress插件制作教程(二): 编写一个简单的插件
- wp_list_comments()使用回调函数自定义评论展示方式