在 WordPress 中添加画册 Gallery Shortcode

发布于 2017-11-26 20:24:04 字数 3653 浏览 3714 评论 0

由于本站也是采用 WordPress 搭建，所以段代码会被直接解析，所以为了演示代码，我将中括号改成了尖括号，请在在使用的时候改成中括号。

在 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。可选选项：

menu_order -您可以重新排列图像画廊”选项卡中添加媒体弹出
标题的标题的媒体形象
post_date -排序按日期/时间
rand-随机
Id

order

指定排序顺序来显示缩略图，升序或降序。例如排序编号，描述：

<gallery order="DESC" orderby="ID">

Columns

指定的列数。画廊将包括一个打破标签在每一行的末尾，并计算列的宽度适当。默认值是 3。如果列设置为 0，没有行将包括。例如显示4个分栏：

<gallery columns="4">

指定的多媒体 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

图片的连接地址，所以每个图像链接到图像文件。默认值是附件的永久链接。

file - Link directly to image file
none - No 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;
}

分享到QQ

分享到微博