现在的位置: 首页Wordpress>正文
让WordPress主题随机显示缩略图
2010年03月08日 Wordpress ⁄ 作者:知更鸟 ⁄ 共 1686字 评论数 37 ⁄ 被围观 8,248+

之前本人的新作Hot News主题使用timthumb.php函数自动调整缩略图大小,并生成缓存文件,国外大部分CMS主题也都是采用此方法生成缩略图。但这一方法无法截取外链图片,这一致命弱点最终让我放弃使用timthumb.php函数。目前我使用的新版HotNews pro2.0采用比较普遍的显示缩略图的方法,添加自定义域,并通过CSS控制缩略图大小。有时文章中没有图片,也懒得特意作缩略图,虽然有默认占位图代替缩略图的位置,但文章发多了看着非常单调,也失去了缩略图吸引读者眼球的作用,于是忽随机显示默认缩略图的想法就出来了,下面请看具体的实现方法。
一般 WordPress杂志型主题,都具备缩略图功能,采用的通用缩略图函数代码如下:

  1. <?php if ( get_post_meta($post->ID, 'thumbnail', true) ) : ?>   
  2. <?php $image = get_post_meta($post->ID, 'thumbnail', true); ?>   
  3. <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><img src="<?php echo $image; ?>" alt="<?php the_title(); ?>"/></a>   
  4. <?php else: ?>   
  5. <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/img.jpg" alt="<?php the_title(); ?>" /></a>   
  6. <?php endif; ?>  

只需在默认占位图链接位置添加一句rand()函数就可随机调用特定目录下的多个图片,下面是修改后的:

  1. <?php if ( get_post_meta($post->ID, 'thumbnail', true) ) : ?>   
  2. <?php $image = get_post_meta($post->ID, 'thumbnail', true); ?>   
  3. <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><img src="<?php echo $image; ?>" alt="<?php the_title(); ?>"/></a>   
  4. <?php else: ?>   
  5. <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/random/img<?php echo rand(1,5)?>.jpg" alt="<?php the_title(); ?>" /></a>   
  6. <?php endif; ?>  

修改后的代码说明:

  1. /images/random/img<?php echo rand(1,5)?>.jpg  

前面的img是图片的名称,我们可以新建几个名称为:img1.jpg, img2.jpg,img3.jpg,img4.jpg,img5.jpg的图片,放到/images/random/(图片所在的位置,可根据实际修改。)目录中,也可以是其它格式的图片,数字5是预设的的随机图片数量,可以修改此数字,并相应增加随机图片数量。将上面的代码添加到模板适当位置,刷新一下页面看看效果如何。
大家可以刷新一下我博客的首页zmingcx.com,看看随机缩略图的实际效果,还是很不错,不过大家要手下留情,刷几下也就算了,呵呵...

