Elenco categorie con miniatura e descrizione nella home page

Nota: Questo è per le versioni più vecchie di WP < 3.9 prima dell'introduzione del nuovo sistema di caricamento media

Ecco come aggiungere campi e salvare i valori nella schermata di modifica delle categorie, oltre a un metodo per aggiungere un campo di caricamento immagini.

Aggiungere campi alla schermata di modifica categoria

Per iniziare, abbiamo bisogno di far apparire del codice nella schermata di modifica delle categorie.

add_action( 'edit_category_form_fields', 'my_category_custom_fields' );
add_action( 'edit_category', 'save_my_category_custom_fields' );

function my_category_custom_fields( $tag ) {
    // qui andrà il tuo HTML per i campi personalizzati
    // la variabile $tag è un oggetto termine di tassonomia con proprietà come $tag->name, $tag->term_id etc...

    // dobbiamo conoscere i valori delle nostre voci esistenti, se presenti
    $category_meta = get_option( 'category_meta' );
    ?>
    <tr class="form-field">
        <th scope="row" valign="top"><label for="category-title"><?php _e("Titolo"); ?></label></th>
        <td>
            <input id="category-title" name="category_meta[<?php echo $tag->term_id ?>][title]" value="<?php if ( isset( $category_meta[ $tag->term_id ] ) ) esc_attr_e( $category_meta[ $tag->term_id ]['title'] ); ?>" />
            <span class="description"><?php _e('Inserisci un titolo alternativo per questa categoria.'); ?></span>
        </td>
    </tr>
    <!-- ripeti per altri campi necessari -->
    <?php
}

Il modo più semplice per memorizzare i nostri valori personalizzati è nella tabella delle opzioni (dovrebbe esserci una tabella per i meta delle tassonomie, ma pazienza). In questo modo dobbiamo fare solo una query per ottenere i meta dati di tutte le nostre categorie. Se qualcuno ha un'idea migliore per la memorizzazione, si faccia avanti!

function save_my_category_custom_fields() {
    if ( isset( $_POST['category_meta'] ) && !update_option('category_meta', $_POST['category_meta']) )
        add_option('category_meta', $_POST['category_meta']);
}

Per una checkbox stai semplicemente memorizzando vero o falso, quindi useresti category_extras[$tag->term_id][show_on_home] per l'attributo name e useresti il valore memorizzato in $category_meta per determinare se è selezionata o meno.

Potresti voler aggiungere ulteriori elaborazioni o sanitizzazione alla funzione di salvataggio - la mia è solo un esempio rapido e sporco.

Il campo immagine

Questo è un bel po' di codice e piuttosto complicato, quindi non lo spiegherò tutto qui, ma i commenti descrivono lo scopo di ogni funzione. Possiamo discuterne nei commenti se vuoi.

Le seguenti funzioni aggiungono un link alla schermata di modifica categoria che apre la libreria media di WordPress/popup di caricamento immagini. Puoi quindi caricare un'immagine e fare clic per usarla. Avrai quindi l'ID dell'immagine e l'URL della miniatura disponibili insieme agli altri meta sopra.

// aggiungi la dimensione dell'immagine di cui hai bisogno
add_image_size( 'category_thumb', 125, 125, true );

// configura il nostro campo immagine e i metodi di gestione
function setup_category_image_handling() {
    // aggiungi il campo immagine agli altri
    add_action( 'edit_category_form_fields', 'category_image' );

    global $pagenow;
    if ( is_admin() ) {
    add_action( 'admin_init', 'fix_async_upload_image' );
    if ( 'edit-tags.php' == $pagenow ) {
        add_thickbox();
        add_action('admin_print_footer_scripts', 'category_image_send_script', 1000);
    } elseif ( 'media-upload.php' == $pagenow || 'async-upload.php' == $pagenow ) {
        add_filter( 'media_send_to_editor', 'category_image_send_to_editor', 1, 8 );
        add_filter( 'gettext', 'category_image_replace_text_in_thickbox', 1, 3 );
    }
    }
}
add_action( 'admin_init', 'setup_category_image_handling' );

