Share
În ultimul articol, am definit o metodologie simplă pentru tot ceea ce este necesar pentru a stabili o nouă Secțiune, Setări și Controale în Tema Customizer.
În acest articol, vom continua să facem mai multe din același lucru; cu toate acestea, vom adăuga noi setări și comenzi în secțiunea existentă, dar vom examina o varietate de opțiuni diferite, cum ar fi butoanele radio, casetele de selectare și casetele de introducere.
Deci, cu asta am spus, să continuăm.
Reamintim din ultimul articol că metodologia noastră este după cum urmează:
Accentsconagua
get_theme_mod Vom face acest lucru pentru fiecare nou control de la următoarele setări și comenzi. Atunci când este necesar, vom vorbi despre validarea datelor și de dezintoxicare după cum este necesar.
După ce ajungem la sfârșitul articolului, o versiune a codului acestui articol va fi, de asemenea, disponibilă pentru descărcare de la GitHub.
Să adăugăm o nouă opțiune la Theme Customizer, care permite utilizatorului să aleagă între schemele de culori - una este schema implicită de culoare neagră pe alb, cealaltă va fi invers.
Pentru a face acest lucru, mai întâi trebuie să adăugăm o setare și un control la adresa noastră tcx_register_theme_customizer funcţie. Adăugați următoarele două apeluri pentru funcții:
$ wp_customize-> add_setting ('tcx_color_scheme', array ('default' => 'normal', 'transport' => 'postMessage')); $ wp_customize-> add_control ('tcx_color_scheme', array ('section' => 'tcx_display_options', 'label' => => 'Normal', 'invers' => 'Inverse'))); Observați mai sus că adăugăm o nouă setare identificată de tcx_color_scheme ID și, evident, folosim postMessage tip de transport.
În al doilea rând, observați că am oferit și o Mod implicit valoare setată la normal. Această valoare este ceea ce ne aduce la add_control apel.
Observați că le obligăm tcx_display_options pe care am definit-o în ultimul articol. I-am dat eticheta Schema de culori din moment ce, evident, ceea ce facem noi este schimbarea, iar noi o facem tip de control ca a radio buton.
Pentru a face acest lucru, trebuie să trecem o serie de opțiuni în care prima cheie este valoarea opțiunii, iar a doua valoare este eticheta pentru butonul radio.
Acest este de ce valoarea implicită pentru add_setting apelul este setat la normal.
Acum, ar trebui să ne putem salva munca, să reîmprospătăm Theme Customizer și apoi să vedem noua opțiune.
Dar, în acest moment, tot nu va face prea mult.
Acum, trebuie să intrăm js / tema-customizer.js și adăugați următorul bloc de cod:
wp.customize ('tcx_color_scheme', funcția (valoare) value.bind (funcția (la)) if ('inverse' === to) $ (' culoare: '#fff'); altceva $ ('body') .css (background: '#fff', culoare: '# 000');); Aceasta instruiește Theme Customizer pentru a schimba corpculoarea de fundal și culoarea fontului în funcție de setarea butoanelor radio.
Prin implementarea acestui cod, ar trebui să puteți reîmprospăta Theme Customizer și apoi să vedeți schimbările apărute. Chestia este că valorile nu sunt de fapt salvate în baza de date.
get_theme_mod Ultimul lucru pe care trebuie să-l implementăm pentru a ne asigura că datele sunt citite din baza de date pentru a schimba schema de culori adaugă un stil stil bloc în tcx_customizer_css funcţie:
fundal: # 000; culoare: #fff; fundal: #fff; culoare: # 000;
Destul de ușor de înțeles, nu? Funcționează exact în același mod ca și codul nostru JavaScript, cu excepția faptului că se aplică de fapt temei atunci când se încarcă pagina, mai degrabă decât doar atunci când este examinată.
Acum, vom continua procesul prin introducerea unei alte setări și a unui alt control folosind metodologia noastră, astfel încât utilizatorii noștri să poată selecta un font global pentru tema lor.
Pentru a face acest lucru, vom folosi a Selectați element cu un set de opțiuni de la care utilizatorul poate alege frontul dorit.
În acest moment, metodologia ar trebui să devină foarte familiarizată.
În primul rând, vom defini o setare pentru tcx_font pe care o vom folosi pentru a face referire în tot codul un pic mai târziu:
$ wp_customize-> add_setting ('tcx_font', array ('default' => 'ori', 'transport' => 'postMessage')); La fel ca în setarea anterioară, ni se oferă Mod implicit valoare pe care o vom defini momentan când vom implementa un nou control.
Așa cum am menționat anterior, vom oferi utilizatorilor posibilitatea de a selecta un font folosind a Selectați element. Acest lucru este foarte similar cu modul în care funcționează butoanele radio prin faptul că vom furniza o matrice cu chei și valori care definesc fontul; cu toate acestea, realitatea tip a elementului va fi diferit.
Deci, cu ceea ce a spus, adăugați următorul cod la tcx_register_theme_customizer funcţie:
$ wp_customize-> add_control ('tcx_font', array ('section' => 'tcx_display_options', 'label' => 'Theme Font', ' => 'Times New Roman', 'arial' => 'Arial', 'curier' => 'Courier New'))); Aceasta va introduce a Selectați element în Tema Customizer cu următoarele trei opțiuni pentru fonturi:
Și acum, trebuie să scriem opțiunile de font pentru a schimba dinamic fontul temei.
Pentru a face acest lucru, deschideți-vă js / tema-customizer.js și apoi adăugați următorul bloc de cod. Rețineți că acest lucru va fi puțin mai complicat decât ceea ce suntem obișnuiți să facem în JavaScript Theme Customizer.
În primul rând, asigurați-vă că aveți var sFont definit în partea de sus a fișierului JavaScript chiar deasupra primului apel către wp.customize.
Apoi, adăugați următorul bloc de cod:
wp.customize ('tcx_font', funcția (valoare) value.bind (funcția (la)) comuta (to.toString () toLowerCase ()) times times: sFont = Times New Roman; 'arial': sFont = 'Arial'; pauză; caz 'curier': sFont = 'Courier New, Courier'; '; pauză; $ (' body ') .css (fontFamily: sFont););); Deși funcția este puțin mai lungă, este de fapt destul de simplă: luăm valoarea primită și apoi folosim a comutator / caz pentru a determina ce font a fost selectat. Pe baza valorii selectate, o atribuim grupului sFont variabil.
Și, pentru scopuri defensive de codificare, dacă nu este definită sau ceva nu merge prost în timpul transportului, atunci vom merge la implicit Times New Roman.
În cele din urmă, aplicați apoi valoarea sFont la familie de fonturi atributul corp element folosind jQuery css funcţie.
get_theme_mod Acum, în conformitate cu metodologia noastră, trebuie să ne actualizăm tcx_customizer_css astfel încât fontul să fie aplicat corect corpului.
Acesta este de fapt un simplu apel:
familie de fonturi:
Terminat.
În cele din urmă, permiteți utilizatorului să ajusteze mesajul privind drepturile de autor care apare în partea de jos a șablonului subsolului.
Să adaptăm șablonul acum. În prezent, ar trebui să arate astfel:
© Toate drepturile rezervate
Dar să o actualizăm pentru a arăta astfel:
©
Deși asta se întâmplă putin înainte de metodologia noastră, este necesar să definim astfel încât Theme Customizer să poată profita de noul deschidere element, astfel încât să putem afișa mesajul privind drepturile de autor definit de utilizator.
În primul rând, vom introduce setarea noastră finală:
$ wp_customize-> add_setting ('tcx_footer_copyright_text', array ('default' => 'Toate drepturile rezervate', 'sanitize_callback' => 'tcx_sanitize_copyright', 'transport' => 'postMessage')); Dar observați aici, există un lucru diferit de intrările anterioare și aceasta este cheia și valoarea "sanitize_callback". Aceasta definește o funcție de foc atunci când datele sunt serializate în baza de date - la urma urmei, nu conținutul ilegal care o face în baza de date.
Deci, faceti asta, vom defini o functie numita tcx_sanitize_copyright care va elimina orice etichete, tăieturi și alte etichete ilegale care ar trebui să fie serializate în baza de date:
funcția tcx_sanitize_copyright ($ input) retur strip_tags (stripslashes ($ input));
Pur și simplu returnează valoarea inputului dezinfectat.
Apoi, este timpul să adăugați controlul real al setării.
$ wp_customize-> add_control ('tcx_footer_copyright_text', array ('section' => 'tcx_display_options', 'label' => 'Mesaj de copyright', 'type' => 'text')); Aici, din nou, îl obligăm la tcx_display_options și îi oferim etichetei "Mesaj cu privire la drepturile de autor" pentru ca utilizatorii să poată fi citiți. În cele din urmă, am definit acest lucru ca a text intrare.
Desigur, în acest moment, știi că nu reușim să facem nimic cu controlul până când nu l-am conectat la JavaScript.
JavaScript pentru acest lucru este foarte ușor, mai ales dacă ați dat deschidere un ID unic așa cum am făcut mai sus.
wp.customize ('tcx_footer_copyright_text', funcția (valoare) value.bind (funcția (to) $ ('# copyright-message') .text (to);); În esență, este nevoie de valoarea la argument și apoi îl stabilește ca valoare a deschidere's text.
get_theme_mod În sfârșit, deși am făcut-o deja în șablon, vom continua și vom examina codul aici:
©
Observați că citim valoarea tcx_footer_copyright_text și apoi tipăm valoarea pe ecran.
Și pentru moment, asta-i tot! Am aruncat o privire asupra unora dintre controalele de bază, dat fiind că utilizatorul deține un control semnificativ asupra aspectului acestei teme, chiar dacă este foarte tematică, și ne-am referit la modul de introducere a dezinfectării datelor împreună cu procesul de serializare.
Singurul lucru pe care trebuie să-l acoperiți sunt unele dintre cele mai avansate și mai avansate controale pe care le oferă WordPress. Astfel, în următorul articol, vom examina unele dintre aceste caracteristici și modul de implementare a acestora.
!
