使用FlexSlider幻灯片替换WordPress默认相册样式

一直很喜欢FlexSlider的幻灯片效果,简单又不失漂亮。而相比于wordpress的默认相册样式,真得是天壤之别。wordpress的默认的相册样式只是将图片使用缩略图一张一张的展示出来,就像下图一样,没有什么美观可言。

gallery- 85Ryan

当然也可以使用其他的一些相册或者是幻灯片插件,但是放着wordpress自身的功能不用,是不是有点舍近求远呢。更何况我本身就不喜欢使用太多的插件。因此,将WordPress的默认相册样式直接使用FlexSlider幻灯片效果替换是一个两全齐美的方法。

先到这里来看下使用FlexSlider替换WP默认相册样式的效果吧。怎么样?是不是心动了?跟着来做吧!

了解HTML结构

WordPress默认相册自动生成的Html结构如下左边,右边为FlexSlider的Html结构:

gallery-html

可以发现与FlexSlider基本相近,这就为我们后面的工作提供了基础。我们只需要将默认结构中的<dl>标签换为<li>标签就可以了,其他的多余标签完全可以忽略。

去除默认CSS样式

WordPress会自动插入一段css来控制相册的显示,果断去除之。在主题的functions.php文件中添加以下代码,就可以轻松搞定了:

[php]
// 去除默认相册样式
add_filter( ‘use_default_gallery_style’, ‘__return_false’ );
[/php]

调用相册

因为去除了默认的相册样式,并且我们需要自己定义样式,因此这里不使用

[php]<?php the_content(); ?>[/php]

来调用相册,这里需要使用相册ShortCode来调用,代码为:

[php]<?php echo do_shortcode(‘{gallery columns="1" size="full" link="file"}’); ?>[/php]

**ps:复制上述代码时,请将“{ }”符号换成“[ ]”符号。
这样会自动调取文章内的相册图片,显示方式为:一列,完整尺寸,链接到图片。除了这三个标签外,我们还需要用到itemtag这个标签将默认的dl标签改为li,然后再在外面加一个class为flexslider的div层。即最终的调用相册代码为:

[php]
<div class="flexslider">
<?php echo do_shortcode(‘{gallery columns="1" size="full" link="file" itemtag="li"}’); ?>
</div>
[/php]

**ps:复制上述代码时,请将“{ }”符号换成“[ ]”符号。
到这里html结构部分就已经完全OK了。

FlexSlider控制

将下面的代码丢到<head></head>中,试试效果吧。(不要忘了加载FlexSlider jQuery类库与CSS样式哦)

[js]<script type="text/javascript">
//幻灯片
$(window).load(function() {
$(‘.flexslider’).flexslider({
selector: ".gallery > li",
animation: ‘slide’,
controlNav: false,
directionNav: true,
slideshow: true,
slideshowSpeed: 4000,
animationSpeed: 300,
smoothHeight: true,
prevText: "&larr;",
nextText: "&rarr;",
});
});
</script>[/js]

**ps上述参数可以根据自己的需要更改。

最后微调美化

完成上面的操作我们就已经完成了90%了。最后有一个地方需要稍微作下调整。在默认样式中,WP在每列的后面加了一个<br>标签来换行,清除浮动,如果保留这个标签,幻灯片效果到这个地方时会变成空白,因此,我们需要在CSS中将这个标签隐藏就可以了:

[css]
.gallery br{display:none;}
[/css]

大功告成,是不是很棒呢,赶紧试下效果吧!EOF

文章标签:

使用FlexSlider幻灯片替换WordPress默认相册样式》有14条评论

  1. 留名,学习了,晚上回去自己也捣鼓一下。
    ————
    话说,dl不需要替换成li啊,js的selector不是可以改嘛

    1. 回复@Monad : 呵呵!我是比较喜欢FlexSlider简洁、清爽的效果的。你说的这个我不是很了解,我先去看下DEMO。
      谢谢来访哦。
      多多交流。

    1. 回复@JJlins : 是的。而且woothems的幻灯片效果是我特别喜欢,呵呵。
      谢谢来访。有空常来哦。本站持续更新的。

发表评论

GRQ5