大前端WordPress D8主题优化之:缩略图裁切

大前端浩子同学的新WordPress主题D8太给力了,目前可以说全网D8,很多博主朋友们都在使用D8欢乐博客中,当然我也不例外,好的主题,当然要享受一下。

但大前端的主题还有些地方可以进行优化的,比如全站的缩略图,浩子同学就没有进行优化,全部是整张图片显示,没有进行任何裁切处理,对于流量大的博客来说,这无所谓,但对于流量小的可怜的博客,日志中又有很多图片的博主来说,就完全不同了,本文主要介绍一下简单几招,全站瘦身,让你的博客不占流量,闪电加载!

D8缩略图是通过deel_thumbnail函数进行提取的,这个函数在主题目录下的functions.php中,大家可以自行搜索查找,原来代码如下:

if ( ! function_exists( 'deel_thumbnail' ) ) :
function deel_thumbnail() {
global $post;
if ( has_post_thumbnail() ) {
$domsxe = simplexml_load_string(get_the_post_thumbnail());
$thumbnailsrc = $domsxe->attributes()->src;
echo '<img src="'.$thumbnailsrc.'" alt="'.trim(strip_tags( $post->post_title )).'" />';
} else {
$content = $post->post_content;
preg_match_all('/<img.*?(?: |t|r|n)?src=['"]?(.+?)['"]?(?:(?: |t|r|n)+.*?)?>/sim', $content, $strResult, PREG_PATTERN_ORDER);
$n = count($strResult[1]);
if($n > 0){
echo '<img src="'.$strResult[1][0].'" alt="'.trim(strip_tags( $post->post_title )).'" />';
}else {
echo '<img src="'.get_bloginfo('template_url').'/img/thumbnail.png" alt="'.trim(strip_tags( $post->post_title )).'" />';
}
}
}
endif;

这段代码只提取了文章的第一张图片,但不管图片多大,都没有对图片进行裁切压缩,下面是我优化后的函数代码,替换上面代码:

/*缩略图*/
if ( ! function_exists( 'deel_thumbnail' ) ) :
function deel_thumbnail() {
global $post;
if ( has_post_thumbnail() ) {
$domsxe = simplexml_load_string(get_the_post_thumbnail());
$thumbnailsrc = $domsxe->attributes()->src;
echo '<img width="220" height="150" src="'.$thumbnailsrc.'" alt="'.trim(strip_tags( $post->post_title )).'" />';
} else {
$content = $post->post_content;
preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $strResult, PREG_PATTERN_ORDER);
$n = count($strResult[1]);
if($n > 0){
echo '<img width="220" height="150" src="'.get_bloginfo("template_url").'/timthumb.php?src='.$strResult[1][0].'&w=220&h=150&zc=1" alt="'.trim(strip_tags( $post->post_title )).'" />';
}else {
echo '<img width="220" height="150" src="'.get_bloginfo('template_url').'/img/thumbnail.png" alt="'.trim(strip_tags( $post->post_title )).'" />';
}
}
}
endif;

上面代码将配合使用大名鼎鼎的 timthumb.php 文件对缩略图自动裁切成指定尺寸,并保存在缓存目录,我使用的是220×150,你可以根据自己需要改动尺寸。

下载 timthumb.php 文件到你的D8主题目录,新建目录cache,并设置可写权限777,新的缩略图函数就自动对图片进行裁切到220×150尺寸,并保存到你的缓存目录cache,这样就可以全站节约大量流量,博客的访问速度自然就会提升N倍。

当然,大家可能被标题诱惑到了,我并不是提供大前端D8主题的下载,而是提供一个优化方案,估计在使用D8流量又不大的朋友,一定觉得本文有用,打算使用D8的朋友,请直接围观大前端博客购买正版。

可能是我提供的代码应该可以正常使用,但不排除被WP自动转义的可能,应大家需要,我把代码弄到记事本里,直接下载即可。
deel_thumbnail优化版缩略图代码(右键另存)

落花生

