首页 > 新闻资讯 > 给WordPress文章自动添加图集

给WordPress文章自动添加图集

21条评论
标签:
更多

利用上传到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 &raquo;</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;
}

为防止缩略图的大小没有得到正确地调整,这里的列表项的宽度和高度最好和第三步中设置的图片大小一致。

到这里就大功告成了!

来源

WordPress啦编译

* 版权声明:作者WordPress啦! 转载请注明出处。

#1
方法好是好,就是不敢用,我用的插件太多,已经不是原版的wp了,不敢改。
#2
这个很好用呀。等研究研究加到博客上。 谢谢共享,呵呵
#3
非常有用的功能,特别是一些需要用图片展示的功能!
#4
真不错的功能,哈哈,下次可能会有用喔
#5
学习了,真不错!
#6
呵呵,学到了,不过感觉不是很麻烦哈。
#7
非常不错,谢谢博主分享
#8
原来如此
#9
这篇文章写得好,我刚好用得到
#10
好方法,不过不敢用,以前传的好多图片大小不一样的
#11
留言很难··有时候好几次的验证码错误··就放弃了··
#12
建意博主把验证码去掉,提高用户体验。
#13
效果很好看········
#14
很不错的文章,改天在自己的博客上试试。
#15
wordpress内置功能真是越来越强大了。
#16
这个不错啊。呵呵
#17
内置功能真是越来越强大了。
#18
杯具啊 我看不懂嘞
#19
很深不可测啊!好文章,精贴啊!
#20
我看了此文,发现与我想要的效果不一样。我在后台媒体库中上传了图片,现在想在其它页面调用(非文章和页面),怎么写输出代码?谢谢!
#21
这个可以有.收下了