让WordPress主题随机显示缩略图

2010年3月8日22:49:50 43 15,524

之前本人的新作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,看看随机缩略图的实际效果,还是很不错。

weinxin
关于本站
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:43   其中:访客  33   博主  4   引用   6

    • underone underone 3

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

      • 八卦斯基 八卦斯基 1

        已经弄好。很喜欢。

          • 知更鸟 知更鸟 Admin

            @八卦斯基 也看了你的效果,不错,内容很新颖啊

            • 海子 海子 1

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

            • 八卦斯基 八卦斯基 1

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

              • aunsen aunsen 5

                特地前来膜拜鸟哥!

                • Blinux Blinux 3

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

                  • 郁闷中 郁闷中 1

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

                      • 瘦脸 瘦脸 0

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

                      • 郁闷中 郁闷中 1

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

                        • 枝上又闻啼 枝上又闻啼 0

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

                          • huzi huzi 2

                            那如果要指定缩略图呢?

                            • ucer ucer 1

                              好东西,非常感谢。

                              • zoung zoung 0

                                $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’);

                                } ?>

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

                                • 海子 海子 1

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

                                    • 知更鸟 知更鸟 Admin

                                      @海子 不知你要修改什么

                                        • 海子 海子 1

                                          @知更鸟 修改随机显示图片的数量

                                      • 后80世代 后80世代 2

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

                                        • JEFF JEFF 1

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

                                            • JEFF JEFF 1

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

                                            • 小峰子 小峰子 0

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

                                              • 莫也 莫也 6

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

                                                • 夏天用什么护肤品好 夏天用什么护肤品好 1

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

                                                  • sinsky sinsky 2

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

                                                    • Xiaomi Xiaomi 1

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

                                                      • Xiaomi Xiaomi 1

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

                                                        • maxling maxling 4

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

                                                          • 小方 小方 0

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

                                                            麻请解答下,谢谢!

                                                            我把代码改成这样:
                                                            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

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

                                                            • 丫霸名片 丫霸名片 0

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

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

                                                              • 多卡达人 多卡达人 0

                                                                我的代码

                                                                echo ‘<img width=”140″ height=”98″ src=”‘.$strResult[1][0].'” alt=”‘.trim(strip_tags( $post->post_title )).'” />’;    e {  echo ‘<img width=”140″ height=”98″ src=”‘.get_bloginfo(‘template_url’).’/img/thumbnail.png” alt=”‘.trim(strip_tags( $post->post_title )).'” />’;    

                                                                使用你的方法修改会发生代码错乱

                                                                请问该怎么改

                                                                • macxiu macxiu 2

                                                                  请问是修改那个文件呢

                                                                  • 阳仔导航 阳仔导航 0

                                                                    博主您好,请问你这个文章后面的点赞和分享功能是怎么实现的呢,是用的什么插件吗

                                                                    • Suvan Suvan 1

                                                                      求教鸟哥,我的文章内容本身有图片,我如何获取这张图片的其他尺寸图地址呢?

                                                                      • 楚有才 楚有才 0

                                                                        鸟歌 ,主题4.4,关于缩略图,目前是取文章的第一张图做为缩略图,如果没有图就随机显示,但目前的问题是,外链图片取不到,或者是格式不对,规格不对,所以我想改成直接全部随机,在未指定缩略图的情况下,请问是修改哪个文件下的代码?如何修改

                                                                      • 来自外部的引用: 6

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