Share
Permiterea unui utilizator final de a schimba fontul temei dvs. poate fi o sarcină intimidantă, mai ales atunci când doriți să furnizați această opțiune într-un panou de administrare particularizat, un metabox sau chiar personalizatorul temelor. Astăzi, voi discuta cum să adăugați un obicei font tip prin intermediul platformei Titan.
font tip este una dintre cele mai versatile opțiuni din punct de vedere al funcționalității în cadrul Titan. Acesta nu numai că vă permite să schimbați fontul, dar este și unul plin selector stil de stil. Cu o gamă completă de opțiuni bogate în funcționalitate, aveți posibilitatea să alegeți atât fonturi sigură pentru web, cât și Google WebFonts în interiorul acesteia. Aplicați cât mai multe stiluri doriți, de ex. culori, spațierea literelor, umbre, înălțimea liniei etc. Utilizatorul final poate, de asemenea, să privească previzualizarea modului în care arată fontul și stilurile acestuia. Iată cum arată această opțiune:
Puteți vedea în imaginea de mai sus cât de detaliate sunt setările pentru fonturi. Acest lucru este posibil printr-o mulțime de parametri de setare pe care această opțiune le suportă. Există câțiva parametri obligatorii și opționali. În primul rând, să aruncăm o privire asupra celor obligatorii:
Accentsconagua
font tip opțiune.Acum, câțiva dintre parametrii opționali pe care trebuie să-i folosiți sunt:
font tip, acest parametru se comportă oarecum diferit. Este nevoie de o matrice care conține câteva fonturi și stiluri implicite pe care doriți să le utilizați (mai multe despre acestea mai târziu).În cele din urmă, există o listă lungă de anumiți parametri de verificare, ale căror valori implicite sunt setate la Adevărat. Să le numim și să aflăm cum se vor comporta dacă sunt setați fals.
fals.fals.fals.fals.fals.fals.fals.fals.fals.fals.fals.fals.fals atunci fontul Google (dacă este folosit) nu va fi introdus în mod automat.Puteți adăuga font optiune tip interior:
Domeniul de aplicare al acestui articol nu se referă la crearea acestor containere. Puteți să vă referiți la articolele anterioare, dacă doriți să aflați mai multe despre asta.
Procesul general de adăugare a acestui tip de opțiune rămâne același:
getInstance () funcţie.createOption () funcţie.getOption () funcţie. Să creăm această opțiune în interiorul unui panou de administrare.
Iată codul:
createOption (array ('id' => 'aa_font', // ID-ul care va fi folosit pentru a obtine valoarea acestei optiuni 'type' => 'font', // Tipul optiunii cream 'name' => "Opțiunea mea de font", // Numele opțiunii care va fi afișată în panoul de administrare "desc" => "Alegeți setările pentru fonturi" // Descrierea opțiunii care va fi afișată în panoul de administrare); Am folosit-o createOption () (linia # 7) pentru a adăuga o font tastați opțiunea dintr-un panou de administrare $ aa_panel. Această funcție ocupă o serie de parametri. De aceea, parametrii cum ar fi nume, id, tip și desc sunt folosite aici. Valoarea ID (adică. aa_font) ar trebui să fie unic, deoarece devine valorile opțiunilor salvate.
În captura de ecran de mai sus, există o font introduceți opțiunea de tip Opțiunea pentru fonturi în interiorul unui panou de administrare Neat Opțiuni. Există mai multe opțiuni de setare care pot fi configurate pentru a configura setările de fonturi ale proiectului dvs. de dezvoltare web.
Acum voi recupera valorile opțiunilor salvate.
getOption ('aa_font'); / ** * * Imprimarea valorilor matricei fontului * * / var_dump ($ aa_font_array); ?>Procesul de obținere a valorilor salvate este aproape același cu cel discutat în articolele anterioare. În linia # 3, getInstance () , care utilizează un parametru unic, preferabil numele temei (de ex. curatîn acest caz). Apoi, am folosit getOption () (linia # 6), care primește valoarea prin ID aa_font, și apoi l-am salvat într-o nouă variabilă $ aa_font_array.
Anterior, am stabilit că font tip optează pentru o serie de setări de parametri chiar dacă nu le definim în realitate deoarece valoarea lor implicită este setată la Adevărat. Deci, înainte de a afișa valorile preluate de la front-end, permiteți-mi să tipăresc această gamă completă de parametri.
Pentru asta am folosit-o var_dump () (la linia # 16) pentru variabila $ aa_font_array. Hai să aflăm cum se tipărește această matrice:
În captura de ecran de mai sus, este prezentată o descriere detaliată a fiecărui element al unui matrice. Explică în mod clar modul în care font opțiunea de tip în Titan Framework este setată.
Acum, această parte a fost doar un lucru suplimentar - obiectivul nostru principal este să modificăm setările prestabilite pentru fonturi și să le tipărim la front-end.
Înlocuiți linia # 16 cu următoarele rânduri de cod:
Pellentesque habitant morbi tristique.
În linia # 7, am folosit stilul CSS inline în interiorul unei etichete H3 (titlu 3). Valoarea corespunzătoare stil atribut,adică. marimea fontului, se imprimă la front-end.
În acest scop, am încorporat ecou care imprimă numai o anumită parte a matricei, adică. echo $ aa_font_array ['font_size'], în CSS inline. În acest stadiu, front-end-ul apare astfel:
Textul imprimat este în prezent 14px in marime. Să schimbăm această valoare din tabloul de bord și să examinăm rezultatul.
Să presupunem că am setat valoarea demo la 30px.
Salvați această setare și aflați modificările. Iată captura de ecran:
O creștere marimea fontului din text este văzută clar. În acest fel, puteți introduce orice element de matrice în linia # 16 a codului și previzualiza rezultatele.
Să creăm a font tip într-un metabox care are toate câmpurile de stil în ea.
createOption (array ('id' => 'aa_mb_font', // Codul care va fi folosit pentru a obține valoarea acestei opțiuni 'type' => 'font', // Tipul de opțiune pe care o creați ' "Opțiunea pentru fonturi", // Numele opțiunii care va fi afișată 'desc' => 'Alegeți setările pentru fonturi' // Descrierea opțiunii care va fi afișată);Am adăugat a font introduceți opțiunea cu ID aa_mb_font într-un metabox $ aa_metbox prin createOption () (linia # 8). Apare împotriva numelui "Opțiunea pentru fonturi'.
Aici este captura de ecran, unde puteți găsi Opțiunea pentru fonturi în interiorul unui metabox afișat la sfârșitul ecranului de editare a paginii.
Acesta este un metabox personalizat pe care l-am creat cu Titan Framework. Consultați articolele anterioare pentru a afla cum.
Acum voi recupera valorile opțiunilor salvate.
getOption ('aa_mb_font', get_the_ID ()); // Verificați dacă valoarea a fost setată / Validare $ aa_mb_font1_val = (este_array ($ aa_mb_font1_array) &&! Gol ($ aa_mb_font1_array)? TRUE: FALSE); ////////////////////////////////////////////////// /////////// Obțineți toate valorile de care aveți nevoie Abstracție de PHP și HTML // //////////////////////// ////////////&&**////////&&?&======================================================================================= TRUE? $ Aa_mb_font1_array ['culoare']: 'roșu'); // Obține valoarea font-familie $ aa_mb_font1_ffm_val = ($ aa_mb_font1_val == TRUE? $ Aa_mb_font1_array ['font-family']: 'Arial'); // A lua valoarea font-size $ aa_mb_font1_fsz_val = ($ aa_mb_font1_val == TRUE? $ Aa_mb_font1_array ['font-size']: '14px'); / ** * * Imprimați valori la front-end * * /?> Valoarea tipărită a opțiunii de tip font în metabox. Procesul de a obține valorile pe care le folosesc aici este oarecum complex. Mai întâi obțineți o instanță unică prin getInstance () funcție în linia # 3. Apoi, extrageți valoarea salvată prin înregistrarea ID-ului aa_mb_font în interiorul getOption () funcție ca parametru (linia # 11).
Acum, aa_mb_font nu este un ID obișnuit - în schimb, acesta deține o matrice asociativă completă a opțiunilor noastre de fonturi. Am salvat această matrice asociativă într-o nouă variabilă $ aa_mb_font1_array.
Linia # 14 validează prezența unei matrice în interiorul variabilei $ aa_mb_font1_array și verifică dacă nu este gol. Acest pas este important pentru că nu vrem să ajungem la erori fatale ale PHP prin afișarea unui element dintr-o variabilă care nu este chiar o matrice în primul rând.
Uneori, când utilizatorul nu a salvat nicio valoare din tabloul de bord și nu ați setat niciun set de valori implicite, getOption funcția devine NUL. În acest scop, se utilizează o declarație bazată pe verificare. Dacă este o matrice și nu este goală, atunci ea pune a ADEVĂRAT valoare, sau altfel dacă nu este o matrice și este goală atunci se stabilește FALS ca valoare a $ aa_mb_font1_val.
Dacă ADEVĂRAT, atunci înseamnă:
$ aa_mb_font1_array este o matrice.$ aa_mb_font1_array nu este o matrice goală, ci are elemente în ea. Dacă FALS, atunci înseamnă:
$ aa_mb_font1_array nu este matrice sau $ aa_mb_font1_array este o matrice goală și nu are elemente în ea. Aceasta a fost o validare generală a matricei de fonturi. Acum voi extinde acest proces la elemente individuale de matrice. Liniile # 21 la # 27 obțin valorile cheilor individuale din matricea asociativă și definesc o valoare implicită dacă nu există nicio valoare.
De exemplu, linia # 21 explică faptul că, dacă se menține starea definită ADEVĂRAT, ceea ce înseamnă că există o valoare, apoi preluați culoare dintr-o matrice și salvați-o într-o variabilă $ aa_mb_font1_clr_val. Dacă nu există o astfel de valoare, setați valoarea la roșu, care este implicit în acest caz. Există o serie de modalități de a aborda acest lucru, deci este doar una dintre căile pe care le-am plăcut.
Pe scurt, dacă un utilizator a salvat orice culoare de fontă nouă din tabloul de bord, atunci apare culoarea de font selectată; in caz contrar roșueste arătat. Aș recomanda să setați opțiunile implicite în timp ce setați fontul pentru a evita astfel de probleme.
Aceeași explicație se aplică liniilor # 24 și # 27, cu excepția faptului că aceste linii validează valori pentru familie de fonturi și marimea fontului.
În cele din urmă, tocmai am scris codul care imprimă rezultatul la front-end. În liniile # 38 până la # 48, este creată div în HTML. Apoi am reluat valorile tuturor variabilelor dorite prin stilul CSS inline.
Să presupunem că am setat următoarele setări pentru fonturile demo:
Acesta este modul în care apare la front-end:
Puteți încerca acum câteva setări noi.
Să creați această opțiune într-o filă admin, dar cu o abordare diferită.
createOption (array ('id' => 'aa_font_in_tab1_panel2', // Codul care va fi folosit pentru a obține valoarea acestei opțiuni 'type' => 'font', // Tipul de opțiune pe care o creați ' "Opțiunea pentru fonturi", // Numele opțiunii care va fi afișată în panoul de administrare 'desc' => 'Alegeți setările de font', // Descrierea opțiunii care va fi afișată în panoul de administrare 'show_font_weight' => false, // Câmpul pentru câmpul de greutate nu este afișat 'show_font_style' => false, // Câmpul fontului nu este afișat 'show_line_height' => false, // Câmpul înălțimii liniei nu este afișat 'show_letter_spacing' => // Nu se afișează câmpul de spațiere 'show_text_transform' => false, // Câmpul de transformare text nu este afișat 'show_font_variant' => false, // Câmpul variantă nu este afișat 'show_text_shadow' => false, // Câmpul de umbră nu este afișat "default" => array ('font-family' => 'Arial', // Valoarea implicită a font-family 'color' => line-height '=>' 2em ', // valoarea implicită a liniei-înălțime' font-w opt '=>' 500 '// Valoarea implicită a greutății fontului))); De data aceasta adaug o font tip, dar permite doar câteva stil a aparea. Identificatorul unic al acestei opțiuni este aa_font_in_tab1_panel2. Uitați-vă la lista de parametri și veți afla ce face acest cod diferit de cel precedent.
Am schimbat-o Mod implicit valori ale mai multor parametri de verificare la fals. Aceasta înseamnă că toate câmpurile de stil din linii # 13 până la # 19 nu vor apărea. De asemenea, rețineți prezența Mod implicit valori pentru opțiunile de styling cum ar fi font-family, color, line-height și grosimea fontului.
A font introduceți opțiunea de tip Opțiunea pentru fonturi există în Tab. 1 din panoul de administrare Opțiuni neat 2. Dacă doriți să aflați cum a fost realizată această filă de admin prin intermediul platformei Titan, treceți prin articolele anterioare din această serie.
În captura de ecran de mai sus, meniul de fonturi apare mai puțin detaliat în ceea ce privește câmpurile de styling. Motivul este destul de evident, și anume fals starea unui număr de parametri din codul meu. Observați un alt lucru: valorile implicite ale opțiunilor sunt setate automat, adică. 'font-family' => 'Arial' și culoare => 'roșu'.
Am ignorat orice detaliu? Da! Sunt sigur că trebuie să te întrebi unde sunt valori implicite inaltimea liniei și grosimea fontului a mers. Uitați-vă din nou la lista de parametri și veți găsi valorile show_line_height și show_font_weight sunt setate la fals.
Aceasta înseamnă că, indiferent de capacitatea pe care o definiți un parametru, acesta va funcționa numai odată setat Adevărat. Singurul scop de a adăuga acești doi parametri a fost acela de a explica acest concept. Deocamdată, puteți omite și acestea.
Să obținem valorile opțiunilor salvate:
getOption ('aa_font_in_tab1_panel2'); // Verificați dacă valoarea a fost setată / Validare $ aa_font2_val = (is_array ($ aa_font2_array) ||! Empty ($ aa_font2_array)? TRUE: FALSE); ////////////////////////////////////////////////// /////////// // Obține toate valorile de care aveți nevoie Abstractizarea de PHP și HTML // //////////////////////// ///////////////////////////////////// // Obține culoare valoare $ aa_font2_clr_val = ($ aa_font2_val == TRUE? $ Aa_font2_array ['culoare']: 'roșu'); // A lua valoarea familiei fontului $ aa_font2_ffm_val = ($ aa_font2_val == TRUE? $ Aa_font2_array ['font-family']: 'Arial'); // Valoarea dimensiunii fontului $ aa_font2_fsz_val = ($ aa_font2_val == TRUE? $ Aa_font2_array ['font-size']: '14px'); / ** * * Imprimați valori la front-end * * /?> Valoarea tipărită a opțiunii tip font în fila. Liniile scrise pentru a prelua valorile opțiunilor salvate sunt aproape aceleași pe care le-am scris anterior pentru un metabox. Numai numele și ID-urile variabilelor sunt diferite. Deci, rezumăm doar pașii de mai sus:
În acest stadiu, dacă previzualizăm front-end-ul, acesta va afișa numai setările implicite, cum ar fi:
Să presupunem că acestea sunt setările noilor fonturi:
Iată captura de ecran a acestei noi configurații:
Diferența dintre cele două setări este destul de evidentă.
În final, să creăm această opțiune în cadrul personalizatorului.
createOption (array ('id' => 'aa_sec_font', // ID-ul care va fi folosit pentru a obține valoarea acestei opțiuni 'type' => 'font', // Tipul de opțiune pe care o creați ' „opţiunea mea Font“, // Numele opțiunii care va fi afișat „desc“ => „Alegeți setările pentru font“ // Descrierea opțiunii care va fi afișat));A font introduceți opțiunea cu ID aa_sec_font există în interiorul unei secțiuni de personalizare a temelor $ aa_section1. Apare cu numele "Opțiunea pentru fonturi“. Restul parametrilor sunt aceiași.
Puteți găsi această opțiune în secțiunea de personalizare a temelor numită Secțiunea mea.
Să obținem valorile salvate.
getOption ('aa_sec_font'); // Verificați dacă valoarea a fost setată / Validare $ aa_sec_font3_val = (este_array ($ aa_sec_font3_array) ||! Goală ($ aa_sec_font3_array)? TRUE: FALSE); ////////////////////////////////////////////////// /////////// // Obține toate valorile de care aveți nevoie Abstractizarea de PHP și HTML // //////////////////////// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////A TRUE? $ Aa_sec_font3_array ['culoare']: 'roșu'); // Obține valoarea familiei fontului $ aa_sec_font3_ffm_val = ($ aa_sec_font3_val == TRUE? $ Aa_sec_font3_array ['font-family']: 'Arial'); // Valoarea dimensiunii fontului $ aa_sec_font3_fsz_val = ($ aa_sec_font3_val == TRUE? $ Aa_sec_font3_array ['font-size']: '14px'); / ** * * Imprimați valori la front-end * * /?> Valoarea tipărită a opțiunii tip font în personalizatorul. Din nou, acest cod este exact același lucru pe care l-am scris în cazul unei fila admin și a unui metabox. Numai numele și ID-urile variabilelor sunt diferite. Deci, consultați detaliile scrise mai sus.
Să aruncăm o privire la previzualizarea live a schimbărilor pe care le-am făcut.
În discuția noastră despre font de tip Titan, am aflat că parametrul CSS se comportă într-o oarecare măsură în comparație cu alte opțiuni. Astăzi, în acest articol, vă voi arăta cum puteți genera automagic CSS al opțiunii de tipul de font într-un panou personalizat admin sau chiar într-o secțiune temă de personalizare.
In general vorbind, css este a şir parametru de tip, așa că, dacă îl setați, acesta poate genera automat CSS de fiecare dată când o opțiune Titan cadru este creat în interiorul unui panou de administrare și / sau secțiunea temă de personalizare.
Știm că a font tip în Titan Framework este în esență o matrice asociativă care poarta o gamă de câmpuri de stil, de ex.culoare, familie de fonturi, marimea fontului, etc. De asemenea, se poate întâmpla să folosiți aceleași proprietăți de styling în alt loc în tema sau pluginul dvs. Scriind aceste mai multe opțiuni în css parametru poate fi o sarcină repetitivă și pierdere de timp. Atunci când nu utilizați unele dintre proprietăți, atunci?
Pentru a face lucrurile mai simple, Titan Framework vă permite să atribuiți toate stilurile selectorilor CSS prin fonturi css parametru. Pur și simplu utilizați termenul valoare în interiorul acestui parametru și munca ta este făcută. Permiteți-mi să vă arăt cum:
'h1.site-header valoare'
Deoarece știm că css parametrul generează toate regulile CSS necesare, să discutăm atunci când se află în interiorul următoarelor containere:
Notă: Domeniul de aplicare al acestui articol se referă numai la utilizarea și comportamentul css parametru cu font tip în cadrul Titan. Dacă doriți să aflați cum sunt făcute aceste containere sau cum să adăugați o font tip opțiune din Titan Framework, se referă apoi la articolele mele anterioare.
Să-i scriem codul.
createOption (array ('id' => 'aa_font', // ID-ul care va fi folosit pentru a obtine valoarea acestei optiuni 'type' => 'font', // Tipul optiunii cream 'name' => 'Opțiunea pentru fontul meu', // Numele opțiunii care va fi afișată 'desc' => 'Alegeți setările fontului', // Descrierea opțiunii care va fi afișată 'show_font_style' => false, 'show_letter_spacing' => false, 'show_text_transform' => false, 'show_font_variant' => false, 'show_text_shadow' => false, 'default' => array ('font-family' => ',' line-height '=>' 2em ',' font-weight '=>' 500 '),' css '=>' .aa_site_font1 value '));Acest cod creează o font tastați opțiunea dintr-un panou de administrare $ aa_panel cu câmpuri de stil reduse. ID-ul acestei opțiuni este aa_font. Toți parametrii (linii # 13 - # 17) unde sunt setate valorile fals nu va apărea. De asemenea, am adăugat valori implicite pentru familie de fonturi, culoare, inaltimea liniei și grosimea fontului setări.
Linia # 24 definește a css parametru pentru o clasă numită .aa_site_font1. Rețineți că în cadrul acestei definiții de clasă, am scris doar valoare. Acest lucru înseamnă că toate CSS pe care acest câmp le va genera vor fi plasate acolo valoare este scris. Deci, oriunde se folosește această clasă, se încarcă automat proprietățile CSS.
Imaginea de mai sus prezintă setările curente ale fontului și clarifică faptul că această opțiune este creată în interiorul primului meu panou de administrare, adică. Neat Opțiuni.
Să creați o etichetă div cu aa_site_font1 clasa și a vedea rezultatul la front-end.
Valoarea "css" din fila 2 a tabloului amdin2
Dacă te uiți la codul de mai sus, am oferit css parametru al font câmpul o clasă în care ar trebui să emită rezultatele CSS și acea clasă a fost aa_site_font1. Așa că am mers înainte și am creat un div cu clasă aa_site_font1, pentru a afișa rezultatele la front-end.
În acest stadiu, dacă vă uitați la front-end, acesta va arăta astfel:
Acum, să modificăm setările implicite și să facem acest font mai mare și roșu în culoare.
Noile modificări apar la front-end ca acesta. Amintiți-vă că este doar un div la front-end cu clasa CSS aa_site_font1 în el, pe care am folosit-o înăuntru css parametru.
Acesta este modul în care puteți adăuga a css parametrul din interiorul a font tip opțiune. Titan Framework va genera automat CSS-ul în tema sa.
Uită-te la codul său.
createOption (array ('id' => 'aa_sec_font', // ID-ul care va fi folosit pentru a obține valoarea acestei opțiuni 'type' => 'font', // Tipul de opțiune pe care o creați ' "Opțiunea mea de font", // Numele opțiunii care va fi afișată 'desc' => 'Alegeți setările fontului', // Descrierea opțiunii care va fi afișată 'css' => '.aa_site_font2 value' ));De data aceasta, am adăugat css parametru cu clasa .aa_site_font2. Este definit în interiorul a font tip care are toate câmpurile de stil din interiorul acesteia.
Imaginea de mai sus arată această opțiune într-o secțiune de personalizare a temelor $ aa_section1. De asemenea, uitați-vă la setările care sunt setate în prezent.
Încă o dată, voi arăta folosirea proprietăților de stil ale clasei aa_site_font2 în alt loc, de ex. într-un metabox care apare pe toate ecranele de editare a posturilor și a paginilor.
Valoarea "css" într-un metabox
Din nou, am un div cu clasa aa_site_font2. Există un text fals în interiorul acestuia, dar ignorați textul și uitați-vă la modul în care se obține automat stilul.
Să setăm setările pentru fonturile demo din secțiunea personalizată pentru temă, astfel:
Iata cum se uita la front-end:
E vorba de folosirea lui font opțiunea de tip cu Titan Framework. Am explicat în detaliu aproape fiecare aspect al acestei opțiuni.
Titan Fra
