Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coppa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Come rendere facili i tag di stile in WordPress (con esempi)

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.

Styling tags in WordPress

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.

Tags below post in WordPress

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”.

Tag cloud block

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.

Tag cloud preview

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.

Styling tag cloud

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:

Alternate tag cloud style

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.

Using inspect tool to find tags class

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.

Post tags styled

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”.

Add a new custom code snippet in WPCode

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.

Paste snippet into WPCode

A questo punto, è sufficiente spostare l’interruttore da ‘Inattivo’ ad ‘Attivo’ e fare clic sul pulsante ‘Salva snippet’.

Activate and save your custom code 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:

Custom tag cloud

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.

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

25 commentiLascia una risposta

  1. Syed Balkhi

    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!

  2. 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

  3. Jemma Pollari

    Awesome, thanks. This really helped.

    • WPBeginner Support

      Glad our guide could help :)

      Admin

  4. 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

  5. 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

  6. 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

  7. 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

  8. Kingsolomon

    How to i apply the css pls

  9. 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

      <?php wp_tag_cloud(); ?>

      Admin

  10. 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.

  11. 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?

  12. 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

  13. 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?

  14. 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');

  15. Guest

    How do you do the same thing with the custom tag cloud for Categories and Custom Taxonomies?

  16. 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.

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.