网站空间有限,一直寻找合适的图床,却始终未能找到理想的解决方案。例如,许多免费图床虽然表面上成本为零,但往往存在上传限制、文件无故丢失或广告侵扰等问题,更令人担忧的是,它们有时会植入恶意代码,导致个人数据泄露或网站被攻击的风险。至于 OSS 等对象存储服务,虽然稳定可靠,但需要持续付费,对于个人博客或小型项目来说,这笔开销显得不太划算。网上有大神推荐使用 GitHub 作为图床,这确实是一个巧妙的方法,通过仓库存储图片并借助 CDN 加速,理论上可以节省大量空间。然而,国内访问 GitHub 的速度常常很慢,甚至因为网络屏蔽而频繁出现连接超时或无法打开的情况,这对于依赖稳定访问的网站来说,无疑是一个巨大的障碍。

因此,尽管尝试了多种途径,从免费图床到付费 OSS 再到 GitHub 这类变通方案,但要么牺牲了安全性,要么增加了成本,要么受限于访问体验,至今仍未找到一个在成本、稳定性和速度之间取得平衡的完美图床选择。

想起家里有一台群晖 nas,每天运行着,是否可以用群晖作为图床服务器呢?

当然有,实际上群晖 NAS 系统内嵌的 Web Station 和 Photo Station 套件就为搭建私人图床提供了便利的基础,你只需通过简单的配置,比如启用 Web 服务、设置共享文件夹权限,并利用 DDNS 服务获取一个外部可访问的域名或地址,便能将 NAS 上的存储空间转化为一个稳定、私密的在线图片托管平台,这种方式不仅避免了依赖第三方图床可能遇到的速度限制、存储费用或服务关停的风险,还能让你完全掌控数据安全和访问管理,例如你可以为不同相册设置独立的分享链接,甚至结合 Cloud Sync 套件实现多设备间的图片自动备份与同步,真正实现数据随存随取、高效管理。

我这里使用的是云梦团队开发的一款高效稳定的第三方图床系统——hellohao 图床,它支持多种存储方式、图片压缩和防盗链等实用功能,能够极大地简化图片管理流程并提升网页加载速度;下面我将以简洁明了的步骤,手把手带大家从零开始搭建这套系统,包括环境配置、程序部署以及基础设置等关键环节,确保即使是没有技术背景的用户也能轻松上手并快速投入使用。

前提准备:

1、群晖 nas

2、公网 IP(或是是外网可以访问的 frp 反代理)

首先,为了在群晖套件中心顺利安装云梦大神开发的 Hellohao 图床程序,我们需要在套件来源中添加一个特定的第三方源地址,即:https://spk.520810.xyz:666;完成添加后,用户便能在套件中心的“社群”或相应分类中直接搜索并找到 Hellohao 图床,其安装过程与安装其他官方或第三方套件无异,通常只需点击安装按钮并根据向导提示完成即可,这一步骤本身较为直观简便,因此不再赘述其详细操作,但关键在于确保添加的源地址准确无误,以避免因源失效或错误而无法获取安装包。

安装好 Hellohao 图床系统并成功登录后台后,首先需要进入站点配置界面,根据个人需求设置存储路径、访问域名以及 NAS 连接的详细参数,例如确保 SMB 或 WebDAV 协议的正确配置,以便系统能够稳定对接你的网络附加存储设备;完成这些基础设置后,你就可以通过上传功能将本地图片便捷地传输到指定的 NAS 目录中,系统随后会自动为每张图片生成唯一且可公开访问的外链地址,这些链接不仅支持直接嵌入到各类网站的文章或页面中,还能通过 CDN 加速确保图片加载速度,从而有效提升网站的访问体验与内容管理效率。

