在 WordPress 中添加画册 Gallery Shortcode - 文章教程

在 WordPress 中添加画册 Gallery Shortcode

发布于 2017-11-26 字数 4602 浏览 2810 评论 0

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

在 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。画册将显示图像是连接到后。默认的行为,如果没有指定的显示图像附加到目前的职位。例如显示图像 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;
}

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

Jay

文章 0 评论 0

guowei007

文章 0 评论 0

2668157715

文章 0 评论 0

HY阳

文章 0 评论 0

想挽留

文章 30 评论 3