学做网站培训课程介绍

当前位置:

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建网站时,可以通过WP_Query()方法查询指定自定义字段来获取符合条件的值。例如查询某个字段值为1的所有文章,就可以如下写法。<?php
  • 发起 HTTP 请求,是再平常不过的需求了。一般的就是使用 file_get_contents 或者 cURL。但是在WordPress中,使用 file_get_contents 或者 cURL 开发
  • 我们知道,Wordpress制作的网站是动态网站,所有链接都是动态链接,虽然我们可以设置伪静态,但仅仅是URL是静态的,实际并没有真实的HTML页面存在。
  • WordPress是一种功能强大的建站系统,它广泛用于制作各种类型网站,例如:个人博客、企业官网、门户网站等等。它使用简单,对于零基础新手学习做网站
  • 很多网站都有这样的功能,可以显示自己在这个网站上浏览了哪些页面,这就是用户浏览记录。如下图:那么怎么制作这样的用户浏览记录列表功能呢?下面
  • 置顶文章是WordPress建网站常用的文章提升重要性的方法。Wordpress设置置顶文章也比较简单,在网站后台就可以设置文章置顶。但有些对于WORDPRESS程序
  • 有些网站会显示用户在网站的搜索记录,搜索了哪些词等等。我们在自己做网站时,也可以在自己的网站上添加显示用户搜索历史记录功能。通常用户在网站上
  • 以下为学做网站论坛关于“wordpress网站如何同步生成百度小程序”讲解视频教程。百度小程序是百度推出的智能应用,百度本身也在花大力气推广百度小程
  • 现在很多人想做外贸网站,外贸网站很多都是英文网站,那么怎么做英文网站呢?制作英文网站建议使用WordPress程序。Wordpress程序功能比较强大,可以制