Ricorda le volte in cui dovevamo creare pagine Opzioni per i nostri temi? Certo che lo fai, perché abbiamo ancora bisogno di loro! Quando il Customizer di WordPress fallisce nel gestire le funzionalità del tema, devi creare una pagina Opzioni extra per offrire un'esperienza migliore ai tuoi utenti.
Mentre è sempre un'opzione per creare questi pannelli Opzioni da zero, è meglio usare le ruote già inventate. In questa parte della serie "Toolbox di Smart WordPress Developer", passeremo per Vafpress, un solido framework di opzioni per temi WordPress per il tuo prossimo progetto a tema.
È tempo di alcune polemiche: non penso che il Customizer sia pronto per i temi, ancora.
Anche se ammetto che il Customizer è semplicemente un eccezionale strumento, posso anche vedere che non lo è qualificato per servire tutte le funzionalità anche di un semplice tema multiuso. Lo so, lo so, i temi multi-purpose sono temi senz'anima, capitalisti che rovinano il mondo di WordPress ... o sono? Voglio dire, ammetto che sarebbe meglio se i temi a uso singolo fossero più popolari, ma possiamo ignorare il fatto che i temi multi-scopo sono la prima scelta della maggior parte delle agenzie di design, freelance e persino utenti newbie di WordPress che vogliono costruire un sito Web per le loro attività?
Alla fine della giornata, dobbiamo chiederci per capire la necessità dei framework delle opzioni del tema rispetto al Customizer: WordPress per l'amor di WordPress o WordPress per il bene della gente? Mentre sostengo che WordPress diventi sempre più standardizzato in vari aspetti, penso anche che non possiamo ignorare le richieste della comunità di utenti di WordPress. Dopo tutto, se gli sviluppatori avessero ignorato le richieste degli utenti, WordPress non sarebbe diventato così grande come adesso.
Inoltre, non credo che il Customizer sarebbe sufficiente per i temi a scopo singolo (ancora). Non abbiamo nemmeno un modo standardizzato e centralizzato per creare parti di contenuto (come slider, menu e simili) e, qualunque cosa tu voglia dire contro, gli utenti di WordPress (e avranno sempre) bisogno di una singola interfaccia per controllare i loro temi.
Sto mantenendo questa sezione breve, perché l'argomento è Vafpress come strumento di sviluppo WordPress e posso parlare di "Customizer versus frameworks di temi" per altre migliaia di parole. Ma non lasciarmi tagliare corto ti impediscono di commentare: mi piacerebbe sentire la tua opinione su questo!
Inutile dire a questo punto, ma è consuetudine aprire ogni sezione con una semplice introduzione: Vafpress è un framework di opzioni per i temi. E molto buono, dovrei dire. Creato da Vafour, un team di sviluppo web indonesiano, Vafpress sostiene che costruire un tema WordPress non è mai stato così facile e veloce.
Basta scaricare Vafpress dalla sua pagina di download ufficiale o dal suo repository GitHub, e passiamo rapidamente alle parti migliori.
A partire dal giorno in cui sto scrivendo questo tutorial, Vafpress ha 19 campi di controllo divisi in due categorie chiamati "Fields" e "Multifields".
casella di testo
: Genera un input di testo.textarea
: Genera a textarea
campo.ginocchiera
: Genera una commutazione sì / no.cursore
: Genera un cursore di intervallo.caricare
: Genera un campo di caricamento utilizzando WordPress Media Manager.colore
: Genera un selettore di colori.Data
: Genera una selezione data.codeeditor
: Genera un editor di codice.wpeditor
: Genera un editor WYSIWYG.fontawesome
: Genera un selettore di icone utilizzando Font Awesome.Notebox
: Genera un campo che è possibile utilizzare per informare gli utenti del tema.html
: Consente di visualizzare codice HTML personalizzato.selezionare
: Genera un semplice
campo.selezione multipla
: Genera un menu a discesa multipla.casella di controllo
: Genera un gruppo di checkbox.checkimage
: Genera un gruppo di immagini selezionabili, funzionando come caselle di controllo.radiobutton
: Genera un gruppo di pulsanti di opzione.radioimage
: Genera un gruppo di immagini selezionabili, funzionando come radio box.sorter
: Genera un campo multiselect ordinabile.Non sarebbe giusto se non avessi finito questa sezione senza un esempio: facciamo una sola, semplice. Le seguenti righe di codice creano un campo Color Picker:
array (array ('type' => 'color', 'name' => 'example_color_picker', 'label' => 'Color Picker', 'description' => 'Imposta un colore per le intestazioni qui!', 'default '=>' rgba (255,255,255, .75) ',' format '=>' hex ',), array (// altro campo),)?>
Questa parte potrebbe essere complicata all'inizio, ma ha una curva di apprendimento uniforme.
Il pannello delle opzioni che possiamo creare con Vafpress è costituito da un paio di elementi costitutivi:
Iniziamo vedendo la costruzione del "costruttore di pagine di opzioni":
false, // il nome per le impostazioni nel database 'option_key' => 'vpt_option', // lo slug della pagina delle opzioni 'page_slug' => 'vpt_option', // percorso del file modello o del modello dell'array ' '=> get_template_directory (). '/options-template.php', // pagina del menu padre 'menu_page' => 'themes.php', // decide se denominare automaticamente i menu o no 'use_auto_group_naming' => true, // show (di default) o nascondi la pagina "Esporta / Importa" 'use_exim_menu' => true, // ruolo utente minimo per visualizzare il pannello delle opzioni 'minimum_role' => 'edit_theme_options', // tipo del layout (predefinito per impostazione predefinita) 'layout' => 'fixed', // titolo della pagina delle opzioni 'page_title' => __ ('Opzioni tema', 'vp_textdomain'), // titolo della voce del menu principale 'menu_label' => __ ('Opzioni tema', 'vp_textdomain '),)); // collegalo all'azione after_setup_theme add_action ('after_setup_theme', 'my_options')??>
Una cosa buona del "costruttore di pagine di opzioni" è che puoi puntare a un file separato in cui mantieni tutti i menu (e le sezioni all'interno dei menu e i campi all'interno delle sezioni). Nell'esempio sopra, abbiamo indicato un file modello chiamato opzioni-template.php
. Vediamo anche come riempire quel file:
__ ('Vafpress Option Panel', 'vp_textdomain'), 'logo' => ", 'menus' => array (array ('title' => __ ('Controlli speciali', 'vp_textdomain'), 'name' = > 'menu_2', 'icon' => '/icon/special.png', 'controls' => array (// ... raccolta di sezioni e / o campi di controllo ...),)))?
Se vuoi, puoi anche fare alcuni "menu nidificati":
__ ('Vafpress Option Panel', 'vp_textdomain'), 'logo' => ", 'menus' => array (array ('title' => __ ('Controlli HTML standard', 'vp_textdomain'), 'nome' => 'menu_1', 'icon' => 'font-awesome: icon-magic', 'menus' => array (array ('title' => __ ('Regular', 'vp_textdomain'), 'name' = > 'submenu_1', 'icon' => 'font-awesome: icon-th-large', 'controls' => array (// ... raccolta di sezioni e / o campi di controllo ...),), array ('title' = > __ ('Immagine', 'vp_textdomain'), 'name' => 'submenu_2', 'icon' => 'font-awesome: icon-picture', 'controls' => array (// ... collezione di Sezioni e o Control Fields ...),),),),));?>
E all'interno della matrice del 'controlli'
argomenti, usiamo qualcosa come il seguente:
array (array ('title' => __ ('TextBox e TextArea', 'vp_textdomain'), 'name' => 'section_1', 'description' => __ ('TextBox e TextArea Showcase', 'vp_textdomain'), 'fields' => array (// ... raccolta di campi di controllo ...),),)?>
Ancora una volta, questo potrebbe richiedere un po 'di pratica all'inizio, ma è una passeggiata nel parco una volta che ci si abitua.
Tutte queste caratteristiche dovrebbero essere sufficienti per un framework come Vafpress, ma Vafpress non si ferma qui: ha ancora un paio di trucchi nella manica:
C'è molto che puoi ottenere con Vafpress, più di quanto abbiamo spiegato in questo tutorial. Assicurati di controllare la documentazione di Vafpress per saperne di più.
Cosa ne pensi di Vafpress? Pensi di dargli una possibilità nel tuo prossimo progetto a tema? Diteci cosa ne pensate nella sezione commenti qui sotto. E se ti è piaciuto l'articolo, non dimenticare di condividerlo con i tuoi amici!
Ci vediamo nella prossima parte dove andremo su CMB2, un metabox, campi personalizzati e libreria di moduli per WordPress.