大前端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.31

    如何制作 Mountain Lion 全新安装U盘(转)

    昨天搞到手一台 MACBook Pro 15…

  2. 2013.12.26

    phpMyAdmin “缺少 mcrypt 扩展。请检查 PHP 配置。”解决办法

    在安装配置phpMyAdmin管理mysql…

  3. 没有图片

    2010.03.25

    Adobe CS5功能介绍及相关视频

    Adobe在之前已经公布了很多cs5软件的新…

  4. 没有图片

    2011.10.29

    WordPress边栏显示日志评论排行榜

    我的博客边栏一直在使用着关注博客排行榜,这些…

  5. 2011.03.31

    隆重推出WordPress主题 LSZ BlueCMS Pro V3

    近来我有点蛋疼,一直在折腾WordPress…

  6. 没有图片

    2009.10.27

    菠萝筐启用WordPress代码高亮插件wp-syntax

    Image via Wikipedia 在博…

评论

  1. 魅叶子 2013.11.05 6:19下午

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

  2. 逗婦乳 2013.10.22 4:14下午

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

  3. 逗婦乳 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文件下载