大前端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. 没有图片

    2013.12.28

    Debian Nginx 如何添加虚拟主机

    这段时间折腾阿里云,开始是用CentOS加固…

  2. 没有图片

    2013.12.28

    几个有趣实用的图片搜索引擎推荐

    今天向大家推荐的几款有趣的图片搜索引擎是由 …

  3. 没有图片

    2011.11.20

    为WordPress博客置顶日志添加标记

    今晚又是一夜未眠,无聊之中就把博客折腾了一下…

  4. 没有图片

    2012.04.23

    自定义WordPress作者信息

    WordPress的作者信息默认的为AIM,…

  5. 没有图片

    2009.12.02

    WordPress 2.9 Beta2发布公测

    WordPress 2.8.6刚 发布不久,…

评论

  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

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