0

wordpress 如何实现全站pjax最好是插件,如果修改主题代码,麻烦说一下思路

1个回答

1

已采纳

这个问题解决起来并不难,翻翻 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,结合情况从实际出发才最重要。

撰写答案