巧用 WordPress 缩略图
WordPress 不仅是博客, 很多时候 WordPress 还被用作为 CMS (内容管理系统). 博主们喜欢为每个文章加上统一大小的缩略图, 尤其是信息类平台. 其中比较常用的处理办法是用 custom field 向文章插入图片, 通过上传大小一致的小图或者使用 phpThumb 等工具生成缩略图.
2.7 开始, WordPress 大幅提升多媒体功能, 越来越多人使用 WP 的内置图片仓库. 对这些用户来说, 制作缩略图变得并不那么困难, 在上传图片的时候就会默认生成 150x150 规格的小图 (如果图片高度/宽度不足 150px, 使用原高度/宽度). 那我们可以充分利用这个功能, 在文章列表上加上这个图片作为缩略图. 这样处理各有利弊, 好处是简单, 智能 (不用每次输入缩略图), 坏处是消耗服务器流量.
Okay, 现在要做的就是提取上传生成的小图片, 并放置在文章的适当位置. 我创建了一个文件 thumb.php, 图片获取和调用一起处理, 文件内容如下.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <?php $args = array( 'post_parent' => $post->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image' ); $images = &get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . $post->ID ); $imageUrl = ''; if ($images) { $image = array_pop($images); $imageSrc = wp_get_attachment_image_src($image->ID); $imageUrl = $imageSrc[0]; }else{ $imageUrl = get_bloginfo('template_url') . '/img/default.gif'; } ?> <a href="<?php the_permalink() ?>"><img class="left" src="<?php echo $imageUrl; ?>" alt="<?php the_title(); ?>" width="150" height="150" /></a> |
这段代码会去找第一个上传的图片缩略图 (如果第一个图片被删除, 则找第二个的, 如此类推...), 如果找不到任何上传图片则使用默认图片. 代码中用到 get_children 和 wp_get_attachment_image_src 两个方法, 可以参考下面两个文章.
WordPress Codex - get children
WordPress Codex - wp get attachment image src
然后在文章列表 index.php, 存档页面 archive.php 和搜索页面 search.php 中调用, 调用代码如下.
1 | <?php include('thumb.php'); the_content('Read More...'); ?> |
这段代码是把图片放在文章内容前面, 图片如何摆放需要用 CSS 调整一下布局, 这里就不多说了.
最后我两留两个问题给同学们.
1. 如果图片高度或者宽度不足 150px, 这样做必然将图片拉伸, 很不美观. 用什么办法可以让图片都显示为 150x150, 并居中显示? 提示: 可以用 CSS 实现, 类似方法可以在 Elegant Box 主题中找到.
(答案请看文章《用 CSS 背景属性代替图片 SRC》)
2. 在文章列表中, 我们只希望看到缩略图, 而屏蔽其他所有图片, 除了使用文章摘要去除所有标签样式, 是否有其他方法可以做到?
(答案请看 #16 楼吓我一跳的评论)
English
Sign,深夜更新，不小心看到了。
有空我再来看一次，如果没有人答中问题我就发答案。
PS：答中问题有奖吗？
板凳 貌似评论提交不上去
不用像那些插件重新生成一个文件啊! 以前用的插件会生成文件的呢.
你留下的思考题我得做做。
两个问题值得研究一下~~~
干脆再升级一下算啦，如果post使用外链图片，自动扒到本地再生成缩略图:)
要是缩略图插件也用上mg12的，我的blog就完美了...
留下的题目不会做耶....
我图片都是用外链。。。这个没自动生成的缩略图。。。。
这个和直接用正则式查找图片有什么区别吗？仅仅是这个得到的是缩略的图片（更小？）。。吗？
不过我觉得图片多了速度肯定受影响。。。所以现在加的图片很少了。。。
好难啊。
嗯，最近就正在用WP帮学生会搞一个小CMS
这个缩略图的生成方法我找过很多，没有很完美的。
1.用timthumb ，能抓外站的图，但是要生成缩略图缓存文件。
2.自动掘文章的图出来，但是只限于本站的图片；如果图片为了减少流量而放在flickr 之类的外站就不行了。
而且你的方法中的default image 实在是很笨的方法。没有图就不显示就好了。
3.WordPress 2.9 出了个post-thumbnail，这个值得挖掘一下。
'attachment',
'numberposts' => -1,
'post_status' => null,
'post_parent' => $post->ID,
'orderby' => 'rand'
);
$attachments = get_posts($args);
$noimages = count($attachments);
if ($attachments) {
foreach ($attachments as $attachment) {
$alttxt = $attachment->post_title;
$imgid = $attachment->ID;
$fileurl = $attachment->guid;
$meta = wp_get_attachment_metadata($imgid);
$imgw = $meta['sizes']['thumbnail']['width'];
$imgh = $meta['sizes']['thumbnail']['height'];
$imgext = substr($fileurl, -4);
$fileurl = substr($fileurl, 0, -4);
$fileurl = $fileurl."-".$imgw."x".$imgh.$imgext;
$link = get_permalink();
// construct the image
echo "";
break;
}
}
the_excerpt('');
} else {
the_content('...'.get_the_title());
}
?>
先读取thumbnail然后正则替换将the_content里面的<img>标签替换为空
问题1是不是使用 img 先设定好高度和宽度，然后再background-position:center呢？
第二个问题的代码或许是这样的，没有测试到底能不能用
<?php
include('thumb.php');
$content = apply_filters('the_content', $content);
$content = preg_replace(“/<img[^>]+\>/i”, “”, $content);
?>
太有难度了，有完整的就好了。
没有我现在用的好
直接php截取出文章的第一个图片，哈哈
我都是手工自行引用图片的，一时这些智能的程序有时会导致图片移位等不满意的情况出现，二是自己实在蠢，不懂利用这些功能。
问题1，为a设置width和height都为150px，line-height:150px;text-align:center;img标签不设置width和height
问题2，方法很多，可以建立正则过滤content里除第一个img标签以外的img标签
没看懂
真的和羡慕你的学习和分享精神！
@bolo
头发没干, 夜深人静时适合看书写文.
@励志名言
哈~ 不是出来了嘛.
@underone
缩略图可以用一个 PHP 自动生成.
@fatkun
不会做的听下回分享.
@Jutoy
嗯... CMS 用 joomla 和 drupal 都比 wordpress 好 (我看中它们有购物车功能), 但是那个折腾起来也比较耗时. 简单的这个可以了.
@buzz
其实要做, 也可以挖外网的图, 就写一个类来爬图片和生成缩略图而已. 但是本文是讨论 WordPress 的图片仓库中的缩略图.
另外, default image 的方法不是笨, 有图片显得更加归整. 如果像 cnBeta 那样的结构, 时而有图, 时而无图显得很丑. 当然, 如果文章内容本来就多, 那么缩略图就可有可无了.
@吓我一跳
差不多, 但是不应该用
$content = apply_filters('the_content', $content);这样的话, 独立文章中的图片也会被去掉.
@bolo
问题1. 这样可以, 但我不是这样做的. 下次我讲讲我的处理办法.
问题2. 见 @吓我一跳 的解答.
@行骏
哦耶~ 什么时候我也在茶话会上分享一下.
MG12你好，我现在使用的EasyDigg插件，侧边栏的Widget小工具不能设置，包括侧边标题也改不了，是不是EasyDigg插件没有更新到对应wp2.9.1的原因呢？
这个我现在用不着，先收藏了。
很好的一个方法！
没什么图片上传，没什么图片给它锁
消耗流量不能说是坏处吧，喜欢放图的就要舍得流量哦
very good
thank you
不错，不过我看到了一个更加好的方法
不错主题，偶正在用，谢谢分享！
收藏了
假如有篇文章有很多图片，那他会给每张图片都生成缩略图的，这样太浪费空间了……
有没有好的解决办法呢?
比如只给第一张图片生成缩略图？
@疾风
看这个http://www.neoease.com/wordpress-thumb-trick/#comment-23398
您好，我有一个问题想请教一下：
我利用wp-t-wap插件做了一个wap的站点，但是文章里的图片大小还是跟原来网页里的一样。这样对手机浏览用户来说，很耗流量。 假设我已经为每一张图做好了缩略图，有没有什么办法，将一篇文章里所有图片都替换成对应的缩略图？
这样，读者如果去网站看到的是正常大小的图，用手机浏览文章的时候看到的是缩略图。
谢谢您！
@95daba
可以自己写个程序，用php的gd库转换图片
@bolo 恩，谢谢您的回复。我再查查gd库的资料看看，对php还真不熟：）不知道还有没有其他简单点的方法？
@95daba
要减小图片的体积只能对图片进行转换了
@bolo 恩，我已经为每张大图做好了缩略图，已经转换了。现在问题是，有没有什么办法，能让读者用手机阅读 wap 站里的文章时，文章里的图自动替换为对应的缩略图？
@95daba
对插件进行改造
@bolo 呵呵，好吧，问题又绕回去了，谢谢你的回复，我再研究研究。
我想知道怎么才能调整生成缩略图的质量！！！
博主你好：
1、请教一下文章中嵌入代码框是如何实现的？
2、另外这个留言簿用的是什么插件呢？
先谢谢了！
@isaac 抱歉，可能问题问得有些“离题”了
MG12同学的主机在(mt)么？南宁网通这里访问有点慢呢，352MS，还丢失了1个！
@Android 美国主机好像都这个速度啊，我这里ping是275ms。难道你有更好的美国主机？
PS：博主的主机哪里买的？
正在为缩略图发愁呢，代码又不会编 。晕。。。