在 WordPress 2.5 版本以后,WordPress 新增了画册功能,你可以将多个图片组合为一个相册,然后显示到 WordPress 的页面或者是文章中。
其实 WordPress 中的 Gallery 画册,属于 WordPress 短代码中的一种,只不过这个是由 WordPress 自己编写好了的,而且在编辑器里面都有相关的设置方法,如果你技术足够强大,你也可以自己编写代码实现相册功能。
在 WordPress 2.5 - 3.5,可以用最简单的短码实现画册功能:
- <gallery>
在 WordPress 3.5 以后可以指定某些媒体的 ID 来创建画册:
- <gallery ids="729,732,731,720">
上面的 ID 参数不一定非要是你上传的多媒体,也可以是网络图片,这样可以更加灵活的控制和管理画册。
可以使用此语法指定几个选项:
- <gallery option1="value1" option2="value2">
您也可以直接在模板中输出画册:
- <?php echo do_shortcode('<gallery option1="value1">'); ?>
也可以这样编写代码:
- <?php
- $gallery_shortcode = '<gallery id="'.intval($post->post_parent).'">';
- print apply_filters( 'the_content', $gallery_shortcode );
- ?>
WordPress 的画册支持以下基本选项:
Order by
指定如何排序显示缩略图。默认值是 menu_order。可选选项:
order
指定排序顺序来显示缩略图,升序或降序。例如排序编号,描述:
- <gallery order="DESC" orderby="ID">
Columns
指定的列数。画廊将包括一个打破标签在每一行的末尾,并计算列的宽度适当。默认值是 3。如果列设置为 0,没有行将包括。例如显示4个分栏:
- <gallery columns="4">
ID
指定的多媒体 ID。画册将显示图像是连接到后。默认的行为,如果没有指定的显示图像附加到目前的职位。例如显示图像 ID 为 123 的画册:
- <gallery id="123">
Size
指定图像的大小使用缩略图显示。有效值包括 thumbnail medium large full 和任何其他额外的图像尺寸,注册 add_image_size()。默认值是 thumbnail。图像的大小为 thumbnail medium large full 可以被配置在后台管理面板下 设置>媒体。例如显示一个中型图像画廊:
- <gallery size="medium">
itemtag
名字的标签使用的封装库中每一项的。默认是 dl。
icontag
名称的使用的标签附上每个缩略图图标在画廊。默认是 dt。
captiontag
名字的标签附上每个字幕的。默认是 dd。例如改变画廊标记使用分区,跨度和标签:
- <gallery itemtag="div" icontag="span" captiontag="p">
Link
图片的连接地址,所以每个图像链接到图像文件。默认值是附件的永久链接。
- <gallery link="file">
Include
逗号分隔连接ID只显示图像从这些附件。
- <gallery include="23,39,45">
Exclude
逗号分隔连接ID排除图像从这些附件。请注意包括和排除不能一起使用。
- <gallery exclude="21,32,43">
文章页的相册显示,WordPress 的后台编辑器就能够创建,可首页也想显示成相册模式,改如何编写代码。
将下面代码到首页相册形式的文章循环内:
- <?php echo do_shortcode('gallery columns="3" size="thumbnail" link="file"'); ?>
这样 WordPress 会自动调取文章内的相册图片,显示方式为:三列、缩略图(后台设置的)、链接到图片。
这儿还要解决一个问题,WordPress 会自动插入一段 CSS 来控制相册的显示,将以下代码添加至 functions.php 文件中:
- // 去除默认相册样式
- add_filter( 'use_default_gallery_style', '__return_false' );
然后自己添加画册样式:
- .gallery-size-thumbnail .gallery-item{
- float:left;
- margin-top:10px;
- text-align:center;
- width:33%;
- }
- .gallery-size-thumbnail img{
- width:128px;
- height:128px;
- }