Se întâmplă tuturor.

Găsești o temă care îți place, o instalezi și petreci câteva luni bucurându-te de aspectul site-ului tău. Dar apoi, după câteva luni, tema începe să ți se pară învechită. Un pic plictisitoare.

Singura problemă este că nu doriți să petreceți câteva ore căutând ceva nou. Dacă ar exista o modalitate de a adăuga un pic de condiment la tema dvs., o mică flare pentru a o face să iasă în evidență.

Înainte de a vă arunca mâinile în sus de disperare, permiteți-mi să vă arăt o modalitate ușoară de a vă condimenta tema fără prea mult efort și fără a adăuga imagini inutile care ar putea încetini site-ul.

Introduceți Dashicons. Dashicons sunt pictograme de font care au fost introduse în WordPress 3.8. Acestea sunt acele pictograme grozave și interesante pe care le vedeți atunci când vă conectați la tabloul de bord. Nu ar fi grozav dacă le-ați putea adăuga și în tema dvs.?

Ei bine, puteți și vă voi arăta cum.

Cum puteți utiliza Dashicons în meniul de navigare?

Să începem cu un exemplu simplu. Dashicons sunt deja incluse în WordPress încă de la versiunea 3.8, dar tot trebuie să le includeți pentru a le afișa corect în partea frontală a site-ului dvs., adică în tema dvs.

Pasul 1: Pregătiți Dashicons tema dvs.

Pentru a face ca tema Dashicons să fie pregătită, deschideți mai întâi fișierul functions.php (găsit în Appearance>Editor - în mod implicit, acesta va deschide fișierul CSS al temei curente. Căutați fișierul functions.php și faceți clic pe el pentru a-l încărca în Editor.)

Pasul 2: Puneți scriptul în așteptare

Derulați până jos și lipiți aceste linii de cod la sfârșit:

 //Encheie scriptul Dashicons add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' ); function load_dashicons_front_end() { wp_enqueue_style( 'dashicons' ); } 

Acum tema dvs. este pregătită pentru a utiliza Dashicons.

Pasul 3: Adăugarea de Dashicons la elementele de meniu

Să adăugăm o pictogramă Dashicon pentru linkul Acasă. Mergeți pe site-ul Dashicons și selectați pictograma care vă place.

Actualizare: Dashicons au fost disponibile inițial pe GitHub.io, dar de atunci au fost puse la dispoziție pe WordPress.org.

Pasul 4:

Faceți clic pe pictograma dorită (în acest caz am selectat pictograma de acasă) și apoi faceți clic pe Copy HTML. Vă va apărea o fereastră pop-up cu codul de care aveți nevoie.

Pasul 5:

Întoarce-te la tabloul de bord WordPress, fă clic pe Appearance> Menus și lipește codul chiar acolo unde scrie Navigation Label.

Dacă doriți ca cuvântul să apară în continuare, scrieți-l după paranteza de închidere div.

Faceți clic pe Save (Salvare) și încărcați pagina dvs. de pornire. Linkul dvs. de pornire ar trebui să afișeze acum un Dashicon frumos și clar.

Poți face acest lucru pentru toate elementele meniului de navigare sau doar pentru pagina principală. Trebuie doar să repeți pașii de mai sus cu pictogramele corespunzătoare. A fost ușor, nu?

Cum se utilizează Dashicons în post meta?

Puteți face un pas mai departe și adăuga Dashicons la meta post sau, cu alte cuvinte, puteți adăuga Dashicons în fața numelui autorului, a datei, a categoriei sau a etichetei; în funcție de tema dvs. și de informațiile pe care le afișează.

Din moment ce ați pus deja Dashicons în temă, tot ce trebuie să faceți acum este să deschideți fișierul style.css (sau să utilizați editorul CSS personalizat, care este întotdeauna o opțiune mai bună pentru a nu pierde modificările odată ce tema se actualizează!), să găsiți selectorul corespunzător și să adăugați codul CSS.

Să spunem că doriți să adăugați o pictogramă în fața numelui dumneavoastră sau a numelui autorului.

Pasul 1:

Mai întâi vom alege o pictogramă pe care o dorim.

Pasul 2:

Apoi faceți clic pe el și, de data aceasta, selectați Copy CSS. Din nou, veți primi o fereastră pop-up cu codul pe care trebuie să-l lipiți.

Pasul 3:

Acum deschideți style.css și găsiți selectorul corespunzător, în acest caz - .entry-author. Adăugând :before și apoi lipind codul CSS pe care l-ați copiat de pe site-ul Dashicons, numele autorului va avea o pictogramă drăguță în fața lui. De asemenea, trebuie să specificați că folosiți fontul Dashicons. Codul modificat arată astfel:

 .entry-author:before { font-family: "dashicons"; content: "\f110"; } 

Să adăugăm și un pic de stilizare, iar acum codul finalizat arată astfel:

 .entry-author:before { font-family: "dashicons"; content: "\f110"; color: #f15123; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 20px/1; vertical-align: top; margin-right: 5px; margin-right: 0.5rem; } 

Rezultatul final

Deci, cum va arăta acest lucru în cele din urmă?

Ceva de genul acesta:

Există atât de multe moduri în care puteți utiliza Dashicons - lăsați creativitatea să vă cuprindă și vedeți ce puteți face.

Cum se pune totul cap la cap

În afară de exemplele de mai sus, puteți utiliza Dashicons în backend pentru a specifica pictograme diferite pentru diferite tipuri de postări sau le puteți utiliza în titlurile postărilor, titlurile widgeturilor sau, dacă creați o pagină de destinație personalizată, puteți face diferența între diferitele pagini ale site-ului dvs.

Iată un exemplu de bază pentru ceea ce ați putea crea cu ele: