这个问题解决起来并不难,翻翻 pjax 的 github 就略知一二。恰好之前制作 typecho 模板,使用过 pjax 来实现全站无刷新,便来一答。 首先,编辑 WordPress 当前主题的 footer.php ,在 </body> 标签结束之前,引入 jquery.pjax.js。 <script src="http://www.typecho.biz/usr/themes/helloty-66a/js/jquery.pjax.js"></script> 在主题后台选项的 JavaScript 执行区域加入下面这段代码以使用 pjax。当然你也可以单独写成一个 js 文件在 jquery.pjax.js 后引入。 $(function(){ $(document).pjax("a", '#main', {fragment:'#main', timeout:6000}); $(document).on('pjax:send', function() { $('#loading').show(); }) $(document).on('pjax:complete', function() { $('#loading').hide(); }) }) 其中第二行的 a 表示全部超链接,#main 表示要修改内容的容器,这里需要结合实际情况做出改变,比如常见一些主题使用的是 .container;如果你要修改为 body 我也不介意,只不过那样似乎是为了“无刷新”而去无刷新了。 最后还是建议放弃通过 WordPress 插件造就一切的思想,虽然它方便了不少非专业人士添加新功能,但是各个主题多变,甚至有一些主题压根没有按照规范使用 wp_head() wp_footer() 函数以方便二开引入js,结合情况从实际出发才最重要。
这个问题解决起来并不难,翻翻 pjax 的 github 就略知一二。恰好之前制作 typecho 模板,使用过 pjax 来实现全站无刷新,便来一答。
首先,编辑 WordPress 当前主题的 footer.php ,在
</body>
标签结束之前,引入 jquery.pjax.js。在主题后台选项的 JavaScript 执行区域加入下面这段代码以使用 pjax。当然你也可以单独写成一个 js 文件在 jquery.pjax.js 后引入。
其中第二行的 a 表示全部超链接,
#main
表示要修改内容的容器,这里需要结合实际情况做出改变,比如常见一些主题使用的是.container
;如果你要修改为body
我也不介意,只不过那样似乎是为了“无刷新”而去无刷新了。最后还是建议放弃通过 WordPress 插件造就一切的思想,虽然它方便了不少非专业人士添加新功能,但是各个主题多变,甚至有一些主题压根没有按照规范使用
wp_head()
wp_footer()
函数以方便二开引入js,结合情况从实际出发才最重要。