WordPress搭建日记 Vol.2 – AJAX、播放器、图片灯箱

今天是搭建WP博客的第二天,和往常一样,又熬夜了半天 (= _=)”

这次因为添加网易云音乐的播放器实现了整站AJAX无刷新的加载效果,顺带添加了图片灯箱的插件。尽管因为2014本身的布局问题,AJAX实现效果并不完美,但是足够使用了。

配置AJAX局部刷新

上次搭建博客的过程中,我想给博客放点BGM增添一些生机,恰好那时我正在听ZUN的专辑《蓬莱伝説》,就在侧边栏加上了网易云的外链播放器。

然而当我实际加上去以后,发现并没有那么理想,原因在于博客的页面都是静态的,每次跳转文章页面之后都会刷新播放器的进度,严重影响了访问体验。后来我又发现,可以通过增加AJAX局部刷新技术解决这个问题,简而言之,AJAX使得站内的页面跳转只会刷新内容部分。

在WordPress上,可以使用插件实现AJAX,我使用的插件是 Advanced AJAX Page Loader,虽然很长时间没更新了,不过在官方插件库仍有所保留,但即使如此,安装方式也只能下载到本地然后再上传到后台……

这个AJAX插件是开箱即用的,整个设置页面非常直观,在一般情况下,它可以自动识别主题的内容部分(Content Element)刷新页面。

Loading Image则可以设置GIF图片作为加载时的动画,插件本身内置了许多的GIF,也可以自行上传,在这里我上传的是高速旋转的键山雏(


不过说来这个AJAX插件也不是完全没有问题,2014主题有一个特色文章的封面置顶位,但是代码结构却是在内容+右边的侧边栏上方的位置,导致打开AJAX刷新时并不能识别到这个位置,置顶的文章会驻留在上方(或者如果直接打开文章,主页反而会丢失特色内容)

虽然临时用window.location.pathname判断url的方式(我甚至又去研究了一下js和jQuery)在主页的情况下可以隐藏特色内容,不过PHP的结构还是有点难改。目前只能先不使用2014自带的置顶功能了,以后内容多了可以放一些无关紧要的广告,或者也有可能关掉AJAX(


图片灯箱插件

考虑到以后应该会发布很多图片为主的「文花帖」(游戏截图、壁纸、摄影等等),浏览器自带的图片查看并不是特别方便,因此有必要配置一个灯箱(Lightbox)浏览图片的插件。

许多灯箱也是基于上述AJAX技术的,无需刷新就能加载全屏的图片查看器:

那么我使用的是 Lightbox with PhotoSwipe 插件,可以在后台的官方插件库下载到,很容易安装。PhotoSwipe 同时是一个开源的灯箱工具,也就是说它不仅限是WP插件,也可以在其他基于Web开发的程序项目中使用,不过在我的博客上功能也足够用了。

此外对比了其他的一些灯箱插件后,结果也只有PhotoSwipe能够兼容上面的AJAX刷新插件跳转(其他的灯箱会在跳转后失效),并且还支持触摸屏的缩放、显示旁白、相机EXIF信息等功能,简直完美!


目前的配置基本达到域主满意的效果了,下次应该会把网易云替换成自建的WebDAV音乐库,就是不知道什么时候搭建好啰……

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Find out more about Webmentions.)