WordPress 作为一款高度可定制的开源内容管理系统,其强大的插件机制允许开发者通过调用外部图床的 API 接口,轻松扩展媒体文件上传功能。例如,你可以基于像七牛云、阿里云 OSS 或自建对象存储等服务的 API,编写专属的 WordPress 插件,使得用户在后台上传图片或文件时,能直接无缝地存储到自己的 NAS(网络附属存储)或私有云环境中,从而节省服务器空间并提升访问效率。

下面我们将提供一段代码,展示了如何通过钩子函数上传流程,并调用 NAS 的 RESTful API 进行文件传输,确保操作安全可靠;这段代码经过基础封装,大家可以根据自己的实际需求,如认证方式、存储路径等参数进行灵活调整和集成使用。

请复制以下代码,将其命名为 `image-host-final.php`,并保存到本地;随后,通过 FTP 客户端或 WordPress 后台的文件管理器,将该文件上传至您网站的 `/wp-content/plugins/image-host-final/` 目录中,如果该目录不存在,请先手动创建同名文件夹。这一操作是安装该自定义插件的基础步骤,确保文件路径准确无误,才能让 WordPress 系统正确识别并激活插件功能,从而实现对图片托管服务的扩展支持。

<?php
/*
Plugin Name: 图床 Hellohao 上传插件(家里 Nas 专用)
Plugin URI: https://www.lafoyer.com/
Description: 上传图片到图床,媒体库仅显示图床地址+缩略图
Version: 2.3.4
Author: 佛爷
Author URI: https://www.lafoyer.com/
Text Domain: image-host-final
*/

if (!defined('ABSPATH')) {
    exit; // 禁止直接访问
}

/**
 * 1. 后台配置页面(图床参数设置)
 */
add_action('admin_menu', 'ihf_add_admin_menu');
function ihf_add_admin_menu() {
    add_options_page(
        '图床配置',
        '图床配置',
        'manage_options',
        'image-host-final',
        'ihf_render_settings_page'
    );
}

add_action('admin_init', 'ihf_register_settings');
function ihf_register_settings() {
    register_setting('ihf_settings_group', 'ihf_api_settings', 'ihf_validate_settings');

    add_settings_section(
        'ihf_api_section',
        '图床 API 配置',
        function() { echo '<p>填写后图片将上传到图床,媒体库仅显示图床地址和缩略图</p>'; },
        'image-host-final'
    );

    // 图床 API 地址
    add_settings_field(
        'api_url',
        '图床 API 地址',
        function() {
            $settings = get_option('ihf_api_settings', []);
            $url = isset($settings['api_url']) ? esc_attr($settings['api_url']) : 'http://nas.lafoyer.com:8088/clientupimg/';
            echo "<input type='url' name='ihf_api_settings[api_url]' value='$url' class='regular-text' required>";
            echo "<p class='description'>示例:http://nas.lafoyer.com:8088/clientupimg/(必须带末尾斜杠)</p>";
        },
        'image-host-final',
        'ihf_api_section'
    );

    // API 用户邮箱
    add_settings_field(
        'api_email',
        'API 用户邮箱',
        function() {
            $settings = get_option('ihf_api_settings', []);
            $email = isset($settings['api_email']) ? esc_attr($settings['api_email']) : '';
            echo "<input type='email' name='ihf_api_settings[api_email]' value='$email' class='regular-text' required>";
        },
        'image-host-final',
        'ihf_api_section'
    );

    // API 密码
    add_settings_field(
        'api_pass',
        'API 用户密码',
        function() {
            $settings = get_option('ihf_api_settings', []);
            $pass = isset($settings['api_pass']) ? esc_attr($settings['api_pass']) : '';
            echo "<input type='password' name='ihf_api_settings[api_pass]' value='$pass' class='regular-text' required>";
        },
        'image-host-final',
        'ihf_api_section'
    );
}

// 渲染配置页面
function ihf_render_settings_page() {
    ?>
    <div class="wrap">
        <h1>图床上传配置</h1>
        <form action="options.php" method="post">
            <?php settings_fields('ihf_settings_group'); do_settings_sections('image-host-final'); submit_button(); ?>
        </form>
    </div>
    <?php
}

