se întâmplă tuturor.

găsiți o temă care vă place, o instalați și petreceți câteva luni bucurându-vă de aspectul site-ului dvs. Dar apoi, după câteva luni, tema începe să se simtă învechită. Un pic plictisitor.

singura problemă este că nu vrei să petreci câteva ore căutând ceva nou. Dacă ar exista doar o modalitate de a adăuga un pic de condiment temei dvs., un pic de flare pentru ao face să iasă în evidență.

înainte de a vă arunca mâinile în 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 dvs.

introduceți Dashicons. Dashicons sunt pictograme de fonturi care au fost introduse în WordPress 3.8. Acestea sunt acele icoane minunate și interesante pe care le vedeți când vă conectați la tabloul de bord. Nu ar fi grozav dacă le-ați putea adăuga și la 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 de la versiunea 3.8, dar trebuie totuși să le includeți pentru a le afișa corect pe partea frontală a site-ului dvs.; adică tema dvs.

Pasul 1: Asigurați-vă dashicons tema gata

pentru a face dashicons tema gata deschide mai întâi funcțiile.fișier php (găsit în aparență > Editor – în mod implicit se va deschide fișierul CSS tema curentă. Mergeți mai departe și căutați funcții.fișier php și faceți clic pe el pentru a-l încărca în Editor.)

Pasul 2: Introduceți scriptul

derulați până la capăt și lipiți aceste linii de cod la sfârșit:

în regulă! Acum, tema dvs. este gata de utilizare Dashicons.

Pasul 3: Adăugarea Dashicons la elementele de meniu

să adăugăm un Dashicon pentru linkul dvs. de acasă. Accesați site-ul web Dashicons și selectați pictograma care vă place.

actualizare: Dashicons au fost inițial disponibile 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 Acasă) și apoi faceți clic pe Copiere HTML. Acesta vă va oferi o fereastră pop-up cu codul de care aveți nevoie.

Pasul 5:

du-te înapoi la tabloul de bord WordPress, faceți clic pe aspectul> meniuri și lipiți codul chiar acolo unde scrie eticheta de navigare.

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

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

puteți face acest lucru pentru toate elementele de meniu de navigare sau doar pentru acasă. Doar repetați pașii de mai sus cu pictogramele potrivite. A fost ușor, nu?

cum se utilizează Dashicons în post meta?

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

Din moment ce deja enqueued Dashicons în tema dvs., tot ce trebuie să faceți acum este să vă deschideți stilul.fișier css (sau utilizați editorul CSS personalizat, care este întotdeauna o opțiune mai bună, astfel încât să nu pierdeți modificările odată ce actualizările temei!), găsiți selectorul de potrivire și adăugați codul CSS.

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

Pasul 1:

Mai întâi vom alege o pictogramă care ne-ar plăcea.

Pasul 2:

apoi faceți clic pe el și de această dată selectați Copiere CSS. Din nou, vă va oferi o fereastră pop-up cu codul pe care trebuie să-l lipiți.

Pasul 3:

acum deschide-ți stilul.css și găsiți selectorul corespunzător, în acest caz – .intrare-autor. Adăugând: înainte și apoi lipiți codul CSS pe care l-ați copiat de pe site-ul Dashicons, numele autorului va avea o pictogramă frumoasă în fața acestuia. De asemenea, trebuie să specificați că utilizați fontul Dashicons. Codul modificat arată astfel:

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

să adăugăm și un pic de stil, iar acum codul completat arată astfel:

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 poți folosi Dashicons – lasă-ți creativitatea să prindă și vezi ce poți face.

punând totul împreună

Î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 widget-urilor sau, dacă creați o pagină de destinație personalizată, puteți face diferența între diferite pagini ale site-ului dvs.

un exemplu excelent în acest sens este vechea pagină de pornire WP Superstars. Aici, puteți vedea Dashicons în uz pentru diferite zone ale site-ului:

Dashicons nu sunt singurul tip de fonturi icon puteți adăuga. Check out nostru FontAwesome icoane tutorial pentru mai multe.

include e-mail actualizări. Dezabonați-vă oricând.

Lasă un răspuns

Adresa ta de email nu va fi publicată.