^ 回到顶部
  • 人生没有定律,每个人都有自己的节奏
  • 若文中代码有问题,可能是少了几个问号,留言一定会解决!
  • 希望你的坚持,都是因为热爱,而不是因为不甘心
  • 站点文章结尾新增了赞赏通道
  • 那些不愿意让你吃亏的人,才是真正值得你深交的人,也是值得你付出时间的人

WordPress实现手动点击ajax无刷新加载分页文章

xiu 主题是自带这个功能的,可以设置自动加载还是手动加载,今天陌小雨教大家如何添加这个掉渣天的功能:WordPress 实现手动点击 ajax 无刷新加载分页文章

方法是:

1、下载 infinite scroll 插件:下载地址

2、把 jquery.infinitescroll.js 文件和 behaviors/manual-trigger.js 文件复制到自己主题的 js 文件夹(没有的话就自己新建一个)。

3、在主题的 header.php 文件</head>之前添加引用代码(前提是主题已经引入了 jquery 库文件):

<script type="text/javascript" src="<?php bloginfo('template_url');>/js/jquery.infinitescroll.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url');>/js/manual-trigger.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var infinite_scroll = {
		loading: {
			msgText: '',
			finishedMsg: '<div class="pagenavi"><a rel="next" href="javascript:void(0);">所有文章均已加载完成</a></div>' //加载到最后一页的提示文字
		},
		behavior: 'twitter',
		nextSelector:".pagenavi a",//分页的 a 标签
		navSelector:".pagenavi",//分页的样式名称
		itemSelector:".post", //每篇文章的样式名称
		contentSelector:"#section" //列表的样式名称或 ID 名称
	};
	$( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll, function(){
		$('.pagenavi').insertAfter('#section'); //加载下一页后,分页条显示的位置
	});
	$( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );
});
</script>

4、修改主题的 html 结构,以上 js 对应的 html 结构(参考):

<div id="section">
	<div class="post">
		单独一篇文章
	</div>
	<div class="post">
		单独一篇文章
	</div>
	<div class="post">
		单独一篇文章
	</div>
	<div class="post">
		单独一篇文章
	</div>	
</div>
<div class="pagenavi">
	<a href="#">查看更多</a>
</div>

这个结构需与第三步中的一一对应。

注意:操作成功与否,最重要的是下一页的样式名称和链接是否正确!

历史上的今天:
让小雨知道,这篇文章帮到了你

展开阅读全文

评论 0

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

登录

忘记密码 ?

切换登录

注册