WordPress continuu se dovedește a fi timpul, timpul și, din nou, că are foarte puține limitări și se împinge rapid la ființă, dacă nu la cel mai bun, dar cu siguranță cel mai versatil CMS disponibil. Din cutie nu este cu siguranță perfectă, dar poți schimba oricum vrei. În tutorialul anterior, ne-am referit la modul de adăugare a fonturilor în tema dvs. prin intermediul unui plugin. Acum, vom integra opțiunile de fonturi direct în opțiunile temei.
Din nou, vom folosi Fonturile Google Web pentru că este ușor, rapid și, cel mai important, gratuit. Cu Fonturile Google Web nu este nevoie să vă faceți griji cu privire la utilizarea formatelor de fonturi adecvate, totul este gestionat de Google.
Pasul 1 Adăugați o pagină de setări
Mai întâi, asigurați-vă că aveți o pagină cu opțiuni tematice. Dacă nu știți cum să faceți una, vă sugerăm să citiți Creează o pagină de setări de Jarkko Laine. În acest tutorial, voi presupune că știți elementele de bază și construiți de acolo. Deci, hai să intrăm în fișierul functions.php și să adăugăm o pagină simplă de tipografie:
Acum, când am adăugat o pagină de setări, trebuie să codificăm funcția de apel invers utilizată pentru a reda pagina în sine, ceea ce ar fi tipografie. Tot ce avem nevoie este o formă de bază care arată o listă a tuturor fonturilor pe care le pot alege utilizatorii și le permite să le schimbe.
funcții () ?>
Fonturi
Bine, am adăugat formularul nostru de fonturi pe pagină, doar câteva elemente de bază settings_fields, dar WordPress nu are nicio idee. Acum folosim admin_init acțiune pentru inițializarea setărilor noastre și adăugarea apelurilor telefonice:
add_action ('admin_init', 'font_init'); funcția font_init () register_setting ('fonts', 'fonts'); // Câmpurile și secțiunile de setări add_settings_section ('font_section', 'Tipography Options', 'font_description', 'fonts'); add_settings_field ('body-font', 'Body Font', 'body_font_field', 'fonturi', 'font_section');
Tot ceea ce facem aici este crearea unei secțiuni de setări pentru formularele noastre de fonturi și câmpul pentru un singur font, puteți adăuga mai multe dacă doriți, în acest tutorial merg doar peste eticheta corporală. Doar adaugati mai mult copiind acel camp si inlocuiti corpul cu altceva ca h1. De asemenea, avem acum o setare numită fonturi, unde vom stoca datele / opțiunile de fonturi. Să mergem mai departe și să definim funcțiile de apel invers, font_description și body_font_field.
function font_description () echo 'Foloseste formularul de mai jos pentru a schimba fonturile temei tale.'; funcția body_font_field () $ options = (array) get_option ('fonturi'); $ fonts = get_fonts (); dacă (isset ($ opțiuni ['body-font'])) $ curent = $ opțiuni ['body-font']; altfel $ current = 'arial'; ?>
Trebuie să obținem opțiunile pentru fonturi pe care tocmai le-am făcut în acțiunea inițială și fonturile pe care le avem la dispoziție, get_fonts (). Setați fontul curent în formular la orice este în opțiuni, altfel va fi implicit la Arial. Apoi, utilizați o buclă de foreach pentru a trece prin seria noastră de fonturi disponibile. De asemenea, puteți adăuga o descriere sau o puteți face un scurt tutorial despre cum să îl utilizați.
Pasul 3 Obținerea fonturilor
Așa cum ați observat în fragmentul precedent de cod, trebuie să definim get_fonts () pentru a prelua fonturile de care avem nevoie. Aveți posibilitatea să includeți Google Webfonts sau pur și simplu stick cu fonturile de bază CSS. Vom folosi doar o matrice pentru a stoca toate fonturile, și apoi să le distingem după numele fontului lor. Puteți face acest lucru cu orice fonturi, dar pentru scopurile acestui tutorial, vom folosi doar Arial, Ubuntu și Lobster.
Notă: Nu vă limitați la utilizarea numai Google Webfonts. Dacă doriți să utilizați un font personalizat care este găzduit pe FTP sau pe Amazon S3, înlocuiți-l @import cu @ Font-face și modificați urlul în locul în care este găzduit fișierul dvs. de fonturi.
Pasul 4 Adăugați CSS
Înainte de a aplica oricare dintre fonturi în CSS, ar trebui să eliminați toate instanțele Google Webfonts din fișierele CSS. În acest fel, când efectuăm apelul de import pentru a obține fontul Ubuntu, nu pierdem o extra 100 ms pentru a obține fontul Lobster.
Acum, când avem toate fonturile setate, trebuie să creăm un wp_head acțiune care adaugă stilul la WordPress. Dacă utilizați acest script pentru mai multe etichete, pur și simplu duplicați codul, schimbând "corpul" în oricare dintre etichetele pe care le editați.
Începem prin a verifica dacă un font este ales în opțiunile noastre, dacă nu, apoi setați fontul la valorile implicite, Arial. Acum imprimăm eticheta de stil, instrucțiunea de import și codul nostru CSS.
Ce ai la sfârșit
Acestea ar trebui să fi fost încheiate cu:
Pagina finală cu opțiuni pentru fonturi.
Cod sursă integrală
Pentru cineva care are probleme să pună totul împreună. Aici este codul sursă complet, gata de inserare în fișierul functions.php:
Până acum, ar trebui să știți cum să adăugați o pagină de setări pentru fonturi, să obțineți fonturi din directorul Google Webfonts și să aplicați acele fonturi în temă. Dacă aveți alte sugestii sau întrebări referitoare la tipografia personalizată, nu ezitați să lăsați un comentariu!
Share
Accentsconagua