// il campo immagine nella schermata di modifica tassonomia
function category_image( $tag ) {
    // ottieni i nostri meta dati della categoria
    $category_meta = get_option('category_meta');
    ?>
           <tr class="form-field hide-if-no-js">
               <th scope="row" valign="top"><label for="taxonomy-image"><?php _e("Immagine"); ?></label></th>
               <td>
                   <div id="taxonomy-image-holder">
               <?php if( !empty($category_meta[$tag->term_id]['image']) ) { ?>
                   <img style="max-width:100%;display:block;" src="<?php echo esc_attr( $category_meta[ $tag->term_id ]['image']['thumb'] ); ?>" alt="" />
                   <a id="taxonomy-image-select" class="thickbox" href="media-upload.php?is_term=true&amp;type=image&amp;TB_iframe=1"><?php _e('Cambia immagine'); ?></a>
                   <a class="deletion" id="taxonomy-image-remove" href="#remove-image">Rimuovi immagine</a>
               <?php } else { ?>
                   <a id="taxonomy-image-select" class="thickbox" href="media-upload.php?is_term=true&amp;type=image&amp;TB_iframe=1"><?php _e('Scegli un\'immagine'); ?></a>
               <?php } ?>
                   </div>
                   <input type="hidden" name="category_meta[<?php echo $tag->term_id ?>][image][id]" value="<?php if( isset($category_meta[ $tag->term_id ]['image']['id']) ) echo esc_attr($category_meta[ $tag->term_id ]['image']['id']); ?>" class="tax-image-id" />
                   <input type="hidden" name="category_meta[<?php echo $tag->term_id ?>][image][thumb]" value="<?php if( isset($category_meta[ $tag->term_id ]['image']['thumb']) ) echo esc_attr($category_meta[ $tag->term_id ]['image']['thumb']); ?>" class="tax-image-thumb" />
               <span class="description"><?php _e('Un\'immagine per la categoria.'); ?></span></td>
           </tr>
    <?php
}

   // necessario per caricare immagini su schermate diverse da post/pagine
   function fix_async_upload_image() {
       if(isset($_REQUEST['attachment_id'])) {
           $GLOBALS['post'] = get_post($_REQUEST['attachment_id']);
       }
   }

   // stiamo gestendo la schermata di modifica tassonomia?
   function is_category_context() {
       if ( isset($_SERVER['HTTP_REFERER']) && strpos($_SERVER['HTTP_REFERER'],'is_term') !== false ) {
           return true;
       } elseif ( isset($_REQUEST['_wp_http_referer']) && strpos($_REQUEST['_wp_http_referer'],'is_term') !== false ) {
           return true;
       } elseif ( isset($_REQUEST['is_term']) && $_REQUEST['is_term'] !== false ) {
           return true;
       }
       return false;
   }

   // sostituisci il testo "Inserisci nel post" con qualcosa di più appropriato
   function category_image_replace_text_in_thickbox($translated_text, $source_text, $domain) {
       if ( is_category_context() ) {
           if ('Insert into Post' == $source_text) {
               return __('Usa questa immagine', MB_DOM );
           }
       }
       return $translated_text;
   }

   // output uno script che imposta variabili sull'oggetto window così che possano essere accessibili altrove
   function category_image_send_to_editor( $html, $id, $attachment ) {
       // il controllo del contesto potrebbe non essere necessario, e, potrebbe non funzionare in tutti i casi
       if ( is_category_context() ) {
           $item = get_post($id);
           $src = wp_get_attachment_image_src($id,'thumbnail',true); // 0 = url, 1 = width, 2 = height, 3 = icon(bool)
           ?>
           <script type="text/javascript">
               // invia le variabili dell'immagine all'apertura
               var win = window.dialogArguments || opener || parent || top;
               win.TI.id = <?php echo $id ?>;
               win.TI.thumb = '<?php echo $src[0]; ?>';
           </script>
           <?php
       }
       return $html;
   }

   // scrivi lo javascript che gestisce cosa succede quando un utente clicca per usare un'immagine
   function category_image_send_script() { ?>
       <script>
           self.TI = {};
           var tb_position;

           function send_to_editor(h) {
               // ignora il contenuto restituito dal media uploader e usa le variabili passate alla finestra invece
               jQuery('.tax-image-id').val( self.TI.id );
               jQuery('.tax-image-thumb').val( self.TI.thumb );

               // mostra immagine
               jQuery('#taxonomy-image-holder img, #taxonomy-image-remove').remove();
               jQuery('#taxonomy-image-holder')
                   .prepend('<img style="max-width:100%;display:block;" src="'+ self.TI.thumb +'" alt="" />')
                   .append('<a class="deletion" id="taxonomy-image-remove" href="#remove-image">Rimuovi immagine</a>');

               jQuery('#taxonomy-image-select').html('Cambia immagine');

               // chiudi thickbox
               tb_remove();
           }

           (function($){
               $(document).ready(function() {

                   tb_position = function() {
                       var tbWindow = $('#TB_window'), width = $(window).width(), H = $(window).height(), W = ( 720 < width ) ? 720 : width;

                       if ( tbWindow.size() ) {
                           tbWindow.width( W - 50 ).height( H - 45 );
                           $('#TB_iframeContent').width( W - 50 ).height( H - 75 );
                           tbWindow.css({'margin-left': '-' + parseInt((( W - 50 ) / 2),10) + 'px'});
                           if ( typeof document.body.style.maxWidth != 'undefined' )
                               tbWindow.css({'top':'20px','margin-top':'0'});
                       };

                       return $('a.thickbox').each( function() {
                           var href = $(this).attr('href');
                           if ( ! href ) return;
                           href = href.replace(/&width=[0-9]+/g, '');
                           href = href.replace(/&height=[0-9]+/g, '');
                           $(this).attr( 'href', href + '&width=' + ( W - 80 ) + '&height=' + ( H - 85 ) );
                       });
                   };
                   $(window).resize(function(){ tb_position(); });

                   $('#taxonomy-image-select').click(function(event){
                       tb_show("Scegli un'immagine:", $(this).attr("href"), false);
                       return false;
                   });
                   $('#taxonomy-image-remove').live('click',function(event){
                       $('#taxonomy-image-select').html('Scegli un\'immagine');
                       $('#taxonomy-image-holder img').remove();
                       $('input[class^="tax-image"]').val("");
                       $(this).remove();
                       return false;
                   });
               });
           })(jQuery);
       </script>
       <?php
   }

