WordPress自定义字段添加日志图片(2)-开始

利用WordPress的自定义字段为指定日志添加图片,不仅可以使读者更易于了解文章的主题内容,更能起到吸引读者及个性化的作用。如果你对此感兴趣,欢迎与我一起讨论这个专题 icon smile WordPress自定义字段添加日志图片(2)-开始

快速链接:

上篇说了下这个主题的情况后,现在开始介绍怎样利用WordPress的自定义字段为日志添加图片了。首先要介绍的是为首页各篇日志添加相同大小的图片,当然图片是根据各篇日志内容不同而不同的。并不是简单的在index.php模板内插入一个图片代码而已,我们要做的效果是这样的:

smartrcn 150x150 WordPress自定义字段添加日志图片(2)-开始

现在动手,首先在index.php文件中查找如下这句(根据主题模板不同而稍有不同):

<?php while ( have_posts() ) : the_post() ?>
<div id="post-<?php the_ID() ?>">

我们在其下面添加如下一句:

<?php $image = get_post_meta($post->ID, 'index_image', true); ?>

这一句的作用是用来控制自定义字段的设置,在这里我们把自定义字段设置为:index_image。

然后我们在需要插入照片的地方增加如下代码调用自定义字段:

<div class="indeximg"><img width="495" src="<?php echo $image; ?>" alt="" /></div>

其中:

  • 代码中的“img width=""495”是调用图片的宽度尺寸,请根据你的模板宽度进行调整。
  • <div class="indeximg">标签是对图片的CSS属性设置。

通过上面的几行代码,现在我们可以在撰写新日志时候通过自定义字段对各篇日志的图片进行控制,具体如下:

新建日志,在WordPress后台的自定义字段中填写如下:

字段名:index_image
字段值:http://www.saywp.com/postimages/2008/04/test.png

其中:

  • 字段名:为我们在文章开始设置的名字。
  • 字段值:是你将调用图片的路径。

然后点击“添加自定义字段”按钮则可。完成上述步骤后,你就可以在首页看到自己为各篇日志添加指定图片的效果了 icon smile WordPress自定义字段添加日志图片(2)-开始

怎样,操作还算简单吧。那么这一篇就到此,在下一篇我会说说进行上述修改后对用户友好访问的影响及解决的办法之我见,OK, See U icon wink WordPress自定义字段添加日志图片(2)-开始

分类:WordPress;标签:, , , ;收藏本文的永久链接

