[亲测]wordpress文章下拉自动无限翻页方式_WordPress_青云站长教程网 365bet是什么_365bet外围时时彩_365bet备用官网
欢迎来到站长教程网!

WordPress

当前位置:主页 > CMS教程 > WordPress >

[亲测]wordpress文章下拉自动无限翻页方式

时间:2019-10-23|栏目:WordPress|点击: 次

相信很多人做过很多的尝试,想通过几行代码把自己的wordpress主题修改成文章自动无限下拉的形式,但是苦于功能不能实现,也不清楚是卡在哪个步骤了,今天大挖给大家提供一个零距离的傻瓜版,来帮助大家完成这个功能,以下这个方法对于其它的教程优势在于,很明确的给到了翻页的代码,因为其它的教程都是以翻页的js及功能为例子,这里比较好的是提供了一个完整的翻页代码,可以直接应用,当然比较核心的步骤也同步给到了大家。希望这次大家可以操作成功。

实现步骤:
一共分三个步骤,复制粘贴,然后查找自己的每篇的文章样式class,和包含文章的class样式替换即可。

1、本功能主要应用了jQuery插件jquery.infinitescroll.js,通过大挖给大家提供了CDN的链接,方便直接应用到HEAD内即可;

1

src="https://cdn.bootcss.com/jquery-infinitescroll/2.0b2.120520/jquery.infinitescroll.min.js">

 

2、替换分页代码:将以下分页的代码替换到当前分页位置上

1

2

3

4

<div class="pagenavi">

next_posts_link('下一页 » ')?>

previous_posts_link('« 上一页')?>

</div>

 

3、在当前主题的functions.php文件中,添加以下代码:
代码中间包含了一个gif图像翻页效果的动态图,大家可以要的自己的喜欢,自行制作或是注释掉,这里大挖不再提供GIF图片

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

/*

加载infinite scroll插件脚本

*/

functioninfinitescroll_js(){

    wp_register_script('infinite_scroll',get_stylesheet_directory_uri().'/js/jquery.infinitescroll.min.js',array('jquery'),null,true);

    if(!is_singular()){

        wp_enqueue_script('infinite_scroll');

    }

}

add_action('wp_enqueue_scripts','infinitescroll_js');

/*

初始化infinite scroll插件配置参数

*/

functioninfinite_scroll_js(){

    if(!is_singular()){

        ?>

        type="text/javascript">

        jQuery(document).ready(function(){            

            varinfinite_scroll={

                loading:{

                    img:"/images/ajax-loader.gif",

                    msgText:"加载中...",

上一篇:WordPress 简单实现 Tooltip 提示信息实例

栏    目:WordPress

下一篇:没有了

本文标题: [亲测]wordpress文章下拉自动无限翻页方式

本文地址:http://www.jh-floor.com/CMSjiaocheng/WordPress/104096.html

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:888888 | 邮箱:888888#qq.com(#换成@)

Copyright © 2002-2017 青云站长教程网 版权所有 琼ICP备xxxxxxxx号