Oamenii sunt atrași în mod natural de aspectul vizual al unui site-ul web de WordPress, pe cât de atrași de conținutul scris pe care îl distribuiți. De fapt, conform Jeff Bullas ", Articolele cu imagini au 94% mai multe vizualizări decât articolele fără imagini.

Aceasta este o creștere imensă a numărului de afișări de pagină, dacă mă întrebați.

Și care este motivul exact?

Doar adăugați câteva imagini de înaltă calitate, relevante pentru articol, pe întregul conținut.

Dar ce zici de pozele de pe tine site-ul web care merg dincolo de capturi de ecran și fotografii? Dar imaginile care nu numai că captează atenția, dar au și o funcție utilă?

Da, vorbesc despre icoane. Știți acele imagini minuscule care se găsesc pe site-uri web pentru a încuraja partajarea pe rețelele de socializare, pentru a ilustra paginile de contact ale proprietarilor de afaceri, pentru a numi câteva dintre cazuri util.

Deoarece ideea a fost preluată de pe acest site, the vizitatori nu numai că au fost atrași de imaginile de pe site-uri web, ci au fost înclinați să interacționeze cu acestea, oamenii au început să le adauge pe site-urile lor.

Totuși, pe măsură ce tehnologia avansează, ca întotdeauna, pictogramele tradiționale de imagine au început să se clatine ca soluție de imagine pentru site-uri web. Acest lucru se datorează faptului că acestea fac paginile mult mai grele și, prin urmare, mai lente, dar mai presus de toate această soluție nu a fost întotdeauna potrivită pentru telefoane mobile.

Există însă o soluție: fonturi de pictogramă.

Astăzi am să vă spun ce sunt fonturile cu pictograme și beneficiile utilizării lor pe site-ul dvs. WordPress. În plus, vă voi arăta cum să adăugați fonturi de pictograme pe site-ul dvs. WordPress utilizând popularul plugin " O mai bună Font Awesome ".

Deci, să începem.

Ce sunt fonturile de pictograme și de ce ar trebui să le utilizați?

Fonturile cu pictograme sunt exact ceea ce se spune: fonturi încorporate în întregime în pictograme. De fapt, fonturile pictogramei sau „ make-icon "Poate fi descris ca un font care afișează doar caractere sau simboluri, nu literele și numerele cu care fonturile și textul tradițional sunt asociate.

Fonturile cu pictograme sunt utilizate pentru a afișa simboluri utilizate în mod obișnuit pe site-ul dvs. De exemplu, butoanele de pe rețelele sociale, coșul de cumpărături, butoanele de descărcare și butoanele de navigare sunt exemple de pictograme care afișează imagini mici și interactive pe site-ul dvs.

De ce să folosiți fonturi de pictograme?

Pictogramele de imagine au funcționat bine în trecut pentru mulți proprietari de site-uri. Cu toate acestea, pe măsură ce regulile de navigare, gradul de utilizare și designul au evoluat, fonturile pentru pictograme au devenit cea mai bună soluție pentru afișarea imaginilor interactive pe un site-ul web.

Iată o privire la câteva motive convingătoare pentru care fonturile pictograme sunt cea mai bună alegere:

• Extensibil ușor, fără a pierde calitatea
• Personalizabil în ceea ce privește culoarea și nuanța
• 100% receptiv
• Funcționează ca sprite de imagine CSS, dar se comportă ca text
• Ușor de utilizat
• Compatibil cu browserele
• Personalizați opacitatea, rotația și multe altele
• Dimensiunea fișierului mai mică
• Nu sacrificați viteza sau performanța site-ului dvs. Web

După cum puteți vedea, există mai multe motive pentru care ați putea dori să utilizați un font de pictogramă pe site-ul dvs. web, spre deosebire de o pictogramă imagine.

Instalarea pictogramelor de fonturi pe site-ul dvs. utilizând un plugin

Better Font Awesome este un WordPress plug-in program gratuit care vă permite să integrați automat cea mai recentă versiune a Font Awesome în proiectul dvs. WordPress. Mai mult, vine cu CSS, coduri scurte și generator de coduri scurte TinyMCE.

Acest plugin are o varietate de caracteristici utile pentru proprietarii de site-uri:

