已开启WordPress WebP上传，如何让媒体选择器显示预览？

我之前也遇到过一模一样的情况——能上传WebP但看不到预览，几百张图选起来真的头大！给你分享两个亲测有效的解决办法，按需选就行：

方法一：自定义代码修复（适合懂点开发的同学） #

问题根源在于：WordPress虽然通过你那串代码允许了WebP上传，但默认不会为WebP生成标准缩略图，媒体选择器也没法识别它的预览地址。我们需要补两段代码来搞定这两个环节：

1. 强制为WebP生成缩略图 #

把这段代码加到主题的functions.php（推荐用子主题，避免主题更新丢失代码）或者自定义插件里：

// 为WebP图片生成对应尺寸的缩略图
function webp_generate_thumbnail( $metadata, $attachment_id ) {
    $file = get_attached_file( $attachment_id );
    // 判断当前附件是否是WebP格式
    if ( strpos( $file, '.webp' ) !== false ) {
        $editor = wp_get_image_editor( $file );
        if ( ! is_wp_error( $editor ) ) {
            // 获取所有预设的图片尺寸
            $sizes = get_intermediate_image_sizes();
            foreach ( $sizes as $size ) {
                $size_data = get_image_size( $size );
                // 生成对应尺寸的缩略图
                $editor->resize( $size_data['width'], $size_data['height'], $size_data['crop'] );
                $resized_file = $editor->save();
                if ( ! is_wp_error( $resized_file ) ) {
                    // 更新附件元数据，记录缩略图信息
                    $metadata['sizes'][ $size ] = array(
                        'file' => basename( $resized_file['path'] ),
                        'width' => $resized_file['width'],
                        'height' => $resized_file['height'],
                        'mime-type' => $resized_file['mime-type'],
                    );
                }
            }
        }
    }
    return $metadata;
}
add_filter( 'wp_generate_attachment_metadata', 'webp_generate_thumbnail', 10, 2 );

2. 让媒体选择器识别WebP预览 #

再加上这段代码，确保媒体库的JS接口能返回正确的WebP缩略图地址：

// 修复媒体选择器的WebP预览显示
function webp_fix_media_preview( $response, $attachment, $meta ) {
    if ( strpos( $attachment->post_mime_type, 'image/webp' ) !== false ) {
        $thumbnail_url = wp_get_attachment_image_url( $attachment->ID, 'thumbnail' );
        if ( $thumbnail_url ) {
            // 为WebP图片补充预览尺寸信息
            $response['sizes']['thumbnail'] = array(
                'url' => $thumbnail_url,
                'width' => get_option( 'thumbnail_size_w' ),
                'height' => get_option( 'thumbnail_size_h' ),
                'mime-type' => 'image/webp',
            );
        }
    }
    return $response;
}
add_filter( 'wp_prepare_attachment_for_js', 'webp_fix_media_preview', 10, 3 );

注意事项：

• 新上传的WebP会自动生成缩略图并显示预览；
• 已经上传的旧WebP，需要用「Regenerate Thumbnails」插件批量重新生成缩略图才能生效。

方法二：用插件一键解决（适合不想写代码的同学） #

如果觉得代码麻烦，直接装个成熟的图片优化插件就行，比如：

• WebP Express：专门处理WebP格式，支持上传、自动转换、缩略图生成和预览修复；
• EWWW Image Optimizer：不仅支持WebP，还能压缩图片，自动处理所有格式的缩略图和预览。

这类插件都是开箱即用，激活后基本不用额外配置，就能解决WebP预览的问题，还能顺带优化图片加载速度。

内容的提问来源于stack exchange，提问作者S_R