Share
Sunt sigur că mulți dintre voi care creați teme WordPress au avut nevoie de icoane. Icoanele reprezintă o modalitate excelentă de a adăuga vizual semnificație unui buton sau post asociat unor etichete sau permalinks. Un font de pictograme este o modalitate excelentă de a adăuga cu ușurință o pictogramă setată pe tema dvs., în loc de a avea nevoie să creați-o singură.
Există destul de multe fonturi mari de icoane acolo. Dacă utilizați Bootstrap pentru tema dvs., acesta are fontul pictogramei Glyphicons încorporat. Pentru acest post, mă voi concentra pe una dintre cele mai populare: Font Awesome.
Sigur, există și alte modalități de a adăuga pictograme la tema dvs., dar vreau să vorbesc despre unele dintre avantajele utilizării unui font de pictograme în loc de imagini, sprites etc..
Primul beneficiu (și cel mai bun) este că este un font. Aceasta înseamnă că beneficiați de toate avantajele stilului pe care le obțineți cu textul obișnuit. Puteți schimba cu ușurință culoarea și dimensiunea unei pictograme cu un mic CSS. De asemenea, acesta va fi la fel de clar ca dispozitivul dvs. va permite. Adică, nu este nevoie să vă faceți griji cu privire la crearea graficii grafice pe retină.
Deoarece toate pictogramele sunt incluse într-un singur fișier de font, înseamnă că este o singură cerere HTTP de încărcat. Acest lucru vă poate oferi într-adevăr un pic de performanță de încărcare a paginii dacă utilizați o serie de pictograme. Puteți include și CSS-ul necesar pentru a face icoanele cu celelalte .css fișierele pe care le încărcați pentru tema dvs..
Există o serie de moduri de a adăuga Font Awesome la tema dvs. Ei au documentat câteva căi diferite despre cum să adăugați pe site-ul dvs. pe pagina lor de început.
Probabil cel mai simplu mod de a adăuga fontul Awesome la tema dvs. este să utilizați BootstrapCDN. Tot ce trebuie să faceți este să adăugați următoarele în tema ta header.php fişier:
Sau, mai bine, utilizați wp_enqueue_style funcţie.
Un alt mod de a adăuga la tema dvs. ar fi să trageți în jos proiectul Font Awesome GitHub și să-l adăugați la rădăcina temei. Va trebui apoi să introduceți fonturile folosind wp_enqueue_style funcţie.
Un mod avansat este de a utiliza Sass sau mai puțin, în funcție de ce utilizați în proiectul temei. Ați dori să adăugați font-minunat folder în rădăcina proiectului dvs., atunci va trebui să efectuați unele modificări.
Deschideți proiectul font-minunat / mai / variables.less sau font-minunat / SCSS / _variables.scss și editați @ Fa-font-path sau $ Fa-font-cale variabilă pentru a direcționa spre directorul de fonturi astfel:
$ fa-font-path: "fonturi";
Va trebui să recompilați preprocesorul CSS al proiectului dvs. de alegere pentru a ridica modificările.
Dacă sunteți familiarizați cu utilizarea Bower, există încă un alt mod avansat. Ați folosi fișierele din bower_components / font-minunat folder în timpul sarcinilor dvs. de construire, în loc să le adăugați la proiectul dvs..
Va trebui să instalați Font Awesome rulând bower instalare font-minunat - salvați și asta l-ar adăuga la proiectul tău bower.json fişier. Apoi, ar trebui să aveți fișierele temei Sass sau LESS îndreptate către fișierele corespunzătoare pentru a vă construi .css fişier. De asemenea, ați putea dori să utilizați sarcina grunt-contrib-copy pentru a copia fonturile în folderul dvs. propriu în proiect.
Puteți vedea cum să faceți acest lucru în exemplul meu de proiect.
După ce ați primit Font Awesome adăugat la tema dvs., puteți începe să le utilizați în tema dvs. Fiecare temă este evident diferită, dar voi prezenta câteva exemple de lucruri care ar putea fi relativ universale pentru majoritatea temelor.
Font Awesome vine cu o serie de iconițe populare de rețea socială și de brand. De cele mai multe ori, o pictogramă socială este o legătură, astfel încât putem adăuga clasa de pictograme la eticheta de ancorare ca atare,
Puteți vedea un exemplu de adăugare a mai multor icoane în footer.php fișier în exemplul meu de proiect aici.
Un alt loc minunat de a folosi icoanele este în meta-datele postărilor pe care le-am menționat anterior. Cele trei pe care le-am adăugat în proiectul de exemplu sunt link-ul de comentarii, etichetele și permalink-ul.
Iată câteva exemple pentru fiecare:
Adăugați noi "," standard "), __ (" 1 "," standard "), __ (" % "," standard "),", "); ?>
Accentsconagua
". __ ('% 1 $ s', 'tuts-font-awesome'). '', $ tag_list); ?> „>
Puteți vedea toate aceste exemple în exemplul proiectului meu loop.php fișier aici.
Ultimul exemplu este link-urile post paginare. Îmi place să adaug chevronuri în fața "Mai vechi" și înainte de "Newer". Dacă utilizați next_posts_link și previous_post_links în proiectul dvs., veți dori să adăugați un interval cu clasa potrivită cum ar fi:
Mai vechi "," tuts-font-awesome ")); ?>',' tuts-font-awesome ')); ?>Puteți vedea toate aceste exemple în exemplul proiectului meu pagination.php fișier aici.
Ar trebui să aveți acum totul pentru a începe cu Font Awesome în tema WordPress. Am dat câteva exemple în care m-am trezit frecvent folosind icoane. Există mult mai minunat pentru Font Awesome pe care îl puteți încerca, cum ar fi stivuirea, rotirea și animațiile. Aș sugera să aruncați o privire la pagina de exemple de tip Awesome Font pentru toate minunatele lucruri suplimentare.
