当前的位置:首页首页 > 建站 > CMS相关
wordpress文章下拉自动无限翻页方式
日期:2019-11-23 14:14:06 次浏览
分享:

摘要:相信很多人做过很多的尝试,想通过几行代码把自己的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">
<?php next_posts_link('下一页 » ') ?>
<?php 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插件脚本
*/
function infinitescroll_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插件配置参数
*/
function infinite_scroll_js() {
    if (!is_singular() ) {
        ?>
        <script type="text/javascript">
        jQuery(document).ready(function(){            
            var infinite_scroll = {
                loading: {
                    img: "<?php echo get_stylesheet_directory_uri(); ?>/images/ajax-loader.gif",
                    msgText: "加载中...",
                    finishedMsg: "已加载所有产品..."
                },
                nextSelector:".pagenavi a",
                navSelector:".pagenavi",
                itemSelector:".post",
                contentSelector:".main",
            };
            jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );
        });
        </script>
        <?php
    }
}
add_action('wp_footer', 'infinite_scroll_js', 100);

 

重要参数说明:

img: 等待加载时显示的动态图片URL路径

nextSelector: 下一页(Previous Post)链接CSS样式名称 + a标签(类选择器或ID选择器)

navSelector: 包含上一页/下一页链接的样式名称(类选择器或ID选择器)

itemSelector: 包含每篇文章内容的样式名称(类选择器或ID选择器)

contentSelector: 包含所有文章的样式名称(类选择器或ID选择器)

提醒:如果按上面方法没有生效,请检查样式是否选择错。

4、CSS样式代码:(把下面的CSS代码添加到当前主题的样式文件中,一般是style.css,可根据自己的喜欢修改对应代码)

 

1
2
3
.pagenavi,#infscr-loading {text-align:center; font-size:0.75em;}
.pagenavi a {padding:6px 12px; background:#F04848; color:#fff; border:1px solid #dedede; border-right:none; overflow:hidden;}
#infscr-loading img {display:block; margin:0 auto; text-align:center;}

注:本站所转载文章,目的在于帮助更多的人学习交流,不代表本站观点,如有侵权可联系管理员删除。但对于本站原创文章,转载需注明出处和链接。更多有关电脑、手机、平面/前端设计、建站知识和技巧,欢迎搜索关注微信公众号:“PC电脑小白”。
本文链接:https://pcxiaobai.com/website/cms/20191123/878.html