WordPress 网站开发实现无刷新分类筛选/多重筛选

2019-10-2309:25:27网站建设与开发Comments2,478 views字数 3748阅读模式

做一个政府网站的项目,采用了wordpress的框架。其中一个模块需要进行筛选,界面如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16942.html

也就是从后台文章列表获取文章(文章已经做好分类),以表格的形式展现出来 。默认展现全部分类。WordPress 网站开发实现无刷新分类筛选/多重筛选文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16942.html

访问者点击“中介类型”的下拉列表,选择某一分类,提交后下面的表格只展现该分类下的文章列表;在企业名称/服务事项中输入要检索的关键字,点击提交后,再进行一次筛选,从而实现多重筛选:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16942.html

WordPress 网站开发实现无刷新分类筛选/多重筛选文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16942.html

模板页面代码如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16942.html

<?php
/**
* Template Name: 中介服务
*/
get_header();?>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16942.html

<style>
body{background-image:url(/bazhoushenpiju2/wp-content/uploads/2018/09/bodybg.gif)}
.site-content{width:1200px;margin:0 auto;}
.entry-title{color:#f98d1e;margin-top:20px;padding-bottom:20px;font-weight:bold;border-bottom:#000 1px dotted;font-size:30px;}
#zhongjie{width:1100px;margin:0 auto;border-collapse:collapse;text-align:center;margin-bottom:50px;font-size:15px;}
#zhongjie td{border:1px solid #ccc;line-height:35px;}
#zhongjie a{text-decoration:none;color:#000;}
#submit{background-color:#ed5e14; color:#fff;border:1px solid #ccc; width:70px;height:27px;border-radius:5px;}
#submit:hover{background-color:#1b5da8;}
#submit:focus{outline:0;}
</style>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16942.html

/*长长的style模块可以自己设置*/文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16942.html

<div class="entry-title">中介服务</div> <!--标题-->
<!--下拉列表,method一定要为post,我一开始设置为get,不成功,还想了很多办法调试,都不行,绕了很多弯路,改为POST后,一切问题迎刃而解。关于get和post的不同大家可以自行百度。-->
<!--下拉列表的name一定要为cat,在wordpress里表示文章的分类id,option里面的8,9,10均为后台文章的分类id。至于怎么获取文章的分类id大家可以自行百度。-->
<form role="search" method="post" action="#" style="margin-top:30px;margin-bottom:15px;font-size:15px; float:left;margin-left:150px;">
<span class="category-text">中介类型:</span>
<select name="cat" style="margin-right:20px;border-radius:5px;height:28px;width:150px;">
<option value="8">所有类型</option>
<option value="9"><?php echo '审计类'; ?></option>
<option value="10"><?php echo '咨询类' ; ?></option>
</select>
<input id="submit" type="submit" class="search-submit" value="提交" />
</form>
喘口气接着贴代码:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16942.html

<!--这是第二个文本框,说来惭愧,它并没有实现在本页筛选的功能,只能将筛选结果显示到一个新页面上-->文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16942.html

<!--在这里调用了系统的搜索功能,并且通过一个隐藏的input框来接收上一个下拉列表里的选择数据-->文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16942.html

<form action="<?php bloginfo('home'); ?>" method="GET" style="margin-top:30px;margin-bottom:15px;font-size:15px; float:left; margin-left:100px;">
<span class="category-text">企业名称/服务事项:</span>
<input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" style="margin-right:20px;border-radius:5px;height:21px;"/>
<input type="hidden" name="cat" value="<?php echo $_POST['cat']==0?8:$_POST['cat']?>" style="width:0" />
<input id="submit" type="submit" id="searchsubmit" value="搜索" style="margin-left:-60px;" />
</form>
休息一下,精彩继续:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16942.html

<!--接下来的代码是经典的通过query_post($args)获取后台文章列表的代码,加以处理以表格的形式展现出来,而且文章使用了自定义参数,比如“提供服务”、“资质信息”、“评分”,都调出来展现在了表格里-->文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16942.html

<!--值得一说的是$args这个数组,规定了每页显示25条信息,便于后面做分页处理;还有就是cat,它的值默认为0,即全部文章列表,可是我只要cat为8的文章列表。总之在这里cat的值取决于上面的下拉列表-->文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16942.html

<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'posts_per_page' => 25,
'paged' => $paged,
'post_status' => 'publish',
'cat'=>$_POST['cat']==0?8:$_POST['cat'],
);
$count_posts=1;
echo '<table id="zhongjie">';
echo '<tr style="font-weight:bold;">';
echo '<td>序号</td><td style="width:250px; overflow:hidden;">中介机构名称</td><td style="width:350px;overflow:hidden;">经营范围</td><td>资质信息</td><td>评分</td></tr>';
query_posts($args);
while (have_posts()) : the_post();
echo '<tr>';
echo '<td>'.$count_posts++;'</td>';
echo '<td>< a href="'%20.%20get_permalink()%20.%20'">' . the_title_attribute('echo=0') . '</ a></td>';
echo '<td>< a href="'%20.%20get_permalink()%20.%20'">'.get_post_meta($post->ID, "提供服务", $single = true);'</ a></td>';
echo '<td>< a href="'%20.%20get_permalink()%20.%20'">'.get_post_meta($post->ID, "资质信息", $single = true);'</ a></td>';
echo '<td>'.get_post_meta($post->ID, "评分", $single = true);'</td></tr>';
endwhile;
echo '</table>';
?>
终于到了结尾部分了,做一下翻页功能,这个模板就完工啦:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16942.html

<!--翻页功能-->文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16942.html

<?php if (function_exists('wp_pagenavi')) wp_pagenavi();else { ?>
<div class="yema"><?php previous_posts_link('[« 上一页]') ?>
<?php next_posts_link('[下一页 »]') ?></div><?php } ?>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16942.html

<?php get_footer(); ?>
对于精通wordpress的人来说,可以借鉴我的这个实现思路,对于小白,如果想复制粘贴,那么你需要修改的就是<style>模块,以及文章的id
————————————————
版权声明:本文为CSDN博主「傻丁鱼」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_42015806/article/details/84543330文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16942.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/cms/16942.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定