改进HotNews pro2.4缩略图调用方法

知更鸟
知更鸟
知更鸟
站长
2583
文章
0
粉丝
HotNews主题15320,974阅读模式
摘要  春节长假什么也没干,基本除了吃就是睡,要不就是网上看电影,答应朋友作的网店主题连构思都没想好。今天睡到自然醒,起来回答了几个网友的问题,着手收集一下素材,并精简热点新闻主题功能...

春节长假什么也没干,基本除了吃就是睡,要不就是网上看电影,答应朋友作的网店主题连构思都没想好。今天睡到自然醒,起来回答了几个网友的问题,着手收集一下素材,并精简热点新闻主题功能,准备已此为基础为朋友弄个网店主题,其实就是一个图片主题而已,整理中突然想起主题缩略图还有部分功能未开发出来,于是就有了这篇。

HotNews pro2.4主题缩略图功能包括了三种调用显示模式,添加自定义栏目显示特定的图片、自动读取文章中图片(同时支持本地及外链图片)及随机缩略图。其实还有一种功能函数已添加,只是未具体调用显示,那就是本地上传图片自动裁剪后的图片调用,此函数在functions.php中:

  1. add_image_size('featured', 140, 100, true);

此句函数作用就是,本地上传图片后自动生成裁剪为140×100大小的一张缩略图。此功能不受Wordpress后台媒体选项中缩略图大小限制,可以任意调整尺寸大小。

如果你上传的图片尺寸较大,直接调用显示为文章缩略图,会影响页面加载速度,而调用显示这张裁剪压缩后的小图片,则影响会小得多。

与Wordpress媒体选项中默认自动生成缩略图功能一样,有时会感觉这个功能很鸡肋,默认情况下当你上传一张图片后Wordpress会帮你自动生成不同大小的4张缩略图,严重浪费空间,因此,一般情况下要在第一时间到Wordpress媒体选项中把缩略图大小全部改成0,这样就不会产生大量无用的缩略图了。

不过萝卜青菜各有所爱,有的同学也许不再乎这么点空间,而且这一功能还是有些用处,可提高缩略图加载速度。下面就教大家如何调用这个裁剪压缩后的缩略图:

修改主题请使用专门的文本编辑工具如:Notepad++,决不能用系统自带的记事本编辑主题模板。

打开thumbnail.php找到:

  1. <div class="thumbnail">
  2. <?php if (has_post_thumbnail()) { the_post_thumbnail('home-thumb' ,array('class' => 'home-thumb')); }
  3. else { ?>
  4. <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><img class="home-thumb" src="<?php echo catch_first_image() ?>" width="140px" height="100px" alt="<?php the_title(); ?>"/></a>
  5. <?php } ?>
  6. <?php endif; ?>
  7. </div>

替换为:

  1. <div class="thumbnail">
  2. <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">
  3. <?php if (has_post_thumbnail()) { the_post_thumbnail('featured'); }
  4. else { ?>
  5. <img class="home-thumb" src="<?php echo catch_first_image() ?>" width="140px" height="100px" alt="<?php the_title(); ?>"/>
  6. <?php } ?>
  7. </a>
  8. <?php endif; ?>
  9. </div>

调用方法:

编辑文章上传图片时,在“插入到文章”按钮旁,选择“作为特色图像”,文章发表后在文章列表页面就会自动调用显示裁剪压缩后的缩略图了。

如果你还想在幻灯中也显示裁剪后的图片,可以在:

  1. add_image_size('featured', 140, 100, true);

下面添加一句:

  1. add_image_size('show', 400, 248, true);

这样,上传图片后就会自动生成另一张400× 248大小的图片。然后,打开slider.php同样找到:

  1. <?php if (has_post_thumbnail()) { the_post_thumbnail('home-thumb' ,array('class' => 'home-thumb')); }

替换为:

  1. <?php if (has_post_thumbnail()) { the_post_thumbnail('show'); }

如果未手动将上传的图片设置为特色图片,缩略图显示的还是那张原始的大图片,此功能不支持外链图片。

注:不准备使用此功能的主题使用者,请将functions.php中的那句自动生成缩略图的代码删掉!

本站文章大部分为原创,用于个人学习记录,可能对您有所帮助,仅供参考!

