Cum să afișezi thumbnail-uri pentru categorii în WordPress?

Cred că cea mai bună metodă este să permiți administratorului să aleagă imaginea reprezentativă pentru o categorie din Biblioteca Media. Exact așa funcționează WooCommerce pentru categoriile de produse. Am verificat cum implementează WooCommerce această funcționalitate (în includes/admin/class-wc-admin-taxonomies.php) și iată codul reutilizabil (poți să-l folosești în functions.php sau într-un plugin personalizat). Poate fi folosit și cu taxonomiile post types personalizate.

<?php
/* Imagine thumbnail pentru categorie */

/* Dacă este un CPT personalizat, folosește scripturile și stilurile pentru afișarea popup-ului Biblioteca Media */
function media_uploader() {
    global $post_type;
    if( 'YOUR_CUSTOM_POST_TYPE' == $post_type) {
        if(function_exists('wp_enqueue_media')) {
            wp_enqueue_media();
        }
        else {
            wp_enqueue_script('media-upload');
            wp_enqueue_script('thickbox');
            wp_enqueue_style('thickbox');
        }
    }
}
add_action('admin_enqueue_scripts', 'media_uploader');

/*afișează câmpul din formular*/

add_action( 'YOUR_CUSTOM_POST_TYPE-category_add_form_fields', 'add_image_field', 10, 2 );
add_action( 'YOUR_CUSTOM_POST_TYPE-category_edit_form_fields', 'add_image_field', 10, 2 );
function add_image_field($taxonomy) {
    if(is_object($taxonomy)) // editare termen, nu adăugare
    $selectedimgid = get_term_meta( $taxonomy->term_id, 'YOUR_CUSTOM_POST_TYPE_cat_thumbnail_id', true );
    
    ?>
    <div class="form-field term-thumbnail-wrap">
        <label>Imagine reprezentativă</label>
        <div id="YOUR_CUSTOM_POST_TYPE_cat_thumbnail" style="float: left; margin-right: 10px;"><img src="<?php if(isset($selectedimgid)) echo wp_get_attachment_image_src($selectedimgid)[0]; else echo "PLACEHOLDER-IMAGE-HERE.jpg";?>" width="60px" height="60px" /></div>
        <div style="line-height: 60px;">
            <input type="hidden" id="YOUR_CUSTOM_POST_TYPE_cat_thumbnail_id" name="YOUR_CUSTOM_POST_TYPE_cat_thumbnail_id" value="<?php if(isset($selectedimgid)) echo $selectedimgid; ?>" />
            <button type="button" class="upload_image_button button">Încarcă/Adaugă imagine</button>
            <button type="button" class="remove_image_button button">Șterge imagine</button>
        </div>
        <script type="text/javascript">

            // Afișează butonul "șterge imagine" doar când este necesar
            if ( ! jQuery( '#YOUR_CUSTOM_POST_TYPE_cat_thumbnail_id' ).val() ) {
                jQuery( '.remove_image_button' ).hide();
            }

            // Încărcare fișiere
            var file_frame;

            jQuery( document ).on( 'click', '.upload_image_button', function( event ) {

                event.preventDefault();

                // Dacă frame-ul media există deja, redeschide-l
                if ( file_frame ) {
                    file_frame.open();
                    return;
                }

                // Creează frame-ul media
                file_frame = wp.media.frames.downloadable_file = wp.media({
                    title: 'Alege o imagine',
                    button: {
                        text: 'Folosește imaginea'
                    },
                    multiple: false
                });

                // Când o imagine este selectată, execută un callback
                file_frame.on( 'select', function() {
                    var attachment           = file_frame.state().get( 'selection' ).first().toJSON();
                    var attachment_thumbnail = attachment.sizes.thumbnail || attachment.sizes.full;

                    jQuery( '#YOUR_CUSTOM_POST_TYPE_cat_thumbnail_id' ).val( attachment.id );
                    jQuery( '#YOUR_CUSTOM_POST_TYPE_cat_thumbnail' ).find( 'img' ).attr( 'src', attachment_thumbnail.url );
                    jQuery( '.remove_image_button' ).show();
                });

                // Deschide modalul
                file_frame.open();
            });

            jQuery( document ).on( 'click', '.remove_image_button', function() {
                jQuery( '#YOUR_CUSTOM_POST_TYPE_cat_thumbnail' ).find( 'img' ).attr( 'src', 'PLACEHOLDER-IMAGE-HERE.jpg' );
                jQuery( '#YOUR_CUSTOM_POST_TYPE_cat_thumbnail_id' ).val( '' );
                jQuery( '.remove_image_button' ).hide();
                return false;
            });

            jQuery( document ).ajaxComplete( function( event, request, options ) {
                if ( request && 4 === request.readyState && 200 === request.status
                    && options.data && 0 <= options.data.indexOf( 'action=add-tag' ) ) {

                    var res = wpAjax.parseAjaxResponse( request.responseXML, 'ajax-response' );
                    if ( ! res || res.errors ) {
                        return;
                    }
                    // Golește câmpurile Thumbnail la trimitere
                    jQuery( '#YOUR_CUSTOM_POST_TYPE_cat_thumbnail' ).find( 'img' ).attr( 'src', 'PLACEHOLDER-IMAGE-HERE.jpg' );
                    jQuery( '#YOUR_CUSTOM_POST_TYPE_cat_thumbnail_id' ).val( '' );
                    jQuery( '.remove_image_button' ).hide();
                    // Golește câmpul Display type la trimitere
                    jQuery( '#display_type' ).val( '' );
                    return;
                }
            } );

        </script>
        <div class="clear"></div>
    </div>
    <?php
    
}