2008-12-14
仲子说隆重发布Wordpress首页文章缩略图显示插件Image For Homepage 1.0版
标签:Image For Homepage, PHP, wordpress相信使用Wordpress搭建博客的人都有这样的经验，那就是首页往往只显示摘要，这样做有多方面的考虑，包括页面简洁以及搜索引擎优化等。但是由于显示摘要，往往会过滤掉文章内容中的HTML标签，自然也就过滤掉了图片标签。但是从首页的美观角度上来说，我们又希望能够为每篇日志添加一个小的图片（缩略图），来丰富网站首页的内容。
今天，我也突发奇想，打算在Wordpress的首页既显示每篇文章的摘要，又显示每篇文章里的第一张图的缩略图（如果有的话）。于是上网查了查，发现有人宣称通过“自定义字段”的方法可以实现这个功能，但是第一，我找不到这个插件；第二，凡是要修改数据库的，都感觉比较烦，因为会造成许多副作用，于是抛弃不用。接着又上网找了找，发现了两款外国人写的插件，也能够实现这个功能，但是 实际一用，就发现诸多问题，包括显示图片变形、插件安装麻烦、不能在首页显示非本站的图片以及其它一些功能缺陷等。
于是怒了，决定自己来写一个插件，把我自己能够想到的功能全部加上。经过一个晚上的努力，这个名为Image For Homepage（IMF）的Wordpress首页文章缩略图显示插件诞生了。它能够自动在首页里显示每篇日志里的第一张图片的缩略图。在保证首页打开速度的前提下美化网站的首页。现在发布1.0版：
下载地址：（下载链接已更新至1.3版，最新版）
纯插件版（1.3版）：http://www.wangzhongyuan.com/static/image-for-homepage.zip （14.46 KB, MD5:57fba5745524692bcb282fcbad97d2bb）
插件完整版（1.3版）（没什么区别，只是多一个样图而已）：http://www.wangzhongyuan.com/static/image-for-homepage-full.zip （359.73 KB, MD5:931787cd8d4fb232035eb60f249743b5）
提醒您注意：如果您喜欢Image For Homepage这个插件，请您到仲子说下载，仲子说不为在别的网站下载此插件造成的损失负责。
免责声明：作者对这个插件保留一切权利，您仅在个人使用时可以免费下载并使用这个插件，本人以及仲子说不为您使用此插件造成的任何后果承担责任。您使用本插件，即表示您接受这些条目。
WordPress版本要求：本插件在Wordpress2.1版以及Wordpress2.7中均测试使用正常，但不保证一定支持其它WordPress版本。您如果在使用中遇到问题，可以到插件的官方主页上提出。
** IFH安装方法 **
1、下载本插件的Zip文件，并解压
2、将插件文件夹image-for-homepage上传到插件目录中，通常是wp-content/plugins/
3、激活插件
4、在模板的首页index.php中，找到the_excerpt()，在其之前添加if (function_exists("image_for_homepage")){image_for_homepage(true, 1, 200, 0, 'right', 'IFHL', '<div>', '</div>'); }即可
更多的调用函数可以参见：《Wordpress首页显示日志缩略图插件IFH的典型调用》
插件使用效果图：
Image For Homepage 1.0版发布文档：
*** ImageForHomepage ***
Plugin Name: Image For Homepage
插件中文名：Wordpress首页文章缩略图显示插件
插件的地址: http://www.wangzhongyuan.com/tag/image-for-homepage
描述: This WordPress Plugin can help you show image on your homepage automatically. 这个插件可以帮助您在首页里自动显示每篇文章中的第一张图片的缩略图
最新版本: 1.3
作者: Zhongyuan Wang (仲子)
作者的网站: http://www.wangzhongyuan.com/
通常在Wordpress首页如果只是显示摘要，会自动过滤掉HTML标签，从而使得页面过于单调。使用Image For Homepage(IFH)插件，能够帮助您在主页上自动显示每篇文章的第一张图片（不论这个图片是来自您的网站还是别人的网站），从而丰富首页上的内容。本插件不会修改数据库字段，因而您不用担心数据表被修改得面目全非。同时，本插件能够自动生成缩略图缓冲文件，从而减小首页大小，提高页面打开速度。
** IFH特色&版本历史 **
2008-12-21 1.3版
1、使得创建缓存文件夹更为智能，能够自动为安装在网站某一个子目录下的Wordpress也自动生成缓存文件夹
2、缩略图质量大大提高
3、修正指定比例压缩时，上下裁剪不太合理的bug
4、修正居左调用不起作用的bug
5、新添加多个实用的函数调用参数，例如：
image_for_homepage(true, 1, 0, 200, 'center', 'IFHL', '<div>', '</div>');
center表示在首页将图片居中显示，改为right则居右显示，left居左显示；
IFHL表示给图片自动加上该文章的链接，如果改为IFHL_blank，则点击图片，是在新窗口中打开文章。
更加详细的改进介绍，可以查看《Wordpress首页显示日志缩略图的插件Image For Homepage发布1.3版》
在此特别感谢idea-cool的许多宝贵意见，让这个软件有了质的提高！
2008-12-14 1.0版
1、不修改数据库文件，只需一行代码即可在首页自动显示缩略图
2、不论文章中的图片是本站的，还是来自其他站点的，都能够正常显示
3、真正为首页生成缩略图，这样的好处是减小首页的体积，与首页显示“伪缩略图”相比，能够大大提升首页打开速度
4、您能够自己定制缩略图的大小，并且不会造成图片变形
5、插件默认提供“缩略图居左”，“缩略图居右”两种显示方式
6、插件安装和使用都十分简单，没有复杂的配置过程
** 高阶说明 **
1、为首页生成的缩略图缓冲在wp-content/uploads/ZhongziImageCache中，如果您的wp-content/upload/目录不具有写权限，则插件可能无法正常使用。这时，您需要手动在wp-content/uploads下创建ZhongziImageCache目录，并为它赋予写权限。
2、如果您在模板中index.php中没有发现类似the_excerpt()的函数调用，相反，您发现the_content()的函数调用，那说明您的首页模板中，显示的是全文，建议您将the_content()替换成the_excerpt()，并在the_excerpt()前面添加if (function_exists("image_for_homepage")){image_for_homepage(true, 1, 200, 0, 'right', ", '<div>', '</div>'); }。
3、更复杂的函数调如下：
函数的语法为:
image_for_homepage($resize=false, $resize_type=1, $width=", $height=", $class=", $id=", $prefix=", $suffix=")
其中:
1、 resize: 决定插件是否要为其生成实际缩略图，并将其缓冲在wp-content/uploads/ZhongziImageCache的文件夹中。true表示要，false表示不要。
2、 resize_type: 调整大小的类型，0为直接生成缩略图，不管图像是否失真；1为调整大小时，保持原有图像的特性。通常这个值为1。
3、 width: 缩略图的宽度。
4、 height: 缩略图的高度。
5、 class: 您可以指定生成的<img>标签的class属性的值
6、 id: 您可以指定生成的<img>标签的id属性的值
7、 prefix: 您可以指定生成的<img>标签的前缀
8、 suffix: 您可以指定生成的<img>标签的后缀
典型用法：
image_for_homepage(true, 1, 200, 0, 'right', ", '<div>', '</div>');
表示：自动为每篇文章的第一张图生成缩略图，并显示在首页上，缩略图的宽度为200，高度指定0意味着保持原来图片的比例来生成缩略图，right表示缩略图在首页中居右显示（您可以查看含效果图的Zip压缩包中的screen.png），<div>以及</div>为img标签的前后缀。
您可以方便的修改其中的参数，来为您的首页定制图片的显示大小以及位置，例如：
(1)首页显示每篇日志对应的缩略图高为200，宽保持比例缩小：
image_for_homepage(true, 1, 0, 200, 'right', ", '<div>', '</div>');
(2)首页显示每篇文章摘要对应的缩略图高为200，宽也为200，强制缩小：
image_for_homepage(true, 1, 200, 200, 'right', ", '<div>', '</div>');
(3)首页为每篇文章显示的图片自动居左：
image_for_homepage(true, 1, 200, 0, 'left', ", '<div>', '</div>');
希望您能喜欢这款插件～
本文可以自由转载，转载时请保留全文并注明出处：
转载自仲子说 [ http://www.wangzhongyuan.com/ ]
原文链接：http://www.wangzhongyuan.com/archives/536.html
diea said,
2008年12月16日 at 18:07
你好，我今天下了你的插件来用，怎么用不起呢？
diea said,
2008年12月16日 at 21:04
Warning: mkdir() [function.mkdir]: No such file or directory in C:\xampp\htdocs\wordpress\wp-content\plugins\image-for-homepage\imageForHomepage.php on line 33
Can't create the cache folder, please see the Readme file
仲远 said,
2008年12月16日 at 21:23
to diea:
你好，你的这个错误就是无法自动创建缓冲文件夹的错误，通常是由服务器上的权限控制导致的。
你有三个解决办法：
1) 在C:\xampp\htdocs\wordpress\wp-content\uploads下面，创建一个名为“ZhongziImageCache”（不含引号）的文件夹（可能您还需要赋予写权限）；
2）修改插件imageForHomepage.php中$destinationDir的值，改为您希望存放缩略图的文件夹位置（必须已经存在），通常这个绝对路径是网站根目录开始的。然后再将imageForHomepage.php上传到服务器上的plugins文件夹下，替换原来的imageForHomepage.php ；
3) 把image_for_homepage函数调用的第一项从ture改为false 。
diea said,
2008年12月17日 at 18:02
你好能加我qq聊吗？
290772100
迫切想用上你这个插件，非常不错！
myway said,
2008年12月20日 at 23:04
在我的themes的index.php中既没有the_content()也没有the_exerpt()
那么咋搞？？
仲远 said,
2008年12月21日 at 0:47
to myway：
两个函数都没有，那不太可能吧，那首页显示啥内容？
我看了一下你的网站，如果是你的网站现在所使用的模板green-light模板，应该是有the_content('more...');
但是首页就将全文内容显示出来：
（1）打开速度慢，尤其图片多的话；
（2）对于搜索引擎优化很不利。
myway said,
2008年12月22日 at 0:15
index在这里，你看看
http://dl.getdropbox.com/u/361665/index.php
是的，是用green-light，我找了半天都没在wordpress中找到显示部分内容的设定选项，能告诉我不？？
Wordpress首页显示日志缩略图的插件Image For Homepage发布1.3版 仲子说 Image For Homepage, PHP wordpress said,
2008年12月22日 at 15:12
[...] 下载地址：点击这里 [...]
仲远 said,
2008年12月23日 at 10:20
to myway,
在index.php中，有如下代码：
<?php if (is_search()){
the_excerpt();
}else{
the_content('more...');
}
?>
你改为
<?php if (is_search()){
the_excerpt();
}else{
if (function_exists("image_for_homepage")){image_for_homepage(true, 1, 0, 200, 'right', 'IFHL', '<div>', '</div>');}
the_excerpt();
//the_content('more...');
}
?>
Wordpress首页显示日志缩略图插件IFH的典型调用 仲子说 Image For Homepage, PHP, seo wordpress said,
2008年12月24日 at 15:54
[...] 最近，本站发布了实现Wordpress首页文章缩略图Image For Homepage（简称IFH）的插件，详见《仲子说隆重发布Wordpress首页文章缩略图显示插件Image For Homepage 1.0版》。为了方便大家的使用，本文将要介绍IFH的一些典型使用方法。 [...]
啦啦啦 said,
2008年12月29日 at 3:45
实在是很好用啊,,,我原来以为只是首页显示缩略图,,还想说什么时候能够全部页面显示呢,,结果装了之后发现的确是全部显示的,,很棒..而且用起来很简单.
不过因为IFH的初衷是让摘要伴随图片,这样显得文章不枯燥对吧,, 当然考虑到缓存速度之类的,,你用缩略图存入本地文件夹里,,这样是变快了,,但是如果我想用center模式,,必然图片会变大才美观,那么意味着缩略图的大小其实和原图片差不了多少了吧?
能不能有另外的方法使得可以直接调用外链图片的地址显示原图呢?
我是新手,,可能没说的很明白,,,不好意思啊...
仲远 said,
2008年12月29日 at 15:17
to 啦啦啦:
谢谢您对这个插件的关注。
(1)如果使用Center模式，确实是缩略图和原图大小差不多。这种模式或许只是比较适合那种每篇文章都一大堆图片的博客。
(2)如果是外链图片，目前已经是直接调用外部的那个图片链接:)，不会在你的服务器上产生缩略图文件，因此也不会占用服务器额外的空间。
ZeroDream said,
2008年12月30日 at 15:19
为什么我创建了缓存目录也给了写入权限
他还是显示“Can't create the cache folder, please see the Readme file”
啦啦啦 said,
2008年12月30日 at 23:24
我明白了,,谢谢`
仲远 said,
2008年12月30日 at 23:51
to ZeroDream：
出现这个错误就说明是无法在wp-content/uploads下建立ZhongziImageCache的文件夹。
另外，还有一种可能性，就是你的服务器使用的是IIS，并且这个IIS不支持最基本的PHP环境变量的获取。
ZeroDream said,
2008年12月31日 at 7:35
服务器是APACHE2+PHP5+MYSQL5的
仲远 said,
2009年1月1日 at 0:56
to ZeroDream：
您的这种服务器环境，按理说应该没有任何问题的。
如果您确实对这款插件感兴趣，我可以帮助你诊断，不过就需要您配合在您的服务器上做一些测试了。
如果您愿意，您可以通过插件readme.txt文件中的邮箱与我联系，留下您的qq或msn，再具体联系
WordPress摘要下显示图片的方法 | 啦啦啦 said,
2009年1月1日 at 18:44
[...] 继续Google, 结果终于让我在仲子说的博客里找到了这个插件"Image For Homepage", [...]
Wordpress首页显示日志缩略图的插件Image For Homepage | 天生宠才 said,
2009年1月3日 at 12:31
[...] 下载地址：点击这里 原文链接：http://www.wangzhongyuan.com/archives/552.html [...]
Trendslab said,
2009年1月4日 at 0:44
首先非常感谢作者的辛勤劳动，用上这么好的插件真是给网站增添了许多色彩。另外，有很多网友还是不太明白使用方法，容我在此告诉大家：
** IFH安装方法 **
1、下载本插件的Zip文件，并解压
2、将插件文件夹image-for-homepage上传到插件目录中，通常是wp-content/plugins/
3、激活插件
4、在模板的首页index.php中，找到the_exerpt()，在其之前添加 ...
是的，我的index.php中也没有找到这个，但是不要紧，大家可以把作者说的代码前后加
<?php 和 ?>，如：<?php if (function_exists("image_for_homepage")){image_for_homepage(true, 1, 200, 0, 'right', 'IFHL', '<div>', '</div>'); } ?>
然后将这段代码加到<div class="entry">这段代码前，如果大家没有这段代码，那么，找到你标志文章开始的代码前就可以了。（这里补充一点，如果把代码放在前面，那么文章的摘要和图片是互相独立的，也就是说文字不会包围图片，建议放在后面，这样比较美观）大家可以看看我的site，已经可以正常使用了。http://www.trendslab.cn/
that5 said,
2009年1月5日 at 18:46
我的博客无法使用，http://that5.eblhost.cn/
不知道为什么
迷糊 said,
2009年1月6日 at 12:51
<h2 class="entry-title"><a href="<?php the_permalink() ?>" title="<?php printf( __('点击阅读《%s》全文', 'win7blog'), the_title_attribute('echo=0') ) ?>" rel="bookmark"><?php the_title() ?></a></h2>
<div class="comments_quicklink"><?php comments_popup_link( __( '有沙发坐哦', 'win7blog' ), __( '看看沙发说什么', 'win7blog' ), __( '他(她)们的精彩评论', 'win7blog' ) ) ?></div>
<div class="entry-meta">
<?php edit_post_link( __( '编辑', 'win7blog' ), "<span class=\"edit-link\">", "</span><span class=\"meta-sep\"> |</span>\n" ) ?>
<?php printf( __( '分类: %s', 'win7blog' ), get_the_category_list(', ') ) ?> |
<?php the_tags( __( '<span class="tag-links">标签: ', 'win7blog' ), ",", "</span> |" ) ?>
<?php if(function_exists('the_views')) { the_views(); _e(' |');} ?>
<?php comments_popup_link( __( '立即发表评论' ), __( '立即发表评论(1条评论)' ), __( '立即发表评论(%条评论)', 'win7blog' ) ) ?>
</div>
<div class="entry-content">
<?php the_content( __( '阅读全文 <span class="meta-nav">»</span>', 'win7blog' ) ) ?>
<?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'win7blog' ) . '&after=</div>') ?>
</div>
这里没有你说的the_exerpt(），怎么加你说的代码？
仲远 said,
2009年1月6日 at 14:50
to 迷糊：
在<?php the_content( __( '阅读全文 <span class="meta-nav">»</span>', 'win7blog' ) ) ?>之前加上：
<?php if (function_exists("image_for_homepage")){image_for_homepage(true, 1, 200, 0, 'right', 'IFHL', '<div>', '</div>'); } ?>
即改为如下形式：
<div class="entry-content">
<?php if (function_exists("image_for_homepage")){image_for_homepage(true, 1, 200, 0, 'right', 'IFHL', '<div>', '</div>'); } ?>
<?php the_content( __( '阅读全文 <span class="meta-nav">»</span>', 'win7blog' ) ) ?>
<?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'win7blog' ) . '&after=</div>') ?>
</div>
xun said,
2009年1月6日 at 18:53
我的index.php部分代码如下，应该如何修改呢？
仲远 said,
2009年1月7日 at 2:34
to xun:
没有看到你的代码。。。
你可以把你使用的模板的名字告诉我，我再告诉你在什么地方添加
疑问 said,
2009年1月7日 at 21:27
请教你一下，只有用center的时候，摘要才会在图片的下面。用left的时候，摘要就紧随着图片在右边了。
应该怎么更改，才能用left图片居左，摘要还会在图片的下面呢？麻烦您在这里给我回复一下吧，谢谢。
仲远 said,
2009年1月7日 at 22:03
to 疑问：你使用如下代码进行插件调用：
<?php if (function_exists("image_for_homepage")){image_for_homepage(true, 1, 200, 0, 'MyLeft', 'IFHL', '<div class=MyLeft>', '</div>'); } ?>
然后在模板下的css文件中，加入如下代码即可：
.MyLeft {
text-align:left;
}
木公 said,
2009年1月9日 at 10:35
博主，您好，我的模板是elegant-box，该如何修改呢？？
木公 said,
2009年1月9日 at 10:41
呵呵，自己原来已经改好了。
不过发现如果改成the_excerpt()后，我的代码高亮就有问题了，所以不得不忍痛不用了，唉。
在这里给博主提个建议吧，
我的文章里会有一些表情图片，没有其它的大图片，
在生成缩略图时是不是应该判断图片大小呢？
小图片被放大的马赛克效果很影响美观的。
jomor said,
2009年1月11日 at 19:04
这是一款非常棒的插件，请问能实现这样的功能么？
如果一篇日志在more 代码之前，已经有了一张图片，那么在首页显示时，就会显示图片和缩略图两个图片，个人感觉很不美观，可不可以在首页本身有图片时，缩略图就自动不现实呢？
coloriy said,
2009年2月9日 at 12:55
生成的缩略图没有放在缓存文件夹ZhongziImageCache中？是不是bug？
仲远 said,
2009年2月9日 at 14:18
to coloriy:
可能是由于你使用的是Windows+IIS的环境，有时候会产成这样的错误。
dgf said,
2009年3月8日 at 6:14
晕！还是看这里吧。
http://hi.baidu.com/%D7%AF%D7%D3%C8%E7%CA%C7%CB%B5/blog/item/333194ad4d3965014a36d6c0.html
Ŷänÿän said,
2009年3月13日 at 0:19
请问，日志当中有表情的，可是表情的在首页显示却是黑块，这种怎么办呢？
仲远 said,
2009年3月14日 at 0:05
to Ŷänÿän:
不好意思，这个是由于原始图片的背景是透明的，目前还没有解决办法。
yang said,
2009年4月17日 at 9:17
请教仲子，我用的模板应该怎么添加，你说的方法以及留言上的所有方法我都试过了，还是不行哦，缩略图是显示出来了，但是还同时显示全文~~请问我该如何添加~期待你的答复，谢谢。
正式更名為 StartOver & 更換主題為 Philna | StartOver said,
2009年4月30日 at 1:44
[...] 因為我還是很喜歡首頁圖文並茂的效果，所以我就做了幾個圖（多半是跟我自己創作的小說有關）來使用，但是如果文字太多看起來拉拉雜雜的，而且要每一張圖都同樣尺寸實在太強人所難，於是經由我 Google 的結果，就發現了這款實現 Wordpress 首頁文章縮略圖 Image For Homepage（簡稱IFH）的插件啦，再搭配首頁文章使用摘要輸出的方式，就呈現了你現在看到的模樣，如果你有注意，首頁的縮略圖大小和彙整頁不同喔！ [...]
皮皮 said,
2009年5月8日 at 10:21
我的模板index.php里打开编辑只有上面这一点东西呀，代码加在哪里？用的是comfymagazine主题模板
皮皮 said,
2009年5月8日 at 10:36
""就这一段怎么没发上来
皮皮 said,
2009年5月8日 at 10:47
不用了，看了上面说的外链地址误以为是可以支持对别的网站相册的图片生成微缩图，原来是不行的。
让Wordpress首页仅显示文章摘要，且让摘要中显示图片之解决方案 | 雨田博客 said,
2009年5月11日 at 23:45
[...] 可以使得在显示摘要的情况下还可以显示图片。本博推荐仲子说制作的一个插件“Image For [...]
lostway said,
2009年6月3日 at 9:13
今天下载了试过，还不错，由于摘要高度限制，自己修改了下图片的比例！真的很不错，谢谢仲子！
DaviD の博客 » Wordpress首页文章缩略图显示插件 said,
2009年6月12日 at 22:33
[...] PS:以上那句代码如果不懂的话可以到此博客http://www.wangzhongyuan.com/archives/536.html#IFHDownload，这是Image For Homepage完整版（1.3版）的原创者的博客！ [...]
Wordpress首页文章摘要缩略图显示插件 said,
2009年6月14日 at 1:25
[...] PS:以上那句代码如果不懂的话可以到此博客http://www.wangzhongyuan.com/archives/536.html#IFHDownload，这是Image For Homepage完整版（1.3版）的原创者的博客！ [...]
Grid said,
2009年6月28日 at 10:31
仲兄，
经过测试该插件，发现该插件在目录设置上有问题。
不应该使用绝对目录，应该使用相对目录。这样更通用。
我已将imageForHomepage.php内容作了修改：
原内容：
$newABSPATH = str_replace("\\","/",ABSPATH);
$destinationDir=str_replace(getenv("DOCUMENT_ROOT"),"",strstr($newABSPATH,getenv("DOCUMENT_ROOT")))."wp-content/uploads/ZhongziImageCache/";
新内容：
// $newABSPATH = str_replace("\\","/",ABSPATH);
$destinationDir = "wp-content/uploads/ZhongziImageCache/";
另外将所有出现“getenv("DOCUMENT_ROOT").”的地方全部去掉了。
在我的虚拟空间上就显示正常了。
基础版本为：
纯插件版（1.3版）：http://www.wangzhongyuan.com/static/image-for-homepage.zip （14.46 KB, MD5:57fba5745524692bcb282fcbad97d2bb）