如何在WordPress文章中显示外部URL图片并存入媒体库

核心PHP实现函数 #

将以下代码添加到主题functions.php文件或自定义插件中，该函数负责处理外部图片的下载、媒体库入库，并返回附件ID供后续调用：

function download_external_image_to_media($external_url) {
    // 验证URL有效性
    if (!filter_var($external_url, FILTER_VALIDATE_URL)) {
        return false;
    }

    // 获取图片内容
    $response = wp_remote_get($external_url, array('timeout' => 15));
    if (is_wp_error($response) || wp_remote_retrieve_response_code($response) != 200) {
        return false;
    }
    $image_data = wp_remote_retrieve_body($response);

    // 提取并处理文件名，避免重复
    $filename = basename(wp_parse_url($external_url, PHP_URL_PATH));
    $query = wp_parse_url($external_url, PHP_URL_QUERY);
    if ($query) {
        $filename = md5($query) . '_' . $filename;
    }

    // 上传文件到媒体库目录
    $upload = wp_upload_bits($filename, null, $image_data);
    if ($upload['error']) {
        return false;
    }

    // 准备附件入库数据
    $filetype = wp_check_filetype($upload['file'], null);
    $attachment_data = array(
        'guid'           => $upload['url'],
        'post_mime_type' => $filetype['type'],
        'post_title'     => sanitize_file_name($filename),
        'post_content'   => '',
        'post_status'    => 'inherit'
    );

    // 插入附件并生成缩略图
    $attachment_id = wp_insert_attachment($attachment_data, $upload['file']);
    if (!is_wp_error($attachment_id)) {
        require_once(ABSPATH . 'wp-admin/includes/image.php');
        $attachment_metadata = wp_generate_attachment_metadata($attachment_id, $upload['file']);
        wp_update_attachment_metadata($attachment_id, $attachment_metadata);
    }

    return $attachment_id;
}

Gutenberg集成调用方式 #

方式1：短代码快速调用 #

添加短代码函数，方便在Gutenberg的「短代码」块中直接使用：

function external_image_shortcode($atts) {
    $atts = shortcode_atts(array(
        'url' => '',
        'alt' => ''
    ), $atts);

    if (empty($atts['url'])) {
        return '<p>请提供有效的外部图片URL</p>';
    }

    // 导入图片到媒体库
    $attachment_id = download_external_image_to_media($atts['url']);
    if (!$attachment_id) {
        return '<p>图片导入失败，请检查URL或服务器权限</p>';
    }

    // 输出本地图片标签
    $image_url = wp_get_attachment_url($attachment_id);
    return sprintf('<img src="%s" alt="%s" />', esc_url($image_url), esc_attr($atts['alt']));
}
add_shortcode('external_image', 'external_image_shortcode');

在Gutenberg编辑器中添加「短代码」块，输入示例：
[external_image url="https://cdn-img.wooster.fr/app/uploads/2023/09/wooster_sur-mesure_1_3x-1.webp?lossy=1&ssl=1&w=500" alt="定制家具展示"]

方式2：自定义模板/块中直接调用 #

如果开发自定义Gutenberg块或模板，可直接调用核心函数：

$external_url = 'https://cdn-img.wooster.fr/app/uploads/2023/09/wooster_sur-mesure_1_3x-1.webp?lossy=1&ssl=1&w=500';
$attachment_id = download_external_image_to_media($external_url);
if ($attachment_id) {
    echo wp_get_attachment_image($attachment_id, 'large', false, array('alt' => '定制家具展示'));
} else {
    echo '<p>图片加载失败</p>';
}

常见问题排查 #

• 文件权限问题：确保wp-content/uploads目录拥有可写权限（通常设置为755）。
• 防盗链限制：部分外部服务器会阻止跨域下载，可在wp_remote_get中添加模拟浏览器的User-Agent头：

  $response = wp_remote_get($external_url, array(
      'timeout' => 15,
      'headers' => array(
          'User-Agent' => 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36'
      )
  ));
  

• 文件格式不支持：确认外部图片格式为WordPress默认支持的JPG、PNG、GIF、WebP等。
• 重复导入问题：可在核心函数中添加URL的MD5校验逻辑，判断图片是否已导入，避免重复下载。

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