Cum să încorporați fonturi de pictograme WordPress pe site-ul dvs. web?
Publicat: 2022-05-29Pictogramele WordPress au devenit unul dintre elementele esențiale pentru orice site web. Acestea ajută la aducerea mai multor detalii și receptivitate în designul web.
În primele zile, era ușor să găsești pictograme și să le implementezi pe site-ul tău web, dar pentru WordPress a fost puțin mai dificil. Lucrurile au devenit și mai rele în zilele noastre datorită celor mai noi tipuri de afișaje.
Una dintre cele mai eficiente și cele mai bune soluții alternative la această problemă este utilizarea unei pictograme de font. Vom discuta despre asta mai târziu în această postare.
În afară de toate acestea, ați observat încă toate pictogramele WordPress de pe site-ul dvs. web? Una dintre pictogramele pe care le veți găsi este o pictogramă acasă pe bara de navigare.
În mod similar, dacă doriți să aflați mai multe despre pictogramele WordPress și despre cum le puteți implementa cu ușurință pe site-ul dvs. web. Trebuie să continuați să citiți această postare până la sfârșit și să obțineți răspunsuri la toate întrebările legate de pictogramele WordPress.
Să începem cu definiția sa simplă.
Ce sunt pictogramele WordPress și de ce ar trebui să le folosiți?
Pictogramele WordPress sunt un set de pictograme care nu conțin numere sau litere, ci diferite tipuri de simboluri care reprezintă aproape orice. Aceste pictograme sunt foarte importante pentru ca orice site web să aibă un design web receptiv.
Aceste pictograme nu au fișiere de dimensiuni mari și le puteți adăuga cu ușurință pe site-ul dvs. web. Dacă doriți să personalizați sau să reproiectați pictogramele conform site-ului dvs., o puteți face prin CSS. Le puteți scala fără limitări și, pe deasupra, stocați cât mai multe pictograme într-un singur fișier.
Pictogramele bazate pe imagini sunt destul de grele în comparație cu pictogramele bazate pe fonturi și pot reduce performanța site-ului dvs. Prin urmare, pentru o performanță mai bună a site-ului și optimizare, pictogramele fonturilor sunt mult superioare pictogramelor de imagine și sunt acum utilizate pe scară largă.
Cu toate acestea, există și alte considerente de performanță despre care vom vorbi în secțiunea ulterioară a acestei postări.
Dar deocamdată, permiteți-ne să vedem unde puteți avea pictograme WordPress și mai multe moduri de a le folosi pe site-ul dvs. WordPress.
De unde să obțineți pictograme WordPress SAU fonturi pentru pictograme?
Există mii de fonturi de pictograme WordPress gratuite, precum și plătite, disponibile pe internet. Tot ce trebuie doar să tastați „ Font pictogramă WordPress ” pe motoarele de căutare și veți avea o listă de site-uri web cu pictograme în rezultat.
Când instalați WordPress, veți avea un set de pictograme gratuite pentru fonturi WordPress (Dashicons) disponibile împreună cu acesta. Aceste fonturi de pictograme WordPress sunt utilizate în general în zonele de administrare WordPress.
În afară de aceasta, există și alte surse gratuite din care puteți descărca cu ușurință o mulțime de fonturi de pictograme. Unii dintre ei sunt:
Unele pictograme WordPress Surse gratuite
- Pictograma WordPress Font Awesome
- Pictograme materiale de la Google
- font Ico
- Icomoon
Dar, în această postare, vom lua în considerare pictograma WordPress Font Awesome , datorită popularității sale, disponibilă în sursă deschisă, gratuită și a bazei de utilizatori mai mari. În prezent, oferă peste 2000 de fonturi de pictograme gratuite și, dacă ați ales versiunea pro, puteți explora și mai multe (16000+ pictograme) .
Și în această postare, veți afla cum puteți utiliza pictogramele WordPress pentru a vă proiecta site-ul web în diferite moduri. Astfel încât să puteți alege cel mai bun mod de a utiliza pictogramele de pe site-ul dvs. în zona dvs. de confort.
Cum să utilizați fonturile pentru pictograme WordPress pe site-ul dvs.?
Cu toate acestea, există diferite metode disponibile pentru a adăuga fonturi de pictograme pe site-ul dvs. Dar, începem mai întâi tutorialul nostru cu cele mai simple metode. Și puteți selecta cea mai bună și ușoară metodă pentru dvs.
Adăugarea fonturilor pentru pictograme WordPress utilizând pluginul pentru pictograme WordPress
Una dintre cele mai bune și mai ușoare modalități de a adăuga pictograme WordPress pe site este utilizarea unui plugin WordPress. Această metodă este cea mai potrivită pentru începătorii care se află în faza de învățare a proiectării unui site web și trebuie să utilizeze tipuri foarte limitate de pictograme.
Nu este nevoie să faceți modificări la fișierele teme și veți fi liber să utilizați pictograme în orice zonă a site-ului dvs. web. Tot ce trebuie să faceți este să instalați pluginul cu pictogramă Font Awesome WordPress și sunteți gata de plecare.
Pentru a instala pluginul Font Awesome, conectați-vă la tabloul de bord WordPress, accesați pluginuri > Adăugați nou și introduceți Font Awesome în bara de căutare.
Când a apărut pluginul, faceți clic pe butonul „ install ” urmat de „ Activare ”, așa cum se arată în imaginea de mai sus. După instalare și activare cu succes, pluginul minunat de font va oferi suport complet pentru tema instalată și puteți edita sau personaliza cu ușurință orice pagină sau postare a site-ului dvs. folosind coduri scurte simple, cum ar fi:
|
1 |
< i class = "fa fa-pencil" title = "Edit" > < / i > |
Doar lipiți codul scurt oriunde pe pagină sau postare și așa apare în backend.
Acum, când fie publicați, fie previzualizați postarea, iată cum ar arăta la început.
În mod similar, puteți adăuga direct câte pictograme WordPress doriți prin copierea codului din listele de pictograme gratuite Font awesome.
Adăugarea pictogramelor WordPress Dashicons (pictograme WordPress implicite încorporate)
WordPress oferă și fonturile sale de pictograme, cunoscute în mod popular sub numele de Dashicons. Aceste fonturi de pictograme sunt disponibile implicit, WordPress le folosește în backend. Dar pentru a-l aduce pe front-end trebuie să aveți numele scriptului care este deja disponibil într-un fișier WordPress.
Pentru a utiliza Dashicons, puteți fie să adăugați un fragment de cod în fișierul function.php, fie să utilizați un plugin WordPress denumit fragmente de cod . Dar, vă recomandăm să nu vă asumați riscul de a edita fișierul function.php, ci să utilizați pluginul WordPress. Pentru că chiar și o ușoară greșeală vă poate distruge tema și vă poate deteriora întregul site.
După instalarea pluginului, puteți vizita pagina WordPress dashicons și selecta pictograma pe care doriți să o afișați pe site-ul dvs. Faceți clic pe linkul Copiați HTML și inserați acel cod oriunde pe site-ul dvs. unde doriți să afișați pictograma.
|
1 |
< span class = "dashicons dashicons-menu-alt3" > < / span > |
Să luăm acest cod ca exemplu și să vedem cum funcționează. Deschideți orice postare, să spunem o postare de testare în care am lipit codul HTML pe care l-am copiat mai devreme din pagina cu pictograme liniuță.
Acum, când faceți clic pe butonul de previzualizare, veți putea vedea pictograma așa cum se arată în imaginea de mai jos:
Adăugarea fonturilor pentru pictograme WordPress utilizând creatorii de pagini WordPress
Majoritatea pluginurilor pentru crearea de pagini WordPress vin cu fonturi de pictograme wordpress integrate. Cu ajutorul acestuia, puteți utiliza cu ușurință pictogramele pe site-ul dvs.
Elementor
Unul dintre cei mai populari și utilizati creatori de pagini. Cu Elementor aveți o mulțime de opțiuni de personalizare și oferă, de asemenea, o gamă largă de fonturi de pictograme pentru site-ul dvs. web.
Funcția sa de glisare și plasare este atât de utilă încât puteți trage cu ușurință orice pictogramă din listă și o puteți plasa direct în zonele dorite ale site-ului dvs. Nu este nevoie să adăugați fragmente de cod sau CSS necesar pentru personalizare.
În plus, există și alți constructori populari pe care îi puteți folosi, cum ar fi Oxygen sau Beaver Builder , care are o facilitate de pictograme încorporată.
Adăugarea manuală a fonturilor pentru pictograme WordPress folosind fragmente de cod
Metoda manuală nu este destinată începătorilor sau celor care nu ar dori să urmeze calea tehnică sau lungă pentru a adăuga fonturi de pictograme wordpress pe site-ul lor. Această metodă este foarte eficientă pentru dezvoltatori sau web designeri, deoarece oferă multă flexibilitate și opțiuni de personalizare pe care nu le veți găsi în niciun plugin.
Să explorăm toate metodele manuale disponibile.
1. Încorporați coduri de pictograme care preiau biblioteca de pictograme de pe serverele lor Cdn
Una dintre cele mai simple metode manuale de a încorpora pictograme pe site-ul tău wordpress. Tot ce trebuie să faceți este să accesați site-ul web Font Awesome și să furnizați adresa dvs. de e-mail pentru a obține un cod de încorporare.
Verificați caseta de e-mail, veți găsi un fragment de cod care a fost trimis de Font awesome. Copiați acel cod și mutați-l în tabloul de bord WordPress > Editor de teme și inserați-l chiar înainte de eticheta </head> a fișierului header.php al temei dvs. WordPress.
Indiferent de codul încorporat furnizat de font awesome, acesta va prelua direct biblioteca de pe serverele CDN Font Awesome.
Notă: Fără îndoială, această metodă pare foarte ușoară, dar are și unele preocupări cu privire la compatibilitatea cu alte plugin-uri care ar putea declanșa unele probleme.
Deci, pentru a evita acest conflict, ar fi mai bine să încărcați javascript-ul corect în WordPress. Puteți utiliza metoda încorporată de coadă pentru asta.
Tot ce trebuie să faceți este să adăugați următoarele în fișierul function.php al temei sau puteți utiliza pluginul codesnippet .
|
1 2 3 4 5 6 7 |
function wpb_load_fa ( ) { wp_enqueue_script ( 'wpb-fa' , 'https://use.fontawesome.com/123456abc.js' , array ( ) , '1.0.0' , true ) ; } add_action ( 'wp_enqueue_scripts' , 'wpb_load_fa' ) ; |
2. Găzduiește direct pictograme pe site-ul tău web
Această metodă este destul de lungă decât toate metodele menționate mai sus și a necesitat anumite cunoștințe tehnice despre gestionarea fișierelor WordPress.
Prin urmare, această metodă este foarte recomandată doar dezvoltatorilor web sau designerilor web care cunosc toate riscurile implicate în timpul accesării și editării fișierelor. În această metodă, veți putea găzdui pictogramele Font Awesome direct pe site-ul dvs. web.
Tot ce trebuie să faceți este să vizitați site-ul web Font Awesome și să descărcați pachetul de pictograme așa cum se arată în imaginea de mai jos:
După descărcare, dezarhivați pachetul și conectați-vă găzduirea WordPress prin clientul FTP (File Zilla). Acum căutați directorul de teme WordPress, creați un folder nou și denumiți-l după cum doriți.
Acum, următorul lucru pe care trebuie să-l faceți este să încărcați conținutul pachetului de pictograme Font Awesome descărcat în noul folder pe care l-ați creat pe serverul dvs. de găzduire web . Acum salvați modificările pe care le-ați făcut și ați terminat.
Acum, pentru a finaliza procesul, ultimul lucru pe care trebuie să-l faceți este să adăugați un cod simplu (dat mai jos) în fișierul function.php al temei sau în pluginul de fragment de cod pe care l-ați instalat.
|
1 2 3 4 5 6 7 |
function wpb_load_fa ( ) { wp_enqueue_style ( 'wpb-fa' , get_stylesheet_directory_uri ( ) . '/fonts/css/font-awesome.min.css' ) ; } add_action ( 'wp_enqueue_scripts' , 'wpb_load_fa' ) ; |
În acest moment, ați reușit să găzduiți fontul minunat pe site-ul dvs. web.
Pictogramele WordPress și efectul lor asupra performanței site-ului web
Deși, indiferent de metodele pe care le-am menționat mai sus, nu este nimic greșit sau corect să le urmați pentru adăugarea pictogramelor pe site-ul dvs. Dar singura preocupare se află aici este efectul său asupra performanței site-ului dvs. Să aflăm cum.
De ce ai nevoie de toate dacă nu le vei folosi pe toate?
Apare prima și principala întrebare, de ce trebuie să le încărcați pe toate în timp ce aveți nevoie doar de o mână de ele. De ce să irosești resursele dacă nu le vei folosi în scurt timp.
De exemplu, dacă fie găzduiți pictograme pe site-ul dvs. web, fie utilizați pluginuri pentru a încorpora pictograme în site-ul dvs., acestea vor încărca mai întâi întreaga bibliotecă și ce se întâmplă dacă vi se cere să utilizați doar 10 sau 15 dintre ele.
Aceasta este o risipă totală de resurse și o metodă ineficientă de urmat. Ce se întâmplă dacă le poți gestiona cu ușurință eficient.
Pentru a înțelege mai bine acest lucru, să luăm în considerare un exemplu:
Să presupunem că ați găzduit o bibliotecă minunată de fonturi pe site-ul dvs. web, dimensiunea fișierului cu fonturi în sine este de aproximativ 388 kb. Acest lucru poate să nu pară prea mare, dar atunci când alegeți sau alegeți fonturile pe care le veți utiliza, puteți reduce dimensiunea fișierului în mod remarcabil.
Creșteți performanța încărcând fonturi dintr-un singur CDn
Deși nu este nimic greșit să încărcați fonturi din mai multe CDN-uri, dacă aveți opțiunea de a alege unul singur, atunci de ce să alegeți diferitele CDN-uri. Un singur CDN este mult mai eficient și mai rapid decât în comparație cu diferite CDN-uri.
Motivul principal din spatele acestui lucru este că un singur CDN reduce numărul suplimentar de căutări DNS și are avantajul de a utiliza o singură conexiune HTTP/2 . Dar, într-o notă suplimentară, unicul tău CDN trebuie să fie unul puternic și eficient.
rezumat
Acesta este totul despre pictogramele WordPress și, la sfârșitul acestei postări, Acum puteți încorpora fonturi de pictograme WordPress pe site-ul dvs. web. Trebuie doar să alegeți cea mai bună metodă potrivită, care este confortabil de urmat și să vă faceți treaba fără nicio problemă.
Luând în considerare performanța site-ului web, puteți urma sfaturile noastre și puteți face tot ce este necesar pentru a obține cele mai bune rezultate. În plus, dacă urmați o metodă diferită de a adăuga pictograme WordPress pe site-ul dvs. pe care nu am putut să le menționăm în această postare. Vă rugăm să ne spuneți în secțiunea de comentarii de mai jos și să ne împărtășiți punctele dumneavoastră valoroase.
întrebări frecvente
Ce este o pictogramă de site în WordPress?
Pictograma site-ului este cunoscută în mod popular ca favicons (pictograme favorite) care are o dimensiune foarte mică care afișează identitatea mărcii. Aceste pictograme sunt de obicei afișate pe marcajele site-ului web, în bara de adrese sau pe platformele de social media. Aceste pictograme ajută la construirea recunoașterii mărcii și ajută la identificarea cu ușurință.
Unde găsesc pictograme în WordPress?
WordPress oferă, de asemenea, fonturile sale de pictograme, cunoscute în mod popular sub numele de Dashicons. Aceste fonturi de pictograme sunt disponibile implicit, WordPress le folosește în backend. Dar pentru a-l aduce pe front-end trebuie să aveți numele scriptului care este deja disponibil într-un fișier WordPress.
Cum obțin pictograme WordPress gratuite?
Există mai multe site-uri web disponibile de unde puteți obține cu ușurință o mulțime de pictograme WordPress gratuite. Iată lista,
1. Font Awesome
2. IcoMoon
3. Dashicons WordPress
4. Pictograme materiale de la Google