我们为wordpress网站的首页添加了全站文章列表。要实现两个:
一、首页文章分页 the_posts_pagination函数
二、文章列表下拉点击加载更多
使用内置方法 (WordPress 4.1以前无效)。这里要修改下显示数量

//这里是文章列表
//这里是分页调用代码 3,//第几个开始显示省略号'prev_text' =>'上一页','next_text' =>'下一页','before_page_number' => '第 ','after_page_number' => ' 页',) );?>
另一种形式
-------这里是文章列表内容,下面是分页 'list','prev_text' => '«','next_text' => '»',));if($post_pagination) {echo '';}endif;wp_reset_query();
?>自定义分页方法
把以下代码放入:functions.php
/**
* 数字分页函数
* 因为wordpress默认仅仅提供简单分页
* 所以要实现数字分页,需要自定义函数
* @Param int $range 数字分页的宽度
* @Return string|empty 输出分页的HTML代码
*/
function lingfeng_pagenavi( $range = 4 ) {global $paged,$wp_query;if ( !$max_page ) {$max_page = $wp_query->max_num_pages;}if( $max_page >1 ) {echo "";if( !$paged ){$paged = 1;}if( $paged != 1 ) {echo "首页";}previous_posts_link('上一页');if ( $max_page >$range ) {if( $paged <$range ) {for( $i = 1; $i <= ($range +1); $i++ ) {echo "$i";}}elseif($paged >= ($max_page -ceil(($range/2)))){for($i = $max_page -$range;$i <= $max_page;$i++){echo "$i";}}elseif($paged >= $range &&$paged <($max_page -ceil(($range/2)))){for($i = ($paged -ceil($range/2));$i <= ($paged +ceil(($range/2)));$i++){echo "$i";}}}else{for($i = 1;$i <= $max_page;$i++){echo "$i";}}next_posts_link('下一页');if($paged != $max_page){echo "尾页";}echo '共['.$max_page.']页';echo "\n";}
}风格样式:
/*------------------分页部分的CSS
------------------*/
.fenye{height: 25px;line-height: 25px;_background: #F9F9F9;padding: 2px 5px;margin: 20px 4px;_border: solid 1px #ccc;_text-align: center;
}.fenye a{padding:4px 6px 4px 6px;margin:0 2px 0 2px;border:1px solid #aaa;text-decoration:none;color:#333;
}.fenye a.current{background:#ff6f3d;color:#fff;
}.fenye a:hover{background:#ff6f3d;color:#fff;
}/*-- footer --*/
.footer {width:100%;height:64px;background:#E6E9ED;border-top: 1px solid #e2e2e3;
}/*-- post --*/
.post {background:none;
}.post .entry-cnt {height:auto;line-height:;font-size:14px;border-top-width: 1px;border-top-style: dotted;border-top-color: #eee;padding:15px 0 0;
}.post .entry-cnt p {line-height:;font-size:14px;
}.related {padding:10px 5px 10px 5px;border-top:1px solid #eee;border-bottom:1px solid #eee;margin: 20px auto 10px auto;
}.r-left {float:left;
}.r-right {float:right;
}/*-- discuss --*/
.discuss {padding:25px;
}
在需要显示分页的地方插入:
三、使用插件的方法
安装插件:wp-pagenavi下载>>>
调用:
一般情况下,不可能让所有的文章在一个页面一下子全部显示出来,如果真这样,网页的负载会非常大。正确的处理方式,是先显示最前面的十几篇或二十几篇文章,然后,“点击一个分页按钮”或者“鼠标向下滚动触发一个事件”后,再显示后面的十几篇或二十几篇文章,以此类推。本节,我们来介绍“如何给wordpress网站的文章列表添加分页效果”,一起来看看吧。例如下图:

Infinite Scroll
希望能够自动加载所有的文章列表,而不需要用户点击下一页下一页的操作了。如果你像学建站网一样使用的是wordpress程序,这个功能实现起来是比较简单的,具体实现步骤如下:
安装wordpress自动滚动插件:Infinite Scroll;
https://wordpress.org/plugins/infinite-scrol
2、安装启用后需要做一些简单的设置:

设置项解释:
Content Selector 文章列表页面最外层容器名称;单篇文章层的父层,如下面的代码,文章 div 层的父层便是.main
Navigation Selector 分页导航的容器名称;
Next Selector 下一页容器名称;,通常照图片所示输入即可;
Item Selector 每篇文章的容器名称。
设置好上面三项就可以使用了,下面的加载效果或加载样式跟据各自需要设置;

这是文章 这是文章
最后插件的几种形式可以了解下。

持续更新中。。。。。。。。。。。。。。。。。。。
上一篇:春日旅游路线
下一篇:我与JFX不得不说的事故现场