目前有 37 条留言 其中:访客:28 条, 博主:4 条 引用: 5

  1. underone : 2010年03月09日 804 天前 10:52:38  1楼 @回复 回复

    神奇,原来是这么简单就实现的,太巧妙了...

  2. 八卦斯基 : 2010年03月09日 804 天前 14:05:12  2楼 @回复 回复

    已经弄好。很喜欢。

    • 知更鸟 : 2010年03月10日 803 天前 10:21:49 @回复 回复

      也看了你的效果,不错,内容很新颖啊

    • 海子 : 2011年01月15日 492 天前 22:45:28 @回复 回复

      这个自定义域,在Hot News 2.4版本中的文件是哪一个?

  3. 八卦斯基 : 2010年03月09日 804 天前 14:06:30  3楼 @回复 回复

    就是怎样防止不同日志出现同样的缩略图。

  4. aunsen : 2010年03月09日 804 天前 14:30:39  4楼 @回复 回复

    特地前来膜拜鸟哥!

  5. Blinux : 2010年03月09日 804 天前 18:57:55  5楼 @回复 回复

    哇,现在的效果真是越来越棒啊

  6. 郁闷中 : 2010年03月19日 794 天前 21:44:44  6楼 @回复 回复

    楼主和各位高手,能不能帮我看看,我的是怎么了,为什么上面只显示一张图片,我都搞了一天了,还是没有搞好,我也不知道我是什么地方错了。我对PHP不懂,只懂css和div.
    楼主帮我一下吧!!!!!! :cry:

    • 瘦脸 : 2011年09月27日 237 天前 17:48:34 @回复 回复

      呵呵,你的方法还真不错,弄了一下午终于调好了,看我的站咋样,效果出来了, 以后再弄别的,就可以直接抄上去用了

  7. 郁闷中 : 2010年03月19日 794 天前 21:46:21  7楼 @回复 回复

    刚才忘记写网址了。不好意思
    对了 我的网站是http://459029.506.hostcn.cn/
    楼主和各位高手,能不能帮我看看,我的是怎么了,为什么上面只显示一张图片,我都搞了一天了,还是没有搞好,我也不知道我是什么地方错了。我对PHP不懂,只懂css和div.
    楼主帮我一下吧!!!!!!

  8. 枝上又闻啼 : 2010年04月05日 778 天前 00:32:01  8楼 @回复 回复

    哈哈,怎么想到这种方法,感觉耍诈啊。 不得不感叹,太有才了

  9. huzi : 2010年04月24日 758 天前 23:58:41  9楼 @回复 回复

    那如果要指定缩略图呢?

  10. ucer : 2010年08月07日 653 天前 16:19:19  10楼 @回复 回复

    好东西,非常感谢。

  11. zoung : 2010年08月30日 630 天前 23:47:33  11楼 @回复 回复

    $post->ID,

    'numberposts' => '1',

    'post_type' => 'attachment',

    'post_mime_type' => 'image',

    'order' => 'ASC',

    'orderby' => 'menu_order')))

    foreach($images as $image) {

    $exehill_image = $image->guid;

    $exehill_thumb = wp_get_attachment_thumb_url( $image->ID);

    } else {

    $exehill_thumb = site_url('/wp-content/themes/benzo//images/random/img.jpg');

    } ?>

    为何我的无法显示图片,一张也不显示??????

  12. 海子 : 2011年01月15日 492 天前 09:25:36  12楼 @回复 回复

    鸟哥,这个功能在哪个文件里修改的。在线等你回复啊

    • 知更鸟 : 2011年01月15日 492 天前 09:47:03 @回复 回复

      不知你要修改什么

      • 海子 : 2011年01月15日 492 天前 13:27:06 @回复 回复

        修改随机显示图片的数量

  13. 后80世代 : 2011年01月22日 485 天前 14:17:50  13楼 @回复 回复

    鸟兄,我想知道的是 首页显示四个随机图片,而用了模板只显示两个啊

  14. JEFF : 2011年04月28日 389 天前 23:19:33  14楼 @回复 回复

    鸟兄,请教下,我要在首页显示某个分类的4篇文章,functions.php定义了side-thumb的150x130的缩略图,但是只显示出两个有插入图片的文章缩略图,其它两篇文章没有图片,不显示随机图片,不知道问题出在哪,麻烦鸟兄解答下。
    贴不了代码,郁闷了

    • JEFF : 2011年04月28日 389 天前 23:40:19 @回复 回复

      截图后放到qq空间的贴图http :// qpic.cn/Y0YFs7MC
      http :// qpic.cn/f4bw5qEX

  15. 小峰子 : 2011年05月04日 384 天前 02:54:34  15楼 @回复 回复

    我想做一个就是首页一个轮换图片效果,他的图片来源是wp默认主题下面的headers文件夹里的图片,然后显示到轮换上,我在网上查了说是要遍历,可惜我不会,知更鸟帮帮我吧,给我写一个函数或者一个文件,调用位置就在默认主题的那个图片显示的地方。谢谢
    我的邮箱wangxiaofengvip@gmail.com

  16. 莫也 : 2011年05月26日 361 天前 17:21:16  16楼 @回复 回复

    这个再那个文件里面修改?

  17. 夏天用什么护肤品好 : 2011年07月14日 312 天前 15:08:37  17楼 @回复 回复

    要的就是这个效果~~刚仿了站,也是这种带缩略图的,文章太多,没办法一个个加~~随机图片的话,不会显得太单调~~~GOOD

  18. sinsky : 2012年01月05日 137 天前 23:14:56  18楼 @回复 回复

    。。。 什么时候留过言。。。你的WP居然记得我 我倒。

  19. Xiaomi : 2012年01月16日 126 天前 15:29:34  19楼 @回复 回复

    echo '<img src="'.get_bloginfo('template_url').'/img/random/.jpg" />';
    不能执行!

  20. Xiaomi : 2012年01月16日 126 天前 15:31:14  20楼 @回复 回复

    echo '<img src="'.get_bloginfo('template_url').'/img/random/.jpg" />'; 这个改怎么改动下才能执行啊

  21. maxling : 2012年01月16日 126 天前 16:44:43  21楼 @回复 回复

    谢谢鸟哥的分享!以成功加上!

  22. 小方 : 2012年02月27日 84 天前 15:56:56  22楼 @回复 回复

    你好,请问为什么我设制了之后,效果是出来了,可是图片下方带有文章字!

    麻请解答下,谢谢!

    我把代码改成这样:
    ID, 'thumbnail', true) ) : ?>
    ID, 'thumbnail', true); ?>
    <a href="" rel="bookmark" title=""><img src="" alt=""/>

    <a href="" rel="bookmark" title=""><img src="/images/random/.jpg" alt="" />

    .jpg

    图片是随机显示了,可是图片下方总是带有图片的名称,应该如何去掉啊,

    比如这是图

    图图图图图图
    图图图图图图
    图图图图图图
    2.jpg

    图片下方总会是带图片名称,如何修改,谢谢!

  23. 丫霸名片 : 2012年03月08日 75 天前 01:49:31  23楼 @回复 回复

    鸟哥,我WordPress 3.3.1。 主题是:Twenty Ten 1.3
    默认首页会显示文章的图片(不是缩略图),
    但是如果点击分类目录,或者标签,文章的图片就不显示(或者说调用)

    我想请教:如何让点击分类目录,或者标签的时候在列表里面也会显示文章的图片。

查看来自外部的引用: 5

  • 随机显示缩略图的实现方法 | 有鱼
  • 大前端D4 WordPress主题随机显示缩略图 – Maxling
  • PHP随机显示图片代码:让WordPress主题随机显示图片 - 那个关于小H的传说
  • PHP随机显示图片代码:让WordPress主题随机显示图片 - 那个关于小H的传说
  • wordpress首页代码实现随机日志缩略图-it自由

Wopus问答

给我留言

留言无头像?

留言不能超过1500字,已输入字数:

×
腾讯微博