给每篇博客文章一个显示到首页的缩略图

By Jiang | 12月 13, 2007

或许你遇到过需要使用缩略图或者其他格式的图片,链接到你的博客文章的情况。比如说:你想要在你的博客主页展示某类的最新文章,每篇文章都有一个标题,摘要和缩略图。又比如,我最近有个客户,他的首页有放置多媒体的矩形框,他们希望在这里放一个图片,链接到媒体分类里的最新的文章。本文的最后有这个网站的链接,请继续阅读。

我在两个 WordPress 主题中发现使用这个解决方案:MimboThe Morning After(译者注:前者本站曾经做过介绍)。他们都在首页使用了缩略图,并且都是通过 WordPress 神奇的自定义域特性来显示的。

你需要上传图片到你的服务器。你可以通过 FTP 来上传,不过为了尽可能让用户简单方便,我使用 Filosofo Old-Style Upload Plugin (Filosofo 旧风格上传插件),它在导航栏创建一个链接,你可以方便地选择文件进行上传。不过,首先你需要配置这个插件,并选择一个文件夹来保存上传的内容:

  1. 上传并激活这个插件。
  2. 打开 选项 -> 上传。
  3. 输入你的目标文件夹。我想最好将图片文件夹放到你的主题文件夹内,以便携带。因此路径应该像这样 /home/server/public_html/wp-content/themes/themefolder/images。这个插件会建议一个路径,通常使用建议的路径即可。
  4. 输入这个文件夹的 URI(网址)。网址应该像这样:http://www.yoursite.com/wp-content/themes/themefolder/images。
  5. 你可以设置最大的文件大小。我设置为 500kb。
  6. 允许的文件扩展名:jpg,jpeg,gif,png,pdf – 我添加了 PDF 和其他一些文件格式,我认为客户可能会上传这些格式的文件。
  7. 最少长传层次:我保留位6,因为我不理解这是什么意思。
  8. 点击更新选项。

这就好了。现在来看如何给文章创建缩略图。

  1. 给你的文章船舰一个长宽合适的图片。图片的大小取决于你的网站的设计以及要展示的位置。
  2. 进入你网站的管理界面。点击上传(在导航栏的上面)。
  3. 选择你上传的图片。选择“No Thanks”的话,它就不会创建缩略图,给它一个描述(对Google友好),然后点击上传文件。
  4. 一旦上传完成,它就是现实图片的完整 URL(网址)。注意你的照片的名字,如果包含大写字母,那在第8步的时候,必须输入准确的文件名(译者注:在Linux操作系统中,文件名区分大小写)。
  5. 创建新文章。输入你的文章和标题。要确保选择你已选定的会出现缩略图的分类。现在滚动到屏幕最下面,就是填写自定义字段(Custom Field)的地方。点击加号展开自定义字段。
  6. 在键字段里输入 Image (字母 I 大写)。
  7. 在值字段里输入你已上传的文件名。比如 picture.jpg 或 image.gif。点击添加自定义字段(Add Custom Field)。
  8. 保存文章。

现在我们需要能在你希望的地方显示缩略图的代码。下面的代码会在标题下面展示缩略图。这个代码可用于 Mimbo 主题,不过 The Moring After 主题的代码也很类似:

  1. <?php
  2. // 这是模块开始的地方
  3. query_posts('showposts=1&cat=199'); ?> 
  4. // 修改 showposts 为你需要展示的文章数目,修改 cat=199 到你相应的分类数,你可以通过 管理 -> 分类找到。
  5. <?php while (have_posts()) : the_post(); ?>
  6. <div class="thumbnails"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php echo get_option('home'); ?>/wp-content/themes/themefolder/images/<?php
  7. // 这里就是通过自定义域来展示缩略图的地方
  8. $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="" /></a>
  9. <p class="title"><a href="<?php the_permalink() ?>" rel="bookmark">
  10. <?php
  11. // 这是打印标题的地方
  12. the_title(); ?>
  13. </a>
  14. </p>
  15. </div>
  16. <?php endwhile; ?>

想要看看例子吗?访问这个站点,滚动到底部,查看叫做 Media 的栏目。那个缩略图片是已上传,并通过自定义字段制定链接文章。

原文: Giving each WordPress post a thumbnail, and display the thumbnail on the home page by Miriam

翻译: http://wordpresschina.org/giving-each-wordpress-post-a-thumbnail-71/

Topics: Wordpress | 12,786 views | 21 Comments »


