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(); ?>

第二步：在文章列表所在的父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;}

第五步：下载点击加载更多文章列表文件clickmore.js；上传到自己使用的模板文件夹下的JS文件夹里；

第六步：在整个页面代码最下方，放上以下的JS代码，引入clickmore.js来获取下一页的文章列表，这样点击按钮，就可以自动加载下一页的文章列表了，并且是无限加载。

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/clickmore.js"></script>

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

除此之外，还可以实现下拉触底自动加载更多内容的效果。

Tags：WordPress建站   WordPress网站

转载：感谢您对Jerbo个人博客网站平台的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源Jerbo个人博客”。/web/wordpress/714.html

很赞哦！ ()