• Actualizare de rutină a celei mai recente versiuni
• Posibilitatea de a comuta între versiunile Font Awesome fără a schimba codurile scurte
• Suport pentru alte pluginuri de fonturi populare, inclusiv codurile scurte ale acestora
• Eliberat de jsDelivr CDN

Pasul 1: Instalarea și activarea unei fonturi mai bune

Pentru a începe, instalați și activați pluginul „Better Font Awesome” prin tabloul de bord WordPress, așa cum ați face cu orice alt plugin.

Mai întâi, navigați la „ Pluginuri> Adăugare nouă Și căutați „ O mai bună Font Awesome ".

Apoi selectați „ instalați acum »Și faceți clic pe« activa ".

Odată activat, pluginul adaugă un linkO mai bună Font AwesomeSub meniul Setări din tabloul de bord WordPress.

Pasul 2: Configurați setările pluginului

Pentru a configura pluginul « O mai bună Font Awesome ", Începeți făcând clic pe elementul de meniu" O mai bună Font Awesome În Setări. După ce faceți asta, veți vedea un ecran similar cu acesta:

Aici puteți face următoarele:

• Versiune: Selectați versiunea „Better Font Awesome” pe care doriți să o utilizați.
• Utilizați CSS minificat: Bifați această casetă dacă doriți să utilizați versiunea modificată a CSS.
• Ștergeți fontul de imprimare existent: selectați această casetă pentru a încerca să eliminați fragmentele codificate și codurile scurte adăugate de alte pluginuri și teme.
• Ascundeți recenziile administratorilor: Ascundeți avertismentele de administrator implicite care apar atunci când apar erori API și CDN.

În plus față de cantitatea minimă de opțiuni Better Font Awesome, există o mică secțiune „Utilizare” care explică cum să adăugați pictograme pe site-ul dvs.

Pasul 3: Adăugarea de pictograme pe site-ul dvs. web

Există trei moduri simple de a adăuga pictograme pe site-ul dvs. web folosind „Better Font Awesome” - prin shortcode, HTML sau TinyMCE.

# 1. Adăugarea de pictograme folosind shortcode

Pentru a adăuga pictograme pe site-ul dvs. web utilizând un shortcode, accesați mai întâi „ Font Awesome Pentru a vedea o listă completă de icoane disponibile care pot fi utilizate.

Aici puteți căuta pictograma dorită. De exemplu, dacă doriți o pictogramă „e-mail”, trebuie doar să căutați acel cuvânt cheie și să selectați pictograma pe care doriți să o utilizați făcând clic pe ea.

După ce faceți clic pe pictograma pe care doriți să o adăugați, veți vedea un ecran care arată imaginea pictogramei cu dimensiunile sale diferite și un mic bloc de cod:

Copiați blocul de cod și lipiți-l oriunde pe site-ul dvs. web folosind fila „Editor de text”. Iată cum va arăta editorul pe site-ul dvs. web:

În cele din urmă, iată ce vizitatori vor vedea când accesează site-ul dvs.:

# 2. Adăugarea de pictograme folosind cod HTML

După cum am văzut în secțiunea „ utilizare Aveți opțiunea de a utiliza cod HTML pentru a insera pictograme pe site-ul dvs. web. Cu toate acestea, dezvoltatorii de pluginuri iau în considerare faptul că utilizarea HTML necesită prefixe specifice versiunii.

De aceea, vă recomandă să utilizați în schimb coduri scurte. Cu toate acestea, dacă doriți să utilizați cod HTML, Font Awesome are informații utile aici.

# 3. Adăugarea de pictograme folosind TinyMCE

Acesta este probabil cel mai simplu mod de a adăuga pictograme pe site-ul dvs. În modul „Editor vizual”, trebuie doar să faceți clic pe pictograma Insert. De acolo, parcurgeți opțiunile disponibile pentru pictograme sau restrângeți rezultatele folosind funcția de căutare.

Odată ce ați găsit pictograma dorită, faceți clic pe ea. Generatorul de coduri scurte introduce automat informațiile solicitate în postarea sau pagina dvs.

Dacă doriți să aflați cum să personalizați pictogramele de pe site-ul dvs., consultați exemplele „ Font Awesome ".