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

2011年2月8日14:05:08 153 20,413
摘 要

  春节长假什么也没干,基本除了吃就是睡,要不就是网上看电影,答应朋友作的网店主题连构思都没想好。今天睡到自然醒,起来回答了几个网友的问题,着手收集一下素材,并精简热点新闻主题功能,准备已此为基础为朋友弄个网店主题,其实就是一个图片主题而已,整理中突然想起主题缩略图还有部分功能未开发出来,于是就有了这篇。
   HotNews pro2.4主题缩略图功能包括了三种调用显示模式,添加自定义栏目显示特定的图片、自动读取文章中图片(同时支持本地及外链图片)及随机缩略图。

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

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
我的微信
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
Begin主题购买

发表评论

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

目前评论:153   其中:访客  100   博主  28   引用   7

    • www.seo3s.com 0

      鸟哥,我想用你的hotnews模版改一个服装企业网站。但是不会缩略图调整大小,能给个攻略吗?所需要更改缩略图的地方:CMS:热点、图片滚动、最新文章缩略图、底部热门分类等。内页的也需要改。还有相册哪里。
      谢谢了。

        • 知更鸟 Admin

          @www.seo3s.com 这就是攻略了
          http://zmingcx.com/wordpress-theme-modify-tutorial.html

      • 来自外部的引用: 7

        • 本博客所使用主题作者官网提供的使用问题汇总 | 法眼观天下
        • HotNews pro使用问题汇总(更新中) | 狗窝里的世界
        • HotNews pro使用问题汇总(更新中) | SEVEN
        • 知更鸟主题常见问题汇总_大河笨鸟博客
        • HotNews pro使用问题汇总 | 乌托『不再』邦
        • HotNews-FAQ | 乌托『不再』邦
        • 知更鸟热点新闻主题问题汇总 | 乌托『不再』邦