// 验证配置参数
function ihf_validate_settings($input) {
    $valid = [];
    // 验证 API 地址(必须带斜杠结尾)
    if (!empty($input['api_url'])) {
        $valid['api_url'] = esc_url_raw($input['api_url']);
        if (substr($valid['api_url'], -1) !== '/') {
            add_settings_error('ihf_api_settings', 'url_slash_error', '图床地址必须以斜杠结尾', 'error');
            $valid['api_url'] = '';
        }
    } else {
        add_settings_error('ihf_api_settings', 'url_empty_error', '图床 API 地址不能为空', 'error');
    }
    // 验证邮箱
    if (!empty($input['api_email']) && is_email($input['api_email'])) {
        $valid['api_email'] = $input['api_email'];
    } else {
        add_settings_error('ihf_api_settings', 'email_error', '请输入有效的用户邮箱', 'error');
    }
    // 验证密码
    if (!empty($input['api_pass'])) {
        $valid['api_pass'] = $input['api_pass'];
    } else {
        add_settings_error('ihf_api_settings', 'pass_empty_error', 'API 密码不能为空', 'error');
    }
    return $valid;
}

/**
 * 2. 核心逻辑:拦截上传,上传到图床,强制存储图床地址(优先于本地地址)
 */
add_filter('wp_handle_upload', 'ihf_upload_to_host', 999, 2);
function ihf_upload_to_host($upload, $context) {
    // 仅处理图片文件
    $allowed_types = ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/svg+xml'];
    if (!in_array($upload['type'], $allowed_types)) {
        return $upload;
    }

    // 获取图床配置
    $settings = get_option('ihf_api_settings', []);
    $api_url = $settings['api_url'] ?? '';
    $api_email = $settings['api_email'] ?? '';
    $api_pass = $settings['api_pass'] ?? '';

    // 配置不全则阻止上传
    if (empty($api_url) || empty($api_email) || empty($api_pass)) {
        $upload['error'] = '请先在「设置→图床配置」中填写完整的图床参数';
        return $upload;
    }

    // 基础变量定义
    $file_path = $upload['file'];
    $file_mime = $upload['type'];
    $upload_dir = wp_upload_dir();
    $virtual_file_path = date('Y/m/') . basename($file_path); // WP 预期的相对路径

    // 原生 curl 请求(和测试命令完全一致)
    $ch = curl_init();
    $post_fields = [
        'email' => $api_email,
        'pass' => $api_pass,
        'file' => new CURLFile($file_path, $file_mime, basename($file_path))
    ];

    curl_setopt_array($ch, [
        CURLOPT_URL => $api_url,
        CURLOPT_POST => true,
        CURLOPT_POSTFIELDS => $post_fields,
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_TIMEOUT => 60,
        CURLOPT_SSL_VERIFYPEER => false,
        CURLOPT_SSL_VERIFYHOST => false,
        CURLOPT_HTTPHEADER => ["User-Agent: curl/7.84.0"],
        CURLOPT_ENCODING => '',
        CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1
    ]);

    $response_body = curl_exec($ch);
    $curl_error = curl_error($ch);
    $http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    curl_close($ch);

    // 处理 curl 错误
    if ($curl_error) {
        $upload['error'] = "图床连接失败:$curl_error";
        return $upload;
    }

    // 解析响应
    $response_data = json_decode($response_body, true);
    if (json_last_error() !== JSON_ERROR_NONE) {
        $upload['error'] = "图床响应格式错误:" . substr($response_body, 0, 200);
        return $upload;
    }

    // 图床返回成功:强制替换所有本地地址为图床地址
    if (isset($response_data['code']) && $response_data['code'] == 200 && $response_data['msg'] == 'success') {
        $img_info = $response_data['data'][0] ?? [];
        $img_url = $img_info['Imgurl'] ?? '';

        if (!empty($img_url) && strpos($img_url, 'http') === 0) {
            // === 关键修改 1:强制覆盖所有核心地址为图床地址 ===
            $upload['url'] = esc_url($img_url); // 附件 URL 直接设为图床地址
            $upload['guid'] = esc_url($img_url); // 附件 GUID 直接设为图床地址
            $upload['file'] = $upload_dir['path'] . '/' . basename($file_path); // 虚拟本地路径(仅满足 WP 格式)

            // === 关键:立即存储图床地址到临时变量(解决附件 ID 延迟问题) ===
            global $ihf_temp_host_url;
            $ihf_temp_host_url = $img_url;
            global $ihf_temp_attachment_file;
            $ihf_temp_attachment_file = $virtual_file_path;

            // 延迟删除本地临时文件(10 秒后)
            if (file_exists($file_path)) {
                wp_schedule_single_event(time() + 10, 'ihf_delete_temp_file', [$file_path]);
            }

            // === 修复:直接用表达式获取文件名,彻底消除变量未定义警告 ===
            $current_file_name = $img_info['file_name'] ?? basename($file_path) ?? '未知图片';
            add_settings_error('ihf_api_settings', 'upload_success', "图片「{$current_file_name}」已成功上传到图床", 'updated');
        } else {
            $upload['error'] = "图床返回无效地址:" . ($img_info['Imgurl'] ?? '无');
        }
    } else {
        // === 兜底:失败分支也直接用表达式,防止后续警告 ===
        $current_file_name = basename($file_path) ?? '未知图片';
        $upload['error'] = "图床上传失败:" . ($response_data['msg'] ?? '未知错误') . "(状态码:" . ($response_data['code'] ?? '未知') . ")";
    }

    return $upload;
}

