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>
这个结构需与第三步中的一一对应。
注意:操作成功与否,最重要的是下一页的样式名称和链接是否正确!
你可能对这些文章感兴趣:
- WordPress获取文章第一个标签名:get_the_tags()和wp_get_post_tags()
- Xhtml+css基础第6课 浮动
- WordPress如何使文章列表样式多样化
- 制作主题必备的css样式分享
- WordPress问答插件DW Question Answer美化版分享
- 浅析WordPress文章形式
- 零起点php入门第11课-php函数(2)
- WordPress 文章页面如何调用当前作者的其他文章列表
- WordPress获取当前文章别名
- WordPress新用户注册添加验证问题(修正版)
- 给WordPress友情链接添加图标,并在新窗口打开友情链接
- 零起点php入门第2课-php变量和常量
- 让好搜搜索在新窗口打开搜索结果
- Yusi主题百度分享样式显示不正常解决办法(100%可行)
如有疑问,请前往问答中心反馈!
反馈