Come tag Style in WordPress

WordPress ti consente di ordinare i tuoi contenuti in tassonomie. Di default viene fornito con categorie e tag. Mentre le categorie possono essere utilizzate per ordinare i tuoi contenuti in diverse sezioni, i tag possono essere utilizzati per ordinare i contenuti in argomenti più specifici. Puoi visualizzare i tag utilizzati sul tuo sito in una nuvola di tag o in un formato elenco. In questo articolo, ti mostreremo come modellare i tag in WordPress.

Visualizzazione di tutti i tag con numero di post in WordPress

Alcuni siti Web famosi mostrano i tag più popolari come argomenti nella loro pagina degli archivi o nell'area del piè di pagina. Ecco come è possibile visualizzare tutti i tag di post, con il conteggio dei post e senza utilizzare la nuvola di tag.

La prima cosa che devi fare è copiare e incollare questo codice nel file functions.php del tuo tema o plug-in specifico del sito.

 function wpb_tags () $ wpbtags = get_tags (); foreach ($ wpbtags as $ tag) $ string. = 'term_id).' "> '. $ tag-> nome.' '. $ tag-> count.'". "\ n"; return $ string;  add_shortcode ('wpbtags', 'wpb_tags'); 

Questo codice mostra semplicemente tutti i tag con il loro numero di post accanto a loro. Tuttavia, per visualizzarlo nella tua pagina di archivio o in un widget devi usare questo shortcode:

[wpbtags]

Usando questo codice da solo mostrerà solo i link dei tag e il conteggio dei post accanto a loro. Non lo farà sembrare carino. Aggiungiamo un po 'di CSS per renderlo carino. Copia e incolla questo CSS nel foglio di stile del tema.

 .tagbox background-color: #eee; border: 1px solid #ccc; margine: 0px 10px 10px 0px; altezza della linea: 200%; imbottitura: 2px 0 2px 2px;  .taglink padding: 2px;  .tagbox a, .tagbox a: visited, .tagbox a: active text-decoration: none;  .tagcount background-color: green; colore bianco; posizione: relativa; padding: 2px;  

Sentiti libero di modificare il CSS per soddisfare le tue esigenze. Ecco come è apparso sul nostro sito demo:

Tag per lo styling in Informazioni Post-Meta

Alcuni temi di WordPress visualizzano graziosamente i tag sotto le informazioni dei metadati pubblicati con data di pubblicazione, autore e altri meta collegamenti. Tuttavia alcuni temi potrebbero non essere affatto in linea con lo stile, oppure potresti volerli disegnare in modo diverso.

Vediamo come possiamo modellare i link dei tag sotto un post in WordPress.

Per prima cosa devi scoprire la classe CSS usata dal tuo tema WordPress per visualizzare i tag. Per farlo clicca con il tasto destro sui tag e seleziona inspect element dal menu del browser.

Questo dividerà la schermata del browser per visualizzare la casella degli strumenti per sviluppatori sotto la pagina web. Nella toolbox per sviluppatori, puoi visualizzare la classe CSS utilizzata dal tuo tema WordPress per visualizzare i tag.

Nello screenshot qui sopra puoi vedere che il tema sta usando condizioni per la classe CSS. Ora useremo questa classe nel nostro foglio di stile theme o child theme per sovrascrivere il tema predefinito CSS.

 .termini a, .terms a: visited, .terms a: active background: #eee; border: 1px solid #ccc; border-radius: 5px; text-decoration: none; padding: 3px; margin: 3px; text-transform: uppercase;  .terms a: hover background: # a8281a; colore: #FFF;  

Sentiti libero di modificare i CSS per abbinare i colori del tuo tema. Ecco come i tag hanno visto il nostro sito demo:

Potresti notare la differenza tra i due screenshot diversi dalle modifiche CSS, abbiamo anche modificato i Tag in Tagged e rimosso le virgole tra i tag. Come abbiamo fatto questo?

Abbiamo modificato the_tags (); tag modello nel nostro file single.php come questo:

Se vuoi limitare il numero di tag totali visualizzati per esempio 5 o qualcos'altro, consulta questo articolo su come mostrare un numero limitato di tag dopo la pubblicazione.

Speriamo che questo articolo ti abbia aiutato a creare tag in WordPress. Sentiti libero di sperimentare con il CSS fino ad ottenere il risultato desiderato.

Se ti è piaciuto questo articolo, quindi iscriviti al nostro canale YouTube per ulteriori tutorial video di WordPress. Puoi trovarci anche su Google+ e Twitter.