如何显示文章分类缩略图？调用the_category_thumbnail()函数报错

错误原因 #

WordPress原生的文章分类（Category）并没有内置缩略图功能，你使用的the_category_thumbnail()并非WordPress原生函数，这就是导致严重错误的直接原因。而WooCommerce产品分类是自定义分类，本身带有缩略图支持，所以你之前的方法能生效。

解决方案 #

要实现文章分类缩略图，需要先给分类添加缩略图支持，再在前端获取显示，具体步骤如下：

1. 给文章分类添加缩略图支持（主题functions.php中添加代码）

将以下代码添加到当前主题的functions.php文件中，这段代码会在分类编辑页面添加缩略图上传功能，并保存对应的图片ID：

// 注册分类缩略图元字段
add_action('init', 'register_category_thumbnail_meta');
function register_category_thumbnail_meta() {
    register_meta('term', 'category_thumbnail_id', array(
        'type' => 'integer',
        'description' => '存储分类缩略图的附件ID',
        'single' => true,
        'show_in_rest' => true,
        'sanitize_callback' => 'absint',
        'auth_callback' => function() {
            return current_user_can('manage_categories');
        }
    ));
}

// 添加分类新增页面的缩略图上传框
add_action('category_add_form_fields', 'render_category_thumbnail_field_add');
function render_category_thumbnail_field_add() {
    ?>
    <div class="form-field">
        <label for="category_thumbnail_id">分类缩略图</label>
        <input type="hidden" id="category_thumbnail_id" name="category_thumbnail_id" value="">
        <div id="category_thumbnail_preview" style="margin:10px 0;"></div>
        <button type="button" class="button" id="upload_category_thumbnail">选择图片</button>
        <button type="button" class="button" id="remove_category_thumbnail" style="display:none;">移除图片</button>
        <script>
            jQuery(document).ready(function($) {
                let mediaFrame;
                $('#upload_category_thumbnail').on('click', function(e) {
                    e.preventDefault();
                    if (mediaFrame) {
                        mediaFrame.open();
                        return;
                    }
                    mediaFrame = wp.media({
                        title: '选择分类缩略图',
                        button: { text: '使用此图片' },
                        multiple: false
                    });
                    mediaFrame.on('select', function() {
                        const attachment = mediaFrame.state().get('selection').first().toJSON();
                        $('#category_thumbnail_id').val(attachment.id);
                        $('#category_thumbnail_preview').html(`<img src="${attachment.url}" style="max-width:200px;">`);
                        $('#remove_category_thumbnail').show();
                    });
                    mediaFrame.open();
                });
                $('#remove_category_thumbnail').on('click', function(e) {
                    e.preventDefault();
                    $('#category_thumbnail_id').val('');
                    $('#category_thumbnail_preview').empty();
                    $(this).hide();
                });
            });
        </script>
    </div>
    <?php
}

// 添加分类编辑页面的缩略图上传框
add_action('category_edit_form_fields', 'render_category_thumbnail_field_edit');
function render_category_thumbnail_field_edit($term) {
    $thumbnail_id = get_term_meta($term->term_id, 'category_thumbnail_id', true);
    $preview = $thumbnail_id ? `<img src="${wp_get_attachment_url($thumbnail_id)}" style="max-width:200px;">` : '';
    ?>
    <tr class="form-field">
        <th scope="row"><label for="category_thumbnail_id">分类缩略图</label></th>
        <td>
            <input type="hidden" id="category_thumbnail_id" name="category_thumbnail_id" value="<?php echo esc_attr($thumbnail_id); ?>">
            <div id="category_thumbnail_preview" style="margin:10px 0;"><?php echo $preview; ?></div>
            <button type="button" class="button" id="upload_category_thumbnail">选择图片</button>
            <button type="button" class="button" id="remove_category_thumbnail" <?php echo $thumbnail_id ? '' : 'style="display:none;"'; ?>>移除图片</button>
            <script>
                jQuery(document).ready(function($) {
                    let mediaFrame;
                    $('#upload_category_thumbnail').on('click', function(e) {
                        e.preventDefault();
                        if (mediaFrame) {
                            mediaFrame.open();
                            return;
                        }
                        mediaFrame = wp.media({
                            title: '选择分类缩略图',
                            button: { text: '使用此图片' },
                            multiple: false
                        });
                        mediaFrame.on('select', function() {
                            const attachment = mediaFrame.state().get('selection').first().toJSON();
                            $('#category_thumbnail_id').val(attachment.id);
                            $('#category_thumbnail_preview').html(`<img src="${attachment.url}" style="max-width:200px;">`);
                            $('#remove_category_thumbnail').show();
                        });
                        mediaFrame.open();
                    });
                    $('#remove_category_thumbnail').on('click', function(e) {
                        e.preventDefault();
                        $('#category_thumbnail_id').val('');
                        $('#category_thumbnail_preview').empty();
                        $(this).hide();
                    });
                });
            </script>
        </td>
    </tr>
    <?php
}

// 保存分类缩略图元数据
add_action('create_category', 'save_category_thumbnail_meta');
add_action('edited_category', 'save_category_thumbnail_meta');
function save_category_thumbnail_meta($term_id) {
    if (isset($_POST['category_thumbnail_id'])) {
        update_term_meta($term_id, 'category_thumbnail_id', absint($_POST['category_thumbnail_id']));
    }
}

2. 在后台上传分类缩略图

添加代码后，进入WordPress后台的文章→分类页面，新增或编辑分类时就能看到「分类缩略图」的上传选项，上传并保存即可。

3. 修改前端代码显示缩略图

替换你原来的代码，使用get_term_meta()获取缩略图ID，再用wp_get_attachment_image()输出图片：

$categories = get_categories([
    "orderby" => 'name',
    'number' => 4,
    'exclude' => 29,
]);

foreach ($categories as $category) {
    echo $category->name;
    echo $category->description;
    
    // 获取分类缩略图ID
    $thumbnail_id = get_term_meta($category->term_id, 'category_thumbnail_id', true);
    if ($thumbnail_id) {
        // 输出指定尺寸的缩略图，可替换为'large'、'thumbnail'或自定义尺寸名
        echo wp_get_attachment_image($thumbnail_id, 'medium');
    }
}

替代方案 #

如果不想手动写代码，可以使用现成的WordPress插件，比如Category Thumbnails或Taxonomy Thumbnail，这类插件会自动帮你实现分类缩略图的上传和调用功能。

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