WordPress自带的灯箱效果

本文仅作为基本效果实现方法的备忘,完整的基本+进阶教程请移步Willin先生的此篇文章

在本站实现的效果请见前天的文章的底部以及上一篇文章。这种华丽丽的图片展示效果实在是太有爱了!猛击PP试试~

具体方法(WordPress 2.9以后的版本均可):

在 header.php 的 <?php wp_head(); ?> 之前加入

<?php add_thickbox(); ?>

然后就可以在编辑文章插入图片时用以下代码了:

<a class=”thickbox” href=”图片URL”><img src=”缩略图URL” /></a>

对于多图系列,还要定义一个组,每组图片都用一个名字(自己取一个就是),如下:

<a class=”thickbox” rel=”group1″ href=”图01URL”><img src=”缩略图01 URL” /></a>
<a class=”thickbox” rel=”group1” href=”图02URL”><img src=”缩略图02 URL” /></a>
<a class=”thickbox” rel=”group1” href=”图03URL”><img src=”缩略图03 URL” /></a>

就是这么简单,对于代码的改动只有一条,实在是简单到爆,并且效果实在是很不错的。唯一需要注意的地方就是别把图片和缩略图的位置弄反了(我就这么办了……)。强烈推荐。

Willin先生那里还有对这个叫Thickbox的功能的详细讲解和深度挖掘(2.9-版本的实现、用这个效果打开其他网页),感兴趣的童鞋们可以过去围观一下(传送门在本文第一行)。

感谢Willin先生的好方法。

《WordPress自带的灯箱效果》上有15条评论

  1. 我图片不多,就不使用了,因为会多引入一个脚本和样式表
    对于速度至上的我来说,有点多余了 😉

andy进行回复取消回复