/**
 * 3. 修复附件创建流程:立即写入图床地址到自定义字段(解决延迟问题)
 */
add_action('add_attachment', 'ihf_save_host_url_on_attachment', 1, 1);
function ihf_save_host_url_on_attachment($attachment_id) {
    global $ihf_temp_host_url, $ihf_temp_attachment_file;

    // 写入图床地址到自定义字段(永久存储)
    if (!empty($ihf_temp_host_url)) {
        update_post_meta($attachment_id, '_ihf_image_host_url', $ihf_temp_host_url);
        // 强制更新附件的 guid 和 post_content(确保 WP 底层存储图床地址)
        wp_update_post([
            'ID' => $attachment_id,
            'guid' => $ihf_temp_host_url,
            'post_content' => $ihf_temp_host_url
        ]);
        // 强制更新附件元数据(覆盖本地路径)
        update_post_meta($attachment_id, '_wp_attached_file', $ihf_temp_attachment_file);
        // 清空临时变量
        $GLOBALS['ihf_temp_host_url'] = '';
        $GLOBALS['ihf_temp_attachment_file'] = '';
    }

    // 兼容旧附件:若已有图床地址,强制更新 guid
    $host_url = get_post_meta($attachment_id, '_ihf_image_host_url', true);
    if (!empty($host_url)) {
        wp_update_post([
            'ID' => $attachment_id,
            'guid' => $host_url
        ]);
    }
}

/**
 * 4. 延迟删除本地文件(避免 WP 读取本地文件报错)
 */
add_action('ihf_delete_temp_file', 'ihf_delete_temp_file_callback');
function ihf_delete_temp_file_callback($file_path) {
    $upload_dir = wp_upload_dir();
    if (file_exists($file_path) && strpos($file_path, $upload_dir['basedir']) !== false) {
        unlink($file_path);
    }
}

// 注册定时任务
add_action('init', 'ihf_register_cron');
function ihf_register_cron() {
    if (!wp_next_scheduled('ihf_delete_temp_file')) {
        wp_schedule_single_event(time() + 1, 'ihf_delete_temp_file', ['']);
    }
}

