[亲测]wordpress文章下拉自动无限翻页方式_WordPress_青云站长教程网
欢迎来到站长教程网!
  • 秒到短信接口 免费试用
  • 微信支付宝接口 秒结算
  • 中文网站排名|申请加入
  • 搜索引擎全站查询
  • 查询移动网站权重数据
  • 海外主机 台湾公司直销
  • WordPress

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

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

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

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

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

    1

     

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

     

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

    1

    2

    3

    4

     

    <div class="pagenavi">

    <?phpnext_posts_link('下一页 » ')?>

    <?phpprevious_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()){

            ?>

            <script type="text/javascript">

            jQuery(document).ready(function(){            

                varinfinite_scroll={

                    loading:{

                        img:"<?php echo get_stylesheet_directory_uri(); ?>/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号