Cum să folosiți și să profitați la maximum de el?

de
Tweet
Share
Share
Pin

Icoanele sunt fascinante!

Ei au puterea de a comunica rapid cu publicul prin stabilirea unei conexiuni vizuale puternice.

Acesta este motivul pentru care pictogramele sunt utilizate pe scară largă peste tot, inclusiv pe site-urile WordPress.

De asemenea, utilizarea aceleiași teme pe site-ul tău timp de câteva luni poate fi plictisitoare. Este comun.

Și apoi, vei căuta ceva mai interesant, folosind asta și te vei plictisi din nou,

Și ciclul continuă și mai departe…

Deci, cum poți sări peste acel ciclu de plictiseală?

Dashicon-urile sunt o modalitate excelentă!

Poate condimenta estetica site-ului dvs. și vă poate ajuta să vă evidențiați. De asemenea, vă va scuti de a depune eforturi suplimentare și de a vă aglomera site-ul cu imagini inutile care încetinesc viteza paginii.

Deci, haideți să explorăm Dashicons și cum le puteți utiliza eficient pe site-ul dvs. WordPress.

Ce este WordPress Dashicons?

Dashicon-urile sunt fonturile de pictograme oficiale ale WordPress introduse cu ani în urmă cu versiunea sa 3.8. Aceste fonturi sunt grozave și minunate dacă le folosiți pe site-ul dvs. web. Sunt fișiere SVG de calitate superioară pe care le puteți scala cu ușurință la orice dimensiune, fără pixelizare.

Deoarece au suport nativ pentru WordPress, deoarece au fost create chiar de echipa lor, le puteți folosi direct fără a încărca scripturi suplimentare. Există aproximativ 350 de fonturi de pictograme incluse, pe care le puteți găsi în interiorul oficial Resurse pentru dezvoltatori WordPress.

  11 aplicații pentru a viziona filme împreună cu prietenii de la distanță

Ei au clasificat aceste pictograme în funcție de subiect, plus puteți vedea un câmp de căutare dinamic care vă permite să filtrați pictogramele disponibile.

Puteți folosi aceste pictograme pe:

  • Tabloul de bord WordPress
  • Meniuri de navigare
  • Pagini și postări
  • Metadate
  • Elemente editor
  • Pluginuri și teme personalizate
  • Panouri de administrare
  • Design front-end

Observați că spun „icoane” în mod repetat?

Aici, mă refer doar la fonturi de pictograme.

Nu imagini sub formă de icoane.

Da, există o diferență între cele două.

Să dezvăluim asta.

Diferența dintre pictogramele de imagine și fonturile pentru pictograme?

Fonturile de pictograme și pictogramele de imagine sunt oarecum similare, dar în loc de alfabete, simbolurile vectoriale sunt acolo în fonturile de pictograme.

A devenit prea tehnic?

Lasă-mă să clarific asta.

Practic, aceste fonturi de pictograme seamănă cu imaginile pe care le puteți folosi pentru a adăuga simboluri pe site-ul dvs. web, dar nu o imagine reală.

Îți oferă o mulțime de beneficii.

Cum?

Află în secțiunea următoare.

De ce ar trebui să le folosești?

  • Scalabil precum textele folosite pe site-ul dvs., deoarece sunt fonturi
  • Ușoară, care nu afectează viteza de încărcare a paginii în comparație cu imaginile
  • Capabil să seteze culoarea pictogramei prin CSS și să adauge proprietăți suplimentare, cum ar fi culoarea gradientului, umbra etc.
  • Excelent pentru a salva prea multe solicitări HTTP, permițându-vă să încărcați fonturile dintr-o dată, pe care le puteți utiliza în paginile dvs. Dacă utilizați o mulțime de imagini pe site, va trebui să faceți o mulțime de solicitări pentru a le prelua, ceea ce crește timpul de încărcare a paginii.
  • Ușor de utilizat și de reglat decât imaginile. Puteți adăuga simboluri recunoscute și creative fără a fi nevoie să le recreați de fiecare dată când aveți nevoie de o pictogramă pentru un player video, e-mail, muzică sau orice alt lucru.
  • Accesibilitate mai mare, deoarece sunt integrate chiar în WordPress
  7 cele mai bune generatoare de coperti de cântece AI pentru a vă recrea favoritele

Cum să le folosești?

Folosirea Dashicons nu este o inginerie de rachetă.

