Как в рубриках WordPress сделать функционал иконок - без дополнительных плагинов

Как в рубриках WordPress сделать функционал иконок - без дополнительных плагинов

// Подключение медиатеки на страницах рубрик
add_action( 'admin_enqueue_scripts', 'my_cat_icon_enqueue_media' );
function my_cat_icon_enqueue_media( $hook ) {
    $taxonomy = isset( $_GET['taxonomy'] ) ? sanitize_key( $_GET['taxonomy'] ) : '';
    if ( in_array( $hook, [ 'edit-tags.php', 'term.php' ], true ) && $taxonomy === 'category' ) {
        wp_enqueue_media();
    }
}

// Поле при создании рубрики
add_action( 'category_add_form_fields', 'my_cat_icon_add_field' );
function my_cat_icon_add_field() {
    ?>
    <div class="form-field">
        <label for="term-icon">Иконка рубрики</label>
        <input type="text" name="term_icon" id="term-icon" value="" placeholder="URL изображения">
        <button type="button" class="button my-cat-icon-upload" style="margin-top:5px;">Выбрать из медиатеки</button>
        <img class="my-cat-icon-preview" src="" style="display:none; max-width:120px; margin-top:10px; border:1px solid #ccc; padding:3px; background:#fff;">
        <p class="description">Нажмите кнопку, чтобы выбрать изображение.</p>
    </div>
    <?php
}

// Поле при редактировании рубрики
add_action( 'category_edit_form_fields', 'my_cat_icon_edit_field' );
function my_cat_icon_edit_field( $term ) {
    $icon = get_term_meta( $term->term_id, 'term_icon', true );
    $preview_style = $icon ? '' : 'display:none;';
    ?>
    <tr class="form-field">
        <th scope="row"><label for="term-icon">Иконка рубрики</label></th>
        <td>
            <input type="text" name="term_icon" id="term-icon" value="<?php echo esc_attr( $icon ); ?>" style="width:60%;">
            <button type="button" class="button my-cat-icon-upload" style="margin-top:0;">Выбрать из медиатеки</button>
            <br>
            <img class="my-cat-icon-preview" src="<?php echo esc_url( $icon ); ?>" style="<?php echo $preview_style; ?> max-width:120px; margin-top:10px; border:1px solid #ccc; padding:3px; background:#fff;">
            <p class="description">Нажмите кнопку, чтобы выбрать изображение.</p>
        </td>
    </tr>
    <?php
}

// Сохранение значения
add_action( 'created_category', 'my_save_cat_icon' );
add_action( 'edited_category',   'my_save_cat_icon' );
function my_save_cat_icon( $term_id ) {
    if ( isset( $_POST['term_icon'] ) ) {
        update_term_meta( $term_id, 'term_icon', esc_url_raw( $_POST['term_icon'] ) );
    }
}

// JavaScript для работы с медиатекой
add_action( 'admin_footer', 'my_cat_icon_media_js' );
function my_cat_icon_media_js() {
    $screen = function_exists( 'get_current_screen' ) ? get_current_screen() : null;
    if ( ! $screen || $screen->id !== 'edit-category' ) {
        return;
    }
    ?>
    <script type="text/javascript">
    jQuery(function($){
        $(document).on('click', '.my-cat-icon-upload', function(e){
            e.preventDefault();
            var $btn = $(this);
            var $input = $btn.prev('input[type="text"]');
            var $preview = $btn.siblings('.my-cat-icon-preview');

            var frame = wp.media({
                title: 'Выберите иконку для рубрики',
                button: { text: 'Использовать эту иконку' },
                multiple: false,
                library: { type: 'image' }
            });

            frame.on('select', function(){
                var attachment = frame.state().get('selection').first().toJSON();
                $input.val(attachment.url);
                $preview.attr('src', attachment.url).fadeIn(200);
            });

            frame.open();
        });
    });
    </script>
    <?php
}