自定义字段是 WordPress 的一个很强大的功能,但对于普通的使用者来说用处并不大…
关于如何通过自定义字段给 WordPress 博客首页中的每篇日志添加图片的方法,网上有不少介绍。我在给 www.vcbb.net 做模板时就用到了这个效果,方法是从 jinwen 的博客中(1、2、3、4)学到的,不过 jinwen 介绍的方法我在使用过程中遇到了问题,然后就对代码进行了小小的修正和修改,最终达到了自己想要的效果:
在博客首页的每一篇日志中都会显示一篇和内容相关的图片,该图片是我事先准备好的,而非日志中的缩略图,这张图片在单篇日志的内容中可以不予显示。如果我没有为日志指定一张图片,那么自动会有一张默认的图片进行“填充”。效果如下图所示:

这里分享一下我的制作经验,以及基于 jinwen 的方法并由我略做修改后的代码。
在 index.php 中找到如下或类似的代码
1 | <div class="post" id="post-<?php the_ID(); ?>"> |
在它的后面紧接一段代码:
1 | <?php $image = get_post_meta($post->ID, 'index_image', true); ?> |
添加之后的效果如下:
1 2 | <div class="post" id="post-<?php the_ID(); ?>"> <?php $image = get_post_meta($post->ID, 'index_image', true); ?> |
这其中的 index_image 这个新的变量就是我们即将在日志中用到的图片自定义字段。
继续往下,找到
1 | <?php the_excerpt(); ?> |
或
1 | <?php the_content(); ?> |
前者是输出摘要,后者是输出全文,了解 WordPress 的朋友肯定都知道,这里就不多说了。
找到这行代码后,我直接在它的前面添加如下代码:
1 2 3 4 5 | <?php if ( get_post_meta($post->ID, 'index_image', true) ) { ?> <a href="<?php the_permalink() ?>"><img src="<?php echo $image; ?>" title="<?php the_title(); ?>" /></a> <?php } else {?> <a href="<?php the_permalink() ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/vc-default.png" title="<?php the_title(); ?>" /></a> <?php } ?> |
仔细看这段代码,这里我用了一个 if else 的条件判断语句:
第一行中,if 括号里面的条件 ‘index_image’ 如果为 true(真),也就是说,我在编辑文章时使用了这个自定义字段,那么就直接执行第二行代码:输出 index_image 这个值,index_image 的值是一张图片的绝对地址,所以我这里就直接输出了这张图片,并加上该篇日志的链接;
第三行的 else 的意思是除了第一行条件 true(真)之外(那就是假了)的话就执行第四行的代码;
第四行中我输出了一张位于主题文件夹的 images 目录下的默认的图片——vc-default.png ,同时也带上了文章的链接。
这样,必要的代码就添加完了,我们在编辑日志的时候,将页面的滚动条拉到位于页面下方的自定义字段一栏:

根据上图步骤
1、添加自定义字段名:index_image (添加过一次之后就直接能在下面的下拉菜单中选择了);
2、添加放在首页文章里的图片绝对地址;
3、点击“添加自定义字段”的按钮。
这样,更新完日志之后就能在首页看到效果了~ 不过根据不同的博客主题,需要对这张图片进行不同的样式定义,比如 float:right 或 left ,亦或再给图片加个 border 等等,这就要看大家的想象力和喜好了。
另外在前文中提到的首页有可能是输出摘要,也有可能是全文输出,我个人的看法是:最好使用输出摘要——因为首页输出摘要时会省去文章中的图片,只保留文字内容,那么再配上这个自定义字段的图片,效果会更佳。
使用自定义字段给 WordPress 添加日志图片的方法就暂时介绍到这里,有兴趣的朋友不妨根据自己的主题模板也来折腾折腾这个效果~ 如有不清楚的地方,请在下面留言 ![]()
如果 CSS 能力强的话,完全可以根据这个功能把 WordPress 的首页,或者某个特殊页面做成“画廊”式的风格~ 以后有机会的话咱也要试试看
zEUS.
小弟还有一点不明白,就是小弟在后台没有找到自定义字段在哪,如果小哥看到了麻烦到小弟那给小弟说一下,谢谢了
编辑文章的页面,自定义字段的官方翻译是“自定义栏目”,官方中文版下载是在 cn.wordpress.org
如今WP已经整合了缩略图的功能了,无需这么麻烦了,不过还是需要有主题支持。
受益匪浅啊… 祝博主新年快乐,文章带回家了…
不客气
感觉如果假的话自定义字段,如果能根据文章分类显示图片就更好了
http://zeuscn.net/archives/2008/09/10/wordpress-category-icon/
你指的的是上面介绍的这种方法吗?
有人分享过相关的教程啊,不过不是用自定义字段,自定义字段是针对单篇文章的吧,针对分类的话,使用的是一个动态的图片调用语句(希望这里看可以贴代码,下面的代码可以显示哈):
category_nicename;
echo "";
echo "\n"; //分类图片的格式(图片地址的一部分)
}
?>
诶,我上面的代码没有全部显示出来,那篇文章也找不到了,看看下面这个我刚刚截的图吧。
网上确实有实现这种效果的相关插件,呵呵,不过我还没来得及看…
这个功能是好,但发日志的时候都要做这样一个缩略图,有点麻烦!!
其实我的意思是说,有没有这样一个插件,可以查找文章分类或tags,然后自动添加缩略图
似乎功能不算太复杂,但是我不会… 哈哈~
也没听过有这样的插件…