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 Support Team
WordPress Support Team

💻 A sincere and meticulous young developer 🎓 specializing in the field of custom foreign trade website development.
🌟 specializes in WordPress website design customization and full-service development. Our unique advantage is not only proficient in website development technology, but also the international mainstream art design elements 🎨 skillful integration, while developing accurate and effective brand marketing strategy 📈.
💡 Services covered:
🔍 WordPress Theme Development for a unique website visual style and user experience.
💻 WordPress website customization, tailor-made exclusive website according to your foreign trade business needs.
Whether it's website architecture construction, interface aesthetic design, or brand promotion strategy, we can provide you with one-stop quality solutions to help your foreign trade business stand out on the Internet and step into the global market 🚀.

Articles: 49

Leave a Reply

Your email address will not be published. Required fields are marked *

Submit your request

Quote Collection Form

💥Website Builder | Strengths speak for themselves, not false!

Treasure, we say, a lot of parties are not happy with their own sites are peers copying homework, which is like you open a store, certainly do not want others to know your sources of supply is a reason, right? So, in order to give customers a full sense of security, we did not put any customer case work on the site of the link ha, this is our protection of customer privacy.

📌 But if there is a sincere desire to do the site of the boss, or treasure you just want to look at our case, then hurry up to add the contact information of our website, we snappy send you a few look at, the main one sincere!

If you have not decided to do what style of website, but also simple, you find a few peers of the site sent to us, according to do on the end of the matter. We choose to imitate the site does not mean that no skill, we just can not stand that kind of invalid communication and cumbersome to make people crazy process. Some parties to do a corporate display site, have to find dozens of suppliers to roll, to be honest, no real technology companies will be there to lick the party. We are not the same, we want to be down-to-earth to the customer to make cost-effective, so that customers are satisfied with the site straight pat. Those kneeling work, let those who only play lip service, no technology companies to do it, we do not serve! # Website Development

# Party A Party B # Rejected Inside Coil

Contact the WordPress Technical Team

We look forward to hearing from you.

Submit your request

Quote Collection Form