wordpress给文章添加“外部特色图 URL”输入框

实现 WordPress 特色图(Featured Image)不仅可以上传本地图片,还能支持直接使用外部 URL(站外地址)作为特色图。WordPress 默认只支持本地上传,所以需要自定义一些功能。下面我给你提供一个完整实现方案(添加后台输入框 + 前端支持显示外部图片):

把下面代码加到主题 functions.php 或自定义插件里:

// 添加特色图外部 URL 输入框
function add_external_featured_image_meta_box() {
    add_meta_box(
        'external_featured_image',
        __('外部特色图 URL', 'textdomain'),
        'render_external_featured_image_meta_box',
        ['post', 'page'], // 可改为自定义文章类型
        'side',
        'low'
    );
}
add_action('add_meta_boxes', 'add_external_featured_image_meta_box');

function render_external_featured_image_meta_box($post) {
    wp_nonce_field('save_external_featured_image', 'external_featured_image_nonce');
    $value = get_post_meta($post->ID, '_external_featured_image', true);
    echo '<input type="url" style="width:100%;" name="external_featured_image" value="' . esc_attr($value) . '" placeholder="https://example.com/image.jpg">';
}

// 保存外部特色图 URL
function save_external_featured_image_meta_box($post_id) {
    if (!isset($_POST['external_featured_image_nonce']) || !wp_verify_nonce($_POST['external_featured_image_nonce'], 'save_external_featured_image')) {
        return;
    }
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;

    if (isset($_POST['external_featured_image'])) {
        $url = esc_url_raw($_POST['external_featured_image']);
        update_post_meta($post_id, '_external_featured_image', $url);
    }
}
add_action('save_post', 'save_external_featured_image_meta_box');

功能说明:

  • 在文章编辑页右侧“特色图”下方会出现一个输入框

  • 可以输入站外图片 URL

  • 保存文章时会存入 _external_featured_image 元数据

2️⃣ 前端输出特色图时优先使用外部 URL

替换主题中调用 get_the_post_thumbnail() 的地方,改为:

function get_featured_image_or_external($post_id = null, $size = 'post-thumbnail', $attr = []) {
    if (!$post_id) $post_id = get_the_ID();

    // 先获取外部 URL
    $external_url = get_post_meta($post_id, '_external_featured_image', true);
    if ($external_url) {
        return '<img src="' . esc_url($external_url) . '" class="wp-post-image" />';
    }

    // 没有外部 URL 则返回本地特色图
    if (has_post_thumbnail($post_id)) {
        return get_the_post_thumbnail($post_id, $size, $attr);
    }

    return ''; // 没有特色图
}

在模板里使用:

echo get_featured_image_or_external();

3️⃣ 可选:隐藏默认特色图上传框(如果你只想用外部图片)

function hide_featured_image_box() {
    remove_meta_box('postimagediv', 'post', 'side');
    remove_meta_box('postimagediv', 'page', 'side');
}
add_action('do_meta_boxes', 'hide_featured_image_box');

这样就实现了:

  • 本地上传特色图依旧可用

  • 可自定义输入站外 URL

  • 前端输出时自动判断优先显示外部图片

 

优化版可以参考这边文章:优化版WordPress 特色图框里可以上传或输入外部 URL,一体化管理

WordPress 技术支持团队
WordPress 技术支持团队

💻 一位真诚且细致入微的年轻开发者🎓,专注于外贸网站定制开发领域。
🌟 专业承接 WordPress 建站设计定制与全方位开发服务。我们的独特优势在于,不仅精通网站开发技术,更将国际化主流美术设计元素🎨巧妙融合,同时制定精准有效的品牌营销策略📈。
💡 服务涵盖:
🔍WordPress 主题开发,打造独一无二的网站视觉风格与用户体验。
💻WordPress 网站定制,根据您的外贸业务需求,量身定制专属网站。
无论是网站架构搭建,还是界面美学设计,亦或是品牌推广策略,我们都能为您提供一站式的优质解决方案,助力您的外贸事业在互联网上脱颖而出,迈向全球市场🚀。

文章: 49

留下评论

您的邮箱地址不会被公开。 必填项已用 * 标注

提交您的请求

报价收集表

💥网站建设 | 实力说话,不搞虚的!

宝子们,咱就说,好多甲方都不乐意自己的网站被同行抄作业,这就跟你开个店,肯定不想让别人知道你的进货渠道是一个道理,对不?所以呢,为了给客户满满的安全感,咱网站上就没放任何客户案例作品的链接哈,这可是咱对客户隐私的保护。

📌但要是有真心想做网站的老板,或者宝子你只是想看看我们的案例,那就赶紧加我们网站的联系方式,咱麻溜地给你发几个瞅瞅,主打一个真诚!

要是你还没拿定主意要做啥风格的网站,也简单,你就找几个同行的网站发给我们,照着做就完事儿。咱选仿站可不代表没本事哈,只是咱实在受不了那种瞎扯犊子的无效沟通和繁琐到让人抓狂的流程。有些甲方做个企业展示型网站,非得找几十家供应商来卷,说实话,没真技术的公司才会在那跪舔甲方。咱不一样,咱就想踏踏实实地给客户做出性价比超高、让客户满意得直拍大腿的网站。那些跪舔的活儿,就让那些只会耍嘴皮子、没啥技术的公司去干吧,咱不伺候! #网站建设

#甲方乙方 #拒绝内卷

联系WordPress技术团队

我们期待您的来信。

提交您的请求

报价收集表