在wordpress后台文章页面显示特色图片

实现效果：

1、在wordpress的后台显示特色图片

2、在编辑文章页面显示添加远程图片功能（优先显示远程特色图片，无远程则显示本地特色图片）

实现：

在functions.php最下面添加

// 1. 后台文章列表：新增“特色图片”列，优先显示远程图，没有则显示本地图
add_filter('manage_posts_columns', function($columns) {
    $columns['custom_thumbnail'] = '特色图片';
    return $columns;
});
add_action('manage_posts_custom_column', function($column, $post_id) {
    if ($column == 'custom_thumbnail') {
        $url = get_post_meta($post_id, '_remote_featured_image', true);
        if ($url) {
            echo '<img src="'.esc_url($url).'" style="width:60px;height:auto;">';
        } elseif (has_post_thumbnail($post_id)) {
            echo get_the_post_thumbnail($post_id, [60,60]);
        } else {
            echo '—';
        }
    }
}, 10, 2);


// 2. 在文章编辑页添加独立的 meta box（远程特色图输入框 + 保存/清除按钮）
function add_remote_featured_image_meta_box() {
    add_meta_box(
        'remote_featured_image_box',
        '远程特色图片',
        function($post) {
            $value = get_post_meta($post->ID, '_remote_featured_image', true);
            ?>
            <input type="text" id="remote_featured_image" value="<?php echo esc_attr($value); ?>" 
                   style="width:100%" placeholder="输入远程图片URL">
            <button type="button" class="button button-primary" id="save_remote_featured_image" style="margin-top:5px;">保存远程特色图</button>
            <button type="button" class="button" id="clear_remote_featured_image" style="margin-top:5px;">清除远程特色图</button>
            <div id="remote_featured_image_preview" style="margin-top:10px;">
                <?php if ($value): ?>
                    <img src="<?php echo esc_url($value); ?>" style="max-width:100%;height:auto;">
                <?php endif; ?>
            </div>
            <script>
            jQuery(document).ready(function($){
                var post_id = <?php echo $post->ID; ?>;
                var nonce = '<?php echo wp_create_nonce("save_remote_featured_image"); ?>';

                // 保存按钮
                $('#save_remote_featured_image').on('click', function(){
                    var url = $('#remote_featured_image').val();
                    $.post(ajaxurl, {
                        action: 'save_remote_featured_image',
                        post_id: post_id,
                        url: url,
                        _ajax_nonce: nonce
                    }, function(response){
                        if(response.success){
                            $('#remote_featured_image_preview').html('<img src="'+url+'" style="max-width:100%;height:auto;">');
                        }
                    });
                });

                // 清除按钮
                $('#clear_remote_featured_image').on('click', function(){
                    $.post(ajaxurl, {
                        action: 'clear_remote_featured_image',
                        post_id: post_id,
                        _ajax_nonce: nonce
                    }, function(response){
                        if(response.success){
                            $('#remote_featured_image').val('');
                            $('#remote_featured_image_preview').html('');
                        }
                    });
                });
            });
            </script>
            <?php
        },
        'post',
        'side',
        'low'
    );
}
add_action('add_meta_boxes', 'add_remote_featured_image_meta_box');


// 3. Ajax 保存逻辑
function ajax_save_remote_featured_image() {
    check_ajax_referer('save_remote_featured_image');
    $post_id = intval($_POST['post_id']);
    $url = esc_url_raw($_POST['url']);
    if ($post_id && $url) {
        update_post_meta($post_id, '_remote_featured_image', $url);
        wp_send_json_success();
    }
    wp_send_json_error();
}
add_action('wp_ajax_save_remote_featured_image', 'ajax_save_remote_featured_image');


// 4. Ajax 清除逻辑
function ajax_clear_remote_featured_image() {
    check_ajax_referer('save_remote_featured_image');
    $post_id = intval($_POST['post_id']);
    if ($post_id) {
        delete_post_meta($post_id, '_remote_featured_image');
        wp_send_json_success();
    }
    wp_send_json_error();
}
add_action('wp_ajax_clear_remote_featured_image', 'ajax_clear_remote_featured_image');


// 5. 前端兼容逻辑：远程优先，本地图兜底 (修正版)

/**
 * 5.1 替换 a a() a的完整HTML输出
 * 优化后，此方法会保留WordPress生成的class, alt, srcset等属性，仅替换src
 */
add_filter('post_thumbnail_html', function($html, $post_id) {
    $remote_url = get_post_meta($post_id, '_remote_featured_image', true);

    // 如果有远程URL，并且$html不为空（意味着有本地特色图占位）
    // 我们只替换src，保留其他属性
    if ($remote_url && $html) {
        $html = preg_replace('/src="[^"]*"/', 'src="' . esc_url($remote_url) . '"', $html);
        // 同时移除srcset，因为它与远程图片不匹配
        $html = preg_replace('/srcset="[^"]*"/', '', $html);
        return $html;
    }
    
    // 如果有远程URL，但$html为空（意味着没有设置本地特色图）
    // 我们就自己生成一个img标签
    if ($remote_url && !$html) {
        $alt_text = get_the_title($post_id); // 使用文章标题作为备用alt文本
        return '<img src="' . esc_url($remote_url) . '" class="wp-post-image" alt="' . esc_attr($alt_text) . '" style="max-width:100%;height:auto;">';
    }

    // 其他情况，返回原始的$html
    return $html;
}, 10, 2);

/**
 * 5.2 兼容 get_the_post_thumbnail_url()
 * 这才是正确的钩子
 */
add_filter('post_thumbnail_url', function($url, $post_id) {
    $remote_url = get_post_meta($post_id, '_remote_featured_image', true);
    if ($remote_url) {
        return $remote_url; // 如果有远程URL，直接返回它
    }
    return $url; // 否则返回原始URL
}, 10, 2);

/**
 * 5.3 兼容 has_post_thumbnail()
 * 你的这部分代码是正确的，予以保留
 */
add_filter('has_post_thumbnail', function($has_thumbnail, $post) {
    // 确保$post是一个对象
    if (!is_object($post)) {
        $post = get_post($post);
    }
    
    // 如果$post无效，直接返回
    if (!$post) {
        return $has_thumbnail;
    }

    $remote_url = get_post_meta($post->ID, '_remote_featured_image', true);
    if ($remote_url) {
        return true; // 如果有远程URL，就告诉系统“有特色图”
    }
    return $has_thumbnail;
}, 10, 2);