Visualizza icone diverse in base alla categoria

icone categorie wordpress Visualizza icone diverse in base alla categoria


Oggi vedremo come visualizzare delle icone diverse abbinate ad ogni categoria del blog. Come sempre per arrivare allo scopo abbiamo due possibilità, tramite plugin o via codice. Naturalmente il metodo che preferisco è il secondo, non vale la pena appesantire WordPress con miriadi di plugin quando possiamo arrivare allo stesso risultato con poche righe di codice…comunque per non sbagliare e accontentare tutti illustrerò entrambe le possibilità icon smile Visualizza icone diverse in base alla categoria

Codice per il tema

Per implementare la funzione basterà inserire il codice che vedi qui di seguito nel punto dove vorrai venga visualizzato. Di default ho impostato /images come cartella di inserimento delle immagini e .png come estensione dei files, naturalmente potrai modificare i parametri a piacimento. Per far funzionare lo script dovrai creare per ogni categoria un’immagine che abbia come nome l’ID corrispondente alla categoria stessa, per esempio: categoria con ID1 andrai a creare il file 1.png, categoria ID11 creerai il file 11.png e così via per ognuna di esse. Le immagini le inserirai come detto prima nella cartella /images del tema in uso.

<?php
foreach((get_the_category()) as $category) {
    echo '<img src="'.get_bloginfo("template_url").'/images/' . $category->cat_ID . '.png" alt="' . $category->cat_name . '" />';
}
?>

Plugin

Per chi desiderasse usare un plugin (che in verità ha alcune opzioni avanzate rispetto al codice spiegato poco fa) segnalo Category Icons che potrete trovare nei Repository di WordPress ed offre tra l’altro un integrazione nella sidebar tramite widget, effetto rollover, icone negli RSS ed altre funzioni aggiuntive.
Category Icons Plugin


9 Commenti

  • [1]
    nintendo italia → 30 dicembre 2011

    grazie, sei un vero esperto di wordpress come sempre

    Reply
  • [2]
    Walter → 30 dicembre 2011

    Diciamo che mi appassiona :)

    Reply
  • [3]
    Simone → 2 gennaio 2012

    Si ma il problema è che.. se uno ha una categoria e imposta relativa icona ok, ma se ha una sottocategoria senza icona figlia della prima, visualizza un’immagine mancante perchè non esiste l’icona nella cartella. Si può ovviare a questo problema?

    Inoltre.. con questo script come si possono inserire le categorie ad esempio nei menù nella sidebar o nell’header in automatico?

    Esiste secondo me questo plugin
    http://wordpress.org/extend/plugins/category-icons-lite/
    che è la versione light di quello da te segnalato, molto leggero e valido che però ha 2 problemini:
    - se ci sono 2 categorie e non solo una con icona, visualizza soltanto la prima;
    - se esiste una sotto categoria figlia di una genitore con l’icona impostata a quel punto non visualizza neanche l’icona della categoria genitore.

    Reply
  • [4]
    Walter → 2 gennaio 2012

    Puoi creare l’icona per le sottocategorie o se proprio non vuoi visualizzarla ne crei una di 1×1 pixel trasparente.

    Per le icone nei menu non serve uno script, puoi usare le classi Css. Quando hai creato il tuo menu personalizzato clicca su una voce del menu e in “Classi CSS (opzionale)” inserisci il nome della classe, per esempio “categoria-pippo” (senza i doppi apici).
    Ora apri il file style.css che trovi nel tuo tema e crea la classe:
    .categoria-pippo a{background:url(images/categoria-pippo.png) no-repeat;}

    Reply
  • [5]
    Antonio M. → 14 aprile 2012

    Senza entrare troppo nello specifico, secondo te come posso far funzionare questo: Autore: google_profile != "") { ?><a rel="author" href="google_profile; ?>" target="_blank" title="Google +"> } else { <a href="" rel="author"> Cioè letteralmente: se l’autore del post ha un profilo google allora linka il nome al suo profilo google, altrimenti linka la pagina autore
    Grazie Antonio

    Reply
  • [6]
    Antonio M. → 14 aprile 2012

    scusami ma non visualizza tutto il codice…

    Reply
  • [7]
    Walter → 14 aprile 2012

    Ciao Antonio,
    questo codice non è applicabile alla tua richiesta.
    Se vuoi puoi contattarmi via email magari integrando il codice in tuo possesso (quello che hai postato sinceramente non capisco ben cosa sia, forse non è completo).

    Reply
  • [8]
    Ronny → 12 giugno 2013

    Ciao Walter,

    como posso fare per far disporre le icone per ID e non in ordine alfabetico? Es: ID1, ID2 ecc…
    Si può fare?

    Grazie mille
    R.

    Reply
  • [9]
    Walter → 14 giugno 2013

    Ciao, per avere maggiori funzionalità puoi installare il plugin che ho segnalato nel post.

    Reply
  • Lascia un Commento