记录设置WordPress文章下拉自动无限翻页效果(更换传统的翻页方式)

  • 麦子的头像-WordPress建站笔记
  • 麦子
    2022年2月20日 06:13:23发布

我们看到常规的WordPress程序都是有固定的上一页和下一页翻页效果的,但是我们看到如今较多的网站采用的是无限AJAX翻页效果。我们有些主题是自带的,但是如果没有主题自带无限我们可以修改实现这个功能。

记录设置WordPress文章下拉自动无限翻页效果

1、检查是否有jQuery

无限加载分页效果是需要用到jQuery的,如果我们的主题里没有jQuery文件需要自己加载一个。

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

2、检查替换分页

<div class="pagenavi">
	<?php next_posts_link('下一页 » ') ?>
	<?php previous_posts_link('« 上一页') ?>
</div>

找到当前的分页代码,用上面替换上。

3、添加功能模块

//加载分页无限下拉
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);

4、CSS样式效果

.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;}

添加CSS效果,如果不合适可以自己修改。

© 版权声明
THE END
喜欢就支持一下吧
点赞5
分享