认准了方向,就要勇敢地走下去,十年磨一剑,我相信,只要坚持,一切都有可能。

相关日志

  1. 没有图片

    2009.10.21

    菠萝筐升级到 WordPress 2.8.5

    今晚应该说是双升级,用了一下午的时间把我的系…

  2. 没有图片

    2011.05.17

    WordPress Multisite 显示站点ID

    WordPress Multisite 后台…

  3. 没有图片

    2014.01.07

    Windows 8.1 系统镜像备份/恢复教程

    在 Windows XP 系统,我们习惯使用…

  4. 没有图片

    2010.07.30

    WordPress 3.0.1正式版发布

    今日登陆后台发现WordPress 3.0.…

  5. 没有图片

    2012.03.03

    精选15个CSS框架

    1.960 Grid System 960网…

  6. 2013.10.25

    WordPress 3.7 Basie 正式版发布

    今天WordPress 3.7 正式版发布了…

评论

  1. 烂番茄网 2014.07.17 12:45下午

    很是给力哈哈!!

  2. 媚眼儿风流 2014.02.21 2:10下午

    刚才实验了一下得上传的图片有效果,不过盗链的图片就不行了,图片本地其实也不错不然人家一改图片就全部看不到了

  3. 魅叶子 2013.11.05 6:19下午

    没发现cache文件夹有略缩图啊,跟没改一样。看不出效果?……

  4. 逗婦乳 2013.10.22 4:14下午

    看來是我的問題了,現在提示unexpected $end in ****/functions.php line 719關鍵是我的719行是?>,無語ing,看來得去看看php的語法了

  5. 逗婦乳 2013.10.08 4:10下午

    博主,我只要把你的代碼替換過去就提示錯誤
    提示錯誤的那一行代碼是preg_match_all('//sim', $content, $strResult, PREG_PATTERN_ORDER);

    • 落花生 2013.10.08 11:04下午

      看看有没有新建cache 目录,并设置权限777

      • 逗婦乳 2013.10.09 12:05上午

        博主,我檢查過了,目錄存在並且,權限為777

        • 落花生 2013.10.09 12:14上午

          这是我在使用的代码,应该不会出现问题,你看一下代码有没有提示错误?WP喜欢转义代码……。

          • 逗婦乳 2013.10.09 12:22上午

            Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING in /home/aapplein/public_html/aapple/wp-content/themes/d8/functions.php on line 216意識這個

          • 逗婦乳 2013.10.09 12:23上午

            看來D8的問題不在少數

          • 菠萝 2013.10.09 4:03下午

            不一定完全是D8的问题,也许我发布出来的代码被WP转义了,等我把PHP源文件提供下载,也许就好了。

          • 逗婦乳 2013.10.21 2:37下午

            什麽時候可以提供

          • 落花生 2013.10.22 8:43上午

            已经把代码更新了,同时也提供了txt文件下载

  6. 站长 2013.10.08 6:42上午

    为什么,我按照你说的做了以后,网页都打不开?改了代码,上传了 timthumb.php

    • 落花生 2013.10.08 1:29下午

      看看图片的缓存目录存在不,其权限设置为777了没。。。

  7. 大喇叭 2013.10.05 10:29上午

    这个好…评价的社交媒体登入是什么插件啊…

  8. 空城旧梦 2013.09.29 8:24下午

    每篇文章从来都是我亲手制作的略缩图(特色图像),,,

  9. 点点滴滴 2013.09.28 2:50下午

    以为提供下载呢

  10. 没有人 2013.09.17 12:53上午

    博主好,假如在改代码之前的图片会自动生成缩略图吗?

  11. Louis Han 2013.09.14 12:35上午

    好的主题毕竟还是比较少啊

  12. 郑杰 2013.09.14 12:24上午

    李哥你这个优化做得也不是很好嘛。每张图片都这么大,哪里压缩了,你看看我的博客,每张图片都比你小得多

    • Sam 2013.09.20 3:11上午

      小鸭子~我冲着优化进来~~发现还不如你的D8~~~

      • 落花生 2013.09.21 12:09上午

        图片已经是压缩之后的啦

      • 落花生 2013.09.21 10:37下午

        真正优化好的,请围观这里:wpunion.org,我博客写了教程之后,还没有时间去优化呢

        • Sam 2013.09.21 11:43下午

          呃~~去看了你优化完的那个站~~还是有效果的,pagespeed 和yslow评分都到了B,但是。。我还是给你一个建议。。去扒这层主博客的代码。。。一样的主题,他都已经两个A了哟。。。

          • 落花生 2013.09.22 8:14上午

            哈哈,不扒不扒啦。。。

          • 郑杰 2013.09.24 1:03下午

            你丫的山姆叔叔,别逼我扒光你。。。我国庆节要终极优化。我把我的文章略缩图都按照右侧Gravatar头像的lazyload处理 :mrgreen:

          • 落花生 2013.09.25 8:08上午

            哈哈,扒吧扒吧,快来扒吧。。。等我过去再给你扒回来!! 😈

  13. ssd 2013.09.13 1:55下午

    李哥你好,我也买了这个主题,但不过烦恼了,传上去预览没反应,直接启用全站都打不开,两个VPS都是一样,我PHP是5.2.17p1,用的是lnmp,函数已经全部删除掉php.ini”里面的函数中的disable_funcions = ,还是这样,wordpress是3.61,权限777,没办法了,向您求助

    • 落花生 2013.09.13 11:43下午

      买了主题之后,使用过程中遇到问题,直接去大前端反馈,主题确实还有一些问题需要完善,请移步:daqianduan.com

  14. 唯美图片 2013.09.11 3:16下午

    估计用不了多久,D8主题就泛滥了。。

    • 落花生 2013.09.11 5:00下午

      也许吧,但用得多了,并不是坏事,毕竟是好主题

  15. 一堵墙 2013.09.10 11:15下午

    大前端的主题一直比较经典。

    • WP联盟 2013.09.11 1:53下午

      确实是哦,不是一般的经典

  16. 自由人 2013.09.10 5:03下午

    这主题确实看着很带感啊~~

    • 落花生 2013.09.10 11:02下午

      主题很带感!你的zAlive也相当带感,我都专门发文章介绍了!膜拜,我的老朋友!进步很大,再接再厉!

  17. wordpress主题 2013.09.10 10:47上午

    这个文件不小啊。。用作缩略图是否有点复杂了????

    • 落花生 2013.09.10 2:34下午

      并不复杂啊,但如果图片不裁切的话,加载起来,占流量就太大了

    • 落花生 2013.09.10 2:53下午

      同时,兄弟还有没有更好的方案?即可以缩略图裁切,又不使用这个文件的?求教。。。

    • shine 2013.10.22 9:28下午

      想说缩略图质量可以调节吗? 保存高清哪里设置?

      • 落花生 2013.10.23 2:44下午

        这里已经是100%裁切了,可能是因为缩放的原因,看着会有不太清楚的感觉,你需要显示多大的,把尺寸就调到多大就清楚了

    • 好值网 2013.11.23 9:35上午

      博主,这不能压缩站外图片啊,原来的文件没备份,我改不回去了……

    • IT冰狐 2014.03.02 2:31下午

      想问问你这个验证码是怎么添加的啊

      • 落花生 2014.03.04 10:13下午

        一个数学运算的插件,在wpbox.cn里有分享

        • IT冰狐 2014.03.04 10:15下午

          已经搞定了,添加了几行代码就行了,谢谢

    • aodeltail 2014.03.10 10:38上午

      博主,按你说的更改之后,没有缩略图了

    • 找牛 2015.01.07 11:29上午

      谢谢楼主,我的D8主题按照你的方法优化,效果确实不错。谢谢。

About

马拉松运动员,沉迷于跑步;关注科技前沿,关注互联网!与跑者、程序员、设计师为伍,一起跑步健身,一起编写程序,为自由而战!