WordPress引入PJAX功能实现播放器播放音乐的时候不切换歌曲

  • WordPress引入PJAX功能实现播放器播放音乐的时候不切换歌曲已关闭评论
  • 50 次浏览
  • A+
所属分类:WordPress教程

  

WordPress引入PJAX功能实现播放器播放音乐的时候不切换歌曲

  今天一个朋友给我一篇文章,让我看看,我简单的看了一下是一篇关于如何在 WordPress 中使用 PJAX
功能的文章,说实话,很久之前我就想使用这个功能,因为通过这个功能可以实现播放器播放音乐的时候不切换歌曲等等,但是后来就逐渐忘记和放弃了。

  为什么放弃,我说说我的看法,第一个就是我的站点不适合这个功能,至少我见过的站点使用这个功能的还是很少的,可能我不知道这个功能的利用广泛度,但是就我目前看到的还是比较少的。二个就是这个功能可能引起百度统计或者类似站长统计的代码失效,但是网络上面肯定有相关解决办法,可是我又不想为了使用一个功能而去改变另一个功能,得不偿失。最后就是需要很多适配工作,虽然
PJAX 看起来很酷炫,局部刷新,前进后退完全无压力等等,但是更多的就是站点主题的适配等。

  看完了我的顾虑之后,如果你还是想要使用这个功能,那么我就基于 DUX 给大家简单的说说如何实现。

  首先我们下载一个文件,这个文件由 inlojv 博客博主 JV 提供,详见:
http://www.inlojv.com/4256.html,那么这个文件已经被封装好了,也就是三个部分合并为一个文件,我们需要做的就是直接引入就可以了,这三个部分为:jqeury_1.11.1
+ PJAX + 执行js。下面是一段执行代码:

  

/*! jQuery v1.11.1 | 此处省略 */
  /*PJAX封装代码 | 此处省略 */
  /* 需要自己修改的代码 | 将#main改为你的主体容器id */
  $(function() {
  $(document).pjax('a[target!=_blank]', '#main', {fragment:'#main', 
timeout:6000});
  $(document).on('pjax:send', function() {
  $('#main').fadeTo(700,0.0);
  });
  $(document).on('pjax:complete', function() {
  $('#main').fadeTo(700,1);
  });
  });

  执行代码中已经解释的比较清楚了,#main 修改为我们自己主题的主题容器 ID,可能很多人并不明白这个所谓的主体容器 ID
是什么,我在我的部分文章中也提到过这个用词——“主体容器”。

  下面就拿 DUX 来作为演示,有兴趣的可以耐心看看,学会举一反三。

  

  

WordPress引入PJAX功能实现播放器播放音乐的时候不切换歌曲

  通过上面两张图片,我们可以简单的看到,我在元素审查中点击的项目对应在页面中着色的部分就是我们需要自己的审查和筛选的了。比如第一个

<header class="header">...</header>

  那么这个头部的主体框架 ID 就是 header ,同样的:

<section class="container">...</section>

  主体框架的 ID 就是 container 了,但是这个并不代表你上面的执行代码中的 #main 就要修改为 .container
,因为一个主题存在同样类名的情况也是有的,DUX 就是一个典型的例子,该主题里面存在多个 container ,如果仅仅是简单的将 #main 替换为
.container ,后果就是站点乱了套了,那么想要解决这样情况的最好办法就是在主体框架中再加一个类名,同样以 DUX 为例,我们需要做的事情就是给
section 再添加一个类名,如下图:

  

WordPress引入PJAX功能实现播放器播放音乐的时候不切换歌曲

  如果你也是 DUX 主题的话,那么你需要修改的文件为主题根目录下的 index.php 文件。直接在 section 对应的 class
类中添加一个类名,这个类名自定义,但是要和上面最开始的执行代码中一致即可。

  添加完毕之后,我们就可以看到效果了,具体效果这里不再展示了。有兴趣的用户亲自尝试一下最好了。下面还是简单的说一下简易步骤:

  修改执行代码末尾部分的 #main 为你自己的主体 ID

  在文件头部或者底部引入该 JS 文件,不知道如何引入请自行百度

  • 我的小程序
  • 这是我的小程序扫一扫
  • weinxin
  • 我的熊掌号
  • 这是我的熊掌号扫一扫
  • weinxin
avatar