/**
 * 5. 核心修复:强制所有场景返回图床地址(彻底替换本地地址,修复缩略图显示)
 */
// 过滤器 1:覆盖附件 URL,优先返回图床地址(最高优先级)
add_filter('wp_get_attachment_url', 'ihf_force_host_url', 9999, 2);
function ihf_force_host_url($url, $attachment_id) {
    // 读取自定义字段中的图床地址
    $host_url = get_post_meta($attachment_id, '_ihf_image_host_url', true);
    if (!empty($host_url) && strpos($host_url, 'http') === 0) {
        return $host_url;
    }
    // 兼容上传时的临时地址
    global $ihf_temp_host_url;
    if (!empty($ihf_temp_host_url)) {
        return $ihf_temp_host_url;
    }
    return $url;
}

// 过滤器 2:覆盖附件缩略图 URL,强制返回图床地址(兼容所有图片类型)
add_filter('wp_get_attachment_thumb_url', 'ihf_force_thumb_host_url', 9999, 2);
function ihf_force_thumb_host_url($thumb_url, $attachment_id) {
    $host_url = get_post_meta($attachment_id, '_ihf_image_host_url', true);
    if (!empty($host_url)) {
        return $host_url; // 直接返回图床地址,不再区分类型
    }
    global $ihf_temp_host_url;
    if (!empty($ihf_temp_host_url)) {
        return $ihf_temp_host_url;
    }
    return $thumb_url;
}

// 过滤器 3:覆盖附件图片 src,强制使用图床地址(修复尺寸和 MIME 类型)
add_filter('wp_get_attachment_image_src', 'ihf_force_image_src_host_url', 9999, 4);
function ihf_force_image_src_host_url($image, $attachment_id, $size, $icon) {
    $host_url = get_post_meta($attachment_id, '_ihf_image_host_url', true);
    if (!empty($host_url)) {
        // 固定媒体库缩略图尺寸为 150x150(WP 默认)
        $width = 150;
        $height = 150;
        if ($size === 'medium') {
            $width = 300;
            $height = 200;
        } elseif ($size === 'large') {
            $width = 800;
            $height = 600;
        } elseif ($size === 'full') {
            $width = 800;
            $height = 600;
        }
        // SVG 图片特殊处理
        if (get_post_mime_type($attachment_id) === 'image/svg+xml') {
            $width = 150;
            $height = 150;
        }
        return [
            $host_url,
            $width,
            $height,
            false
        ];
    }
    global $ihf_temp_host_url;
    if (!empty($ihf_temp_host_url)) {
        return [
            $ihf_temp_host_url,
            $image[1] ?? 150,
            $image[2] ?? 150,
            false
        ];
    }
    return $image;
}

// 过滤器 4:重构元数据,避免 WP 读取本地文件(补充 MIME 类型和实际尺寸)
add_filter('wp_get_attachment_metadata', 'ihf_override_metadata', 9999, 2);
function ihf_override_metadata($metadata, $attachment_id) {
    $host_url = get_post_meta($attachment_id, '_ihf_image_host_url', true);
    if (!empty($host_url)) {
        $file_name = basename($host_url);
        $virtual_file_path = get_post_meta($attachment_id, '_wp_attached_file', true) ?? date('Y/m/') . $file_name;
        $attachment_mime = get_post_mime_type($attachment_id);

        return [
            'file' => $virtual_file_path,
            'width' => 800,
            'height' => 600,
            'mime_type' => $attachment_mime,
            'sizes' => [
                'thumbnail' => [
                    'file' => $file_name,
                    'width' => 150,
                    'height' => 150,
                    'mime-type' => $attachment_mime,
                    'url' => $host_url
                ],
                'medium' => [
                    'file' => $file_name,
                    'width' => 300,
                    'height' => 200,
                    'mime-type' => $attachment_mime,
                    'url' => $host_url
                ],
                'large' => [
                    'file' => $file_name,
                    'width' => 800,
                    'height' => 600,
                    'mime-type' => $attachment_mime,
                    'url' => $host_url
                ],
                'full' => [
                    'file' => $file_name,
                    'width' => 800,
                    'height' => 600,
                    'mime-type' => $attachment_mime,
                    'url' => $host_url
                ]
            ],
            'image_meta' => [
                'title' => $file_name,
                'orientation' => 1,
                'keywords' => []
            ]
        ];
    }
    return $metadata;
}

