Wordpress分页相关:首页分页调用、首页下拉点击加载更多实现方法
创始人
2024-06-03 16:40:14

我们为wordpress网站的首页添加了全站文章列表。要实现两个:

一、首页文章分页 the_posts_pagination函数
二、文章列表下拉点击加载更多

Wordpress首页分页代码(默认):

使用内置方法 (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文章列表下拉点击加载更多

一般情况下,不可能让所有的文章在一个页面一下子全部显示出来,如果真这样,网页的负载会非常大。正确的处理方式,是先显示最前面的十几篇或二十几篇文章,然后,“点击一个分页按钮”或者“鼠标向下滚动触发一个事件”后,再显示后面的十几篇或二十几篇文章,以此类推。本节,我们来介绍“如何给wordpress网站的文章列表添加分页效果”,一起来看看吧。例如下图:

  1. 插件实现文章列表下拉点击加载更多:

Infinite Scroll

希望能够自动加载所有的文章列表,而不需要用户点击下一页下一页的操作了。如果你像学建站网一样使用的是wordpress程序,这个功能实现起来是比较简单的,具体实现步骤如下:

  1. 安装wordpress自动滚动插件:Infinite Scroll;

https://wordpress.org/plugins/infinite-scrol

2、安装启用后需要做一些简单的设置:

设置项解释:

Content Selector 文章列表页面最外层容器名称;单篇文章层的父层,如下面的代码,文章 div 层的父层便是.main

Navigation Selector 分页导航的容器名称;

Next Selector 下一页容器名称;,通常照图片所示输入即可;

Item Selector 每篇文章的容器名称。

设置好上面三项就可以使用了,下面的加载效果或加载样式跟据各自需要设置;

这是文章
这是文章

最后插件的几种形式可以了解下。

2、纯代码实现文章列表下拉点击加载更多

持续更新中。。。。。。。。。。。。。。。。。。。

相关内容

热门资讯

脚上的穴位图 脚面经络图对应的... 人体穴位作用图解大全更清晰直观的标注了各个人体穴位的作用,包括头部穴位图、胸部穴位图、背部穴位图、胳...
猫咪吃了塑料袋怎么办 猫咪误食... 你知道吗?塑料袋放久了会长猫哦!要说猫咪对塑料袋的喜爱程度完完全全可以媲美纸箱家里只要一有塑料袋的响...
demo什么意思 demo版本... 618快到了,各位的小金库大概也在准备开闸放水了吧。没有小金库的,也该向老婆撒娇卖萌服个软了,一切只...
苗族的传统节日 贵州苗族节日有... 【岜沙苗族芦笙节】岜沙,苗语叫“分送”,距从江县城7.5公里,是世界上最崇拜树木并以树为神的枪手部落...