近期在做一个政府网站的项目,采用了wordpress的框架。其中一个模块需要进行筛选,界面如下:

也就是从后台文章列表获取文章(文章已经做好分类),以表格的形式展现出来 。默认展现全部分类。

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

模板页面代码如下:

<?php /** * Template Name: 中介服务 */ get_header();?> <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> /*长长的style模块可以自己设置*/ <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>

喘口气接着贴代码:

<!--这是第二个文本框,说来惭愧,它并没有实现在本页筛选的功能,只能将筛选结果显示到一个新页面上--> <!--在这里调用了系统的搜索功能,并且通过一个隐藏的input框来接收上一个下拉列表里的选择数据--> <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>

休息一下,精彩继续:

<!--接下来的代码是经典的通过query_post($args)获取后台文章列表的代码,加以处理以表格的形式展现出来,而且文章使用了自定义参数,比如“提供服务”、“资质信息”、“评分”,都调出来展现在了表格里--> <!--值得一说的是$args这个数组,规定了每页显示25条信息,便于后面做分页处理;还有就是cat,它的值默认为0,即全部文章列表,可是我只要cat为8的文章列表。总之在这里cat的值取决于上面的下拉列表--> <?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>'; ?>

终于到了结尾部分了,做一下翻页功能,这个模板就完工啦:

<!--翻页功能--> <?php if (function_exists('wp_pagenavi')) wp_pagenavi();else { ?> <div class="yema"><?php previous_posts_link('[« 上一页]') ?> <?php next_posts_link('[下一页 »]') ?></div><?php } ?> <?php get_footer(); ?>

对于精通wordpress的人来说,可以借鉴我的这个实现思路,对于小白,如果想复制粘贴,那么你需要修改的就是<style>模块,以及文章的id

原文链接:https://blog.csdn.net/qq_42015806/article/details/84543330?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166666867416782414938145%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=166666867416782414938145&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-15-84543330-null-null.nonecase&utm_term=wordpress

发表回复

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