怎样给wordpress网站分类目录页面，添加文章列表和分页效果？
在前面的章节中，我们完成了wordpress网站首页模板数据的调用，也创建好了wordpress网站的公共模板。今天，我们再来给wordpress网站的分类目录页模板archive.php文件添加左侧数据的调用。一般情况下，wordpress网站的分类目录页面，展示的是该分类下的文章列表，所以，本节课我们将介绍如何给wordpress网站分类页面调用文章列表和分页效果？下面，一起来看看吧（具体请观看《wordpress网站分类目录，如何添加文章列表和分页效果？》视频课程）。
这个wordpress循环函数，我们在wordpress网站很多模板中会使用到，如：首页的文章列表、文章详情页、搜索页、单页面等等。我们打开archive.php模板文件，找到左侧的父标签< div class=\”c_left\”>（如下图），现在里面是空的。
在这个< div class=\”c_left\”>标签内部添加如下代码：
<?php if(have_posts()):while(have_posts()):the_post(); endwhile;endif;?>
效果如下图：
wordpress循环语句添加好后，我们再在这个循环语句的主体中添加文章数据调用，这里，我们调用文章的标题、链接和发表的时间，代码如下：
echo \'<li>\’; echo \'<a href=\”\’.get_permalink().\’\”>\’;echo $post->post_title;echo \'</a>\’;echo \'<em>\’.get_the_time(\”Y-m-d\”).\'</em>\’; echo \'</li>\’;
这样，我们就添加好了wordpress网站分类模板左侧的文章列表调用，效果如下图：
wordpress网站的分类下的文章可能会很多，一个页面展示不下去，所以，我们一般都会给分类目录下的文章列表添加分页效果。在当前wordpress分类模板的文章列表代码下方，添加如下代码：
<?php $arr = array(\’mid_size\’ => 3, //当前页码数的 两边 显示几个页码。\’prev_text\’ =>\’上一页\’, //上一页\’next_text\’ =>\’下一页\’, //下一南);the_posts_pagination($arr);?>
因为wordpress这个分页函数the_posts_pagination()，我们在前面的章节中介绍过，这里，我就不费口舌了，大家可以查阅一下我前面发表的内容。添加好分页按钮后，wordpress网站分类的前台页面显示如下：
好了，通过上面的三步，我们给我们的wordpress网站的分类目录添加好了文章列表和分页效果。在下一课中，我们将介绍《wordpress网站不同的分类页面，怎样调用不同的banner图？》，欢迎大家到时收看。
「途推建站」织梦列表页分页样式标签详解及首页末页加链接
「途推建站」织梦列表页分页样式标签详解及首页末页加链接
织梦源码作为目前互联网市场使用率最高的源码，深受广大站长的喜爱。
今天途推小编在做媒博网www.mbolg.com列表页分页的时候发现一个问题，经过一上午的努力。终于找到了解决方案，下面途推网小编就为大家介绍一下织梦列表页Pagelist各个标签的功能及首页末页没有链接的解决方案。
列表分页调用代码：
<div class=\”pagination-outer\”>
<ul class=\”pagination\”>
{dede:pagelist listitem=\”index,end,pre,next,pageno,option\” listsize=\”2\”/}
</ul>
</div>
属性详解：
【一】listsize：后面的数字代表的意思就是数字*2+1，例如本代码中的2，那分页中显示的页码数就是2*2+1=5（页）；
【二】listitem：内中的内容是您在分页中需要展示的内容；
{index：首页}
{end：末页}
{pre：上一页}
{next：下一页}
{pageno：页码}
{option：下拉跳转页码框}
列表页分页代码首页/末页加代码方法：
第一步：找到includerc.listview.class.php这个文件，在其中找到：
//获得上一页和主页的链接
if($this->PageNo != 1)
{
$prepage.=\”<li><a href=\’\”.str_replace(\”{page}\”,$prepagenum,$tnamerule).\”\’>上一页</a></li> \”;
$indexpage=\”<li><a href=\’\”.str_replace(\”{page}\”,1,$tnamerule).\”\’>首页</a></li> \”;
}
else
{
$indexpage=\”<li>首页</li> \”;
}
//下一页,未页的链接
if($this->PageNo!=$totalpage && $totalpage>1)
{
$nextpage.=\”<li><a href=\’\”.str_replace(\”{page}\”,$nextpagenum,$tnamerule).\”\’>下一页</a></li> \”;
$endpage=\”<li><a href=\’\”.str_replace(\”{page}\”,$totalpage,$tnamerule).\”\’>末页</a></li> \”;
}
else
{
$endpage=\”<li>末页</li> \”;
}
修改为：
//获得上一页和主页的链接
if($this->PageNo != 1)
{
$prepage.=\”<li><a href=\’\”.str_replace(\”{page}\”,$prepagenum,$tnamerule).\”\’>上一页</a></li> \”;
$indexpage=\”<li><a href=\’\”.str_replace(\”{page}\”,1,$tnamerule).\”\’>首页</a></li> \”;
}
else
{
$indexpage=\”<li><a href=\’\”.str_replace(\”{page}\”,1,$tnamerule).\”\’>首页</a></li> \”;
}
//下一页,未页的链接
if($this->PageNo!=$totalpage && $totalpage>1)
{
$nextpage.=\”<li><a href=\’\”.str_replace(\”{page}\”,$nextpagenum,$tnamerule).\”\’>下一页</a></li> \”;
$endpage=\”<li><a href=\’\”.str_replace(\”{page}\”,$totalpage,$tnamerule).\”\’>末页</a></li> \”;
}
else
{
$endpage=\”<li><a href=\’\”.str_replace(\”{page}\”,$totalpage,$tnamerule).\”\’>末页</a></li> \”;
}
第三步：保存，上传覆盖！搞定！
实现分页的最简单的方式（附带源码下载）
分页是每个网站并不可少的，但是处理往往非常麻烦，虽然有很多的插件可以使用，但复杂度依然不减，今天我们来手敲一个最简单的实现方式，看够之后分页再也不是难题，而且以后用插件也懂原理了。手动擒来！
文章概略：
-
分页的原理
-
分层实现
-
附赠Git开源代码
我们先来说下原理吧，分页就是数据库的数据太多了，一次性查看不完，分批次查看。一般分页分为从数据库处理分页和在服务器端处理分页两大类。
在数据库分页就是用多少数据jdbc去多少数据，比如取100条数据，则用sql语句查询出100条语句就可以了。在服务器分页就是把数据库所有数据都取到服务器，然后客户要多少数据返回多少数据。一般这种方式io要求很高，而且浪费资源。不建议使用，目前开发都是使用第一种方式，编译好sql语句，在数据库服务器处理分页，而且数据库的服务器一般处理速度很快，利用商用。
分页无非就是服务器返回“总页数”和“当前页数”，然后客户端（一般是浏览器）对应处理。我们分层来写。
服务器可以采用java，或者php，或者asp等编写，返回“总页数”和“当前页数”。浏览器采取想应处理。我们采用javascript和html处理，逻辑判断交给js，页面修饰交给css，使用的时候你可以随时改变，方便快捷。
看下预览图（假设每个页面显示10个页数）：css代码：用作美化，你可以改成你喜欢的样式
/*分页*/
/*在div paging中的a标签的属性，很简单的css*/
#paging{
width: 80%;
margin: 20px auto 40px auto;
text-align: center;
color: #666666;
font-size: 1.2em;
font-weight: 700;
}
#paging a{
color: #666666;
font-size: 1.2em;
font-weight: 700;
padding:5px 10px;
}
#paging a:hover{
background-color: #FF464E;
color: #F5F5F5;
}
html代码：
javascritp进行的逻辑判断，就是用来个document.writer，简单吧
备注：我是有的是java编写的，用了ssm框架，而且url是RESTful风格的，你可以改成普通风格的，代码注释很详细，我在这不解释了。
RESTful风格：http://localhost:8080/youxuan/index/2
普通风格：http://localhost:8080/youxuan/index?page=2
最终的结果：
总页数小于10页时（共6页），全部显示，访问第1页如下：
总页数大于10，当前页数小于10时，显示前10页，访问第2页如下：
总页数大于10，当前页数大于10时，我们让他显示左右各5页，但是考虑增加5页可能超出总页数。我们增加判断以后结果如下：
当前页+5页没超出总页数，显示当前页左右各5页，访问第10页如下：
当前页+5页超出总页数，显示到最后一页并向前显示10页，访问第20页（最后一页）如下：实现代码如下：
<script>
/*
分页：接收参数：总页数，当前页数
默认一个页面显示10个页数
可能的情况：
总页数小于10页
全部显示
总页数大于10页
当前页小于10页，显示前10页
当前页大于10页，显示左右各5页
当前页数+5页大于总页数，显示到最后一页
否则显示左右各5页
*/
var path =\”${ pageContext.request.contextPath }\”;//获得当前应用的地址现在是 /youxuan
var url = path+\”/index\”;//a标签的地址
//el表达式取得当前页和总页数
var nowPage=${Paging.nowPage};//当前页
var countPage=${Paging.countPage};//总页数
var count=10;//页面显示多少记录,默认每页显示10个记录
//判断“首页”是否显示
if(nowPage>1){
document.writeln(\” <a href=\\\”\”+url+\”/1\\\”>首页</a>\”);//采用RESTful格式url
}
//总页数小于10页,显示全部页
if(countPage<=count){
for (var i=1;i<=countPage;i++) {
document.writeln(\” <a href=\\\”\”+url+\”/\”+i+\”\\\”>\”+i+\”</a>\”);//采用RESTful格式url
}
}else{
//总页数大于10页
//当前页小于10页，显示前10页
if(nowPage<count){
for (var i=1;i<=count;i++) {
document.writeln(\” <a href=\\\”\”+url+\”/\”+i+\”\\\”>\”+i+\”</a>\”);//采用RESTful格式url
}
//显示省略号和最后一页
document.writeln(\”…<a href=\\\”\”+url+\”/\”+countPage+\”\\\”>\”+countPage+\”</a>\”);
}else{
//当前页数大于等于10页，左右各显示5页
if (nowPage <= countPage) {
//当前页+5大于总页数,显示到最后一页，显示前10页
if (nowPage + 5 >= countPage) {
for (var i = nowPage – 10; i <= countPage; i++) {
document.writeln(\” <a href=\\\”\” + url + \”/\” + i + \”\\\”>\” + i + \”</a>\”);//采用RESTful格式url
}
} else {
//当前页+5小于总页数,左右各显示5页
for (var i = nowPage – 5; i <= nowPage + 5; i++) {
document.writeln(\” <a href=\\\”\” + url + \”/\” + i + \”\\\”>\” + i + \”</a>\”);//采用RESTful格式url
}
//显示省略号和最后一页
document.writeln(\”…<a href=\\\”\” + url + \”/\” + countPage + \”\\\”>\” + countPage + \”</a>\”);
}
}
}
}
//判断尾页是否显示
if(nowPage<countPage){
document.writeln(\” <a href=\\\”\”+url+\”/\”+countPage+\”\\\”>尾页</a>\”);
}
</script>
最好我们最好加个“跳转到第几页的功能”，如图实现代码：
到<input type=\”number\” id=\”page\” style=\”width: 80px;\”/>页
<input type=\”button\” onclick=\”goPage()\” value=\”转到\” style=\”background-color: #6c6c6c;padding: 6px; color: #F5F5F5;border: 0\”/>
</div>
<script>
//跳转到第几页
function goPage() {
var page= document.getElementById(\”page\”).value;
var type = /^[1-9]+$/;
var re = new RegExp(type);
if (page.match(re) == null) {
//输入格式错误
alert(\”亲，页数一个正整数哦~\”);
}else {
//判断是否大于总页数
if(page>countPage){
alert(\”亲，总共只有\”+countPage+\”页呢~\”);
}else {
window.location.href=url+\”/\”+page;
}
}
}
</script>
这个这么简单，就不解释了吧。
最后，我们说一下后台实现，我用的是ssm框架，封装了一个分页的bean，代码如下
package com.youxuan.util;
/**
* Created by 两毛五哥哥 on 2016/8/26.
* 分页工具类
*/
public class Paging {
private int countDate;//总数据
private int countPage;//总页数
private int nowPage;//当前页数
private int pageCount;//每页显示多少数据
/**
* 构造函数
* @param countDate
* @param pageCount
* @param nowPage
*/
public Paging(int countDate,int pageCount,int nowPage){
this.countDate=countDate;
this.pageCount=pageCount;
this.nowPage=nowPage;
if(countDate%pageCount==0){
this.countPage=countDate/pageCount;
}else {
this.countPage=countDate/pageCount+1;
}
}
/**
* 构造函数，默认每页显示100条数据
* @param countDate
* @param nowPage
*/
public Paging(int countDate,int nowPage){
this(countDate,100,nowPage);
}
public int getCountDate() {
return countDate;
}
public void setCountDate(int countDate) {
this.countDate = countDate;
}
public int getCountPage() {
return countPage;
}
public void setCountPage(int countPage) {
this.countPage = countPage;
}
public int getNowPage() {
return nowPage;
}
public void setNowPage(int nowPage) {
this.nowPage = nowPage;
}
public int getPageCount() {
return pageCount;
}
public void setPageCount(int pageCount) {
this.pageCount = pageCount;
}
}
然后再servlet（controller）中返回这个封装的对象。你可以不用封装也行，我觉的这样可移植性好，下次做项目直接拿来用了。这个项目我做完会开源贡献的，喜欢的点个赞吧。
最后：git代码下载地址：https://git.oschina.net/lovepeng/share-for-you.git
@两毛五哥哥，90逗逼程序员，欢迎骚扰
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
