WP笔记

为wp featured content slider plugin添加pager功能

1. wp featured content slider 插件简单介绍

wp featured content slider是一款wordpress的幻灯片(slideshow)插件,你可以在post的编辑页面将post指定为featured post,这样它就可以在featured content slider中显示。该插件的特色是图片(post中的图片或通过custom field定义的图片)显示在banner右侧,post文字内容显示在左侧,是名副其实的content slider。另外该插件提供功能选项,使你可以自由切换幻灯片效果、切换速度、背景色。幻灯片带有箭头是导航按钮。效果图如下

2. 功能定制

现在我需要让这个slider带有pager功能,把两个导航箭头换成1、2、3、4…按钮,鼠标滑过或点击按钮就可以切换幻灯片,鼠标停在按钮上幻灯片将停止切换。人为控制幻灯片时开启快速模式,忽略设定的效果,例如fade效果。

具体做法如下:

(1)找到输出幻灯片的文件,wp-featured-content-slider/content-slider,第5行到第14行是幻灯片的js脚本,如下

  

其中的pager就是控制是否能显示数字导航功能的参数,需要将它设成显示pager的容器的id,这里我们假定是“#nav”,设定id后脚本也要做相应更改,注意这些数字并不是php语言输出的,而是js自己产生的,修改后的脚本如下

  

这句代码是在显示slider内容的容器前面创建一个id是nav、class是nav的div容器用来防止数字导航按钮。

 

文件18行开始是控制slider的css样式,在这里添加按钮的样式,例如

.nav { margin: 5px 0; position:absolute; bottom:-6px; padding-left:20px; left:0; z-index:999; }
.nav a {margin: 0 5px; padding: 0px 5px; border: 1px solid #ffffff; background: white; text-decoration: none; font: Verdana; font-size: 11px; color:#918756; }
.nav a.activeSlide { background: #CCCAB9; }
.nav a:focus { outline: none; }

做了这些更改后发现数字按钮无法产生,却报了一个错误:

[cycle] terminating; too few slides: 0

像是加载顺序的问题,于是将这段js代码放到文件末尾,再次刷新页面,按钮成功显示。

后续

wp featured content slider 插件是基于JQuery Cycle Plugin的插件。

http://jquery.malsup.com/cycle/more.html?v2.23 – 这里有所有的实例,其中我们需要的例子是jQuery Cycle Plugin – Auto-Pager Demo

该插件的中文翻译不少,大家可以google一下。