Cum să stil de etichete în WordPress

WordPress vă permite să sortați conținutul în taxonomii. În mod prestabilit, aceasta conține categorii și etichete. În timp ce categoriile pot fi utilizate pentru sortarea conținutului în diferite secțiuni, etichetele pot fi folosite pentru a sorta conținutul în mai multe subiecte mai specifice. Puteți afișa etichete utilizate pe site-ul dvs. într-un nor de etichete sau într-un format de listă. În acest articol, vă vom arăta cum să etichetați stilul în WordPress.

Afișarea tuturor etichetelor cu postări în WordPress

Unele site-uri populare afișează cele mai populare etichete ca subiecte în pagina lor de arhivă sau în zona subsolului. Iată cum puteți să vă afișați toate etichetele postare, cu numărul postărilor și fără a utiliza norul de etichete.

Primul lucru pe care trebuie să-l faceți este să copiați și să inserați acest cod în fișierul functions.php sau în site-specific.

 funcția wpb_tags () $ wpbtags = get_tags (); foreach ($ wpbtags ca $ tag) $ șir. = 'termen_id).' ''. $ tag-> name. '' $ tag-> count.  add_shortcode ('wpbtags', 'wpb_tags'); 

Acest cod afișează pur și simplu toate etichetele cu numărul de postări alături de ele. Cu toate acestea, pentru a le afișa pe pagina dvs. de arhivă sau într-un widget, trebuie să utilizați acest cod scurt:

[wpbtags]

Utilizarea acestui cod va afișa doar link-urile tag-urilor și numărul postărilor de lângă acestea. Nu va face să arate destul. Permiteți adăugarea unor CSS pentru ao face frumoasă. Copiați și inserați acest CSS în foaia de stil a temei.

 .tagbox fundal-culoare: #eee; frontieră: 1px solid #ccc; margine: 0px 10px 10px 0px; linia-înălțime: 200%; umplutură: 2px 0 2px 2px;  .taglink padding: 2px;  .tagbox a, .tagbox a: vizitat, .tagbox a: activ text-decoration: none;  .tagcount background-color: verde; culoare albă; poziție: relativă; padding: 2px;  

Nu ezitați să modificați CSS pentru a vă satisface nevoile. Acesta este modul în care a fost privit în site-ul nostru demo:

Etichetarea stilului în informații postale Meta

Unele teme WordPress afișează frumos etichete sub informația post-meta date cu data publicării, autor și alte link-uri meta. Cu toate acestea, este posibil ca unele teme să nu le formuleze deloc sau este posibil să doriți să le stilizați diferit.

Să vedem cum putem lega linkurile de etichete de sub o postare în WordPress.

Mai întâi trebuie să aflați clasa CSS folosită de tema WordPress pentru a afișa etichete. Pentru a face acest lucru faceți clic dreapta pe etichete și selectați Inspect element din meniul browserului.

Aceasta va împărți ecranul browserului pentru a afișa caseta de instrumente pentru dezvoltatori de sub pagina web. În caseta de instrumente pentru dezvoltatori, puteți vedea clasa CSS utilizată de tema WordPress pentru a afișa etichete.

În captura de ecran de mai sus puteți vedea că tema este utilizată termeni pentru clasa CSS. Acum vom folosi această clasă în foaia de stil a temei sau a temei copilului pentru a înlocui tema implicită CSS.

 .termeni a, termeni a: vizitate, termeni a: activ background: #eee; frontieră: 1px solid #ccc; border-radius: 5px; text-decoration: none; padding: 3px; margin: 3px; text-transform: majuscule;  .terms a: hover fundal: # a8281a; Culoare: #fff;  

Simțiți-vă liber să modificați CSS pentru a potrivi culorile temei. Așa au apărut etichetele pe site-ul nostru demo:

Este posibil să observați diferența dintre cele două capturi de ecran, altele decât modificările CSS, am schimbat, de asemenea, Tag-urile la Tagged și am eliminat virgulele dintre etichete. Cum am făcut asta??

Am modificat the_tags (); șablon în fișierul nostru single.php, după cum urmează:

Dacă doriți să limitați numărul de etichete totale afișate să spunem 5 sau altceva, atunci consultați acest articol cu ​​privire la modul de a afișa un număr limitat de etichete după postare.

Sperăm că acest articol v-a ajutat să creați etichete de stil în WordPress. Simțiți-vă liber să experimentați cu CSS până când obțineți rezultatul dorit.

Dacă ți-a plăcut acest articol, abonează-te la canalul nostru YouTube pentru mai multe tutoriale video pentru WordPress. Ne puteți găsi și pe Google+ și pe Twitter.