Accedere alle informazioni

Nella tua parte my_function presa dalla tua risposta, potresti quindi accedere ai metadati così:

function my_function(){
    $args=array(
    'orderby' => 'name',
    'order' => 'ASC'
    );
    $categories=get_categories($args);

    // ottieni i nostri meta dati della categoria ed esci se non ce ne sono
    $category_meta = get_option('category_meta');
    if ( !$category_meta )
        return;

    echo '<ul style="list-style-type:none;margin:0;padding:0">';
    foreach($categories as $category) {
        // salta categorie non selezionate e categorie senza meta dati
        if ( !isset( $category_meta[ $category->term_id ] ) || ( isset( $category_meta[ $category->term_id ] ) && !$category_meta[ $category->term_id ]['show_on_home'] ) )
            continue;
        echo '<li><a style="display:block;margin-top:20px;" href="' . get_category_link( $category->term_id ) . '" title="' . sprintf( __( "Vedi tutti i post in %s" ), $category->name ) . '" ' . '>' . $category_meta[ $category->term_id ]['title'].'</a>';
        if ( "" != $category_meta[ $category->term_id ]['image']['id'] )
            echo wp_get_attachment_image( $category_meta[ $category->term_id ]['image']['id'], 'category_thumbnail', false, array( 'alt' => $category->name, 'class' => '' ) );
        echo $category->description . '</li>';
        } 
    echo '</ul>';
}