Aveţi încredere în mine; Sunt familiarizat cu ambele :0

Urmați câțiva pași menționați mai jos pentru a începe să utilizați WordPress Dashicons.

Pasul 1: Activați Dashicons pe site-ul dvs. WordPress

Înainte de a începe, activați Dashicons acolo unde aveți nevoie, de exemplu, o temă. Pentru aceasta, trebuie să adăugați câteva coduri în fișierul function.php.

Să o facă:

  • Mai întâi, accesați Editorul de teme/aspect din tabloul de bord WordPress.
  • Deschideți fișierul function.php.
  • Derulați până la sfârșitul fișierului și adăugați câteva linii de cod pentru a pune în coadă scripturile
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

Exemplul de mai sus este de a activa Dashicons pe front-end.

Asigurați-vă că creați o temă copil înainte de a edita fișierul functions.php. Se datorează faptului că, dacă editezi direct fișierul cu tema și apoi vine o actualizare pentru tema respectivă, atunci aceasta va suprascrie toate modificările pe care le faci fișierului.

Pasul 2: Găsiți codurile HTML și CSS Dashicon

WordPress.org oferă o bibliotecă de Dashicons, care vă ajută să găsiți coduri CSS și HTML aparținând fiecărei pictograme. Aici, accesați Resurse pentru dezvoltatori pentru a găsi Dashicon-urile pe care doriți să le utilizați și apoi:

  • Faceți clic pe pictograma dorinței dvs.
  • Alegeți între „Copy CSS” sau „Copy HTML” făcând clic pe el.
  • Acum, veți vedea o fereastră pop-up. Doar copiați codul în clipboard.
  • Decideți unde doriți să utilizați pictograma, cum ar fi teme, metadate, meniul de navigare etc.
  • Lipiți codul copiat în Widget-ul de text sau Editorul de text al locului ales.
  • Modificați aspectul pictogramei folosind CSS personalizat
  Cele mai bune 10 telecomenzi universale pentru control ușoară pe mai multe dispozitive

Asta e.

În plus, în mod implicit, toate pictogramele au dimensiunea de 20 de pixeli. Îl puteți schimba folosind elementele CSS din opțiuni precum elementul Inspect de la Google Chrome sau FireBug din Firefox.

Cum să profitați la maximum de WordPress Dashicons?

Ați văzut cum ați putea folosi Dashicons pe site-ul dvs. și acum vom vedea utilizarea lui în scopuri specifice.

1. Folosind meniul de navigare

Pentru a adăuga pictograme în meniu, urmați pașii de mai jos:

  • Accesați Meniuri/Aspect din tabloul de bord
  • Copiați codurile HTML concepute pentru pictograma meniului de pe WordPress.org
  • Lipiți-l pe „Eticheta de navigare” de pe tabloul de bord
  • Faceți clic pe butonul „salvare” și apoi încărcați pagina de pornire. Ar trebui să afișeze pictograma rece și clară.

2. Utilizarea pe meta post

Veți putea folosi Dashicons chiar în fața unei date, a numelui autorului, a etichetei sau a categoriei pe baza temei plus datele pe care le afișează.

Deoarece ați pus deja în coadă Dashicons, deschideți fișierul style.css. În caz contrar, puteți alege și un editor CSS personalizat, care nu vă permite să vă pierdeți modificările după actualizările temei. Apoi, adăugați codul CSS după ce găsiți un selector potrivit.

3. Pe backend-ul WordPress

Dacă doriți să fie incluse diferite pictograme pentru diferite titluri de postări personalizate, tipuri de postări sau widget-uri, este ușor de făcut.

Un sfat rapid: creați un shortcode

Pentru a utiliza Dashicons cu ușurință, puteți crea un shortcode pentru acesta. Este util, mai ales atunci când creați un site web pentru clienții dvs. cărora le-ar fi ușor să introducă Dashicon-uri fără a se încurca cu codurile.

Concluzie

Sper că lucrurile sunt destul de clare din partea ta în ceea ce privește WordPress Dashicons. Acestea nu numai că acoperă estetica site-ului dvs., ci sunt și ușor de utilizat și îmbunătățesc viteza de încărcare a paginii.

Și știi, „frumusețea și creierul” este o combinație rară.

Așa că, grăbește-te, folosește acele Dashicon-uri atrăgătoare pe site-ul tău WordPress!