Share
Oggi parlerò del ordinabile tipo di opzione in Titan Framework. Fornisce all'utente finale una serie di opzioni che possono essere riorganizzate tramite un'interfaccia drag & drop e possono essere abilitate o disabilitate. Puoi integrare questa opzione nei luoghi in cui desideri che gli utenti riorganizzino le sezioni di un tema in modo dinamico.
Oggigiorno, alcuni temi premium di WordPress consentono agli utenti finali di riorganizzare / ordinare diversi blocchi in un tema. Lo sviluppo di un'interfaccia ordinabile con trascinamento e rilascio può essere un compito intimidatorio per i nuovi sviluppatori. Titan Framework offre un modo semplice e senza sbagli per fornire questa opzione. Con i suoi ordinabile digita un'opzione, puoi creare un elenco di opzioni ordinabili che possono essere riorganizzate come vuoi tu. Ha un layout verticale come mostrato nell'immagine qui sotto:
Questa opzione supporta alcuni parametri:
Accentsconagua
ordinabile tipo opzione.vero, quindi i valori ordinabili commutati sono nascosti. Se falso, il pulsante non è mostrato. L'impostazione predefinita è vero.visible_button è impostato per falso e tu fornisci un valore predefinito qui, visible_button sarà automaticamente impostato su vero. Tutti i parametri sono stringa per tipo, tranne "opzioni' che è schieramento e 'visible_button' che è booleano in natura.
Puoi aggiungere questa opzione all'interno:
Questi contenitori possono essere facilmente creati con Titan Framework. Se non sai come, sfoglia i precedenti articoli di questa serie.
Questo tipo di opzione viene aggiunto seguendo questi passaggi.
getInstance () funzione.createOption () funzione.getOption () funzione.Questa è una delle grandi opzioni fornite da Titan Framework, quindi implementiamolo.
Creiamo prima questa opzione all'interno di un pannello di amministrazione.
createOption (array ('id' => 'aa_sortable_opt', // L'ID che verrà utilizzato per ottenere il valore di questa opzione 'type' => 'ordinabile', // Tipo di opzione che stiamo creando 'name' => 'My Sortable 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 (// Un array di coppie di valori-valore. 'aa_products_blk' => 'Prodotti Block', 'aa_features_blk' => 'Funzionalità Block', 'aa_stats_blk' => 'Statistiche Block', 'aa_comments_blk' => 'Commenti Blocco '))); Ho aggiunto un ordinabile digitare l'opzione nella riga n. 8 tramite il tasto createOption () funzione in un pannello di amministrazione personalizzato $ aa_panel. Successivamente ho definito un elenco di parametri, ad es. nome, id, tipo, opzioni e disc. Il valore dell'ID è aa_sortable_opt, che dovrebbe essere sempre unico.
Un parametro unico in questo opzioni è alla riga n. 15. Prende una serie di valore-label coppie che appaiono come opzioni che possono essere ordinate. In questo codice, ho definito quattro di queste coppie e ognuna di esse è un'opzione ordinabile unica.
Pertanto, le etichette aa_products_blk, aa_features_blk, aa_stats_blk e aa_commenst_blk mostra le opzioni corrispondenti, ad es.Blocco prodotti, "Blocco funzioni", "Blocco statistiche" e 'Blocco commenti. Pensa a queste opzioni come blocchi del tuo tema, che vuoi che un utente finale possa riorganizzare o disabilitare.
Nello screenshot qui sopra, esiste a ordinabile digita l'opzione in un pannello di amministrazione Opzioni ordinate. Guarda come vengono visualizzate le opzioni ordinabili.
Accanto al nome di ogni opzione ci sono due icone. La prima icona mostra un occhio che controlla 'visibilità delle opzioni'. Se si fa clic, questa particolare opzione diventa disabilitata.
Ho disabilitato la visibilità delle prime due opzioni nello screenshot qui sopra.
La seconda icona mostra linee ordinabili, che aiutano a trascinare e rilasciare queste opzioni.
Otteniamo i valori delle opzioni salvate.
getOption ('aa_sortable_opt'); / ** * * Stampa del contenuto dell'array * * / var_dump ($ aa_getsortable_array); ?>Per ottenere i valori salvati, prima ottenere un'istanza tramite il getInstance () funzione nella riga # 3. Quindi, registrare l'ID opzione aa_sortable_opt dentro il getOption () funzione come suo parametro. I valori vengono salvati all'interno di una variabile che è una matrice, $ aa_getsortable_array.
Il valore di ritorno contiene un array di valori in ordine di come un utente finale ha organizzato e salvato le etichette nel pannello di amministrazione personalizzato.
Ho scaricato l'array con il var_dump () comando sulla riga n. 15. Vediamo i risultati.
Ecco come ho organizzato le opzioni nel pannello di amministrazione (ho attivato nuovamente le prime due opzioni facendo clic su occhio icona).
Vediamo cosa succede se cambio l'ordine nel pannello di amministrazione e lo salvo.
Nell'immagine sopra, l'ordine dei contenuti dell'array è cambiato di conseguenza.
Ora lascia che ti mostri un altro modo di usare questa opzione nel front-end.
getOption ('aa_sortable_opt'); / ** * * Ottenere output front-end * * / if ($ aa_getsortable_array) foreach ($ aa_getsortable_array come $ opzione) opzione ($ opzione) caso 'aa_products_blk': echo "Il codice del blocco prodotto è usato qui. "; break; case 'aa_features_blk': echo" Il codice del blocco funzione è usato qui. "; break; case 'aa_stats_blk': echo" Statistiche Il codice di blocco è usato qui. "; break; case 'aa_comments_blk': echo" Commenti Il codice di blocco è usato qui. "; break; // fine del passaggio // fine di foreach // end if Così, ho registrato un'istanza titan unica alla riga n. 3, e alla riga n. 6 ho usato il getOption () funzione con aa_sortable_opt come parametro per recuperare il valore dell'opzione ordinabile impostata dall'utente finale. Ricorda che impostiamo coppie di valori-valore sopra-i valori sono usati nel codice mentre le etichette sono mostrate all'interno delle impostazioni del dashboard.
Quindi, otterremo una serie di valori selezionati dall'utente nell'ordine in cui ha ordinato le opzioni ordinabili all'interno del pannello di amministrazione. Ora dobbiamo stampare quei blocchi nello stesso ordine selezionato dall'utente finale. ero solito scatola dell'interruttore controlla per stampare i nomi dei blocchi.
Ho controllato qui se c'era un valore nell'array $ aa_getsortable_array.
Qui ho usato un per ciascuno loop per passare attraverso tutti gli elementi del $ aa_getsortable_array array e ha nominato un singolo elemento di questo array come $ opzione.
Ho usato la valigetta per stampare le opzioni nello stesso ordine in cui erano presenti nell'array (che era l'ordine selezionato dall'utente). Se si guardano le righe da 26 a 28, si tratta di un caso che controlla se il valore è all'interno $ opzione è aa_products_blk quindi fai eco al blocco prodotti che è stato selezionato e poi rompere. Allo stesso modo ci sono altri tre.
Andiamo prima con le impostazioni predefinite. Ecco uno screenshot dell'output che è apparso sul front-end.
Cosa succede se disabilito alcune opzioni? E riorganizzare tutti loro? Come questo:
Quindi il blocco prodotto non dovrebbe essere visualizzato poiché l'ho disabilitato e gli altri blocchi dovrebbero organizzarsi da soli.
Questo è esattamente quello che è successo, come mostrato nello screenshot qui sopra.
Ora creerò questa opzione all'interno di una scheda di amministrazione.
createOption (array ('id' => 'aa_sortable_opt_in_tab', // L'ID che verrà utilizzato per ottenere il valore di questa opzione 'type' => 'ordinabile', // Tipo di opzione che stiamo creando 'name' => 'My Sortable 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 'visible_button' = > 'false', 'options' => array (// Un array di coppie di valori-valore. 'aa_products_blk' => 'Products Block', 'aa_features_blk' => 'Feature Block', 'aa_stats_blk' => 'Statistics Block ',' aa_comments_blk '=>' Blocco commenti '))); Ora ho aggiunto un ordinabile digita l'opzione in una scheda di amministrazione $ aa_tab1 con ID aa_sortable_opt_in_tab. Questa volta ho definito il parametro visible_count nella riga n. 15 e il suo valore è impostato su falso. Significa l'indicatore di visibilità occhio l'icona non dovrebbe apparire.
In questa immagine, puoi trovare a ordinabile inserisci l'opzione in Scheda 1 di pannello Opzioni Neat 2. Si noti che l'icona di visibilità non appare con i nomi delle opzioni.
Utilizzare questo codice per ottenere valori salvati.
getOption ('aa_sortable_opt_in_tab'); / ** * * Ottenere l'output front-end * * / if ($ aa_tab_getsortable_array) foreach ($ aa_tab_getsortable_array come $ opzione) opzione ($ opzione) caso 'aa_products_blk': echo "Il codice del blocco prodotto è usato qui. "; break; case 'aa_features_blk': echo" Il codice del blocco funzione è usato qui. "; break; case 'aa_stats_blk': echo" Statistiche Il codice di blocco è usato qui. "; break; case 'aa_comments_blk': echo" Commenti Il codice di blocco è usato qui. "; break; // fine del passaggio // fine di foreach // end if Questo codice è abbastanza simile a quello che ho scritto nel caso di un pannello di amministrazione. Quindi permettimi di riassumere tutti i suoi passi:
getInstance () funzione nella riga # 3.getOption () funzione e registra l'ID opzione come parametro nella riga n.scatola dell'interruttore dichiarazioni nelle righe da 19 a 37.Ecco uno screenshot del front-end.
Successivamente creerò questa opzione all'interno di un metabox.
createOption (array ('id' => 'aa_sortable_opt_in_metabox', // L'ID che verrà usato per ottenere il valore di questa opzione 'type' => 'ordinabile', // Tipo di opzione che stiamo creando 'name' => 'My Sortable Option', // Nome dell'opzione che verrà visualizzata 'desc' => 'Questa è la nostra opzione', // Descrizione dell'opzione che verrà visualizzata 'options' => array (// Un array di coppie di valori-etichetta. 'aa_products_blk' => 'Prodotti Block', 'aa_features_blk' => 'Funzionalità Block', 'aa_stats_blk' => 'Statistiche Block', 'aa_comments_blk' => 'Commenti Block'))); Qui ho creato un'opzione in un metabox $ aa_metbox. Il suo ID univoco è aa_sortable_opt_in_metabox. Il resto dei parametri sono gli stessi.
Nell'immagine sopra, esiste a ordinabile digita l'opzione in un metabox chiamato La mia opzione ordinabile. Appare su tutte le pagine e le schermate di post-editing.
Ora avrò i valori salvati per un metabox.
getOption ('aa_sortable_opt_in_metabox', get_the_ID ()); / ** * * Ottenendo output front-end * * / if ($ aa_metabox_getsortable_array) foreach ($ aa_metabox_getsortable_array come $ opzione) opzione ($ opzione) caso 'aa_products_blk': echo "Il codice del blocco prodotto è usato qui. "; break; case 'aa_features_blk': echo" Il codice del blocco funzione è usato qui. "; break; case 'aa_stats_blk': echo" Statistiche Il codice di blocco è usato qui. "; break; case 'aa_comments_blk': echo" Commenti Il codice di blocco è usato qui. "; break; // fine del passaggio // fine di foreach // end ifQuesto codice è praticamente lo stesso di prima. La differenza può essere individuata nella riga n. 6 in cui ho usato il get_the_ID () funzione come parametro aggiuntivo. È usato per ottenere una pagina specifica o un ID post.
Disattiviamo alcuni dei blocchi e osserviamo quali cambiamenti si verificano nel front-end.
Il front-end stamperà quanto segue:
Alla fine, creerò questa opzione all'interno di una sezione di personalizzazione del tema.
createOption (array ('id' => 'aa_sortable_opt_in_sec', // L'ID che verrà utilizzato per ottenere il valore di questa opzione 'type' => 'ordinabile', // Tipo di opzione che stiamo creando 'name' => 'My Sortable Option', // Nome dell'opzione che verrà visualizzata 'desc' => 'Questa è la nostra opzione', // Descrizione dell'opzione che verrà visualizzata 'options' => array (// Un array di coppie di valori-etichetta. 'aa_products_blk' => 'Prodotti Block', 'aa_features_blk' => 'Funzionalità Block', 'aa_stats_blk' => 'Statistiche Block', 'aa_comments_blk' => 'Commenti Block')));Ho creato un ordinabile digitare l'opzione con ID aa_sortable_opt_in_sec all'interno di una sezione di personalizzazione del tema $ aa_section1.
Lo screenshot mostra questa opzione in una sezione di personalizzazione chiamata La mia sezione.
Usa il seguente codice.
getOption ('aa_sortable_opt_in_sec'); / ** * * Ottenendo output front-end * * / if ($ aa_sec_getsortable_array) foreach ($ aa_sec_getsortable_array come $ opzione) opzione ($ opzione) caso 'aa_products_blk': echo "Il codice del blocco del prodotto è usato qui. "; break; case 'aa_features_blk': echo" Il codice del blocco funzione è usato qui. "; break; case 'aa_stats_blk': echo" Statistiche Il codice di blocco è usato qui. "; break; case 'aa_comments_blk': echo" Commenti Il codice di blocco è usato qui. "; break; // fine del passaggio // fine di foreach // end ifQuesto codice è abbastanza simile a quello che ho usato in precedenza. Solo l'ID e i nomi delle variabili sono diversi.
Ecco uno screenshot che mostra le modifiche nella modalità di anteprima dal vivo.
Questo è tutto per il ordinabile tipo di opzione in Titan Framework. Le possibilità qui sono infinite. Puoi richiedere un file che contiene il codice di quel particolare blocco invece di echeggiare il nome di quel blocco. Lascia che i tuoi succhi creativi scorrano.
Ho coperto quasi tutti i principali tipi di opzioni ora, quindi abbiamo lasciato alcune delle cose piccolissime che tratterò nei miei prossimi articoli. Se avete domande, non esitate a commentare qui sotto o raggiungere Twitter.
