学做网站培训课程介绍

当前位置:

WordPress网站实现点击加载下一页文章列表

在使用WordPress建网站时,如果后台文章比较多的情况下,会使用分页功能来制作分页按钮。除了这种常规的分页按钮之外,还有一种分页就是下拉无限加载下一页文章。效果如下图:

Wordpress网站制作下拉无限加载下一页文章列表

下面学做网站论坛就来介绍一下WordPress网站点击加载下一页文章列表的方法。也可以将你网站原来的分页按钮转换成下拉加载。

方法/步骤

第一步:将文章列表循环代码使用以下的循环代码;如果本身就是这种循环代码,就不用替换;(这个循环适用于首页和分类页)


<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

<?php endwhile;?>
<?php endif; ?>

如果要在某个PAGE单页中加载指定分类的文章列表,需要用以下的循环代码:


<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'caller_get_posts' => 1,
'paged' => $paged,
'cat' => 'ID号',
);
query_posts($args);
while ( have_posts() ) : the_post();?>

<?php endwhile; wp_reset_query(); ?>

第二步:在文章列表所在的父HTML Div标签,添加一个class名为index001;

第三步:在循环中的底层模板加一个class名为excerpt-sticky;

第四步:在循环代码结束的下方,放在“加载更多”的按钮代码;


<div class="next-page"> <?php
$next_page = get_next_posts_link('加载更多');
if($next_page) echo $next_page;
?>
</div>

第五步:将以下的CSS样式添加到自己网站模板的style.css中;


.next-page{text-align:center}
.next-page a{ margin: 10px auto;display: inline-block;padding: 5px 25px;background-color: #ddd;color: #666;border-radius: 2px;opacity: .88;font-size: 14px;}
.next-page a:hover{color:#d9534f;}

第五步:在代码最下方,放上以下的JS代码,来获取下一页的文章列表,并且加载到上一页内容下面,以此类推。


<script>
$('.next-page > a').on('click',function(){ //这是点击实现加载更多
var next_url = $(this).attr("href");
var next_text = $(this).text();
if(next_text == '加载更多'){
$(this).text('加载中...');
$.ajax({
type: 'get',
url: next_url,
success: function(data){
result = $(data).find(".index001 .excerpt-sticky");
next_link = $(data).find(".next-page > a").attr("href");
//$(this).attr("href", next_url);
if (next_link != undefined){
$('.next-page > a').attr("href", next_link);
$('.next-page > a').text('加载更多');
}else{
$(".next-page").remove();
}

$(function() {
if (next_url.indexOf("page") < 1) {
$(".index001").html('');
}
$(".index001").append(result.fadeIn(200));
});
}
});
}
return false;
});
</script>

这样就可以在自己做网站时,制作出这样的无限点击加载翻页功能了。

如果你不会操作,可以下载WordPress+jquery 点击加载下一页翻页实例下载,对照使用。

发表评论

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

相关教程

  • WordPress是一种功能强大的建站系统,它广泛用于制作各种类型网站,例如:个人博客、企业官网、门户网站等等。它使用简单,对于零基础新手学习做网站
  • 很多网站都有这样的功能,可以显示自己在这个网站上浏览了哪些页面,这就是用户浏览记录。如下图:那么怎么制作这样的用户浏览记录列表功能呢?下面
  • 置顶文章是WordPress建网站常用的文章提升重要性的方法。Wordpress设置置顶文章也比较简单,在网站后台就可以设置文章置顶。但有些对于WORDPRESS程序
  • 有些网站会显示用户在网站的搜索记录,搜索了哪些词等等。我们在自己做网站时,也可以在自己的网站上添加显示用户搜索历史记录功能。通常用户在网站上
  • 以下为学做网站论坛关于“wordpress网站如何同步生成百度小程序”讲解视频教程。百度小程序是百度推出的智能应用,百度本身也在花大力气推广百度小程
  • 现在很多人想做外贸网站,外贸网站很多都是英文网站,那么怎么做英文网站呢?制作英文网站建议使用WordPress程序。Wordpress程序功能比较强大,可以制
  • 我们在做WordPress中文多条件多重搜索时,往往需要调用某些自定义字段的值,只要管理员在后台的文章给某个字段添加了值,都要调用出来。这样就不用自
  • 在制作网站用户中心功能时,往往需要显示用户发布的文章列表,这时就要通过SQL查询,将指定ID的用户发布的文章全部查询出来。在Wordpress获取指定ID
  • 对于做付费内容的网站,授权是非常常见的。常用的授权方法有二种:一种是通过远程域名授权。只有通过了授权的域名才可以正常使用资源;二种是通过授
  • 在开发WordPress插件时,往往需要不限制在某个特定位置展示,而由使用者来决定显示的位置。常用的方法就是通过短代码的方式来调用插件。这样用户创建