De-a lungul anilor, WPBeginner a primit multe întrebări despre etichete, una dintre ele fiind dacă merită efortul de a stiliza etichetele WordPress pentru a le face să iasă în evidență pe o pagină.
Etichetele vă ajută să vă organizați conținutul pe subiecte. Sunt ca hashtag-urile pentru postările dvs. de blog WordPress și ajută utilizatorii să descopere mai mult conținut. Dar, din experiența noastră, dacă nu ies în evidență vizual, ar putea fi trecute cu vederea.
În acest articol, vă vom arăta cum să stilizați cu ușurință etichetele în WordPress pentru a obține mai multă implicare a utilizatorilor și vizualizări de pagină pe site-ul dvs. web.
Cum să afișezi etichete în WordPress
WordPress vine cu două taxonomii principale numite categorii și etichete. În timp ce categoriile sunt utilizate pentru zonele majore ale conținutului dvs., etichetele vă permit să sortați conținutul în subiecte mai specifice.
Multe teme WordPress populare afișează etichetele în partea de sus sau de jos a postărilor dvs. în mod implicit.
Cu toate acestea, puteți afișa etichete și pe paginile de arhivă, în footer, bare laterale și aproape oriunde doriți în WordPress.
Pentru a insera un nor de etichete în postările, paginile și widgeturile din bara laterală, puteți pur și simplu să adăugați blocul „Nor de etichete”.
Un nor de etichete atribuie fiecărei etichete o dimensiune diferită a fontului în funcție de numărul de postări. Puteți, de asemenea, alege să afișați numărul de postări lângă fiecare etichetă.
Acestea sunt doar opțiunile implicite disponibile în WordPress, dar ce-ar fi dacă ați dori să vă personalizați etichetele și mai mult? Vă vom arăta cum.
Să vedem cum să stilizăm ușor etichetele în WordPress.
Stilarea norului de etichete implicit în WordPress
După ce ați adăugat blocul Nor de etichete la o postare sau pagină, îl puteți personaliza prin adăugarea de CSS personalizat.
Blocul nor de etichete include automat clase CSS generate implicit de WordPress care pot fi utilizate pentru a le stiliza. clase CSS generate implicit de WordPress
Pentru a adăuga CSS personalizat pe site-ul dvs. WordPress, accesați pur și simplu pagina Aspect » Personalizare și comutați la fila CSS suplimentar.
Puteți începe prin a adăuga acest cod CSS personalizat ca punct de plecare.
.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;
}
După cum puteți vedea, puteți utiliza clasa .tag-link-position pentru a ajusta stilul în funcție de poziția linkurilor. Etichetele cu mai multe postări sunt mai sus în poziție, iar etichetele cu mai puține postări sunt mai jos.
Dacă doriți ca toate etichetele din blocul dvs. de nor de etichete să aibă aceeași dimensiune, atunci puteți folosi următorul CSS în schimb:
.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;
}
Așa arăta pe site-ul nostru de test:
Stiluri pentru etichetele postărilor în WordPress
Pe lângă stilizarea norilor de etichete, s-ar putea să doriți să stilizați și etichetele postărilor afișate pe postările de blog individuale. De obicei, tema dvs. WordPress le va afișa în partea de sus sau de jos a titlului postării sau a conținutului postării.
Puteți trece cu mouse-ul peste etichete și faceți clic dreapta pentru a utiliza instrumentul Inspect pentru a vizualiza clasele CSS utilizate de tema dvs. WordPress.
După aceea, puteți utiliza aceste clase CSS în CSS-ul dvs. personalizat. Urmează un exemplu de cod bazat pe clasele CSS de pe tema noastră de test:
.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;
}
Așa arăta pe site-ul nostru de test.
Crearea unui nor de etichete personalizat în WordPress
Blocul implicit Nor de etichete este ușor de utilizat, dar unii utilizatori avansați ar putea dori să îl personalizeze pentru a avea mai multă flexibilitate.
Această metodă vă permite să adăugați propriile clase HTML și CSS înconjurând norul de etichete. Puteți apoi să o utilizați pentru a personaliza aspectul norului de etichete conform propriilor cerințe.
Primul lucru pe care trebuie să-l faceți este să copiați și să lipiți acest cod în fișierul functions.php al temei dvs. sau într-un plugin de fragmente de cod:
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' );
Recomandăm adăugarea acestui cod cu WPCode, cel mai bun plugin pentru fragmente de cod pentru WordPress. Acesta vă permite să adăugați cu ușurință cod personalizat în WordPress fără a edita fișierul functions.php al temei dvs., astfel încât să nu vă stricați site-ul.
Pentru a începe, instalați și activați pluginul gratuit WPCode. Dacă aveți nevoie de ajutor, consultați tutorialul nostru despre cum să instalați un plugin WordPress.
Odată ce pluginul este activat, accesați Code Snippets » Add Snippet din tabloul de bord WordPress.
Apoi, plasează cursorul mouse-ului peste opțiunea „Adaugă codul tău personalizat (Snippet nou)” și apasă butonul „Utilizează snippet”.
De aici, trebuie să selectați „PHP Snippet” ca tip de cod din lista de opțiuni care apar pe ecran.
Apoi, puteți adăuga un titlu pentru fragment în partea de sus a paginii. Acesta poate fi orice pentru a vă ajuta să vă amintiți la ce folosește codul.
Apoi, pur și simplu lipiți codul de mai sus în caseta „Previzualizare cod”.
După aceea, tot ce trebuie să faceți este să comutați comutatorul de la „Inactiv” la „Activ” și să faceți clic pe butonul „Salvare fragment”.
Acest cod adaugă un shortcode care afișează toate etichetele dvs. cu numărul de postări de lângă ele.
Pentru a-l afișa pe pagina ta de arhive sau într-un widget, trebuie să folosești acest shortcode:
[wpbtags]
Utilizarea acestui cod singur va afișa doar legăturile etichetelor și numărul de postări de lângă ele. Să adăugăm niște CSS pentru a-l face să arate mai bine. Pur și simplu copiați și lipiți acest CSS personalizat pe site-ul dvs.
.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;
}
Simțiți-vă liber să modificați CSS-ul pentru a vă satisface nevoile. Așa arăta pe site-ul nostru demo:
Sperăm că acest articol v-a ajutat să învățați cum să stilizați cu ușurință etichetele în WordPress. De asemenea, ați putea dori să vedeți ghidul nostru despre cum să ascunzi sau să stilizezi subcategoriile tale în WordPress sau să vedeți această listă de sfaturi, trucuri și hack-uri utile pentru WordPress.
Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.
kzain
Stilul etichetelor în WordPress poate face o diferență atât de mare în aspectul și senzația generală a unui blog. Îmi place că ați descompus procesul în pași simpli; exemplele CSS sunt foarte utile. Sfatul dvs. de a folosi o temă copil pentru a evita pierderea personalizărilor este, de asemenea, foarte apreciat. Acum, pot în sfârșit să dau etichetelor mele transformarea pe care o merită! Mulțumesc pentru că ați împărtășit expertiza dvs. și ați făcut personalizarea WordPress mai accesibilă pentru noi toți.
Jiří Vaněk
Când am citit acest articol, am simțit nevoia să-mi creez propriul nor de etichete. Am folosit fragmentul dvs., dar am modificat culorile și am rotunjit ușor colțurile. A funcționat ca prin magie. Este frumos să ai etichete în aceeași culoare cu tema întregului site web. Poate fi un detaliu mic, dar este foarte plăcut.
Dennis Muthomi
ghidul pas cu pas și fragmentele de cod sunt foarte utile
ÎNTREBARE RAPIDĂ: Dacă aplic aceste fragmente de cod pentru a-mi stiliza etichetele și mai târziu decid să-mi schimb tema WordPress, stilizarea etichetelor se va schimba conform stilurilor implicite ale noii teme, sau va rămâne cu personalizările pe care le-am făcut folosind aceste fragmente de cod?
Comentarii WPBeginner
CSS-ul pe care l-ați adăugat ar trebui să rămână, dar este posibil să fie necesar să editați CSS-ul în funcție de modul în care CSS-ul noii teme afectează stilizarea și dacă există conflicte.
Dennis Muthomi
Bună, mulțumesc pentru clarificarea utilă!
Atâta timp cât pot păstra personalizările cu câteva ajustări minore, este foarte util de știut.
O întrebare suplimentară – la schimbarea temelor, care ar fi cea mai bună modalitate de a verifica și rezolva eventualele conflicte CSS care afectează stilizarea etichetelor?
Suport WPBeginner
Nu avem o metodă specifică pe care am recomanda-o. Ar fi ceva ce ar trebui să verificați manual.
Jiří Vaněk
Urmare a întrebării lui Dennis. Este mai bine să adăugăm CSS folosind WP Code sau să îl punem direct în template? Presupun că dacă îl pun în template, voi pierde setările la schimbarea temei, dar dacă folosesc WP Code, stilurile vor rămâne chiar și după schimbarea temei. Este corect?
Comentarii WPBeginner
Corect. Acest lucru este similar cu utilizarea secțiunii CSS suplimentar din Personalizatorul temei.
Acestea fiind spuse, CSS-ul necesar va fi diferit de la o temă la alta, deci utilitatea va varia.
Nikola
Ghid excelent, mulțumesc!
Ar fi posibil să ordonați etichetele după cele mai utilizate și să limitați numărul de etichete afișate?
Suport WPBeginner
În acest moment, ar trebui să folosiți un plugin pentru asta sau cod personalizat, nu avem o metodă recomandată pentru asta în acest moment.
Admin
Jemma Pollari
Grozav, mulțumesc. Acest lucru a ajutat mult.
Suport WPBeginner
Glad our guide could help
Admin
Joe Smith
Acest lucru este grozav! Exact ceea ce căutam și foarte elegant. Doar o întrebare: Dacă aș dori să adaug mai mult spațiu între etichete, cum aș modifica CSS-ul? Am încercat să schimb mai multe setări în CSS-ul de mai sus, dar niciuna dintre ele nu adaugă pur și simplu spațiu alb între etichete.
Suport WPBeginner
You would want to increase the padding for what you’re wanting
Admin
Ibiye Ambille
Salut, aș dori să mut eticheta postării mele sub imaginea de prezentare
Suport WPBeginner
Pentru asta, ar trebui să contactați suportul temei dvs. specifice pentru asistență, deoarece fiecare temă are propria locație pentru imaginea de prezentare.
Admin
Trishah
Încerc să adaug o clasă CSS „current” la etichetele pentru o singură postare. Puținele soluții pe care le-am găsit nu mai par să funcționeze. Cum aș face asta?
Suport WPBeginner
Acest lucru ar varia în funcție de tema dvs. specifică; dacă contactați suportul temei dvs., ar trebui să vă poată spune unde puteți adăuga acea clasă pentru etichetele dvs.
Admin
uche Peter
Etichetele mele sunt listate secvențial.. Fără chenar, nimic, nimic,,, doar un text... vă rog, cum să le dau un chenar cu culoare de fundal?
Kingsolomon
Cum aplic CSS-ul, vă rog
Hugo
Norul meu de etichete nu apare ca un nor, ci ca o listă, deoarece după fiecare span se inserează o linie nouă. Cum pot elimina aceste linii noi?
Suport WPBeginner
Salut Hugo,
Acest articol discută cum să stilizați etichetele în diferite moduri. Dacă doriți un nor de etichete, puteți utiliza widgetul implicit de nor de etichete WordPress. Puteți utiliza, de asemenea, eticheta de șablon
1-click Use in WordPress
Admin
bob
Înțeleg că ați arătat o altă pagină despre cum să limitați etichetele la un anumit număr, dar cum pot face acest lucru cu acest exemplu inclus? Nu pare să funcționeze utilizând metoda legată în combinație cu aceasta.
Amy Croson
Mă chinui să adaug asta și cred că tema mea „Chosen” mă limitează. Am copiat și lipit totul în php-ul meu și îmi dă erori pe toate părțile. Mi se spune în prezent că există un „.” necunoscut în acest detaliu. Există vreo modalitate de a formata acest lucru fără a folosi „.” înainte de .taglink, .tagbox și .tagcount?
Val Archer
Salut – Caut o modalitate de a lista etichetele pe o pagină category-slug.php. Știi cumva unde pot găsi acel tutorial?
Până acum am creat o categorie [sitename]/category/recipes și un category-recipes.php.
Etichetez rețetele, de ex. Mic dejun, Cină etc.
Aș dori ca etichetele să fie afișate în category-recipes.php așa. Nu știu ce fac. Copiez din fișierul meu category.php.
Arhive pentru Categoria:
Mic dejun
acum listează toate postările etichetate cu Mic dejun, ceva de genul acesta:
Cină
acum listează toate postările etichetate cu Cină, ceva de genul acesta:
[Apoi, la sfârșitul tuturor etichetelor:]
</div
Vă rog, știți de unde pot obține ajutor pentru asta?
mulțumesc! – Val
Suport WPBeginner
Ați încercat să adăugați:
<?php the_tags('posted in:', '' ,'' ); ?>Admin
Magistar
Codul funcționează bine pentru un nor de etichete. Cu toate acestea, aș dori să aplic acest lucru etichetelor postărilor (adică etichetelor asociate unei postări și numărului lor, în loc de lista mare).
Am încercat ceva cu wp_get_post_tags, dar nu am reușit să-l fac să funcționeze. Aveți sugestii?
Echipa WPBeginner
Puteți folosi get_terms în loc de get_tags, consultați această pagină din codex:
http://codex.wordpress.org/Function_Reference/get_terms
DER KUNSTBLOG
Excelent, am adăugat codul dvs. într-un plugin specific site-ului – dar există posibilitatea de a-l modifica astfel încât dimensiunea fontului să varieze în funcție de cât de des este folosită eticheta? Aveți vreo idee, vă rog? Mulțumesc!
Echipa WPBeginner
Da, este posibil, în prima bucată de cod ar trebui să înlocuiți get_tags cu funcția wp_tag_cloud. Astfel:
$wpbtags = wp_tag_cloud('smallest=15&largest=40&number=50&orderby=count&format=array');
Invitat
Cum faci același lucru cu norul de etichete personalizat pentru Categorii și Taxonomii Personalizate?
Terence O'Neill
Salut prietene; Cum fac exact același lucru (afișare cu shortcode) pentru Categorii și Taxonomii Personalizate? Mulțumesc pentru tutorial, apropo. Funcționează perfect.