WordPress媒体库自定义错误信息锚点无法点击的解决方法求助

问题根源 #

WordPress媒体库在渲染上传错误提示时，会自动转义所有HTML内容，导致直接写入$file['error']的锚点标签被解析为纯文本。同时你的代码中缺失了图片尺寸的获取逻辑，$image_size变量未定义会导致验证条件永远无法触发。

解决方案1：前端JS替换占位符（错误提示显示在上传框内） #

先使用自定义占位符替代HTML标签，再通过前端脚本将占位符转换为可点击链接：

1. 修改上传验证函数

add_filter('wp_handle_upload_prefilter','mdu_validate_image_size');
function mdu_validate_image_size( $file ) {
    $limit = 500;
    
    // 获取图片宽高，计算最大边长
    $image_info = getimagesize($file['tmp_name']);
    if (!$image_info) {
        return $file;
    }
    $image_size = max($image_info[0], $image_info[1]);

    $is_image = strpos($file['type'], 'image');

    if ( ( $image_size > $limit ) && ($is_image !== false) ) {
        // 用自定义占位符避免HTML转义
        $file['error'] = "点击查看错误信息 [mdu_link]点击获取更多信息[/mdu_link]";
        return $file;
    }

    return $file;
}

2. 添加前端解析脚本

add_action('admin_enqueue_scripts', 'mdu_enqueue_upload_fix_script');
function mdu_enqueue_upload_fix_script($hook) {
    // 仅在媒体库页面加载脚本
    if (!in_array($hook, ['upload.php', 'media-new.php'])) {
        return;
    }

    wp_add_inline_script('media-upload', '
        jQuery(document).ready(function($) {
            // 监听错误提示元素插入
            $(document).on("DOMNodeInserted", ".upload-error", function() {
                const $errorEl = $(this);
                const errorContent = $errorEl.text();
                if (errorContent.includes("[mdu_link]")) {
                    // 替换占位符为HTML链接
                    const htmlContent = errorContent.replace(
                        /\[mdu_link\](.*?)\[\/mdu_link\]/g,
                        "<a href=\'https://example.com\' target=\'_blank\'>$1</a>"
                    );
                    $errorEl.html(htmlContent);
                }
            });
        });
    ');
}

解决方案2：Admin Notices显示独立提示（错误提示在页面顶部） #

如果希望错误提示在页面顶部展示，可使用WordPress原生的通知钩子，无需处理HTML转义：

add_filter('wp_handle_upload_prefilter','mdu_validate_image_size');
function mdu_validate_image_size( $file ) {
    $limit = 500;
    
    $image_info = getimagesize($file['tmp_name']);
    if (!$image_info) {
        return $file;
    }
    $image_size = max($image_info[0], $image_info[1]);

    $is_image = strpos($file['type'], 'image');

    if ( ( $image_size > $limit ) && ($is_image !== false) ) {
        // 存储错误标记到会话
        session_start();
        $_SESSION['mdu_upload_size_error'] = true;
        $file['error'] = '图片尺寸超出限制，请查看页面顶部提示';
        return $file;
    }

    return $file;
}

add_action('admin_notices', 'mdu_display_upload_error_notice');
function mdu_display_upload_error_notice() {
    session_start();
    if (isset($_SESSION['mdu_upload_size_error']) && $_SESSION['mdu_upload_size_error']) {
        ?>
        <div class="notice notice-error is-dismissible">
            <p>图片尺寸超出限制：<a href="https://example.com" target="_blank">点击获取更多信息</a></p>
        </div>
        <?php
        // 清除标记避免重复显示
        unset($_SESSION['mdu_upload_size_error']);
    }
}

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