weinxin
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
评论  153  访客  100  作者  28
    • 老马
      老马

      感谢楼主勤奋的态度,非常感激!

      • yiyi
        yiyi

        老大,因为商品要全部显示文章中的图片,并不是一张的话,要改哪个函数?

          • 知更鸟
            知更鸟

            @ yiyi 主题不适合在文章列表页面显示文章全文

              • yiyi
                yiyi

                @ 知更鸟 老大,你误会我的意思了,我想说的是:如果文章中有很多商品的图片,那么在首页(即图片页面)调用这些文章中的图片能否全部调用,而不是一张,这个是哪个函数控制的?

            • Kam
              Kam

              很实用!博主你的模板太复杂了,还需要点时间研究下,哈哈!

                • 知更鸟
                  知更鸟

                  @ Kam 呵呵,基本就是一个大杂货铺,整理修改都很麻烦

                • 韩国
                  韩国

                  效果是什么样的,演示一下。我用的是插件。

                  • 恋上苹果
                    恋上苹果

                    呵呵,多谢鸟哥,缩略图这个功能可是改进了

                    • Surpet
                      Surpet

                      强烈要求鸟鸟做一个不需要PS的主题
                      哎 我用鸟鸟的主题都用成习惯了
                      但我不会PS
                      只得把美丽的部分砍掉

                        • 知更鸟
                          知更鸟

                          @ Surpet 呵呵,不需要PS的主题貌似比比皆是,应该不需要我去弄了

                        • yiyi
                          yiyi

                          我把这个方法用在图片模板页,把数值设置为:230,150,然后前台页面显示的图片一片模糊,不知道为什么?老大,如果是商品主题,能不能考虑把图片模板页做为展示页,然后调用文章中用到的所有图片呢?因为一张好像不够,手动添加为特色图片对于多图片的文章的话,有点麻烦

                            • 知更鸟
                              知更鸟

                              @ yiyi 你想像的功能,可以说是异想天开,不是不能实现,需添加特殊功能的模块,看你对网页设计方面也不是很精通,如果对主题要求较高,还是找人订作一个主题吧

                            • 小屁人
                              小屁人

                              嘿嘿,鸟哥,也许什么时候wp只剩咱们的hotnew主题啦……

                                • 知更鸟
                                  知更鸟

                                  @ 小屁人 呵呵,那不成了满大街,都穿一样的衣服,也太单调了
                                  没有了对比哪能进步啊

                                • Interphace
                                  Interphace

                                  模板不错。。刚开始看的有点乱。

                                  • 陨落de芳菲
                                    陨落de芳菲

                                    感谢分享,非常实用,学习借鉴了 :)

                                    • 晨光博客
                                      晨光博客

                                      鸟,你的页面怎么有好多乱码呀?

                                      • 爱情
                                        爱情

                                        鸟, 24版本,我改了一下css, 然后没有在chrome测试,然后在chrome浏览的时候啥都没有了.不知道怎么回事咯. 鸟指点一下.

                                          • 爱情
                                            爱情

                                            @ 爱情 已解决,只改了一些字体的颜色. 在本地测试的时候开启了ie浮雕效果,所以可以显示,而在线上没有开启,所以不显示 ,不知道为什么,求解.
                                            为什么要开浮雕效果呢?

                                          • fantl
                                            fantl

                                            鸟哥。2.1版本不是有个
                                            “首页可以选择是否显示缩略图,如果不显示则首页取消文字截断,并显示全文。”
                                            么。为啥2.4反而没了呢。我不想使用那个缩略图功能要怎么设置呀

                                            • svcoo
                                              svcoo

                                              出去了一个星期,终于回来了。过来看看

                                              • fwx04134
                                                fwx04134

                                                路过看看鸟大,听说IE 9快出RC版了,不知鸟大的这款主题用了HTML5 和 CSS3结合吗呵呵

                                                • 重庆礼品公司
                                                  重庆礼品公司

                                                  还是鸟哥这儿最热闹啊,更新也及时~~呵呵~!

                                                  • 小木同学
                                                    小木同学

                                                    知更鸟同学 我们是老乡 我这里有一个wordpress项目 感兴趣不?
                                                    要是感兴趣可以mail我。

                                                    • 小司
                                                      小司

                                                      鸟哥,请问下,右边那个推荐栏目怎么编辑啊。我的就一个未分类,刚学wordpress,请多指教啊。uisecret.icr38.net

                                                        • 知更鸟
                                                          知更鸟

                                                          @ 小司 看安装使用需知,特别是第1条

                                                            • 小司
                                                              小司

                                                              @ 知更鸟 鸟哥,我弄会了,哈哈,谢谢啊,太有成就感了

                                                          • yoxu
                                                            yoxu

                                                            缩略图我看是调用最后一张图,能不能改成调用第一张图?谢谢!

                                                            • 恋爱达人
                                                              恋爱达人

                                                              期待更好的版本, 3.0 ??? 呵呵.鸟,加油啊.

                                                              • yoxu
                                                                yoxu

                                                                添加自定义栏目显示特定的图片
                                                                要怎么添加?

                                                                  • 知更鸟
                                                                    知更鸟

                                                                    @ yoxu 自己学

                                                                    https://zmingcx.com/hotnews-pro-hot-news-theme-record-user-feedback-back.html
                                                                    https://zmingcx.com/hotnewspro24-problem-summary.html

                                                                  • 岚风
                                                                    岚风

                                                                    请问一下,2.4的风格在最新的WP3.05下有没有错误?

                                                                    • nxzasl
                                                                      nxzasl

                                                                      鸟哥,用了你的主题,选择cms模板,但是我这里经常要放一些youku的视频,安装了最新的WP-Thumbnails并启用了,但是没有效果?请能帮忙吗?

                                                                        • 知更鸟
                                                                          知更鸟

                                                                          @ nxzasl 傻瓜型的插件,也只能适合傻瓜型的主题
                                                                          对于这个主题直接使用恐怕不行
                                                                          可以用插件的调用代码,替换thumbnail.php中的所有代码
                                                                          并在插件设置中调整图片大小

                                                                            • nxzasl
                                                                              nxzasl

                                                                              @ 知更鸟 鸟哥,我联系了插件作者,也让他帮我调试了,但是他说调试完跟您的主题样式上还是有点问题,主要是麻烦您能帮我调试一下吗?我非常需要视频缩略图的功能。谢谢您

                                                                              想给您发邮件,但是找不到您的邮件地址。

                                                                          • ˉ黑色.小亮
                                                                            ˉ黑色.小亮

                                                                            鸟哥, 我在您模版的基础上进行了很多修改,让UL能稍微舒服点,
                                                                            http://www.blackxl.org/hotnewspro24-update-blackxl.html
                                                                            本人保留鸟哥所有版权,并为删任何版权信息,只是添加了一个update信息,
                                                                            如果鸟哥不介意可以去看看,如果可以的话, 在您blog也发布下…哈哈 – -!

                                                                              • 知更鸟
                                                                                知更鸟

                                                                                @ ˉ黑色.小亮 还真没看出来改了什么
                                                                                就看到把LOGO弄上面去了
                                                                                比如:侧边分类,根本不需删除,后台可以关闭
                                                                                另外,分类多,可以在“exclude=”后面添加分类ID,排除不想显示的分类

                                                                              • fengwx
                                                                                fengwx

                                                                                鸟哥,我调用hot,值自定义,但是博客模版首页顶部四个热点文章还是最新的四篇文章,添加hot自定义没有起到效果。是不是我还应该修改哪个地方或者需要主机的支持呢。谢谢鸟哥

                                                                                  • 知更鸟
                                                                                    知更鸟

                                                                                    @ fengwx 在顶部热点文章设置中改成key

                                                                                      • fengwx
                                                                                        fengwx

                                                                                        @ 知更鸟 谢谢鸟哥,以前看过这个设置给忘记了,记性大不如从前了呵呵

                                                                                    • 晴天
                                                                                      晴天

                                                                                      鸟哥,请教你一个问题,你博客用的下载动态那个是什么插件,就是附件下载地址是动态的这个功能。 我的附件总被盗链流量超标。。 谢谢你啊!!!

                                                                                      • fakezhu
                                                                                        fakezhu

                                                                                        鸟哥,请问文章自动生成的缩略图被压扁了, 该如何解决啊?

                                                                                        • fakezhu
                                                                                          fakezhu

                                                                                          ps:我记得有个zc参数可以自动裁剪,防止变形,不知道能否实现,减掉一部分,总比变形要好看啊

                                                                                            • robin
                                                                                              robin

                                                                                              @ fakezhu 2.2版采用timthumb函数自动裁剪
                                                                                              这篇文章的方法不会变形

                                                                                            • 蔸蔸
                                                                                              蔸蔸

                                                                                              鸟兄你的网店主题什么时候出啊~~如果想wordpress搞好一定要学好php吗?

                                                                                                • robin
                                                                                                  robin

                                                                                                  @ 蔸蔸 只要明白一点原理就可以了,关键是学好DIV+CSS

                                                                                                • 隐姓埋名
                                                                                                  隐姓埋名

                                                                                                  请问鸟哥,顶部热点图片的缩略图应该修改哪些文件呢?正文和幻灯的缩略已经按照您的方式修改成功,就是顶部热点还是变形,没有自动裁剪。谢谢

                                                                                                  • anhua
                                                                                                    anhua

                                                                                                    鸟哥,为什么我的博客只有顶部的图片点击能够跳转,而文章列表和相关文章的缩略图点击都没有链接,不能进入文章页面?谢谢!

                                                                                                      • 知更鸟
                                                                                                        知更鸟

                                                                                                        @ anhua 无网站链接,无法帮你

                                                                                                          • anhua
                                                                                                            anhua

                                                                                                            @ 知更鸟 这次把网址附上,www.zhuanhua.name补充一个问题,为什么我的热门文章那里只显示一个“自动草稿”?替换补丁试过,也是只显示一个自动草稿,是不是最近一个月没有更新的原因?因为前一段时间主机停了,一直没弄,这两天才恢复的。谢谢!

                                                                                                              • anhua
                                                                                                                anhua

                                                                                                                @ anhua 刚才的网址被自动填表弄错了,www.zhuanhua.name

                                                                                                                • 知更鸟
                                                                                                                  知更鸟

                                                                                                                  @ anhua 是的,文章没有评论造成的

                                                                                                            • 碎语人生
                                                                                                              碎语人生

                                                                                                              不知道修改了什么提示我这个错误
                                                                                                              Fatal error: Call to undefined function emptyempty() in /home/hljqch/public_html/wp-content/themes/HotNewspro24/functions.php on line 547

                                                                                                              • 华语
                                                                                                                华语

                                                                                                                我的博客在缩略图(thumbnail)上点击没有链接,无法从缩略图进入文章,是什么问题造成的?谢谢!http://www.zhuanhua.name/wp-content/uploads/2011/02/why.jpg

                                                                                                                • 碎语人生
                                                                                                                  碎语人生

                                                                                                                  重新装了一遍,按照主题文章中的所有挨个设置中。呵呵

                                                                                                                  • 寒雨梦阳
                                                                                                                    寒雨梦阳

                                                                                                                    请问:add_image_size(‘featured’, 140, 100, true); 这行代码在哪个文件?

                                                                                                                    • satsun
                                                                                                                      satsun

                                                                                                                      测试了一下 图片功能,果然不错。呵呵

                                                                                                                      • st
                                                                                                                        st

                                                                                                                        鸟哥啊, 首页上的登陆接口那 在IE9里会出问题哦(不是一排,而是3排), 我把 .login_t 加了Width才正常.希望你在下一个版本中改一下.

                                                                                                                        我再试下新功能 [img]http://cnst.tk/error.gif[/img]

                                                                                                                        • 美腿社
                                                                                                                          美腿社

                                                                                                                          add_image_size(‘featured’, 140, 100, true); 这行代码我也没找到。只有?>” width=”140px” height=”100px” alt=”

                                                                                                                          • 礼服租赁
                                                                                                                            礼服租赁

                                                                                                                            我最喜欢首页有高清的缩图,当然是要自动缩的,感谢博主提供资源!

                                                                                                                            • Magento小工
                                                                                                                              Magento小工

                                                                                                                              “天天睡到自然醒”,等以后有机器人普及了就能实现了。

                                                                                                                              • 仙妖
                                                                                                                                仙妖

                                                                                                                                額·····頂一個····博客設置好漂亮,字體陰影看起來非常舒服······這叫神馬技術,能把字體弄得這麼好看···

                                                                                                                                • erico.len
                                                                                                                                  erico.len

                                                                                                                                  zmingxc 我的主题用了你这个截图函数
                                                                                                                                  是不是套有点问题还是我的主题问题,特色图片设定后,前台生成那个缩略图的标签嵌套有点问题 本来是应该给图片加链接的文章摘要
                                                                                                                                  现在变成是 文章摘要链接把图片和文字包含一起了,请赐教谢谢

                                                                                                                                  • 山寨惹人爱
                                                                                                                                    山寨惹人爱

                                                                                                                                    鸟博,HotNewsPro 2.4的图片调用在3.1下有个毛病,我不知道别人是不是发现,或者只是我个人问题。

                                                                                                                                    就是在添加自定义栏目image的时候,文章会自动回到添加文章的原始状态,就是什么也没有,只能从草稿再编辑……

                                                                                                                                    • Anthony
                                                                                                                                      Anthony

                                                                                                                                      首先谢谢鸟哥的模板,实在是太漂亮了。
                                                                                                                                      近日更换为2.4后,在CMS模式下,自定义的image缩略图不管用啊,显示的是自动读取的文章内部的图片,但是自定义的thumbnail能正常显示。切换为blog模式后,则没有出现这个问题..

                                                                                                                                      • Stainless Steel Washers
                                                                                                                                        Stainless Steel Washers

                                                                                                                                        谢谢博主分享了哦!

                                                                                                                                        • JustHello
                                                                                                                                          JustHello

                                                                                                                                          哎~~~

                                                                                                                                          • smilebull
                                                                                                                                            smilebull

                                                                                                                                            这个模板太漂亮了,感谢分享

                                                                                                                                            • 亿品元素
                                                                                                                                              亿品元素

                                                                                                                                              方法不错

                                                                                                                                            匿名

                                                                                                                                            发表评论

                                                                                                                                            匿名网友

                                                                                                                                            拖动滑块以完成验证