Wordpress模板重写了文章列表的缩略图显示方式,把缩略图的质量压缩得很低,50多K的图片压缩只有只有9K,特别糊,因为还是想让文章列表的图片清晰一些,自己控制好图片的大小再上传就行,于是,尝试研究起相关的代码:

核心的代码在 /inc/core.de.php 里面:

if( !defined( 'THEME_THUMBNAIL_PATH' ) ) define( 'THEME_THUMBNAIL_PATH', '/cache/theme-thumbnail' ); //存储目录
function biji_build_empty_index( $path ){ //生成空白首页
    $index = $path . '/index.php';
    if( is_file( $index ) ) return;
    wp_mkdir_p( $path );
    file_put_contents( $index, "<?php\n// Silence is golden.\n" );
}
function biji_crop_thumbnail( $url, $width, $height = null ){ //裁剪图片
    $width = (int) $width;
    $height = empty( $height ) ? $width : (int) $height;
    $hash = md5( $url );
    $file_path = constant( 'WP_CONTENT_DIR' ) . constant( 'THEME_THUMBNAIL_PATH' ) . "/$hash-$width-$height.jpg";
    $file_url = content_url( constant( 'THEME_THUMBNAIL_PATH' ) . "/$hash-$width-$height.jpg" );
    if( is_file( $file_path ) ) return $file_url;
    $editor = wp_get_image_editor( $url );
    if( is_wp_error( $editor ) ) return $url;
    $size = $editor->get_size();
    $dims = image_resize_dimensions( $size['width'], $size['height'], $width, $height, true );
    //if( !$dims ) return $url;
    //$cmp = min( $size['width'] / $width, $size['height'] / $height );
    //if( is_wp_error( $editor->crop( $dims[2], $dims[3], $width * $cmp, $height * $cmp, $width, $height ) ) ) return $url;
    biji_build_empty_index( constant( 'WP_CONTENT_DIR' ) . constant( 'THEME_THUMBNAIL_PATH' ) );
    return is_wp_error( $editor->save( $file_path, 'image/jpg' ) ) ? $url : $file_url;
}

//缩略图获取post_thumbnail
/*function post_thumbnail($width = 275,$height = 170)
{
    global $post;
    if( has_post_thumbnail( $post->ID ) ){
        $thumbnail_ID = get_post_thumbnail_id( $post->ID );
        $thumbnailsrc = wp_get_attachment_image_src( $thumbnail_ID, 'full' );
        if( $width == 0 && $height == 0 ) return $thumbnailsrc[0];
        else return biji_crop_thumbnail($thumbnailsrc[0],$width,$height);
    } else {
        $content = $post->post_content;
        preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $strResult, PREG_PATTERN_ORDER);
        if(count($strResult[1]) > 0){
            if( $width == 0 && $height == 0 ) return $strResult[1][0];
            else return biji_crop_thumbnail($strResult[1][0],$width,$height);
        } else return false;
    }
}*/

我自己虽然也懂一些编程,但毕竟不是程序员出身,研究了好久也没有完全研究明白,然后突然想到,为啥不用ChatGPT来协助呢,于是,我把这段代码贴到ChatGPT,先让它解释一下生成缩略图的原理是什么,收到这样的答案:

这段代码是用于在 WordPress 主题中生成缩略图的功能。代码的核心原理如下:

首先定义了一个常量 THEME_THUMBNAIL_PATH,表示缩略图的存储目录路径。

biji_build_empty_index 函数用于生成空白的 index.php 文件,用于保护存储目录的安全性。

biji_crop_thumbnail 函数用于裁剪图片生成缩略图。它接收图片的 URL、宽度和高度作为参数。函数内部会检查是否已存在相同尺寸的缩略图,如果存在则直接返回缩略图的 URL。否则,它会获取原始图片的编辑器对象,计算裁剪尺寸,并执行裁剪操作。最终,它会将裁剪后的图片保存到指定的存储目录,并返回缩略图的 URL。

post_thumbnail 函数用于获取文章的缩略图。它首先检查是否有特色图片,如果有则直接使用特色图片。如果没有特色图片,它会从文章内容中提取第一个图片标签的 URL,并使用 biji_crop_thumbnail 函数生成相应尺寸的缩略图。

综合来看,这段代码通过对原始图片进行裁剪,生成并存储不同尺寸的缩略图,以提高 WordPress 主题中的图片加载效率和页面加载速度。

然后,我又问:如果不允许这段代码进行图片裁剪,缩略图保持原图片尺寸和大小,应该如何修改?于是,ChatGPT直接给出了修改方法:

biji_crop_thumbnail 函数中,你可以将裁剪的部分代码注释掉,以保持尺寸一致:

function biji_crop_thumbnail($url, $width, $height = null) {
   // ... 其他代码 ...

   // 注释掉裁剪的代码
   // $cmp = min($size['width'] / $width, $size['height'] / $height);
   // if (is_wp_error($editor->crop($dims[2], $dims[3], $width * $cmp, $height * $cmp, $width, $height))) return $url;

   // ... 其他代码 ...
}

post_thumbnail 函数中,你可以直接返回原图片的 URL,而不是调用 biji_crop_thumbnail 函数:

function post_thumbnail($width = 275, $height = 170) {
   global $post;
   if (has_post_thumbnail($post->ID)) {
       $thumbnail_ID = get_post_thumbnail_id($post->ID);
       $thumbnailsrc = wp_get_attachment_image_src($thumbnail_ID, 'full');
       return $thumbnailsrc[0];
   } else {
       $content = $post->post_content;
       preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $strResult, >PREG_PATTERN_ORDER);
       if (count($strResult[1]) > 0) {
           return $strResult[1][0];
       } else {
           return false;
       }
   }
}

这样,修改后的代码将会保持缩略图与原图片尺寸和大小一致,不再进行裁剪操作。

按照ChatGPT的方法修改后,马上文章列表界面就不再用模版定义的方式生成缩略图,以及读取图片也从Wordpress本身的upload文件夹读取原始文件了,太棒了。

所以,能够理解,为什么当ChatGPT出来的时候,很多人都在惊呼,这是一个跨时代的事物,未来的人们的竞争力,已经变成了谁更好地掌握和运用人工智能,谁就更强。