WordPress上传特色图像时如何添加自定义宽度校验规则

完全可以实现该需求，无需安装第三方插件，通过前后端两层校验即可达到预期效果：前端在上传环节即时检测弹出提示，后端做兜底避免规则被绕过。

1. 前端即时拦截（上传时直接触发提示） #

该逻辑会在媒体面板的上传流程中提前读取图片宽高参数，不符合尺寸要求的文件会被直接移出上传队列，弹出错误提示，不会产生实际上传请求，就是你需要的「选完图立刻提示尺寸过大」的效果。

将以下代码添加到当前启用主题的functions.php文件底部，或通过代码片段插件插入即可：

// 注入特色图片上传尺寸校验前端脚本
add_action('admin_enqueue_scripts', function() {
    global $pagenow;
    // 仅在文章/页面编辑页加载脚本，不影响后台其他功能
    if (!in_array($pagenow, ['post.php', 'post-new.php'])) return;
    // 按需求自定义允许的最大宽高值
    $max_allowed_width = 1920;
    $max_allowed_height = 1080;
    wp_add_inline_script('plupload', "
    jQuery(document).ready(function($){
        if (typeof wp.Uploader === 'undefined') return;
        $.extend(wp.Uploader.prototype, {
            init: function() {
                this.uploader.bind('FilesAdded', function(uploader, files){
                    files.forEach(function(file){
                        // 跳过非图片类文件
                        if (!file.type.match(/image\/(jpe?g|png|gif|webp)/i)) return;
                        const tempImg = new Image();
                        tempImg.src = window.URL.createObjectURL(file.getNative());
                        tempImg.onload = function() {
                            const curWidth = tempImg.naturalWidth;
                            const curHeight = tempImg.naturalHeight;
                            window.URL.revokeObjectURL(tempImg.src);
                            // 尺寸超出阈值则拦截
                            if (curWidth > {$max_allowed_width} || curHeight > {$max_allowed_height}) {
                                uploader.removeFile(file);
                                alert(`图片尺寸过大，请上传宽度不超过{$max_allowed_width}px、高度不超过{$max_allowed_height}px的图片`);
                            }
                        }
                    });
                });
            }
        });
    });
    ");
});

2. 后端兜底校验 #

前端JS校验存在被禁用、篡改的可能，必须搭配后端校验做兜底，即使用户绕过前端上传违规图片，也会被WordPress拦截返回错误。
同样将以下代码添加到functions.php中，注意前后端设置的最大宽高值要保持一致：

// 图片上传尺寸后端兜底校验
add_filter('wp_handle_upload_prefilter', function($file) {
    // 跳过非图片类文件
    if (!str_starts_with($file['type'], 'image/')) return $file;
    // 这里的阈值要和前端设置的数值一致
    $max_allowed_width = 1920;
    $max_allowed_height = 1080;
    $img_size = getimagesize($file['tmp_name']);
    if ($img_size[0] > $max_allowed_width || $img_size[1] > $max_allowed_height) {
        $file['error'] = sprintf(
            '图片尺寸过大，请上传宽度不超过%dpx、高度不超过%dpx的图片',
            $max_allowed_width,
            $max_allowed_height
        );
    }
    return $file;
});

注意事项 #

• 代码中的$max_allowed_width、$max_allowed_height两个参数可根据实际需求修改为你需要的尺寸阈值
• 不要直接修改WordPress核心程序文件，代码放在主题functions.php时，建议使用子主题存放，避免主题更新时代码被覆盖
• 上述代码默认对编辑页所有图片上传生效（包含文章内容插图、特色图像），如果需要严格限定仅特色图像上传时触发校验，可以在前端脚本中增加判断，识别当前上传器是否挂载在特色图像元盒子（DOM ID为postimagediv）内即可，通用场景下统一校验图片尺寸可以避免大尺寸图拖慢前台加载速度，体验更好。

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