学做网站培训课程介绍

当前位置:

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

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

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

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

发表评论

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

相关教程

  • 我们做网站时,如何将分类栏目里的置顶文章显示在最前面呢?然后再显示新发布的文章。怎么实现在调用最新文章列表中置顶文章靠前显示呢?代码如下:
  • WordPress定时发布文章失败的情况,那么如何解决呢?WordPress网站服务器环境或插件冲突可能会导致WordPress产生文章定时发布失败。一般可以安装并启
  • WordPress后台文章添加自定义字段填是非常简单的下拉选择式,如何将Wordpress后台文章添加自定义字段填变为填写框,并且让他可以上传图片的功能呢?下
  • 我们有的时候,在制作好一款wordpress主题的时候,也需要用户在激活主题后,能够自动的创建一些页面和文章,好让用户能够更好更快的熟悉起来,因为,
  • 使用wordpress做网站时,我们有时需要创建一个数据表来存储自己的一些信息,那么怎么在前端就可以自动创建数据表呢,并且可以对数据表的信息进行增删
  • 使用WordPress做网站时,需要使用前端投稿功能,我们可以在前端投稿功能中添加图片上传功能。这样用户在前端就可以直接上传图片了。下面学建站网介
  • WordPress建好网站之后,往往由于服务器本身漏洞、网站后台使用弱密码登录等原因,造成网站被黑,植入了非正规的垃圾代码。造成网站跳转或者打不开。
  • 要使用PHP修改WordPress数据库的某个字段值,可以使用WordPress提供的内置函数和查询语句。以下是一个示例代码片段,可以帮助实现这个目标:<?p
  • 现在很多服务器都在使用宝塔面板,下面学做网站论坛介绍一下宝塔面板安装WordPress建网站的详细过程。方法/步骤第一步:宝塔面板创建站点;创建站点
  • 在之前的建站教程中,我们介绍了如何制作网站前台用户登录/注册功能,通过这个方法可以制作出自定义的用户注册功能。效果如下图:这也是常用的用户