Share
În acest moment din serie, am acoperit totul, de la înțelegerea motivului pentru care Theme Customizer este benefic pentru cei dintre noi care sunt designeri și dezvoltatori, cum să îl implementăm în tema noastră și să înțelegem relația dintre secțiuni, setări și controale.
De asemenea, am analizat cum să implementăm setarea și controlul nostru într-una dintre secțiunile predefinite ale WordPress.
În acest articol, vom examina ceea ce este necesar pentru a introduce o secțiune proprie și o varietate de setări și controale. Acest articol va cuprinde o metodologie care poate fi urmată pentru implementarea de noi setări și controale și modul de aplicare a acestei metodologii pentru introducerea unei noi secțiuni, stabilirea și controlul.
Vom extinde acest subiect în a doua parte a acestui articol introducând controale suplimentare. Dar, pentru moment, să aruncăm o privire asupra metodologiei și să introducem o nouă setare în Theme Customizer.
Înainte de a intra în actualizarea temei, să vorbim mai întâi despre ceea ce este necesar pentru a introduce o nouă secțiune, o nouă setare și un nou control. Rețineți că, în acest moment, presupunem că vom folosi întotdeauna postMessage transport pentru actualizări live, așa că vom presupune același lucru înainte.
Acestea fiind spuse, o metodologie pentru introducerea de noi opțiuni este întotdeauna mult mai utilă decât a intra în ceva orb, așa că haideți să aruncăm o privire asupra a ceea ce este necesar pentru a implementa secțiuni, setări și controale la un nivel înalt:
Accentsconagua
get_theme_mod Nimic prea complicat, nu? Desigur, acțiunile vorbesc mai tare decât cuvintele, așa că să începem să facem exact acest lucru.
Pentru a urmări metodologia pe care am prezentat-o mai sus, vom lucra cu aceleași funcții, șabloane și fișiere JavaScript pe care le-am definit în articolele anterioare, deci, dacă nu ați reușit, acum este timp.
Cu asta a spus, să începem.
În tcx_register_theme_customizer , vom implementa o secțiune numită Optiuni de afisare, și ne vom asigura că acesta este plasat chiar în partea de jos a listei de secțiuni din Tema Customizer. Acest lucru se face prin setarea prioritate proprietate a add_section.
$ wp_customize-> add_section ('tcx_display_options', array ('title' => 'Opțiuni de afișare', 'prioritate' => 200)); Observați mai sus, am definit două argumente:
Dacă vă salvați acum lucrarea și încercați să reîncărcați personalizatorul, nu veți vedea Optiuni de afisare secțiune. Asta pentru că nu există opțiuni pentru afișare - totuși.
Pentru a afișa secțiunea, trebuie să introducem o setare pentru utilizator pentru a optimiza. Pentru a face acest lucru, vom introduce o opțiune care va permite utilizatorului să comute vizibilitatea unui antet.
Primul lucru pe care trebuie să-l facem este să sunăm add_setting care va identifica setarea și care va defini valoarea implicită și metoda de transport.
Toate acestea ar trebui să fie relativ ușoare dacă ați respectat articolul precedent. Deci, chiar sub apelul la add_section, adăugați următorul apel:
$ wp_customize-> add_setting ('tcx_display_header', array ('default' => 'true', 'transport' => 'postMessage')); Mai exact, am creat o nouă setare numită tcx_display_header pe care le vom folosi pentru a comuta afișarea antetului folosind ambele get_theme_mod și folosind JavaScript.
Dar acest lucru nu este suficient pentru a oferi utilizatorului posibilitatea de a optimiza vizibilitatea antetului - acum avem nevoie de implementarea unui control.
În scopul acestui set special, vom introduce o casetă de selectare care va permite utilizatorilor să schimbe vizibilitatea setării.
În primul rând, trebuie să definim controlul. Pentru aceasta, adăugați următorul cod sub apel la add_setting pe care am definit-o mai sus:
$ wp_customize-> add_control ('tcx_display_header', array ('section' => 'tcx_display_options', 'label' => 'Header display', 'type' => 'checkbox')); În acest apel, obligăm controlul la tcx_display_header astfel încât să știe ce informații să facă. În matrice, dăm ID-ul secțiunii la care este legată această setare și control. Apoi, dăm eticheta care va apărea lângă control și, în final, definim tipul de control. Evident, definim o casetă de selectare.
În acest moment, ar trebui să vă puteți salva munca, să reîmprospătați personalizatorul de teme și apoi să vedeți ceva de genul:
Acest lucru este bun - înseamnă că totul a fost conectat în mod corespunzător în ceea ce privește Tema Customizer este în cauză, dar observați că faceți clic pe căsuța nu de fapt do orice.
Acum este momentul să conectați Theme Customizer la tema actuală.
În primul rând, vrem să ne deschidem tema-customizer.js. Dacă ați urmat de-a lungul, atunci acesta este situat în js directorul pe care l-am definit mai devreme în serie.
Apoi, trebuie să adăugăm următorul cod:
wp.customize ('tcx_display_header', functie (valoare) value.bind (function (to) false === to? $ ('headhead ') .hide (): $ ););); Observați că este nevoie de ID-ul setării pe care am creat-o și apoi execută următoarea logică: Dacă la este egal cu fals, atunci vom ascunde elementul antet; în caz contrar, vom arăta elementul antet.
În acest moment, actualizați pagina și ar trebui să observați că antetul dispare (sau se reapare) pe măsură ce comutați caseta de selectare.
Dar când vă salvați munca, nu se întâmplă nimic. Acest lucru se datorează faptului că valoarea serializată nu este citită. Ultimul lucru pe care trebuie să-l facem este să pârghiem get_theme_mod pentru setările.
get_theme_mod În cele din urmă, ultima parte a metodologiei care este necesară pentru implementarea setării noastre este de a ne asigura că valoarea care este stocată prin transport este citită când pagina este încărcată.
Pentru aceasta, localizați tcx_customizer_css și apoi adăugați următorul cod între stil bloc:
#header display: none;
Pe scurt, aceasta citește valoarea temei pentru ID-ul valorii afișate în antet pe care am salvat-o. Dacă este setat la false, atunci ascunde elementul antet; în caz contrar, CSS nu este niciodată redat.
În acest moment, trebuie să aveți o implementare pe deplin a casetei de selectare care comută dinamic antetul atunci când utilizatorul lucrează cu personalizatorul și care profită de valoarea serializată atunci când setarea este salvată și actualizează ceea ce utilizatorul vede ori de câte ori încărcați tema.
Acum că am definit o metodologie pentru implementarea secțiunilor, setărilor și controalelor, putem începe să lucrăm cu o varietate de alte controale, precum și.
În următorul articol, vom arunca o privire asupra setului rămas de comenzi de bază și după aceea vom arunca o privire asupra unora dintre cele mai avansate controale pe care le oferă WordPress în Theme Customizer.
Ca și în versiunile anterioare ale temei, puteți descărca versiunea 0.4.0 de la GitHub pentru a examina codul, pentru a juca cu el și pentru a pregăti următorul set de controale pe care le vom introduce în următorul articol.
