我看很多站长的网站都是将文章实现自动无限下拉的形式,今天WordPress主题站小编也来分享一下WordPress文章实现自动无限下拉翻页方法。

实现步骤:

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

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

<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、在当前主题的functions.php文件中,添加以下代码:

代码中间包含了一个gif图像翻页效果的动态图,大家可以要的自己的喜欢,自行制作或是注释掉,这里大挖不再提供GIF图片

/*

加载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,可根据自己的喜欢修改对应代码)

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

相关新闻

发表评论

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

联系我们

联系我们

151-1101-0018

在线咨询:
邮件:30115776@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信
关注微信
分享本页
返回顶部