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

Jiang 发布于 2007年12月13日, 分类 WordPress 主题, 主题使用, 阅读次数: 2,767

欢迎光临本站！我们致力为你提供更好的服务，请订阅本站Feed 获取每天最新信息。WordPress 中文站主要为你提供 WordPress 最新的新闻，插件、主题更新的信息，入门的教程，使用的技巧，博客的资源与优化，安全问题的提醒与修复方案，以及博客相关的方方面面。

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

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

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

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

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

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

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

<?php
// 这是模块开始的地方
query_posts('showposts=1&cat=199'); ?>
// 修改 showposts 为你需要展示的文章数目，修改 cat=199 到你相应的分类数，你可以通过管理 -> 分类找到。
<?php while (have_posts()) : the_post(); ?>
<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
// 这里就是通过自定义域来展示缩略图的地方
$values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="" /></a>
<p class="title"><a href="<?php the_permalink() ?>" rel="bookmark">
<?php
// 这是打印标题的地方
the_title(); ?>
</a>
</p>
</div>
<?php endwhile; ?>

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

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

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

Tagged as: 图片, 文章

你还可能感兴趣的相关文章:

8 Responses »

给每篇博客文章一个显示到首页的数略图 - 总而言之,统而言之 on 12月 13th, 2007 at 9:25 上午:
[…] 翻译: http://wordpresschina.org/giving-each-wordpress-post-a-thumbnail-71/ […]
沿阶草堂 | 换了一个新闻主题 on 12月 13th, 2007 at 5:35 下午:
[…] 昨天在WordPress中文化里看到了这个主题：The Morning After ，设置简单。 […]
WordPress制作Gallery themes必备知识(二) » 4studio博客 on 7月 26th, 2008 at 10:51 上午:
[…] 翻译: http://wpchina.org/giving-each-wordpress-post-a-thumbnail-71/ […]
饿猫公寓 » Blog Archive » WordPress 博客首页文章缩略图的实现 on 10月 9th, 2008 at 8:48 上午:
[…] WordPress 博客首页的缩略图，可以让你的博客漂亮很多。其实这个功能是通过 WordPress 的一个自定义字段的功能来实现的。关于缩略图的使用，我们 WordPress 中文站也曾经详细介绍过，给每篇博客文章一个显示到首页的缩略图，相信很多网友并不太陌生。 […]
WordPress 博客首页文章缩略图的实现 | 饿猫公寓 on 10月 9th, 2008 at 9:43 下午:
[…] WordPress 博客首页的缩略图，可以让你的博客漂亮很多。其实这个功能是通过 WordPress 的一个自定义字段的功能来实现的。关于缩略图的使用，我们 WordPress 中文站也曾经详细介绍过，给每篇博客文章一个显示到首页的缩略图，相信很多网友并不太陌生。 […]
基于 Mimbo 的 WordPress 主题 | 爱情树下 on 2月 12th, 2009 at 7:39 下午:
[…] Themes - WordPress 主题列表 11月6日，新闻杂志型 WordPress 模板汇总，以及给每篇博客文章一个显示到首页的缩略图）。而其中最为 Mimbo […]
Tammy on 2月 19th, 2009 at 1:50 下午:
很有用的教程，谢谢！
布谷鸟 on 5月 10th, 2009 at 10:50 下午:
呵呵，我写的一个wordpress缩略图插件：http://niaolei.org.cn/posts/4012

WordPress 非官方中文站