Share
Opțiunile casetă de selectare, radio și selectați tipul permit utilizatorilor să facă o singură alegere dintr-un set de opțiuni predefinite. Ce zici atunci când trebuie să oferiți unui utilizator final posibilitatea de a face mai multe opțiuni?
Exact asta este multicheck tip opțiune se face în cadrul Titan. Astăzi, intenționez să arăt cum puteți adăuga o opțiune de tip multicheck prin intermediul Titan Frame într-un panou de administrare personalizat, într-o casetă de meta sau în interiorul temei customizer.
A multicheck tip în Titan Framework vă permite să creați mai multe casete de selectare care pot fi activate sau dezactivate în același timp. Asa arata:
Parametrii de setare pe care această opțiune acceptă sunt:
Accentsconagua
multicheck tip opțiune.Ultimii doi parametri, Mod implicit și Opțiuni, sunteți mulțime, în timp ce restul sunt şir după tip.
Containerele în care puteți adăuga această opțiune sunt:
multicheck tip se adaugă urmând un format general:
getInstance () funcţie.createOption () funcţie.getOption () funcţie. Doriți să aflați cum sunt create aceste containere cu Titan Framework? Citiți articolele anterioare din această serie.
Să creați mai întâi această opțiune într-un panou de administrare.
createOption (array ('id' => 'aa_multicheck_opt', // ID-ul care va fi folosit pentru a obține valoarea acestei opțiuni 'type' => 'multicheck', // Tipul de opțiune creăm 'name' => "Opțiunea My Multicheck", // Numele opțiunii care va fi afișată în panoul de administrare 'desc' => 'Aceasta este opțiunea noastră', // Descrierea opțiunii care va fi afișată în opțiunile din panoul de administrare '=' > aa_hdr_bg_img '=>' Afișați imaginea de fundal a antetului ',' aa_hdr_clr_overlay '=>' Permiteți suprapunerea culorilor din antet '),> array (// Matrice asociativă a perechilor de valori care conțin opțiuni' 'default' => array ('aa_hdr_logo', 'aa_hdr_bg_img')));Am folosit createOption () funcția în linia # 8 pentru a adăuga a multicheck introduceți opțiunea într-un panou de administrare personalizat $ aa_panel. Există o listă de parametri pe care i-am menționat, adică. nume, id, tip, opțiuni, desc și Mod implicit. Codul opțiunii mele este aa_multicheck_opt; asigurați-vă că fiecare cod pe care îl adăugați este unic.
''Opțiuni' parametrul din linia # 14 ocupă o matrice asociativă. Contine Valoarea etichetei perechi. Fiecare pereche indică o opțiune separată care apare ca o casetă de selectare. Deci, am definit trei perechi de etichete de valoare, ceea ce înseamnă trei opțiuni.
Eticheta fiecărei opțiuni este unică. Prin urmare, etichetele aa_hdr_logo, aa_hdr_bg_img și aa_hdr_clr_overlay creați opțiuni numite "Afișați Logo-ul antetului''Afișați imaginea de fundal a antetului' și 'Permiteți suprapunerea culorii antetului"respectiv.
În captura de ecran de mai sus, există un panou de administrare Neat Opțiuni care conține a multicheck opțiune numit Opțiunea mea Multichete. Rețineți că primele două opțiuni sunt activate din cauza setărilor implicite (pe care le-am setat la linia # 16).
Să obținem valorile opțiunilor salvate.
getOption ('aa_multicheck_opt'); / ** * * Imprimarea valorilor salvate pentru un panou de administrare * * / var_dump ($ aa_multicheck_opt_val); În linia # 3, am adăugat o instanță unică prin getInstance () funcţie. Se recomandă să utilizați numele dvs. de temă ca parametru aici. Apoi, în linia # 6, am folosit getOption () care recuperează valorile salvate - prin înregistrarea ID-ului opțiunii aa_multicheck_opt ca parametru. După aceea, i-am salvat rezultatul într-o variabilă $ aa_multicheck_opt_val. Până la acest punct, setările de intrare ale utilizatorului sunt salvate în această variabilă.
Acum vom tipări rezultatele salvate în partea frontală. Deoarece această opțiune preia o matrice asociativă, voi folosi metoda cea mai de bază pentru a tipări conținutul matricei, adică var_dump () comanda (linia # 15).
Dacă previzualizați front-end-ul, acesta arată astfel:
Setările implicite au fost tipărite absolut corect. Ai idee despre ce poți face cu această opțiune.
Să adăugăm câteva linii de cod care imprimă o ieșire dacă setările sunt modificate dinamic. Am înlocuit linia # 15 din codul de mai sus cu aceste linii.
"; altceva echo" Logo-ul de afișare a antetului nu a fost activat."; dacă (in_array ('aa_hdr_bg_img', $ aa_multicheck_opt_val)) echo" Afișare fundal imagine antet a fost activat."; altceva echo" Afișați imaginea de fundal a antetului nu a fost activată."; dacă (in_array ('aa_hdr_clr_overlay', $ aa_multicheck_opt_val)) echo" A fost permisă Suprapunerea culorilor pentru antet."; altceva echo" Permite acoperirea culorilor pentru antet nu a fost activată.";>> Aici folosesc in_array () funcționează în interior if-else verificați declarațiile. Trei controale diferite sunt efectuate aici pentru ieșire.
aa_hdr_logo există în interiorul matricei $ aa_multicheck_opt_val, imprimare 'Afișați Logo-ul antetului a fost activat.'aa_hdr_bg_img există în interiorul matricei $ aa_multicheck_opt_val, imprimare 'Permiteți suprapunerea culorilor pentru antet a fost activată.'aa_hdr_clr_overlay există în interiorul matricei $ aa_multicheck_opt_val, imprimare 'Afișați imaginea de fundal a antetului a fost activată.'Să mergem mai întâi cu setările implicite, adică primele două casete de selectare sunt activate.
Front-end-ul trebuie să imprime următoarele linii:
Înainte voi adăuga această opțiune într-o filă admin.
createOption (array ('id' => 'aa_multicheck_opt_in_tab', // ID-ul care va fi folosit pentru a obține valoarea acestei opțiuni 'type' => 'multicheck', // Tipul de opțiune creăm 'name' => "Opțiunea My Multicheck", // Numele opțiunii care va fi afișată în panoul de administrare 'desc' => 'Aceasta este opțiunea noastră', // Descrierea opțiunii care va fi afișată în opțiunile din panoul de administrare '=' > aa_hdr_bg_img '=>' Afișați imaginea de fundal a antetului ',' aa_hdr_clr_overlay '=>' Permiteți suprapunerea culorilor din antet '),> array (// Matrice asociativă a perechilor de valori care conțin opțiuni' 'default' => array ('aa_hdr_logo', 'aa_hdr_bg_img')));Aici am adăugat același lucru multicheck introduceți opțiunea din cadrul unei file admin $ aa_tab1. Identitatea unică a opțiunii este aa_multicheck_opt_in_tab. Restul setărilor parametrilor sunt identice.
A multicheck tip există în interior Tab. 1 din panoul de administrare Opțiuni neat 2.
Acum, voi obține valorile salvate dintr-o fila admin.
getOption ('aa_multicheck_opt_in_tab'); / ** * * Imprimarea valorilor salvate pentru o fila Administrator * * / if (in_array ('aa_hdr_logo', $ aa_multicheck_opt_in_tab_val)) echo "."; altceva echo" Logo-ul de afișare a antetului nu a fost activat."; dacă (in_array ('aa_hdr_bg_img', $ aa_multicheck_opt_in_tab_val)) echo" Afișare fundal imagine antet a fost activat."; altceva echo" Afișați imaginea de fundal a antetului nu a fost activată."; dacă (in_array ('aa_hdr_clr_overlay', $ aa_multicheck_opt_in_tab_val)) echo" A fost permisă permiterea suprapunerii culorilor pentru antet."; altceva echo" Permite acoperirea culorilor pentru antet nu a fost activată."; Acest cod este destul de similar cu ceea ce am scris în cazul unui panou de administrare. Puteți încerca singur. Permiteți-mi să rezumă pașii:
getInstance () funcţie.getOption () pentru a obține valorile salvate în rândul # 6.$ aa_multicheck_opt_in_tab_val.in_array () (linii 15-30) pentru a imprima rezultatele dorite.Să permitem toate casetele de selectare ca setările demo-ului meu. Front-end-ul arată astfel:
Acum o voi crea multicheck tip opțiune într-un metabox.
createOption (array ('id' => 'aa_multicheck_opt_in_metabox', // ID-ul care va fi folosit pentru a obține valoarea acestei opțiuni 'type' => 'multicheck', // Tipul de opțiune pe care o creați ' "Opțiunea My Multichete", // Numele opțiunii care va fi afișată 'desc' => 'Aceasta este opțiunea noastră', // Descrierea opțiunii care va fi afișată 'opțiuni' => array (// Matricea asociativă a "aa_hdr_bg_img '=>' Afișați antetul fundalului ',' aa_hdr_clr_overlay '=>' Permiteți suprapunerea culorilor antetului '),' default '=> array (' aa_hdr_logo ',' aa_hdr_bg_img ')));Am adăugat această opțiune cu un ID unic aa_multicheck_opt_in_metabox în interiorul unui metabox $ aa_metbox.
În imaginea de mai sus, există un ecran de editare a paginii și chiar la sfârșit puteți să-l ateziți multicheck opțiune numit Opțiunea mea Multicheteîntr-un metabox.
Utilizați următorul cod pentru a prelua valorile salvate.
getOption ('aa_multicheck_opt_in_metabox', get_the_ID ()); / ** * * Imprimarea valorilor salvate pentru un Metabox * * / if (in_array ('aa_hdr_logo', $ aa_multicheck_opt_in_metabox_val)) echo "."; altceva echo" Logo-ul de afișare a antetului nu a fost activat."; dacă (in_array ('aa_hdr_bg_img', $ aa_multicheck_opt_in_metabox_val)) echo" Afișare fundal imagine antet a fost activat."; altceva echo" Afișați imaginea de fundal a antetului nu a fost activată."; dacă (in_array ('aa_hdr_clr_overlay', $ aa_multicheck_opt_in_metabox_val)) echo" A fost permisă permiterea suprapunerii culorilor în antet."; altceva echo" Permite acoperirea culorilor pentru antet nu a fost activată.";>>Codul utilizează din nou funcțiile pentru obținerea unei valori de instanță și salvate. Dar pe linia # 6, există un parametru suplimentar, get_the_ID () funcția, care obține valori din ID-ul oricărei pagini sau postare. În final, am folosit același lucru if-else verificați declarațiile.
De data aceasta, să permitem prima și ultima opțiune. Aici este captura de ecran a front-end-ului.
În sfârșit, voi adăuga această opțiune într-o secțiune de personalizare a temelor.
createOption (array ('id' => 'aa_multicheck_opt_in_sec', // ID-ul care va fi folosit pentru a obține valoarea acestei opțiuni 'type' => 'multicheck', // Tipul de opțiune creăm 'name' => "Opțiunea My Multichete", // Numele opțiunii care va fi afișată 'desc' => 'Aceasta este opțiunea noastră', // Descrierea opțiunii care va fi afișată 'opțiuni' => array (// Matricea asociativă a "aa_hdr_bg_img '=>' Afișați antetul fundalului ',' aa_hdr_clr_overlay '=>' Permiteți suprapunerea culorilor antetului '),' default '=> array (' aa_hdr_logo ',' aa_hdr_bg_img ')));Am adăugat a multicheck introduceți opțiunea din interiorul unei secțiuni personalizate pentru temă $ aa_section1. ID-ul său este aa_multicheck_opt_in_sec.
În imagine, există o secțiune personalizată denumită Secțiunea mea, în care există o listă de opțiuni pentru casetele de selectare.
Utilizați acest cod pentru a obține valorile dintr-o secțiune personalizată.
getOption ('aa_multicheck_opt_in_sec'); / ** * * Imprimarea valorilor salvate pentru o secțiune Customizer * * / if (in_array ('aa_hdr_logo', $ aa_multicheck_opt_in_sec_val)) echo "."; altceva echo" Logo-ul de afișare a antetului nu a fost activat."; dacă (in_array ('aa_hdr_bg_img', $ aa_multicheck_opt_in_sec_val)) echo" Afișare fundal imagine antet a fost activat."; altceva echo" Afișați imaginea de fundal a antetului nu a fost activată."; dacă (in_array ('aa_hdr_clr_overlay', $ aa_multicheck_opt_in_sec_val)) echo" A fost permisă permiterea suprapunerii culorilor în antet."; altceva echo" Permite acoperirea culorilor pentru antet nu a fost activată.";>>Acest cod este din nou destul de similar cu cel folosit pentru alte tipuri de containere. Numai numele ID și numele variabilelor sunt diferite.
Am activat doar prima opțiune. Modificările pot fi observate în modul de previzualizare live:
Deci, este vorba despre asta. Aveți posibilitatea să integrați multicheck tip în proiectul dvs. de dezvoltare web pentru a permite utilizatorilor să acorde mai multe funcții tematice în câteva clicuri.
Amintiți-vă că v-am dat un exemplu în tutorialul opțiunii din caseta de selectare, că puteți permite unui utilizator final să activeze / dezactiva orice parte a single.php. Același exemplu poate fi aplicat aici, cu un pic de context. Deci, dacă oferiți opțiuni utilizator legate de o anumită zonă, cum ar fi antetul, atunci ar trebui să utilizați multicheck pentru a evita opțiunile suplimentare.
Există și alte tipuri de opțiuni care pot fi numite derivate de acest tip. Le voi discuta în articolele viitoare. Până atunci, încercați acest tutorial și spuneți-mi părerea dvs. despre asta în comentariile sau pe Twitter.