21 comments | Add One

  1. 笑煞天 - 12/13/2007 at 10:25 上午 #

    自定义域的绝佳应用:www.ebookr.cn

  2. Jason Ng - 12/13/2007 at 10:51 上午 #

    数略图?

  3. fiorano - 12/13/2007 at 10:59 上午 #

    呵呵,JASON NG也注意到了~

  4. Jiang - 12/13/2007 at 11:38 上午 #

    早上写错了,呵呵,很抱歉~

  5. zEUS. - 12/13/2007 at 1:16 下午 #

    很不错的方法
    可惜没找到 Media 的栏目… 看不到效果 =。=

  6. Jiang - 12/13/2007 at 1:28 下午 #

    你访问下面这个网站看看,这个站点,在最下面

  7. ken - 12/13/2007 at 4:59 下午 #

    千呼万唤—–终于出来了!!!!

  8. ken - 12/13/2007 at 6:01 下午 #

    还是希望介绍这个插件 Post Thumb Revisited
    就不那么麻烦了

  9. Taoii - 12/13/2007 at 7:11 下午 #

    再给大家介绍一下子我盗版过来的主题,(因为是盗版,所以没有公开放出下载链接),花了七天的时间做出来的,有需要的可以访问我的链接查看我的邮箱,发邮件给我,我会把模板直接发送到你提供的邮箱中,另外也希望收到的朋友不要公开放出下载链接。

  10. Jiang - 12/13/2007 at 8:10 下午 #

    @ken,连个链接也没有,怎么给你介绍啊?
    @Taoii,Rip别人的模板是不对的,已经删除了你的链接。

  11. badblue - 12/13/2007 at 10:45 下午 #

    看了,使用起来比较麻烦!

  12. [每日精彩] 2007-12-13 at 时光漫步 - 12/14/2007 at 6:19 上午 #

    [...] 5 – (tags: 给每篇博客文章一个显示到首页的缩略图 – 总而言之,统而言之) [...]

  13. 给WordPress添加CMS元素(缩略图)的一些方法 - dogorgod‖3D artwork on the website - 04/12/2008 at 2:02 上午 #

    [...] 第一篇文章来自Jiang的《给每篇博客文章一个显示到首页的缩略图》。文章中一步一步详细介绍了如何使用Filosofo Old-Style Upload Plugin这款插件来实现为每篇文章添加一个标题,摘要和缩略图,并且可在你想要的任何地方显示缩略图。 第二篇文章来自老帕的《Wordperss的Custom Fields功能和日志缩略图》。这篇文章重点介绍如何使用Wordpress自带的Custhom Fields功能实现日志缩略图,阅读的关键点是“Custhom Fields(自定义字段)”如何配合调用自定义图片代码来使用。另外老帕介绍的几个延伸阅读也不错。 [...]

  14. 爱博客,爱赚钱 - 04/12/2008 at 1:01 下午 #

    这个正是我学习的 找个时间研究下 哈哈 下记下了

  15. coldbo - 05/10/2008 at 2:09 下午 #

    ken – 12/13/2007 at 6:01 下午 #
    还是希望介绍这个插件 Post Thumb Revisited
    就不那么麻烦了

  16. YY吧 » Blog Archive » 给WordPress添加CMS元素(缩略图)的一些方法 - 08/30/2008 at 11:05 上午 #

    [...] 第一篇文章来自Jiang的《给每篇博客文章一个显示到首页的缩略图》。文章中一步一步详细介绍了如何使用Filosofo Old-Style Upload Plugin这款插件来实现为每篇文章添加一个标题,摘要和缩略图,并且可在你想要的任何地方显示缩略图。 [...]

  17. www.googleke.com - 07/24/2009 at 5:15 下午 #

    学习了,不错

  18. 尼龙织带 - 06/4/2010 at 11:33 上午 #

    如果这样子,用户体验度一定很不错了.学习了

  19. digfree.tk - 12/13/2010 at 2:06 下午 #

    哎,请问suffusion主题该怎么设置呀,我这个站digfree.tk打开后不是缩略图,而是标题了

  20. 福建条码在线 - 01/8/2011 at 4:35 下午 #

    高,学习一下,方法不错

  21. buy essay - 06/29/2011 at 2:29 下午 #

    I am in reality so pleased to sight the great quantity of information at an exacting point which is certainly admirable attempt.

LinkWorth
Hostgator

酷站链接 (Featured Links)

最新评论 (Recent Comments)

  • air jordan shoe: 不错,挺厉害的~~
  • Hairstyles: 原来链接这么重要!
  • Haircuts: 有空试一下看看
  • CHI Flat Iron: 哇,这么多插件啊,慢慢看!
  • 诗酒如画: 1)备份你的WordPress数据库 推荐用WordPress Database Backup在后台操作.下载备份的压缩包或者是传到自己邮箱里都可以. 如果直接在数据库中备份的话,记得选择UTF8编码,切记. 2)备份你的程序...
  • north face wholesale: en ,我会试一试的。

搜索 (Search)

合作伙伴

推荐站点 (Recommendations)

Partner links

WordPressChina
  • 原创博客联盟