39 Responses to “WordPress自定义字段添加日志图片(2)-开始”

  1. Hpyer 回复此留言 2008/05/01 05:36 #comment-2259

    不错噢~~
    不过,个人感觉,在模板里输出的时候,最好对 $image 加个判断,毕竟总不可能每篇日志都有图片的嘛,哈~~

    • Sean 回复此留言 2009/01/31 15:06 #comment-4265

      自定义域默认只会给你这个日志加地!

  2. zzh 回复此留言 2008/05/01 12:15 #comment-2258

    我刚开始学着使用wp,还是没太看懂你写的,我就是想在文章中加入一张图片

  3. Jinwen 回复此留言 2008/05/01 12:37 #comment-2257

    在文章中加入图片用插入图片就可以了。这里说的是让每篇文章显示指定不同的图片。

  4. 菜鸟 回复此留言 2008/05/01 17:35 #comment-2256

    请问我这该怎么添加右边缩图 像你那第2张图 谢谢

  5. Hpyer 回复此留言 2008/05/02 07:03 #comment-2253

    哈,加个判断么,兼容性可以好一点咯

    当然,纯属个人意见~~ ~_~

  6. Jinwen 回复此留言 2008/05/02 08:21 #comment-2252

    好意见,试试。

  7. 柴柴 回复此留言 2008/05/03 07:50 #comment-2251

    学习学习,wp还真难

  8. macally 回复此留言 2008/05/30 13:03 #comment-2255

    我覺得有些沒有必要的;smartr.既然手動的后臺添加,自己可以每次根據自己的文章需要自己添加,左右對齊都可以!

  9. Jinwen 回复此留言 2008/05/30 16:42 #comment-2254

    如果每篇日志图片一样大小就没有必要了。但首篇日志大图片,其余的显示小图片,这样就需要了。

  10. kobe 回复此留言 2008/07/12 08:46 #comment-2266

    我想问一句
    “然后我们在需要插入照片的地方增加如下代码调用自定义字段:

    <img width="495" src="" alt="" />”
    这句中
    “需要插入照片的地方”是指写文章时,插入以上代码,还是说在index.php里面插代码啊,不是很懂,麻烦解释下

  11. Jinwen 回复此留言 2008/07/12 09:41 #comment-2265

    是在模板上的。调用代码是在写文章时候的自定义域一栏内。

  12. kobe 回复此留言 2008/07/12 11:34 #comment-2264

    我试了下,跟我想要的效果很类似,但我想知道如何在首页只给文章显示一张图和一两句话,而且进入文章正文后,这张图和一两句话就不显示了,这样的效果不知道怎么实现,我给个示例的网站,http://alexhill.cn (看有图的文章···),希望Jinwen看一下····

  13. Jinwen 回复此留言 2008/07/12 16:19 #comment-2263

    我看了,其实这是跟我现在的效果是一样的。首先是在首页显示摘要,然后在发表文章时在后台的摘要框上书写你的文章摘要,也就是一两句话则可。如果你不在那写上自己的摘要,那么WordPress会自动截取文章的开头部分作为摘要的。

  14. kobe 回复此留言 2008/07/12 16:34 #comment-2261

    有一点比较奇怪,我用了你的方法试了下,图片是出在标题上面的,而且点了文章,里面也会显示这个图片···这让我比较郁闷啊。再来这个摘要不写,我这是限制首页文字才显示文章部分内容,如果不限制恐怕就显示去问了,这不是很难看······

    Jinwen兄真是太热情了,呵呵,希望您能帮我解决此问题,在下感激不尽~~

  15. Jinwen 回复此留言 2008/07/12 17:47 #comment-2262

    首先你的代码修改是不是在index.php内进行?如果是在single.php上修改的,当然会显示在文章内。另外增加的代码是在h2标签前还是/h2标签后呢,这样关系到图片与标题的位置关系。如果你还搞不清楚,请把修改的文件发给我,让我看看。

  16. kobe 回复此留言 2008/07/13 04:03 #comment-2260

    我这里只有index.php没有SINGLE文件的,而且里面只有h1么有H2,不过我已经弄出来了,谢谢Jinwen啦~我还会继续关注你的~~3Q

  17. 右行 回复此留言 2008/08/22 09:03 #comment-2267

    这个功能很强大,但稍嫌麻烦了点。

  18. page 回复此留言 2008/09/17 04:03 #comment-2272

    感觉好复杂,太复杂,现在人包括我都是懒蛋多。

  19. Poshi 回复此留言 2008/10/11 04:24 #comment-2270

    c对了,在自定义值的地方不是也可以添加kewords的吗?如果要单独调用怎么调?好像the_meta的话,可能全部都显示了

  20. Jinwen 回复此留言 2008/10/11 09:56 #comment-2271

    @Poshi: 我可能不太懂你意思,作个例子:如果我想在前台显示“晴/阴/雨”这三个字的一个。那么我在后台编辑文章时候,就在自定义域中新建一个“weather”,它的value栏就填写“晴/阴/雨”中的一个。然后修改前台模板,用如下语句调用:
    < ?php echo get_post_meta($post->ID, 'weather',true) ?>
    那样它的显示就会按每篇文章中的该值显示。不知道我说的是不是你所想。

  21. 杰克花园 回复此留言 2008/10/15 11:34 #comment-2274

    学习了, 不错, 有空交流一下WordPress的相关技巧,^_^

  22. 文痞'BLOG 回复此留言 2008/10/17 07:10 #comment-2275

    请问博主,我怎么实现把图片左对齐呢?我不想在上面对齐。。。

  23. Jinwen 回复此留言 2008/10/17 10:13 #comment-2273

    @文痞’BLOG: 实现左对齐的话,只需要编辑图片的样式属性,增加一句:
    float:left;
    就可以了。

  24. 浙江印花之家 回复此留言 2008/12/29 11:41 #comment-3942

    自定义看来是个好东东,可是要懂代码的,

    你能不能写个自定义段的全部 用法,到站上呢?或发到我的站呢?或发到wp中文

  25. cuiqingyao 回复此留言 2009/05/27 12:03 #comment-7411

    我的意思是说图片应该放在每个文章的前面,不是文章的上面,这个图跟文章平行.你说的是放在上面是垂直了,

  26. cuiqingyao 回复此留言 2009/05/27 12:03 #comment-7412

    跟文章平行应该如何做,

  27. mmbook 回复此留言 2011/01/08 19:18 #comment-17302

    为什么只能调整宽度?只要宽度确定了,图片的高度就会自动设置,手动设置的高度根本就不管用,为什么呢?

  28. 时尚服装导购网 回复此留言 2011/02/14 12:30 #comment-17992

    如果那个图片可以显示列表中效果更好。


The trackbacks and pingpacks: