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

de
Tweet
Share
Share
Pin

Importanța Icoanelor și Cum Dashicons Pot Revitaliza Site-ul Tău WordPress

Icoanele au un impact vizual remarcabil, facilitând comunicarea rapidă și eficientă cu publicul prin conexiuni vizuale puternice. Această caracteristică le face extrem de populare și utilizate pe scară largă, inclusiv pe platformele WordPress.

Utilizarea aceleiași teme web pentru o perioadă îndelungată poate deveni monotonă. Această experiență este una frecventă. De cele mai multe ori, căutăm ceva nou, interesant, dar în timp, ne plictisim din nou, intrând într-un ciclu nesfârșit.

Cum putem depăși această rutină plictisitoare? Răspunsul se află în Dashicons!

Dashicons nu doar îmbunătățesc aspectul estetic al site-ului tău, ci te ajută și să te diferențiezi de mulțime. În plus, te scutesc de efortul de a adăuga numeroase imagini, care pot încetini viteza de încărcare a paginii.

Să explorăm împreună lumea Dashicons și să vedem cum le poți utiliza eficient pe site-ul tău WordPress.

Ce Sunt Dashicons WordPress?

Dashicons reprezintă fonturile oficiale de pictograme ale platformei WordPress, introduse odată cu versiunea 3.8. Aceste fonturi sunt remarcabile și aduc un plus de valoare site-ului tău. Fiind fișiere SVG de înaltă calitate, ele pot fi scalate la orice dimensiune fără a pierde din claritate.

Având în vedere că sunt integrate nativ în WordPress și create de echipa platformei, le poți folosi direct, fără a fi necesară încărcarea unor scripturi suplimentare. Există aproximativ 350 de fonturi de pictograme disponibile, pe care le poți consulta în Resursele pentru dezvoltatori WordPress.

Aceste pictograme sunt clasificate pe subiecte, iar un câmp de căutare dinamic te ajută să filtrezi pictogramele disponibile.

Le poți folosi în diverse zone, precum:

  • Panoul de bord WordPress
  • Meniuri de navigare
  • Pagini și articole
  • Metadate
  • Elemente din editor
  • Pluginuri și teme personalizate
  • Panouri de administrare
  • Design front-end

Folosim termenul „icoane”, dar în acest context ne referim la fonturi de pictograme, nu la imagini sub formă de icoane. Este o distincție importantă.

Să vedem diferența dintre cele două.

Diferența Dintre Pictogramele Imagine și Fonturile de Pictograme

Fonturile de pictograme și pictogramele imagine sunt similare, dar fonturile de pictograme folosesc simboluri vectoriale în loc de litere. Poate suna tehnic, dar să o simplificăm.

Fonturile de pictograme sunt similare imaginilor și pot fi utilizate pentru a adăuga simboluri pe site-ul tău, dar nu sunt imagini propriu-zise. Ele aduc numeroase avantaje.

Beneficiile Utilizării Fonturilor de Pictograme

  • Scalabilitate: Se scalează la fel ca textul, fiind fonturi.
  • Ușoare: Nu afectează viteza de încărcare a paginii, spre deosebire de imagini.
  • Personalizabile: Culoarea și alte proprietăți pot fi modificate prin CSS.
  • Optimizare HTTP: Reduc numărul de solicitări HTTP, încărcând fonturile o singură dată.
  • Ușor de utilizat: Simplifică adăugarea simbolurilor, evitând necesitatea de a le recrea.
  • Accesibilitate: Integrate nativ în WordPress.

Cum Utilizezi Dashicons?

Integrarea Dashicons nu necesită cunoștințe avansate. Urmează pașii de mai jos:

Pasul 1: Activarea Dashicons

Pentru a activa Dashicons pe site-ul tău, trebuie să adaugi un cod în fișierul functions.php al temei tale.

Iată cum:

  • Accesează Editorul de teme din panoul de control WordPress.
  • Deschide fișierul functions.php.
  • Adaugă următoarele linii de cod la finalul fișierului:
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

Acest cod activează Dashicons în interfața site-ului. Este important să utilizezi o temă copil pentru a evita pierderea modificărilor în urma actualizărilor temei principale.

Pasul 2: Găsirea Codurilor HTML și CSS

Biblioteca Dashicons de pe WordPress.org oferă codurile HTML și CSS necesare pentru fiecare pictogramă. Pentru a le folosi:

  • Accesează Resursele pentru dezvoltatori și selectează pictograma dorită.
  • Alege „Copy CSS” sau „Copy HTML” și copiază codul în clipboard.
  • Decide unde vrei să folosești pictograma (teme, metadate, meniuri).
  • Lipește codul în editorul de text sau widget-ul dorit.
  • Personalizează aspectul pictogramei prin CSS.

Implicit, pictogramele au dimensiunea de 20 de pixeli, dar dimensiunea poate fi modificată prin CSS, utilizând instrumente precum „Inspect” din Google Chrome sau FireBug din Firefox.

Utilizarea Dashicons în Diverse Zone ale Site-ului

1. Meniul de Navigare

Pentru a adăuga pictograme în meniu:

  • Accesează „Meniuri” din panoul de control.
  • Copiază codul HTML al pictogramei din biblioteca Dashicons.
  • Lipește codul în câmpul „Eticheta de navigare”.
  • Salvează modificările.

2. Meta Post

Poți adăuga Dashicons în fața datei, numelui autorului, etichetelor sau categoriilor, în funcție de tema folosită.

Adaugă codul CSS personalizat în fișierul style.css sau printr-un editor CSS personalizat, selectând elementele corespunzătoare.

3. Backend-ul WordPress

Dacă dorești să incluzi pictograme personalizate pentru diverse titluri, tipuri de articole sau widget-uri, acest lucru se poate realiza cu ușurință.

Un Sfat Rapid: Creează un Shortcode

Pentru a simplifica utilizarea Dashicons, creează un shortcode. Acest lucru este benefic mai ales atunci când creezi site-uri pentru clienți, permițându-le să insereze pictograme fără să se confrunte cu codul direct.

Concluzie

Sperăm că informațiile despre Dashicons sunt acum clare. Acestea nu doar îmbunătățesc estetica site-ului, dar sunt și ușor de utilizat și contribuie la o viteză mai bună de încărcare a paginii.

„Frumusețea și funcționalitatea” sunt o combinație rar întâlnită, așa că folosește cu încredere Dashicons pentru a-ți îmbunătăți site-ul WordPress!