/**
 * 新增过滤器:修复图片属性,确保缩略图渲染时的 src 和属性正确
 */
add_filter('wp_get_attachment_image_attributes', 'ihf_force_image_attributes', 9999, 3);
function ihf_force_image_attributes($attrs, $attachment, $size) {
    $host_url = get_post_meta($attachment->ID, '_ihf_image_host_url', true);
    if (!empty($host_url)) {
        $attrs['src'] = $host_url;
        $attrs['alt'] = get_the_title($attachment->ID) ?: basename($host_url);
        // 强制设置缩略图尺寸,解决显示变形
        $attrs['width'] = '150';
        $attrs['height'] = '150';
        $attrs['style'] = 'object-fit: cover;'; // 图片自适应裁剪,不变形
        // SVG 图片特殊处理
        if (get_post_mime_type($attachment->ID) === 'image/svg+xml') {
            $attrs['viewBox'] = '0 0 100 100';
            $attrs['width'] = '150';
            $attrs['height'] = '150';
        }
    }
    return $attrs;
}

/**
 * 关键新增:强制替换媒体库缩略图列的 HTML(直接显示图床图片)
 */
// 第一步:保留缩略图列,替换其内容
add_filter('manage_media_columns', 'ihf_keep_thumbnail_column', 999);
function ihf_keep_thumbnail_column($columns) {
    // 确保缩略图列存在(WP 默认是'cb'、'thumbnail'、'title'...)
    if (isset($columns['thumbnail'])) {
        $columns['thumbnail'] = '缩略图'; // 保留列名,后续替换内容
    }
    return $columns;
}

// 第二步:替换缩略图列的内容为图床图片
add_action('manage_media_custom_column', 'ihf_render_thumbnail_column', 1, 2);
function ihf_render_thumbnail_column($column, $attachment_id) {
    if ($column === 'thumbnail') {
        $host_url = get_post_meta($attachment_id, '_ihf_image_host_url', true);
        $attachment_mime = get_post_mime_type($attachment_id);

        // 图床地址存在时,直接显示图片
        if (!empty($host_url) && strpos($host_url, 'http') === 0) {
            // SVG 图片特殊处理
            if ($attachment_mime === 'image/svg+xml') {
                echo "<img src='$host_url' alt='缩略图' width='150' height='150' style='object-fit: cover; viewBox: 0 0 100 100;' />";
            } else {
                echo "<img src='$host_url' alt='缩略图' width='150' height='150' style='object-fit: cover;' />";
            }
        } else {
            // 无图床地址时,显示 WP 默认缩略图
            $thumb = wp_get_attachment_image($attachment_id, [150, 150], false);
            echo $thumb ?: '<span style="display:inline-block;width:150px;height:150px;border:1px solid #ddd;background:#f1f1f1;"></span>';
        }
    }
}

/**
 * 6. 媒体库:强制显示图床地址列(直接读取自定义字段,不依赖 WP 默认 URL)
 */
add_filter('manage_media_columns', 'ihf_add_host_column');
function ihf_add_host_column($columns) {
    // 将图床地址列放到靠前的位置
    $new_columns = [];
    foreach ($columns as $key => $value) {
        $new_columns[$key] = $value;
        if ($key === 'title') {
            $new_columns['ihf_host_url'] = '图床地址';
        }
    }
    return $new_columns;
}

