HTML转WordPress：如何调用头部图片及实现分类页独图（无插件）

一、给分类添加自定义图片上传字段 #

要实现每个分类页设置独特头部图，首先得在分类编辑后台添加图片上传控件。将以下代码添加到主题的functions.php文件中：

// 注册分类元字段
function register_category_header_image_meta() {
    register_meta('term', 'category_header_image', array(
        'show_in_rest' => true,
        'type' => 'string',
        'single' => true,
        'sanitize_callback' => 'esc_url_raw',
        'auth_callback' => function() {
            return current_user_can('manage_categories');
        }
    ));
}
add_action('init', 'register_category_header_image_meta');

// 在分类编辑页面添加图片上传界面
function add_category_header_image_field() {
    ?>
    <div class="form-field term-header-image-wrap">
        <label for="category-header-image">分类头部图片</label>
        <input type="hidden" id="category-header-image" name="category_header_image" value="<?php echo esc_attr(get_term_meta(get_queried_object_id(), 'category_header_image', true)); ?>">
        <div id="category-header-image-preview" style="margin-top:10px;">
            <?php
            $image_url = get_term_meta(get_queried_object_id(), 'category_header_image', true);
            if ($image_url) {
                echo '<img src="' . esc_url($image_url) . '" style="max-width:300px;"/>';
            }
            ?>
        </div>
        <button type="button" class="button button-secondary category-header-image-upload">选择图片</button>
        <button type="button" class="button button-secondary category-header-image-remove" style="display:none;">移除图片</button>
    </div>
    <?php
}
add_action('category_add_form_fields', 'add_category_header_image_field');
add_action('category_edit_form_fields', 'add_category_header_image_field');

// 保存分类元字段值
function save_category_header_image_meta($term_id) {
    if (isset($_POST['category_header_image'])) {
        update_term_meta($term_id, 'category_header_image', esc_url_raw($_POST['category_header_image']));
    }
}
add_action('created_category', 'save_category_header_image_meta');
add_action('edited_category', 'save_category_header_image_meta');

// 加载媒体上传JS
function enqueue_category_header_image_script() {
    if (isset($_GET['taxonomy']) && $_GET['taxonomy'] === 'category') {
        wp_enqueue_media();
        wp_add_inline_script('media-editor', "
            jQuery(document).ready(function($) {
                $('.category-header-image-upload').click(function(e) {
                    e.preventDefault();
                    var frame = wp.media({
                        title: '选择分类头部图片',
                        button: { text: '使用此图片' },
                        multiple: false
                    });
                    frame.on('select', function() {
                        var attachment = frame.state().get('selection').first().toJSON();
                        $('#category-header-image').val(attachment.url);
                        $('#category-header-image-preview').html('<img src=\"' + attachment.url + '\" style=\"max-width:300px;\"/>');
                        $('.category-header-image-remove').show();
                    });
                    frame.open();
                });
                $('.category-header-image-remove').click(function(e) {
                    e.preventDefault();
                    $('#category-header-image').val('');
                    $('#category-header-image-preview').html('');
                    $(this).hide();
                });
            });
        ");
    }
}
add_action('admin_enqueue_scripts', 'enqueue_category_header_image_script');

这段代码会在分类的新增/编辑页面添加图片上传组件，支持选择、预览和移除图片，选中的图片URL会被保存到分类的专属元字段中。

二、修改分类模板的头部图片代码 #

找到你的分类模板文件（通常是category.php，若使用通用归档页则为archive.php），将原来硬编码的头部图片代码替换为以下动态代码：

<div class="ftcat-header">
    <div class="ftcat-header-image-wrap">
        <div class="ftcat-header-image-overlay"></div>
        <?php
        // 获取当前分类的自定义头部图片
        $category_header_image = get_term_meta(get_queried_object_id(), 'category_header_image', true);
        // 设置默认图片（分类未设置时启用）
        $default_header_image = wp_get_upload_dir()['baseurl'] . '/2022/02/cuisine.jpg';
        $header_image_url = $category_header_image ? $category_header_image : $default_header_image;
        ?>
        <div class="ftcat-header-image skip-lazy" style='background-image: url("<?php echo esc_url($header_image_url); ?>");'></div>
        <div class="ftcat-header-content">
            <h1 class="ftcat-header-title">
                <?php single_cat_title(); ?> - Revues Des Produits et Guides d'Achat
            </h1>
            <div class="ftcat-header-search">
                <form role="search" method="get" class="search-form" action="<?php echo esc_url(home_url('/')); ?>">
                    <input type="search" class="search-field" placeholder="Search for the best product..." value="<?php echo get_search_query(); ?>" name="s" />
                    <button type="submit" class="search-submit">Search</button>
                </form>
            </div>
            <div class="ftcat-header-meta">
            </div>
        </div>
    </div>
</div>

注意事项 #

• 默认图片路径可根据实际需求修改，确保该图片存在于WordPress上传目录中。
• 现在进入每个分类的编辑页面，即可上传专属头部图片；未设置的分类会自动使用默认图片。

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