Nel corso degli anni, WPBeginner ha ricevuto molte domande sui tag, una delle quali riguardava l’opportunità di stilizzare i tag in WordPress per farli apparire più evidenti.
I tag aiutano a organizzare i contenuti in argomenti. Sono come gli hashtag per i vostri blog WordPress e aiutano gli utenti a scoprire più contenuti. Ma, secondo la nostra esperienza, se non si distinguono visivamente, potrebbero essere trascurati.
In questo articolo, vi mostreremo come stilizzare facilmente i tag in WordPress per aumentare l’engagement degli utenti e le visualizzazioni delle pagine sul vostro sito web.
Come visualizzare i tag in WordPress
WordPress dispone di due tassonomie principali, chiamate categorie e tag. Mentre le categorie sono utilizzate per le aree principali dei contenuti, i tag consentono di ordinare i contenuti in argomenti più specifici.
Molti temi WordPress popolari visualizzano i tag in cima o in fondo ai post per impostazione predefinita.
Tuttavia, è possibile visualizzare i tag anche nelle pagine di archivio, nel piè di pagina, nelle barre laterali e praticamente ovunque si desideri in WordPress.
Per inserire una nuvola di tag nei post, nelle pagine e nei widget della barra laterale, è sufficiente aggiungere il blocco “Nuvola di tag”.
Una nuvola di tag assegna a ogni tag una dimensione di carattere diversa in base al numero di post. Si può anche scegliere di visualizzare il numero di post accanto a ciascun tag.
Queste sono solo le opzioni predefinite disponibili in WordPress, ma se voleste personalizzare ancora di più i vostri tag? Vi mostriamo come.
Vediamo come stilizzare facilmente i tag in WordPress.
Stilizzazione della nuvola di tag predefinita in WordPress
Dopo aver aggiunto il blocco Tag Cloud a un post o a una pagina, è possibile personalizzarlo con l’aggiunta di CSS personalizzati.
Il blocco della nuvola di tag include automaticamente classi CSS predefinite generate da WordPress che possono essere utilizzate per lo stile.
Per aggiungere CSS personalizzati al vostro sito WordPress, basta andare nella pagina Aspetto ” Personalizzazione e passare alla scheda CSS aggiuntivi.
Si può iniziare aggiungendo questo codice CSS personalizzato come punto di partenza.
.tag-link-position-1 { font-size:40px!important;}
.tag-link-position-2 { font-size:35px!important;}
.tag-link-position-3 { font-size:30px!important; }
.tag-link-position-4 { font-size:35px!important; }
.tag-link-position-5 { font-size:30px!important; }
.tag-cloud-link {
text-decoration:none;
background-color:#fff;
}
.tag-link-count {
background-color: #d6d6d6;
}
Come si può vedere, è possibile utilizzare la classe .tag-link-position per regolare lo stile in base alla posizione dei link. I tag con più post sono più in alto e quelli con meno post sono più in basso.
Se si desidera che tutti i tag del blocco tag cloud abbiano le stesse dimensioni, è possibile utilizzare il seguente CSS:
.tag-cloud-link {
font-size:16px !important;
border:1px solid #d6d6d6;
}
.tag-cloud-link {
text-decoration:none;
background-color:#fff;
}
.tag-link-count {
background-color: #d6d6d6;
}
Ecco come appariva sul nostro sito di prova:
Stilizzazione dei tag dei post in WordPress
Oltre a creare le nuvole di tag, è possibile che si voglia creare uno stile per i tag dei post che vengono visualizzati sui singoli post del blog. Di solito, il tema WordPress li visualizza in cima o in fondo al titolo del post o al suo contenuto.
È possibile passare con il mouse sui tag e fare clic con il tasto destro del mouse per utilizzare lo strumento Ispeziona per visualizzare le classi CSS utilizzate dal tema WordPress.
Successivamente, è possibile utilizzare queste classi CSS nel proprio CSS personalizzato. Di seguito è riportato un esempio di codice basato sulle classi CSS del nostro tema di prova:
.entry-tag {
padding: 5px 8px;
border-radius: 12px;
text-transform: lowercase;
background-color: #e91e63;
color:#fff;
}
.entry-tags a {
color:#fff;
font-size:small;
font-weight:bold;
}
Ecco come appariva sul nostro sito di prova.
Creare una nuvola di tag personalizzata in WordPress
Il blocco tag cloud predefinito è facile da usare, ma alcuni utenti avanzati potrebbero volerlo personalizzare per avere maggiore flessibilità.
Questo metodo consente di aggiungere le proprie classi HTML e CSS intorno alla tag cloud. Si può quindi utilizzare per personalizzare l’aspetto della nuvola di tag in base alle proprie esigenze.
La prima cosa da fare è copiare e incollare questo codice nel file functions.php del vostro tema o in un plugin di code snippets:
function wpb_tags() {
$wpbtags = get_tags();
foreach ($wpbtags as $tag) {
$string .= '<span class="tagbox"><a class="taglink" href="'. get_tag_link($tag->term_id) .'">'. $tag->name . '</a><span class="tagcount">'. $tag->count .'</span></span>' . "\n" ;
}
return $string;
}
add_shortcode('wpbtags' , 'wpb_tags' );
Vi consigliamo di aggiungere questo codice con WPCode, il miglior plugin di snippets di codice per WordPress. Permette di aggiungere facilmente codice personalizzato in WordPress senza modificare il file functions.php del tema, in modo da non danneggiare il sito.
Per iniziare, installare e attivare il plugin gratuito WPCode. Se avete bisogno di aiuto, consultate il nostro tutorial su come installare un plugin di WordPress.
Una volta attivato il plugin, andare su Code Snippets ” Add Snippet dalla dashboard di WordPress.
Quindi, passare il mouse sull’opzione “Aggiungi codice personalizzato (nuovo snippet)” e fare clic sul pulsante “Usa snippet”.
Da qui è possibile aggiungere un titolo per lo snippet nella parte superiore della pagina. Può essere qualsiasi cosa che aiuti a ricordare a cosa serve il codice.
Quindi, incollare il codice di cui sopra nella casella “Anteprima codice” e selezionare “PHP Snippet” come tipo di codice dal menu a discesa.
A questo punto, è sufficiente spostare l’interruttore da ‘Inattivo’ ad ‘Attivo’ e fare clic sul pulsante ‘Salva snippet’.
Questo codice aggiunge uno shortcode che visualizza tutti i tag con il loro numero di post accanto.
Per visualizzarlo nella pagina degli archivi o in un widget è necessario utilizzare questo shortcode:
[wpbtags]
L’uso di questo codice da solo mostrerà solo i tag link e il numero di articoli successivi. Aggiungiamo un po’ di CSS per migliorare l’aspetto. Basta copiare e incollare questo CSS personalizzato sul sito web.
.tagbox {
background-color:#eee;
border: 1px solid #ccc;
margin:0px 10px 10px 0px;
line-height: 200%;
padding:2px 0 2px 2px;
}
.taglink {
padding:2px;
}
.tagbox a, .tagbox a:visited, .tagbox a:active {
text-decoration:none;
}
.tagcount {
background-color:green;
color:white;
position: relative;
padding:2px;
}
Sentitevi liberi di modificare il CSS per soddisfare le vostre esigenze. Ecco come appariva sul nostro sito demo:
Ci auguriamo che questo articolo vi abbia aiutato a imparare come stilizzare facilmente i tag in WordPress. Potreste anche voler consultare la nostra guida su come nascondere o stilizzare le sottocategorie in WordPress o vedere questo elenco di pratici suggerimenti, trucchi e hack di WordPress.
Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.
Nikola
Great guide, thanks!
Would it be possible to order the tags by most used and limit the number of tags shown?
WPBeginner Support
At the moment you would need to use a plugin for that or custom code, we do not have a recommended method for that at the moment.
Admin
Jemma Pollari
Awesome, thanks. This really helped.
WPBeginner Support
Glad our guide could help
Admin
Joe Smith
This is great! Exactly what I was looking for and very classy. Just one question: If I wanted to add more space between the tags, how would i modify the css? I’ve tried changing several of the settings in the css above but none of them simply add whitespace between the tags.
WPBeginner Support
You would want to increase the padding for what you’re wanting
Admin
Ibiye Ambille
Hi, i would love to move my post tag to below the featured image
WPBeginner Support
For that, you would want to reach out to your specific theme’s support for assistance as each theme has its own location for the featured image.
Admin
Trishah
I’m trying to add a CSS class “current” to tags for a single post. The few solutions I’ve found no longer seem to work. How would I do this?
WPBeginner Support
That would vary based on your specific theme, if you reach out to your theme’s support they should be able to let you know where you can add that class for your tags.
Admin
uche Peter
My tags are listed serially.. No Border nothing nothing,,, just a text …please how do I give it a border with background color
Kingsolomon
How to i apply the css pls
Hugo
My tag cloud doesn’t come as a cloud but as a list, since after each span a line break is inserted. How can I remove these line breaks?
WPBeginner Support
Hi Hugo,
This article discusses how to style tags in different ways. If you want a tag cloud then you can use the default WordPress tag cloud widget. You can also use the template tag
1-click Use in WordPress
Admin
bob
I get that you showed another page on how to limit tags to a certain number, but how can I do it with this example included? It doesn’t seem to work using the method linked in combination with this.
Amy Croson
I’m struggling with adding this, and I believe it’s with how my ‘Chosen’ Theme is limiting me. I’ve copied & pasted all into my php, & it is giving me errors left and right. I’m currently being told that there is an unknown “.” in this detail. Is there any way to format this without using the “.”s before .taglink, .tagbox, & .tagcount?
Val Archer
Hi – I’m looking for a way to list tags on a category-slug.php page. Do you perhaps know where I can find that tutorial?
So far I’ve created a category [sitename]/category/recipes and a category-recipes.php.
I’m tagging the recipes, e.g. Breakfast, Dinner, etc
I’d like the Tags to display in category-recipes.php like this. I don’t know what I’m doing. I’m copying from my category.php file.
Archives for the Category:
Breakfast
now it lists all the posts tagged with Breakfast something like this:
<a href="”>
by / / posted in cat_name . ‘ ‘;} ?>
Dinner
now it lists all the posts tagged with Dinner something like this:
<a href="”>
by / / posted in cat_name . ‘ ‘;} ?>
[Then at the end of all the Tags:]
</div
Please do you know where I can get help on this?
thank you! – Val
WPBeginner Support
Have you tried adding:
<?php the_tags('posted in:', '' ,'' ); ?>Admin
Magistar
Code works fine for a tag cloud. However I would like to apply this to the post tags (meaning the tags associated with a post and their count, instead of the big list).
I tried something with wp_get_post_tags but I did not really got it to work. Any suggestions?
WPBeginner Staff
You can use get_terms instead of get_tags, see this codex page:
http://codex.wordpress.org/Function_Reference/get_terms
DER KUNSTBLOG
That’s great, I’ve added your code to a site-specific plugin – but is there a possibility, to change it in a way, that the font-size vary on how often the tag is used? Any idea please? Thanks!
WPBeginner Staff
Yes it is possible, in the first piece of code you would need to replace get_tags with wp_tag_cloud function. Like this:
$wpbtags = wp_tag_cloud('smallest=15&largest=40&number=50&orderby=count&format=array');
Guest
How do you do the same thing with the custom tag cloud for Categories and Custom Taxonomies?
Terence O'Neill
Hey mate; How do I do the exact same(display with shortcode) for Categories and Custom Taxonomies? Thx for the tutorial btw. Works like a charm.