WordPress优化实例：让你的图页也更美观

11月2日，不得言的腾讯微博收到“暖色调”朋友的留言，询问关于attachment页面图片问题。我做了简单回答，问题似乎并没得到解决。他并没有因此减少打搅我的意思，相反要了我的QQ。在我正忙于索拉查盆地做辛苦劳工之时，进行了不短的讨论。

attachment页面关于图片的翻页显示

奈何没有测试环境，无法全面作答，只好要来主题样式，抽时间整理一下再说吧。不得言回想起刚接触WordPress博客时，遇到的种种困难和阻力，决定给予必要的帮助。对WordPress爱好者的最重要鼓励，对我来说也应尽的义务。

attachment页面优化问题的提出

WordPress在插入图片时，链接 URL选项里，在选择日志链接时。默认情况下，点击日志里的图片将链接到一个新的页面。图片将出现在页面的内容中，如果图片是多张，还可以上一页，下一页的翻看。直接呈现给浏览者之余，对于搜索引擎优化也能起到很好的效果。

在博客刚成立不久正处于SEO调整期间，不得言在调整博客时就曾对其做过优化。可以参看《不得言博客关于is_attachment的优化小记》和《WordPress应用：加上边框让图片更美观》。经过优化后，我的图片页变成这种效果：点击图片打开后，出现的是当前图片页面；图片下方有其所在日志的相关图片；更下方附加了其所在日志的简介。

这样做的目的是，让attachment页变得更加充实。用户通过搜索而来，相对于单一的图片，就有了更多选择。事实上，我查看博客流量统计得知，一个atx690（捷安特山地自行车）的照片常被搜索到，它是我骑车黄河边吃烧烤拍的。对atx690感兴趣的朋友，大都是为了骑车出游，他们对游记比较感兴趣。他们在看到这个图时，肯定也很乐意欣赏一下我的游记。

如何进行attachment页面优化

在WordPress默认主题twentyten里，使用的是品字形图片浏览样式：当前图片在上，显示较大；下侧左右位置分别有前一张、后一张的链接地址，用户通过点击，可以方便的来回浏览。而如果您的博客没有这种效果，那就需要手工去做。

打开当前主题目录，检查是否存在image.php。存在则直接编辑此文件即可；不存在则复制single.php重命名为image.php。注意：如果有attachment.php，也可直接编辑，或者重命名为attachment.php。image.php、attachment.php功能相同，只是前者具有较高的优先级。如果两者同时存在，将先调用image.php内容。

我们将以image.php为例，主题是暖色调提供给我的wp-launch。打开已存在或者你重命名的image.php文件，在第31行找到

<?php the_content(); ?>

义无反顾地删除，用下面的内容替换：

<p class="diy_attachment"><a href="<?php echo wp_get_attachment_url($post->ID); ?>"><?php echo wp_get_attachment_image( $post->ID, 'medium' ); ?></a></p>
<div class="diy_navigation">
  <div class="diy_alignleft"><?php previous_image_link() ?></div>
  <div class="diy_alignright"><?php next_image_link() ?></div>
</div>

打开样式表文件style.css，在最末尾位置加入：

.diy_attachment{
	text-indent:-30px;
	text-align:center;
}
.diy_attachment img,.diy_navigation img {
	margin:5px;
	border:1px solid #ccc;
	padding:5px;
}
.diy_navigation {
	border:1px solid #f3ddac;
	background:#fff3d8;
	overflow:hidden;
	margin-bottom:25px;
}
.diy_alignleft {
	float: left;
}
.diy_alignleft {
	float: right;
}

颜色方面请自行调整，我这么做是为了在我的博客上看起来更美观。

attachment页面优化用到的函数须知

wp_get_attachment_url()函数：获取图片的链接地址，参数只有一个是ID，只要知道$post->ID您可以调用任何attachment链接。

wp_get_attachment_image()函数：获取图片。参数$attachment_id指定图片ID；$size图片大小，默认是thumbnail（缩略图，小图），可以用large（大图）、full（全显示），这里的数值是在“后台-媒体设置-图片大小”进行设定的。也可以用数组指定大小array(32,32)，将是宽高分别是32。本文采用medium中等，把上面的medium替换为其他参数，可以直接有不同的效果。

previous_image_link( $size, $text )：返回前一图片。$size图片大小，默认thumbnail，使这里可使用的参数和上面一样。$text文本内容。previous_image_link( false, ‘返回上一图片’ )将以“返回上一图片”的文字链接方式替代图片显示；previous_image_link(0)或previous_image_link(false)则已图片的标题显示代替图片。

next_image_link()用法一样，功能相反，不在骜述。