WordPress自定义字段添加日志图片(4)-提高

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

系列链接:

让各位久等,现在我们说下如何实现下图效果:首篇日志使用大尺寸图片,其余较前日志采用较少尺寸图片展示。这样的好处是站内文章主次分明,读者易于被最新一篇日志吸引。

smartrcn2 150x150 WordPress自定义字段添加日志图片(4)-提高

这种做法其实本质是把首页分成两部分,第一部分只显示最新一篇文章,并引用大尺寸图片;余下第二部分显示指定篇数日志,并引用小尺寸图片。我在这里贴出示例代码,因为每个主题模板的index.php可能有所不同,但大家参照下列代码,应该不难自行更改。

<?php $top_query = new WP_Query('showposts=1'); ?>
<?php while($top_query->have_posts()) : $top_query->the_post(); $first_post = $post->ID; ?>
此处为首篇日志图片调用语句(大图片)

此处为首篇日志的调用(标题,时间,摘要等)区块(一般以div包括)
<?php endwhile; ?>

<?php query_posts('showposts=6'); ?>
<?php while(have_posts()) : the_post(); if(!($first_post == $post->ID)) : ?>
此处为首篇日志图片调用语句(小图片)

此处较近的5篇日志(6-1)调用(标题,时间,摘要等)(一般以div包括)
<?php endif; endwhile; ?>

其中红字部分代码按照本系列第三篇讲述,可以写成如下:

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

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

而蓝字部分代码同样道理,只是我们把变量名'index_image'改为'small_image',把图片大小从495变成80则可,图片的样式控制由class="indeximg"改为class="smallimg",更改后代码如下:

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

<div class="smallimg"><img width="80" src="<?php echo $image; ?>" alt="" /></div>
<?php } ?>

这样,在撰写文章前我们需要为每篇日志准备两种尺寸图片(根据你的个从设置),然后别忘记在WordPress后台的自定义域分别为两个调用图片变量'index_image'和'small_image'输入对应图片的路径。

好,到这里本节的介绍就完结了,我们到下节再讨论一些其它相关问题。谢谢你的捧场 icon wink WordPress自定义字段添加日志图片(4)-提高

Technorati 标记: WordPress, 自定义字段, 图片
分类:WordPress;标签:, , , ;收藏本文的永久链接

20 Responses to “WordPress自定义字段添加日志图片(4)-提高”

  1. atmo 回复此留言 2008/05/09 16:15 #comment-2396

    强烈需求插件啊!啊!啊!

  2. freerainbow 回复此留言 2008/05/16 18:01 #comment-2395

    挺好的文章,很适合我这样的新手,订阅了!

  3. Jinwen 回复此留言 2008/05/16 18:06 #comment-2394

    thanks ;)

  4. 阿里 回复此留言 2008/06/17 07:22 #comment-2398

    集成插件就好了,呵呵

  5. K 回复此留言 2008/06/21 22:01 #comment-2397

    很好,很实用,文章也写得很详细.转载加订阅了!

  6. 众生阁 回复此留言 2008/08/17 20:20 #comment-2400

    我用怎么不行啊,晕

  7. Jinwen 回复此留言 2008/08/17 21:25 #comment-2399

    @众生阁: 是出现怎样的问题呢?

  8. hawkren 回复此留言 2008/09/25 13:05 #comment-2402

    挺有用,有空试试!

  9. Vin.C 回复此留言 2008/10/01 08:42 #comment-2403

    研究研究,感觉不错

  10. 浙江印花之家 回复此留言 2008/12/29 11:46 #comment-3947

    有点象专家的味道了,感谢.

  11. underone 回复此留言 2009/02/03 06:19 #comment-4335

    又学习了一遍。。。

  12. shuwill 回复此留言 2009/09/15 14:32 #comment-9676

    在网上找了关于WordPress 自定义域的文章,您的文章最适合我这样的新手看,谢谢。另外,我还有一问题:您的文章在代码块处用了不同的背景色,这是怎样弄的?我就想要这样的效果:给代码块加上边框及背景色。

  13. 印第安小狮 回复此留言 2009/11/16 16:09 #comment-10851

    我希望能实现截图效果的, 就是文章里一图片, 然后首页截图调用.
    博主的方法是按相应比例缩放.
    但不管怎么样, 还是挺好的, 谢谢, 已经顺利实现了. 之前一直在琢磨自定义域如何首页调用图片呢. 唉. 难觅合适的解决方法, 今晚如愿, 再次感谢博主.

  14. alex 回复此留言 2009/12/31 16:45 #comment-11978

    想请教下,怎么可以给通过自定义字段添加的图片带上连接呢?比如,点图片可以直接进入文章详细内容


The trackbacks and pingpacks:

  • 使用自定义字段给 Wordpress 添加日志图片 | 網生@誌 | zEUS.'Blog - Pingback on 08/11/24 15:14
  • WP:自定义字段添加日志图片 | ::冰封:: - Pingback on 09/01/17 17:37