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音乐库,就是不知道什么时候搭建好啰……

发表回复

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