카테고리별 상단 이미지(헤더 하단에 큰 배경 이미지와 텍스트 처리)가 필요한 경우가 회사 사이트에서 자주 있습니다.
이를 처리하는 방법을 알아보겠습니다.

functions.php

// 카테고리 편집 페이지에 배경 이미지 필드 추가
function add_category_background_image_field($taxonomy) {
    ?>
    <div class="form-field term-group">
        <label for="category-background-image"><?php _e('배경 이미지', 'text-domain'); ?></label>
        <input type="text" id="category-background-image" name="category-background-image" value="">
        <button class="upload_image_button button"><?php _e('이미지 업로드', 'text-domain'); ?></button>
    </div>
    <?php
}
add_action('category_add_form_fields', 'add_category_background_image_field', 10, 2);

// 카테고리 편집 페이지에서 배경 이미지 필드 저장
function save_category_background_image($term_id) {
    if (isset($_POST['category-background-image'])) {
        update_term_meta($term_id, 'category-background-image', $_POST['category-background-image']);
    }
}
add_action('created_category', 'save_category_background_image', 10, 2);
add_action('edited_category', 'save_category_background_image', 10, 2);

// 카테고리 편집 페이지에 배경 이미지 필드 표시
function edit_category_background_image_field($term, $taxonomy) {
    $background_image = get_term_meta($term->term_id, 'category-background-image', true);
    ?>
    <tr class="form-field term-group-wrap">
        <th scope="row"><label for="category-background-image"><?php _e('배경 이미지', 'text-domain'); ?></label></th>
        <td>
            <input type="text" id="category-background-image" name="category-background-image" value="<?php echo esc_attr($background_image); ?>" style="display:none;">
            <button class="upload_image_button button"><?php _e('이미지 업로드', 'text-domain'); ?></button>
            <div id="category-image-preview" style="margin-top:10px;">
                <?php if ($background_image) : ?>
                    <img src="<?php echo esc_url($background_image); ?>" style="max-width:100%; height:auto;">
                <?php endif; ?>
            </div>
        </td>
    </tr>
    <?php
}
add_action('category_edit_form_fields', 'edit_category_background_image_field', 10, 2);

// 이미지 업로드를 위한 스크립트 추가
function add_category_image_upload_script() {
    ?>
    <script>
    jQuery(document).ready(function($) {
        var mediaUploader;
        $('.upload_image_button').click(function(e) {
            e.preventDefault();
            if (mediaUploader) {
                mediaUploader.open();
                return;
            }
            mediaUploader = wp.media.frames.file_frame = wp.media({
                title: '이미지 선택',
                button: {
                    text: '이미지 선택'
                },
                multiple: false
            });
            mediaUploader.on('select', function() {
                var attachment = mediaUploader.state().get('selection').first().toJSON();
                $('#category-background-image').val(attachment.url);
            });
            mediaUploader.open();
        });
    });
    </script>
    <?php
}
add_action('admin_footer', 'add_category_image_upload_script');

// 미디어 업로드 스크립트 로드
function load_wp_media_files() {
    wp_enqueue_media();
}
add_action('admin_enqueue_scripts', 'load_wp_media_files');

functions.php 에 위 코드를 추가하면 하단과 같은 카테고리 배경 이미지 등록칸이 나옵니다.

category.php

<?php
    // 현재 카테고리의 배경 이미지 가져오기
    $category = get_queried_object();
    $background_image = get_term_meta($category->term_id, 'category-background-image', true);
 ?>
    <div class="blog-top" style="background-image: url('<?php echo esc_url($background_image); ?>');">
        <div class="root-container">
            <h1><?php single_cat_title(); ?></h1>
            <?php if (category_description()) : ?>
                <div class="category-description">
                    <?php echo category_description(); ?>
                </div>
            <?php endif; ?>
        </div>
    </div>

와 같이 catregory.php에 코드를 추가하면 원하는 공간에서 배경이미지와 카테고리명 그리고 설명을 노출 할 수 있습니다.