让WordPress主题随机显示缩略图

WordPress4316.1K阅读模式

之前本人的新作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
我的微信
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
评论  43  访客  33  作者  4
    • underone
      underone 2

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

      • 八卦斯基
        八卦斯基 1

        已经弄好。很喜欢。

          • 知更鸟
            知更鸟

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

            • 海子
              海子 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

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

                                  • 后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文件夹里的图片,然后显示到轮换上,我在网上查了说是要遍历,可惜我不会,知更鸟帮帮我吧,给我写一个函数或者一个文件,调用位置就在默认主题的那个图片显示的地方。谢谢
                                          我的邮箱wangxiaofengvip@gmail.com

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

                                                                  匿名

                                                                  发表评论

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

                                                                  拖动滑块以完成验证