利用上传到WordPress文章里的图片，系统会生成一个图集短代码，然后我们就可以用它来给文章添加一张又一张连续不断的图片。
不过通过下面这个方法，我们可以修改主题让它在每篇文章的结尾部分自动添加图集，同时还可以指定图集中的图片数量，并将文章图片排除在图集外。
1. 编辑模板文件
我们需要改动3个模板文件：
- single.php —— 在文章中插入图集
- style.css —— 调整图集样式
- functions.php —— 插入代码实现图集效果
下面的例子以2010主题为基础，在其它主题上的修改方法也是相同的。
首先打开single.php文件，找到the_content()标签，在下一行加上：
<?php pbd_image_gallery(); ?>
这是对我们将要在functions.php文件里生成的函数的调用。
2. 创建函数
pbd_image_gallery()函数将查看当前文章，确定文章中配有的图片，然后显示这些图片供我们使用。
首先需要生成一个用以查找文章中图片的query查询。在functions.php的结尾部分（?>结束标签之前）加入下面的代码：
function pbd_image_gallery() {
global $post;
$limitImages = 8; // How many images in total to show after the post?
$perRow = 4; // How many images should be in each row?
$featuredID = get_post_thumbnail_id($post->ID);
// Build our query to return the images attached to this post.
// We query one image more than we intend to show to see if there
extra images that won't fit into the gallery here.
$args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'numberposts' => $limitImages + 1,
'orderby' => 'menu_order',
'order' => 'ASC',
'post_parent' => $post->ID,
'exclude' => $featuredID
);
$images = get_posts($args);
第一行声明这是一个函数，之后抓取变量$post（该变量中含有当前文章的相关信息，如ID等）并进行若干设置（总共需要显示的图片数量，每行显示的图片数量等，可根据需要自行更改数值）。
接下来用get_post_thumbnail_id函数找到被用于缩略图的图片ID，稍后我们会用到这些ID信息以确保对应的图片不显示在图集里。
剩下的代码就是我们的查询。
3. 输出HTML
现在我们已经有了图片的PHP代码，接下来需要把他们转换成HTML。在刚才添加到functions.php中的代码后加入：
// Assuming we found some images, display them.
if($images) : ?>
<div id="images">
<h2>Image Gallery</h2>
<ul>
<?php
// We'll use the $count here to keep track of what image we're on.
$count = 1;
// Print each individual image.
foreach($images as $image) {
// Only show the image if it is within our limit.
if($count <= $limitImages) : ?>
<li<?php
// Each end image in a row gets the "lastimage" class added.
if($count % $perRow == 0) { echo ' class="lastimage"'; } ?>>
<a href="<?php echo get_permalink($image->ID); ?>">
<?php echo wp_get_attachment_image($image->ID, 'gallery-thumbnail'); ?>
</a>
</li>
<?php
endif;
$count++;
} ?>
</ul>
这段代码先检查是否找到任何图片（如果没有找到图片，代码将不执行任何操作）。
然后输出一些简单的HTML信息（定义图集的DIV块、标题以及列表的开始部分）。
函数始于第七行，首先生成一个名为$count的变量，该变量将记录当前浏览图片。
之后我们生成一个循环，使最终图集能够循环演示。调用每一个图片时都需要检查是否达到之前设定的图片最大数量，然后显示图片。
然后我们在设计图集样式时，可以在图集每行的最后一张图片上用到CSS类。因此我们用第15至17行代码来判断当前图片是否是每行规定的图片数量的倍数。
通过wp_get_attachment_image函数我们可以用图片ID获取并显示图片，甚至可以设置图片大小。可以在functions.php文件的开始部分加上下面的代码以定义图集的缩略图大小：
add_image_size('gallery-thumbnail', 145, 145, true);
图片ID的作用和文章ID一致，因此我们可以用get_permalink()函数将图片链接到图片页面。
4. 添加一个“More”链接
某篇文章中可能有很多图片，而我们只想显示前8张。由于我们在query查询中已经生成了函数，所以现在需要做的就是查看最终返回的图片总数是否大于最初的设置，如果的确大于，链接到第一个图片。
<?php // Did we have more images than our limit? Then create a "More" link. // This link goes directly to the first image. if( count($images) > $limitImages) : ?> <p class="photo-more"> <a href="<?php echo get_permalink($images[0]->ID); ?>">View More Images »</a> </p> <?php endif; ?> </div> <?php endif; }
5. 设计图片列表样式
最后一个步骤——美化图集列表。在style.css文件里加入下面的代码：
#images ul {
list-style: none;
margin: 0;
height: 1%;
overflow: hidden;
}
#images li {
width: 145px;
height: 145px;
float: left;
margin: 0 20px 20px 0;
}
#images li.lastimage {
margin-right: 0;
}
为防止缩略图的大小没有得到正确地调整，这里的列表项的宽度和高度最好和第三步中设置的图片大小一致。
到这里就大功告成了！
分类：新闻资讯