Share
Le opzioni checkbox, radio e select type consentono agli utenti di effettuare una singola scelta tra una serie di scelte predefinite. Che dire di quando è necessario fornire a un utente finale la possibilità di fare più di una scelta?
Questo è esattamente ciò che il Multicheck l'opzione type fa in Titan Framework. Oggi, ho intenzione di mostrare come è possibile aggiungere un'opzione di tipo multicheck tramite Titan Framework in un pannello di amministrazione personalizzato, una meta-box o all'interno del customizer del tema.
UN Multicheck l'opzione type in Titan Framework consente di creare più checkbox che possono essere abilitate o disabilitate contemporaneamente. Ecco come appare:
I parametri di impostazione supportati da questa opzione sono:
Accentsconagua
Multicheck tipo opzione.Gli ultimi due parametri, predefinito e opzioni, siamo schieramento, mentre il resto lo sono stringa per tipo.
I contenitori in cui è possibile aggiungere questa opzione sono:
Il Multicheck l'opzione type viene aggiunta seguendo un formato generale:
getInstance () funzione.createOption () funzione.getOption () funzione. Vuoi scoprire come vengono creati questi contenitori con Titan Framework? Leggi gli articoli precedenti di questa serie.
Creiamo prima questa opzione all'interno di un pannello di amministrazione.
createOption (array ('id' => 'aa_multicheck_opt', // L'ID che verrà utilizzato per ottenere il valore di questa opzione 'type' => 'multicheck', // Tipo di opzione che stiamo creando 'name' => 'My Multicheck Option', // Nome dell'opzione che verrà visualizzata nel pannello di amministrazione 'desc' => 'Questa è la nostra opzione', // Descrizione dell'opzione che verrà visualizzata nel pannello di amministrazione 'opzioni' = > array (// Array associativo di coppie di valori-etichetta contenenti opzioni 'aa_hdr_logo' => 'Mostra logo intestazione', 'aa_hdr_bg_img' => 'Mostra intestazione immagine di sfondo', 'aa_hdr_clr_overlay' => 'Consenti sovrapposizione colore intestazione'), 'default' => array ('aa_hdr_logo', 'aa_hdr_bg_img')));Ho usato il createOption () funzione nella riga n. 8 per aggiungere a Multicheck digita l'opzione in un pannello di amministrazione personalizzato $ aa_panel. C'è una lista di parametri che ho menzionato, cioè. nome, id, tipo, opzioni, desc e predefinito. L'ID della mia opzione è aa_multicheck_opt; assicurati che ogni ID che aggiungi sia unico.
Il 'opzioni' il parametro nella riga # 14 occupa un array associativo. Contiene valore-label accoppiamenti. Ogni coppia indica un'opzione separata che appare come una casella di controllo. Quindi, ho definito tre coppie di valori-etichetta, il che significa tre opzioni.
L'etichetta di ciascuna opzione è unica. Pertanto, le etichette aa_hdr_logo, aa_hdr_bg_img e aa_hdr_clr_overlay creare opzioni denominate 'Mostra il logo dell'intestazione''Mostra l'immagine di sfondo dell'intestazione' e 'Consenti sovrapposizione colore intestazione'rispettivamente.
Nell'immagine sopra, c'è un pannello di amministrazione Opzioni ordinate che contiene a Multicheck opzione denominata La mia opzione Multicheck. Notare che le prime due opzioni sono abilitate a causa delle impostazioni di default (che ho impostato alla riga 16).
Prendiamo i valori delle opzioni salvate.
getOption ('aa_multicheck_opt'); / ** * * Stampa dei valori salvati per un pannello di amministrazione * * / var_dump ($ aa_multicheck_opt_val); Alla riga n. 3, ho aggiunto un'istanza univoca tramite il getInstance () funzione. Si consiglia di utilizzare il nome del tema come parametro qui. Quindi, nella riga n. 6, ho usato il getOption () funzione - che recupera i valori salvati - registrando l'ID opzione aa_multicheck_opt come parametro Dopo di ciò, ho salvato il suo risultato in una variabile $ aa_multicheck_opt_val. Fino a questo punto, le impostazioni di input dell'utente vengono salvate in questa variabile.
Ora stamperemo i risultati salvati sul front-end. Siccome questa opzione occupa un array associativo, userò il metodo più basilare per stampare i contenuti dell'array, cioè il var_dump () comando (riga # 15).
Se visualizzi l'anteprima del front-end, sembra che questo:
Le impostazioni predefinite sono state stampate in modo assolutamente corretto. Hai l'idea di cosa puoi fare con questa opzione.
Aggiungiamo alcune linee di codice che stampano un output se le impostazioni sono cambiate dinamicamente. Ho sostituito la riga 15 del codice sopra con queste linee.
"; else echo" Show Header Logo non era abilitato."; if (in_array ('aa_hdr_bg_img', $ aa_multicheck_opt_val)) echo" Mostra immagine di sfondo dell'intestazione abilitata."; else echo" Show Header Background Image non è stato abilitato."; if (in_array ('aa_hdr_clr_overlay', $ aa_multicheck_opt_val)) echo" Consenti overlay colore intestazione abilitato."; else echo" Consenti sovrapposizione colore intestazione non abilitato.";?> Qui sto usando il in_array () funzione dentro se altro controllare le dichiarazioni. Qui vengono eseguiti tre diversi controlli per l'output.
aa_hdr_logo esiste all'interno dell'array $ aa_multicheck_opt_val, stampare 'Mostra il logo dell'intestazione era abilitato.'aa_hdr_bg_img esiste all'interno dell'array $ aa_multicheck_opt_val, stampare 'Consenti sovrapposizione colore intestazione abilitata.'aa_hdr_clr_overlay esiste all'interno dell'array $ aa_multicheck_opt_val, stampare 'Mostra immagine di sfondo dell'intestazione abilitata.'Andiamo prima con le impostazioni predefinite, cioè le prime due caselle di controllo sono abilitate.
Il front-end deve stampare le seguenti righe in questo modo:
Successivamente aggiungerò questa opzione in una scheda di amministrazione.
createOption (array ('id' => 'aa_multicheck_opt_in_tab', // L'ID che verrà utilizzato per ottenere il valore di questa opzione 'type' => 'multicheck', // Tipo di opzione che stiamo creando 'name' => 'My Multicheck Option', // Nome dell'opzione che verrà visualizzata nel pannello di amministrazione 'desc' => 'Questa è la nostra opzione', // Descrizione dell'opzione che verrà visualizzata nel pannello di amministrazione 'opzioni' = > array (// Array associativo di coppie di valori-etichetta contenenti opzioni 'aa_hdr_logo' => 'Mostra logo intestazione', 'aa_hdr_bg_img' => 'Mostra intestazione immagine di sfondo', 'aa_hdr_clr_overlay' => 'Consenti sovrapposizione colore intestazione'), 'default' => array ('aa_hdr_logo', 'aa_hdr_bg_img')));Qui ho aggiunto lo stesso Multicheck inserisci l'opzione all'interno di una scheda di amministrazione $ aa_tab1. L'ID univoco dell'opzione è aa_multicheck_opt_in_tab. Il resto delle impostazioni dei parametri sono gli stessi.
UN Multicheck esiste un'opzione di tipo all'interno Scheda 1 del pannello di amministrazione Opzioni Neat 2.
Ora otterrò i valori salvati da una scheda di amministrazione.
getOption ('aa_multicheck_opt_in_tab'); / ** * * Stampa dei valori salvati per una scheda di amministrazione * * / if (in_array ('aa_hdr_logo', $ aa_multicheck_opt_in_tab_val)) echo "Mostra il logo dell'intestazione abilitato."; else echo" Show Header Logo non era abilitato."; if (in_array ('aa_hdr_bg_img', $ aa_multicheck_opt_in_tab_val)) echo" Mostra immagine di sfondo dell'intestazione abilitata."; else echo" Show Header Background Image non è stato abilitato."; if (in_array ('aa_hdr_clr_overlay', $ aa_multicheck_opt_in_tab_val)) echo" Consenti sovrapposizione colore intestazione abilitata."; else echo" Consenti sovrapposizione colore intestazione non abilitato."; Questo codice è abbastanza simile a quello che ho scritto nel caso di un pannello di amministrazione. Puoi provarlo da solo. Permettetemi di riassumere i passaggi:
getInstance () funzione.getOption () funzione per ottenere i valori salvati nella riga n.$ aa_multicheck_opt_in_tab_val.in_array () funzione (righe da 15 a 30) per stampare i risultati desiderati.Attiva tutte le caselle di controllo come impostazioni demo. Il front-end ha questo aspetto:
Ora creerò un Multicheck digita l'opzione in un metabox.
createOption (array ('id' => 'aa_multicheck_opt_in_metabox', // L'ID che verrà utilizzato per ottenere il valore di questa opzione 'type' => 'multicheck', // Tipo di opzione che stiamo creando 'name' => 'My Multicheck Option', // Nome dell'opzione che verrà visualizzata 'desc' => 'Questa è la nostra opzione', // Descrizione dell'opzione che verrà visualizzata 'options' => array (// Array associativo di coppie di valori-etichetta contenenti le opzioni 'aa_hdr_logo' => 'Mostra logo intestazione', 'aa_hdr_bg_img' => 'Mostra immagine sfondo intestazione', 'aa_hdr_clr_overlay' => 'Consenti sovrapposizione colore intestazione'), 'default' => matrice (' aa_hdr_logo ',' aa_hdr_bg_img ')));Ho aggiunto questa opzione con un ID univoco aa_multicheck_opt_in_metabox all'interno di un metabox $ aa_metbox.
Nell'immagine sopra, c'è una schermata di modifica della pagina e alla fine è possibile individuare a Multicheck opzione denominata La mia opzione Multicheckin un metabox.
Utilizzare il seguente codice per recuperare i valori salvati.
getOption ('aa_multicheck_opt_in_metabox', get_the_ID ()); / ** * * Stampa dei valori salvati per un Metabox * * / if (in_array ('aa_hdr_logo', $ aa_multicheck_opt_in_metabox_val)) echo "Mostra il logo dell'intestazione abilitato."; else echo" Show Header Logo non era abilitato."; if (in_array ('aa_hdr_bg_img', $ aa_multicheck_opt_in_metabox_val)) echo" Mostra immagine di sfondo dell'intestazione abilitata."; else echo" Show Header Background Image non è stato abilitato."; if (in_array ('aa_hdr_clr_overlay', $ aa_multicheck_opt_in_metabox_val)) echo" Consenti sovrapposizione colore intestazione abilitata."; else echo" Consenti sovrapposizione colore intestazione non abilitato.";?>Il codice utilizza nuovamente le funzioni per ottenere un'istanza e valori salvati. Ma nella riga 6 c'è un parametro aggiuntivo, il get_the_ID () funzione, che ottiene i valori dall'ID di qualsiasi pagina o post. Alla fine, ho usato lo stesso se altro controllare le dichiarazioni.
Questa volta, abilitiamo la prima e l'ultima opzione. Ecco lo screenshot del front-end.
Infine, aggiungerò questa opzione in una sezione di personalizzazione del tema.
createOption (array ('id' => 'aa_multicheck_opt_in_sec', // L'ID che verrà utilizzato per ottenere il valore di questa opzione 'type' => 'multicheck', // Tipo di opzione che stiamo creando 'name' => 'My Multicheck Option', // Nome dell'opzione che verrà visualizzata 'desc' => 'Questa è la nostra opzione', // Descrizione dell'opzione che verrà visualizzata 'options' => array (// Array associativo di coppie di valori-etichetta contenenti le opzioni 'aa_hdr_logo' => 'Mostra logo intestazione', 'aa_hdr_bg_img' => 'Mostra immagine sfondo intestazione', 'aa_hdr_clr_overlay' => 'Consenti sovrapposizione colore intestazione'), 'default' => matrice (' aa_hdr_logo ',' aa_hdr_bg_img ')));Ho aggiunto un Multicheck inserisci un'opzione all'interno di una sezione di personalizzazione del tema $ aa_section1. Il suo ID è aa_multicheck_opt_in_sec.
Nell'immagine, c'è una sezione di personalizzazione chiamata La mia sezione, in cui c'è un elenco di opzioni di checkbox.
Utilizzare questo codice per ottenere i valori da una sezione di personalizzazione.
getOption ('aa_multicheck_opt_in_sec'); / ** * * Stampa dei valori salvati per una sezione di personalizzazione * * / if (in_array ('aa_hdr_logo', $ aa_multicheck_opt_in_sec_val)) echo "Mostra il logo dell'intestazione abilitato."; else echo" Show Header Logo non era abilitato."; if (in_array ('aa_hdr_bg_img', $ aa_multicheck_opt_in_sec_val)) echo" Mostra immagine di sfondo dell'intestazione abilitata."; else echo" Show Header Background Image non è stato abilitato."; if (in_array ('aa_hdr_clr_overlay', $ aa_multicheck_opt_in_sec_val)) echo" Consenti sovrapposizione colore intestazione abilitata."; else echo" Consenti sovrapposizione colore intestazione non abilitato.";?>Questo codice è ancora abbastanza simile a quello che ho usato per altri tipi di contenitori. Solo l'ID e i nomi delle variabili sono diversi.
Ho attivato solo la prima opzione. Le modifiche possono essere osservate in modalità anteprima live:
Quindi questo è tutto. È possibile integrare il Multicheck digita un'opzione nel tuo progetto di sviluppo web per consentire agli utenti di abilitare più funzioni tematiche in pochi clic.
Ricorda che ti ho dato un esempio nel tutorial dell'opzione type checkbox, che puoi consentire a un utente finale di abilitare / disabilitare qualsiasi parte di single.php. Lo stesso esempio può essere applicato qui, con un po 'di contesto. Quindi, se stai fornendo opzioni utente relative a un'area particolare come l'intestazione, dovresti usare il multicheck per evitare opzioni extra.
Ci sono alcuni altri tipi di opzioni che possono essere chiamate le derivate di questo tipo. Ne parlerò nei miei prossimi articoli. Quindi prova questo tutorial e fammi sapere le tue opinioni su di esso nei commenti o su Twitter.