add_action('manage_media_custom_column', 'ihf_render_host_column', 10, 2);
function ihf_render_host_column($column, $attachment_id) {
    if ($column == 'ihf_host_url') {
        // 直接读取自定义字段中的图床地址(最可靠)
        $host_url = get_post_meta($attachment_id, '_ihf_image_host_url', true);
        if (!empty($host_url) && strpos($host_url, 'http') === 0) {
            // 显示可复制的输入框,值为图床地址
            echo "<input type='text' value='$host_url' class='regular-text' readonly onclick='this.select()' style='width: 250px;'>";
        } else {
            echo "<span style='color: #dc3232;'>未上传到图床</span>";
        }
    }
}

/**
 * 7. 修复媒体库缩略图渲染:强制使用图床地址(针对 WP 5.0+的新媒体库,补充关键属性)
 */
add_filter('wp_prepare_attachment_for_js', 'ihf_force_media_library_thumb', 9999, 3);
function ihf_force_media_library_thumb($response, $attachment, $meta) {
    $host_url = get_post_meta($attachment->ID, '_ihf_image_host_url', true);
    if (!empty($host_url)) {
        $attachment_mime = get_post_mime_type($attachment->ID);
        // 强制覆盖所有关键属性
        $response['url'] = $host_url;
        $response['thumbnailUrl'] = $host_url; // 新媒体库核心缩略图 URL
        $response['iconUrl'] = $host_url;
        $response['sizes'] = [
            'thumbnail' => [
                'url' => $host_url,
                'width' => 150,
                'height' => 150
            ],
            'full' => [
                'url' => $host_url,
                'width' => 800,
                'height' => 600
            ]
        ];
        // SVG 图片特殊处理
        if ($attachment_mime === 'image/svg+xml') {
            $response['thumbnailUrl'] = $host_url;
            $response['sizes']['thumbnail']['width'] = 150;
            $response['sizes']['thumbnail']['height'] = 150;
        }
    }
    return $response;
}

/**
 * 新增:添加后台 CSS,确保缩略图显示正常
 */
add_action('admin_head', 'ihf_media_library_css');
function ihf_media_library_css() {
    // 仅在媒体库页面加载样式
    $screen = get_current_screen();
    if ($screen->id === 'upload' || $screen->id === 'media-library') {
        ?>
        <style type="text/css">
            /* 媒体库缩略图列样式 */
            .wp-list-table .column-thumbnail {
                width: 160px !important;
                text-align: center;
            }
            .wp-list-table .column-thumbnail img {
                border: 1px solid #ddd;
                border-radius: 4px;
            }
            /* 新媒体库(网格视图)缩略图样式 */
            .media-grid .attachment-preview img {
                object-fit: cover !important;
                width: 100% !important;
                height: 100% !important;
            }
            /* SVG 图片兼容样式 */
            img[src$=".svg"] {
                width: 150px !important;
                height: 150px !important;
                object-fit: cover !important;
            }
        </style>
        <?php
    }
}

/**
 * 新增:解决图片跨域问题(WP 端添加跨域头)
 */
add_action('send_headers', 'ihf_add_cors_headers');
function ihf_add_cors_headers() {
    // 允许所有域名访问(生产环境可替换为图床域名,如 Access-Control-Allow-Origin: http://nas.lafoyer.cn)
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
    header('Access-Control-Allow-Headers: Content-Type');
}

要使用该插件,首先需要在网站后台进行安装并启动,随后在插件设置界面准确填写 NAS 服务器的地址、用户名及密码以完成连接配置;完成这些步骤后,每当你在 WordPress 媒体库中上传图片时,插件便会自动将这些图片文件同步传输到指定的 NAS 存储设备中,这样网站服务器本地就不再保存图片文件,从而有效减轻服务器存储压力、提升网站加载速度,并实现媒体资源的集中管理与备份。