Volete visualizzare le immagini della tassonomia o le icone delle categorie in WordPress?
Per impostazione predefinita, WordPress non offre la possibilità di caricare un’immagine della tassonomia o un’icona di categoria. Si limita a visualizzare il nome della categoria o della tassonomia nelle pagine dell’archivio.
In questo articolo vi mostreremo come aggiungere facilmente immagini di tassonomia o icone di categoria in WordPress. Vi mostreremo anche come visualizzare le immagini della tassonomia sulle pagine dell’archivio.
Perché aggiungere immagini di tassonomia in WordPress?
Per impostazione predefinita, il vostro sito WordPress non dispone di un’opzione per aggiungere immagini alle tassonomie come le categorie e i tag (o qualsiasi altra tassonomia personalizzata).
Utilizza semplicemente i nomi delle tassonomie ovunque, compresi gli archivi delle categorie o le pagine degli archivi delle tassonomie.
Sembra un po’ semplice e noioso.
Se le pagine della tassonomia ricevono molto traffico di ricerca, è opportuno renderle più accattivanti.
Il modo più semplice per rendere una pagina più interessante è aggiungere immagini. È possibile aggiungere immagini di tassonomia o icone di categoria per rendere queste pagine più facili da usare e coinvolgenti.
Un buon esempio è rappresentato da un sito come NerdWallet che utilizza le icone delle categorie nell’intestazione:
Potete anche usarlo per creare bellissime sezioni di navigazione sulla vostra homepage, come nel caso di Bankrate:
Detto questo, vediamo come aggiungere facilmente immagini di tassonomia in WordPress.
Aggiungere facilmente immagini di tassonomia in WordPress
La prima cosa da fare è installare e attivare il plugin Categories Images. Per maggiori dettagli, consultate la nostra guida passo passo su come installare un plugin di WordPress.
Dopo l’attivazione, è sufficiente andare alla pagina Posts ” Categories. Si noterà che il plugin mostrerà un’immagine segnaposto per le categorie esistenti.
Per scegliere l’icona della propria categoria, è necessario cliccare sul link Modifica sotto una categoria.
Nella pagina di modifica della categoria, scorrete fino in fondo e troverete un modulo per caricare l’immagine della vostra tassonomia.
È sufficiente fare clic sul pulsante “Carica/Aggiungi nuova immagine” per caricare l’immagine che si desidera utilizzare per quella particolare categoria.
Non dimenticate di fare clic sul pulsante Aggiungi categoria o Aggiorna per salvare le modifiche.
Successivamente, si può ripetere la procedura per caricare le immagini delle altre categorie. È inoltre possibile caricare immagini per i tag e per qualsiasi altra tassonomia.
Ora, il problema è che dopo aver aggiunto le immagini, se si visita una pagina di categoria, non si vedrà l’immagine della categoria.
Per visualizzarlo, è necessario modificare il tema o il tema figlio di WordPress o utilizzare il plugin WPCode per aggiungere il codice.
Vi mostreremo entrambi i metodi e potrete scegliere quello che vi sembra più semplice.
Opzione 1. Visualizzazione delle icone dell’immagine della categoria tramite WPCode (consigliata)
Questo metodo è più semplice perché non si deve capire quale file del tema modificare e si può aggiungere il codice in modo sicuro senza rompere il sito.
È consigliato anche agli utenti che utilizzano un tema a blocchi con supporto per l’editor del sito.
Per prima cosa, è necessario installare e attivare il plugin WPCode. Per maggiori dettagli, consultare il nostro tutorial su come installare un plugin di WordPress.
Dopo l’attivazione, andare alla pagina WPCode ” + Aggiungi snippet e fare clic sul pulsante Usa snippet sotto il riquadro ‘Aggiungi il tuo codice personalizzato (nuovo snippet)’.
Nella schermata successiva, date al vostro snippet un titolo che vi aiuti a identificarlo.
Quindi, selezionare lo snippet PHP come tipo di codice.
Nella casella Anteprima codice, copiare e incollare il seguente frammento di codice:
if( is_category() ) { ?>
<div class="taxonomy-image">
<img class="taxonomy-img" src="<?php if (function_exists('z_taxonomy_image_url')) echo z_taxonomy_image_url(); ?>" alt="" / >
</div>
<?php
} else {
//do nothing
}
Quindi, scorrere la sezione Inserimento e scegliere Shortcode come metodo di inserimento.
Si noterà che WPCode mostrerà automaticamente un codice breve. Tuttavia, per rendere il vostro shortcode facile da ricordare, potete anche creare uno shortcode personalizzato.
Successivamente, fare clic sul pulsante Copia dello shortcode personalizzato.
È ora possibile utilizzare questo shortcode per visualizzare l’immagine della categoria nelle pagine dell’archivio.
Aggiunta di uno shortcode nell’editor del sito
Se si utilizza un tema a blocchi con supporto per l’editor del sito, andare alla pagina Aspetto ” Editor per avviare l’editor del sito.
Qui è possibile aggiungere un blocco shortcode subito prima del blocco Titolo dell’archivio.
Ora incollate il codice breve copiato in precedenza nel blocco del codice breve.
Non dimenticare di salvare le modifiche per applicarle. Ora è possibile visitare la pagina dell’archivio della categoria per vedere lo shortcode in azione.
Non preoccupatevi se l’immagine non appare corretta. In seguito vi mostreremo come correggerla utilizzando i CSS personalizzati.
Opzione 1. Visualizzare manualmente le icone delle categorie
Per questo metodo, è necessario aggiungere il codice personalizzato ai file del tema di WordPress.
Se è la prima volta che modificate i file di WordPress, potete consultare la nostra guida su come copiare e incollare il codice in WordPress.
Per prima cosa, dovrete collegarvi al vostro sito WordPress utilizzando un client FTP o il file manager del vostro hosting WordPress.
Una volta collegati, è necessario trovare il modello responsabile della visualizzazione degli archivi della tassonomia. Potrebbe trattarsi dei file archives.php, category.php, tag.php o taxonomy.php.
Per maggiori dettagli, consultate la nostra guida su come individuare i file da modificare in un tema WordPress.
Una volta trovato il file, è necessario scaricarlo sul computer e aprirlo in un editor di testo come Notepad o TextEdit.
Incollare ora il seguente codice nel punto in cui si desidera visualizzare l’immagine della tassonomia. Di solito, la si vuole aggiungere prima del titolo della tassonomia o del tag the_archive_title().
<?php if( is_category() ) { ?>
<div class="taxonomy-image">
<img class="taxonomy-img" src="<?php if (function_exists('z_taxonomy_image_url')) echo z_taxonomy_image_url(); ?>" alt="" / >
</div>
<?php
} else {
//do nothing
}
?>
Dopo aver aggiunto il codice, è necessario salvare il file e caricarlo sul proprio sito web tramite FTP.
Ora è possibile visitare la pagina dell’archivio della tassonomia per vedere l’immagine della tassonomia. Ecco come appare nella nostra pagina di archivio dimostrativa.
Ora, potrebbe sembrare ancora un po’ strano, ma non preoccupatevi. È possibile creare uno stile utilizzando un po’ di CSS personalizzato.
Stilizzazione delle icone di categoria con i CSS personalizzati
Dopo aver aggiunto le immagini delle icone di categoria o della tassonomia al vostro tema WordPress, l’immagine potrebbe non avere un bell’aspetto.
Per risolvere questo problema, è necessario aggiungere del codice CSS per allinearlo correttamente.
Se è la prima volta che aggiungete codice CSS in WordPress, date un’occhiata alla nostra guida per principianti sull’aggiunta di CSS personalizzati in WordPress.
Ecco il CSS personalizzato utilizzato per l’immagine della tassonomia.
img.taxonomy-img {
float: left;
max-height: 100px;
max-width: 100px;
display: inline-block;
padding: 20px;
}
A seconda del tema, potrebbe essere necessario anche creare uno stile per gli elementi circostanti, come il titolo dell’archivio, il titolo della tassonomia e la descrizione.
Abbiamo semplicemente avvolto il titolo e la descrizione del nostro archivio tassonomico in un elemento <div> e aggiunto una classe CSS personalizzata. Abbiamo quindi utilizzato il seguente codice CSS per regolare titolo e descrizione.
.taxonomy-title-description {
display: inline-block;
padding: 18px;
}
Ecco come appariva in seguito sul nostro sito web di prova.
Escludere le tassonomie dalla visualizzazione delle immagini della tassonomia
Ora, alcuni utenti potrebbero voler utilizzare le immagini delle tassonomie solo per tassonomie specifiche.
Ad esempio, se si gestisce un negozio online con WooCommerce, è possibile escludere le categorie di prodotti.
È sufficiente tornare alla pagina Immagini delle categorie nell’area di amministrazione di WordPress e selezionare le tassonomie che si desidera escludere.
Non dimenticate di fare clic sul pulsante Salva modifiche per memorizzare le impostazioni.
Speriamo che questo articolo vi abbia aiutato a capire come aggiungere facilmente immagini di tassonomia in WordPress. Potreste anche voler vedere questi utili hack e plugin di categoria per WordPress o i nostri consigli per ottenere più traffico dai motori di ricerca.
Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Ivan says
Any suggestions for any other up to date plugin. Looks like the one suggested here hasn’t been updated recently.
shiv says
how to add category images in WordPress side bar like the one in wpbeginner site ” i need help with “
pamela says
What if i want to loop through all the terms and display them on one page
Gabrielle says
Hi,i’m currently using this plugin on localhost.
I find a strange/interesting usage for this plugin:
Extending default WP menu, for categories links,
to show links with background images.
Anyone knows how to integrate this plugin filter,
into wp menu to return
for each menu?
The case is complicated, do i need to use Walker class?
Jess says
How do I display the images used in the front end? I have a listing page and want to display the taxonomy image when ever that page has that taxonomy outputted on the page. I can’t find anything that actually shows me how to display the image on the front end. All I see is the Taxonomy label outputted by not the image.
Thanks for your help,
Jess
Harsha says
Hi,
The reason I ended in this post is I googled – featured content in wordpress
I am actually looking at way, i can improve the related content in the wordpress.
Because of selecting multiple categories and mutiple tags to posts, I see WordPress gets confused and does not show related content as I presume.
So, Is taxonomies a way to improve how we show related posts, to the readers.
And this plugin Taxonomy Images is not updated for 2 years
WPBeginner Support says
Taxonomies can be a way to improve your related posts. But there are other tools that you can use to merge and bulk edit categories and tags.
Admin
JW says
Great tutorial! Thank!
Unfortunately it looks like this plugin isn’t supported anymore, do you know if there is an alternative?
Or is the code still valid?
Dan Horvat says
The most important part is missing – how to actually display those images in the front end.
WPBeginner Support says
Please see the plugin page for detailed instructions.
Admin
patrick raobelina says
To display the image:
$url = apply_filters( ‘taxonomy-images-queried-term-image-url’, ” );
if ( ! empty( $url ) ) {
echo ”;
}
Shinkov says
i was searching for an article that shows how to code this instead using a plugin
Gonzalo says
How to display pictures of taxonomies in the theme?
I used the code but does not work
print apply_filters( ‘taxonomy-images-queried-term-image’, ” );
Please Help?
Nicholas Worth says
Would make more sense if title was, “Best Plugin for Adding Images to Taxonomy in WordPress”, cause this isn’t really a tutorial about how to add images to taxonomy. Don’t mean to be a downer but I hate coming to articles that claim information but in reality they are saying this other guy knows you were hoping to here.
WPBeginner Support says
We are sorry, you felt that way. Please let us know what you mean by how to add images to taxonomy? May be we can help you find the right answer.
Admin
Jacob Perl says
I’m guessing what Nicholas thought was the same thing I thought when I found this article: that it would be a tutorial on how to add a custom image field to taxonomies manually via coding rather than with a plugin. Still the plugin looks cool…I might check it out.
Luís Felipe says
The same thing i thought, i was searching for an article that shows how to code this instead using a plugin
But this is a good article anyway.
lemonthirst says
I am delighted that i have found this great plugin, it works like a charm, i ran across some minor issues on my custom posts/taxonmy but all is well now.
Thank you guys!
Mattia says
Hi, have a related question about custom taxonomies: how do you create a custom taxonomy that exists only inside a particular custom post type (like your “work” custom post type), without a plugin?
My problem is that when I create a custom taxonomy, it appears to be also under the normal articles or the other custom post types…
Editorial Staff says
You would have to use register_taxonomy like so:
1-click Use in WordPress
Genre is the taxonomy and book will be the post type.
Admin
Mattia says
Grazie!
I’ll try and let you know…
Banna says
Hi,
We are using this,
But we cant get it work with cate ID.
We have a Cat id we want display its thumbnail please help me to do this.
how get thumbnail image using tax id
Please let me know.
Thank You
Banna Daxxip
Ruben Boehler says
Sorry but i can get this plugin to work…no output. Maybe i do somehing wrong?!
i use the plugin + this code and hooked it in:
print apply_filters( ‘taxonomy-images-list-the-terms’, ”, array( ‘image_size’ => ‘detail’, ‘taxonomy’ => ‘company’, ‘after’ => ”, ‘after_image’ => ”, ‘before’ => ”, ‘before_image’ => ”, ) );
iam getting absolutly no output … could you help me to figure it out?
_mfields says
@devinsays Awesome! Thanks for the tip!
DanielPeiser says
Sounds interesting! What if I have a few blog posts that don’t have a thumbnail image (or image in post), and there is always the same default image loaded as thumbnail in archive pages: Would the plugin load one associated to the category/tag?
wpbeginner says
@DanielPeiser You can certainly set it so it does that. Basically the steps would be like: First check if post thumbnail exist… If it doesn’t exist, then check for taxonomy image… if that doesn’t exist either, then return default thumbnail.