Aggiungere immagini per tassonomie o icone per categorie al tuo sito WordPress può aiutare a far risaltare le categorie.
Tuttavia, WordPress non offre un'opzione per caricare queste immagini di default. Visualizza solo i nomi delle categorie o delle tassonomie nelle pagine di archivio. Questo può apparire semplice e noioso.
Nel nostro tutorial, ti mostreremo come aggiungere immagini per tassonomie o icone per categorie a WordPress. Imparerai anche come visualizzarle nelle tue pagine di archivio, rendendo il tuo sito più coinvolgente e facile da usare.
Perché aggiungere immagini per tassonomie in WordPress?
Di default, il tuo sito WordPress non include un'opzione per aggiungere immagini per le tue tassonomie, come categorie e tag (o qualsiasi altra tassonomia personalizzata).
Utilizza i nomi delle tassonomie ovunque, comprese le pagine di archivio delle categorie o delle tassonomie.
Questo sembra noioso.
Se le tue pagine di tassonomia ricevono molto traffico dai motori di ricerca, potresti volerle rendere più coinvolgenti.
Abbiamo visto pagine noiose e ricche di testo trasformarsi in pagine coinvolgenti semplicemente aggiungendo immagini pertinenti. Non è perché le immagini fossero speciali, ma perché gli esseri umani preferiscono segnali visivi al testo.
Puoi aggiungere immagini per tassonomie o icone per categorie per rendere queste pagine più facili da usare e coinvolgenti.
Un buon esempio di ciò è un sito come NerdWallet che utilizza icone di categoria nella sua intestazione:
Puoi anche usarlo per creare bellissime sezioni di navigazione sulla tua homepage.
Ecco un esempio dal sito di Bankrate:
Detto questo, vediamo come aggiungere facilmente immagini per tassonomie in WordPress.
Aggiungi facilmente immagini per la tassonomia in WordPress
La prima cosa da fare è installare e attivare il plugin Categories Images. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin di WordPress.
Dopo l'attivazione, puoi semplicemente andare alla pagina Articoli » Categorie. Noterai che il plugin mostrerà un'immagine segnaposto per le tue categorie esistenti.
Per scegliere la tua icona di categoria, devi fare clic sul link Modifica sotto una categoria.
Nella pagina Modifica categoria, scorri fino in fondo e troverai un modulo per caricare la tua immagine di tassonomia.
Fai semplicemente clic sul pulsante 'Carica/Aggiungi nuova immagine' per caricare l'immagine che desideri utilizzare per quella particolare categoria.
Non dimenticare di fare clic sul pulsante 'Aggiungi categoria' o 'Aggiorna' per salvare le modifiche.
Successivamente, puoi ripetere il processo per caricare immagini per altre categorie. Puoi anche caricare immagini per i tuoi tag e qualsiasi altra tassonomia.
Ora, il problema è che dopo aver aggiunto le immagini, se visiti una pagina di categoria, non vedrai la tua immagine di categoria lì.
Per visualizzarla, dovrai modificare il tuo tema WordPress o il tema child o aggiungere il codice utilizzando il plugin WPCode.
Ti mostreremo entrambi i metodi e potrai scegliere quello che ti sembra più facile.
Opzione 1. Visualizza icone di immagini di categoria utilizzando WPCode (Consigliato)
Questo metodo è più semplice perché non dovrai capire quale file del tema modificare e potrai aggiungere il codice in sicurezza senza compromettere il tuo sito.
È anche consigliato per gli utenti che utilizzano un tema a blocchi con supporto per l'editor del sito.
Innanzitutto, devi installare e attivare il plugin WPCode. Per maggiori dettagli, consulta il nostro tutorial su come installare un plugin di WordPress.
Dopo l'attivazione, vai alla pagina WPCode » + Aggiungi Snippet e fai clic sul pulsante Usa Snippet sotto la casella ‘Aggiungi il tuo codice personalizzato (Nuovo Snippet)’.
Nella schermata successiva, assegna uno titolo al tuo snippet che ti aiuti a identificarlo.
Successivamente, seleziona snippet PHP come tipo di codice.
Nella casella Anteprima codice, copia e incolla il seguente snippet 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
}
Successivamente, scorri verso il basso fino alla sezione Inserimento e scegli Shortcode come metodo di inserimento.
Noterai che WPCode mostra automaticamente uno shortcode. Tuttavia, puoi anche creare uno shortcode personalizzato per renderlo facile da ricordare.
Successivamente, fai clic sul pulsante ‘Copia’ per lo shortcode personalizzato.
Ora puoi usare questo shortcode per visualizzare l'immagine della categoria nelle tue pagine di archivio.
Aggiungere Shortcode nell'Editor del Sito
Se stai utilizzando un tema a blocchi con supporto per l'editor del sito, vai alla pagina Aspetto » Editor per avviare l'Editor del Sito.
Qui, puoi aggiungere un blocco shortcode appena prima del blocco Titolo Archivio.
Ora incolla lo shortcode che hai copiato in precedenza nel blocco shortcode.
Non dimenticare di salvare le modifiche per applicarle. Ora puoi visitare la tua pagina di archivio della categoria per vedere lo shortcode in azione.
Non preoccuparti se l'immagine non appare corretta. Ti mostreremo come sistemarla in seguito usando CSS personalizzato.
Opzione 2. Visualizza icone immagine categoria manualmente
Per questo metodo, dovrai aggiungere il codice personalizzato ai file del tuo tema WordPress.
Se questa è la prima volta che modifichi file WordPress, potresti voler consultare la nostra guida su come copiare e incollare codice in WordPress.
Innanzitutto, dovrai connetterti al tuo sito WordPress utilizzando un client FTP o il gestore file del tuo hosting WordPress.
Una volta connesso, dovrai trovare il template responsabile della visualizzazione dei tuoi archivi tassonomici. Questi potrebbero essere i file archives.php, category.php, tag.php o taxonomy.php.
Per maggiori dettagli, consulta la nostra guida su come trovare quali file modificare in un tema WordPress.
Una volta trovato il file, dovrai scaricarlo sul tuo computer e aprirlo in un editor di testo come Blocco note o TextEdit.
Ora incolla il seguente codice dove vuoi visualizzare l'immagine della tua tassonomia. Di solito, vorrai aggiungerlo 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, devi salvare questo file e caricarlo nuovamente sul tuo sito web tramite FTP.
Ora puoi visitare la pagina di archivio della tassonomia per vedere come visualizza l'immagine della tua tassonomia. Ecco come appariva sulla nostra pagina di archivio demo.
Ora, potrebbe ancora sembrare strano, ma non preoccuparti. Puoi stilizzarlo usando un po' di CSS personalizzato.
Stilizzare le icone delle categorie con CSS personalizzato
Dopo aver aggiunto l'icona della categoria o le immagini della tassonomia al tuo tema WordPress, la tua immagine potrebbe non apparire molto bella.
Per risolvere questo problema, dovrai aggiungere codice CSS per allinearla correttamente.
Se questa è la prima volta che aggiungi codice CSS in WordPress, dai un'occhiata alla nostra guida per principianti su come aggiungere CSS personalizzato in WordPress.
Ecco il CSS personalizzato che abbiamo 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 tuo tema, potresti anche dover stilizzare gli elementi circostanti come il titolo dell'archivio, il titolo della tassonomia e la descrizione.
Abbiamo semplicemente racchiuso il titolo e la descrizione del nostro archivio di tassonomia in un elemento <div> e aggiunto una classe CSS personalizzata. Abbiamo quindi utilizzato il seguente codice CSS per regolare il titolo e la descrizione.
.taxonomy-title-description {
display: inline-block;
padding: 18px;
}
Ecco come appariva in seguito sul nostro sito di prova.
Escludi le tassonomie dalla visualizzazione delle immagini di tassonomia
Ora, alcuni utenti potrebbero voler utilizzare le immagini di tassonomia solo per tassonomie specifiche.
Ad esempio, se gestisci un negozio online utilizzando WooCommerce, potresti voler escludere le categorie di prodotti.
Torna semplicemente alla pagina delle immagini delle categorie nell'area di amministrazione di WordPress e seleziona le tassonomie che desideri escludere.
Non dimenticare di fare clic sul pulsante 'Salva modifiche' per memorizzare le impostazioni.
Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere facilmente immagini di tassonomia in WordPress. Potresti anche voler vedere questi utili hack e plugin per le categorie per WordPress o il nostro articolo su come cambiare l'ordine delle categorie in WordPress.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Ivan
Suggerimenti per altri plugin aggiornati. Sembra che quello suggerito qui non sia stato aggiornato di recente.
shiv
come aggiungere immagini di categorie nella barra laterale di WordPress come quella del sito wpbeginner "ho bisogno di aiuto con"
pamela
E se volessi scorrere tutti i termini e visualizzarli su un'unica pagina
Gabrielle
Ciao, sto attualmente utilizzando questo plugin in localhost.
Trovo un uso strano/interessante per questo plugin:
Estendere il menu predefinito di WP, per i link delle categorie,
per mostrare link con immagini di sfondo.
Qualcuno sa come integrare questo filtro del plugin,
nel menu di wp per restituire
per ogni menu?
Il caso è complicato, devo usare la classe Walker?
Jess
Come visualizzo le immagini utilizzate nel frontend? Ho una pagina di elenco e voglio visualizzare l'immagine della tassonomia ogni volta che quella pagina ha quella tassonomia visualizzata nella pagina. Non riesco a trovare nulla che mi mostri effettivamente come visualizzare l'immagine nel frontend. Vedo solo l'etichetta della tassonomia visualizzata, ma non l'immagine.
Grazie per il tuo aiuto,
Jess
Harsha
Ciao,
Il motivo per cui sono finito su questo post è che ho cercato su Google – featured content in wordpress
Sto effettivamente cercando un modo per migliorare i contenuti correlati in WordPress.
A causa della selezione di più categorie e più tag per i post, vedo che WordPress si confonde e non mostra contenuti correlati come presumo.
Quindi, le tassonomie sono un modo per migliorare come mostriamo i post correlati ai lettori.
E questo plugin Taxonomy Images non è aggiornato da 2 anni
Supporto WPBeginner
Le tassonomie possono essere un modo per migliorare i tuoi post correlati. Ma ci sono altri strumenti che puoi usare per unire e modificare in blocco categorie e tag.
Amministratore
JW
Ottimo tutorial! Grazie!
Sfortunatamente, sembra che questo plugin non sia più supportato, sai se esiste un'alternativa?
O il codice è ancora valido?
Dan Horvat
Manca la parte più importante: come visualizzare effettivamente queste immagini nel front-end.
Supporto WPBeginner
Si prega di consultare la pagina del plugin per istruzioni dettagliate.
Amministratore
patrick raobelina
Per visualizzare l'immagine:
$url = apply_filters( ‘taxonomy-images-queried-term-image-url’, ” );
if ( ! empty( $url ) ) {
echo ”;
}
Shinkov
stavo cercando un articolo che mostrasse come codificare questo invece di usare un plugin
Gonzalo
Come visualizzare le immagini delle tassonomie nel tema?
Ho usato il codice ma non funziona
print apply_filters( ‘taxonomy-images-queried-term-image’, ” );
Aiuto per favore?
Nicholas Worth
Avrebbe più senso se il titolo fosse: "Il miglior plugin per aggiungere immagini alle tassonomie in Wordpress", perché questo non è proprio un tutorial su come aggiungere immagini alle tassonomie. Non voglio essere pessimista, ma odio arrivare ad articoli che affermano di avere informazioni e invece dicono che un altro tizio sa quello che speravi di sentire.
Supporto WPBeginner
Ci dispiace che tu ti sia sentito così. Per favore, facci sapere cosa intendi con come aggiungere immagini alle tassonomie? Forse possiamo aiutarti a trovare la risposta giusta.
Amministratore
Jacob Perl
Immagino che quello che Nicholas ha pensato fosse la stessa cosa che ho pensato io quando ho trovato questo articolo: che sarebbe stato un tutorial su come aggiungere un campo immagine personalizzato alle tassonomie manualmente tramite codice piuttosto che con un plugin. Comunque il plugin sembra interessante... potrei dargli un'occhiata.
Luís Felipe
La stessa cosa che pensavo, stavo cercando un articolo che mostrasse come codificare questo invece di usare un plugin
Ma questo è comunque un buon articolo.
lemonthirst
Sono lieto di aver trovato questo fantastico plugin, funziona alla grande, ho riscontrato alcuni piccoli problemi sui miei post/tassonomie personalizzate ma ora va tutto bene.
Grazie ragazzi!
Mattia
Ciao, ho una domanda correlata sulle tassonomie personalizzate: come si crea una tassonomia personalizzata che esista solo all'interno di un particolare tipo di post personalizzato (come il tuo tipo di post personalizzato "lavoro"), senza un plugin?
Il mio problema è che quando creo una tassonomia personalizzata, sembra apparire anche sotto gli articoli normali o gli altri tipi di post personalizzati...
Staff editoriale
Dovresti usare register_taxonomy in questo modo:
1-click Use in WordPress
Genere è la tassonomia e libro sarà il tipo di post.
Amministratore
Mattia
Grazie!
I’ll try and let you know…
Banna
Ciao,
Stiamo usando questo,
Ma non riusciamo a farlo funzionare con l'ID della categoria.
Abbiamo un ID di categoria di cui vogliamo visualizzare l'immagine in miniatura, per favore aiutami a farlo.
come ottenere l'immagine in miniatura usando l'ID della tassonomia
Per favore, fammelo sapere.
Grazie
Banna Daxxip
Ruben Boehler
Mi dispiace ma non riesco a far funzionare questo plugin... nessun output. Forse sto facendo qualcosa di sbagliato?!
uso il plugin + questo codice e l'ho agganciato:
print apply_filters( ‘taxonomy-images-list-the-terms’, ”, array( ‘image_size’ => ‘detail’, ‘taxonomy’ => ‘company’, ‘after’ => ”, ‘after_image’ => ”, ‘before’ => ”, ‘before_image’ => ”, ) );
non ottengo assolutamente alcun output... potresti aiutarmi a capirlo?
_mfields
@devinsays Fantastico! Grazie per il consiglio!
DanielPeiser
Sembra interessante! E se avessi alcuni post del blog che non hanno un'immagine in miniatura (o immagine nel post), e venisse sempre caricata la stessa immagine predefinita come miniatura nelle pagine di archivio: il plugin ne caricherebbe una associata alla categoria/tag?
wpbeginner
@DanielPeiser Puoi certamente impostarlo in modo che faccia così. In sostanza, i passaggi sarebbero: prima controlla se esiste la miniatura del post... Se non esiste, allora controlla l'immagine della tassonomia... se anche quella non esiste, allora restituisci la miniatura predefinita.