Crea il tuo pannello di opzioni per temi WordPress con Redux Framework

Il framework Redux è uno dei framework di pannelli opzionali più popolari, avanzati e liberi da usare per temi e plug-in di WordPress. La sua flessibilità ti dà la libertà di creare qualsiasi tipo di opzioni e impostazioni per il tuo progetto WordPress.

In questo tutorial ti mostrerò come installare, personalizzare e utilizzare il framework Redux nel tuo tema.

Passeremo attraverso i seguenti passaggi:

Installazione
Configurazione generale
Creazione di un pannello delle opzioni
Utilizzo delle opzioni all'interno di un tema

Nota: Mi riferirò a Redux Framework semplicemente come Redux durante questo tutorial. Questo non deve essere confuso con Redux, il "contenitore di stato prevedibile per le app JavaScript".

1. Installazione

Ci sono tre modi in cui puoi includere Redux nel tuo progetto:

Installalo come plugin separato
Includilo nel tuo tema principale
Includilo in un plugin dipendente dal tema

Installalo come plugin separato

Come impostazione predefinita, Redux può essere installato come plugin. Se vai alla pagina del plugin WordPress di Redux Framework, vedrai che puoi scaricarlo come un normale plug-in e installarlo nel tuo sito WordPress con qualsiasi tema. Questo non crea tuttavia alcuna opzione; tutto ciò che puoi fare è attivare la modalità demo con le opzioni di esempio.

Per ottenere un pannello delle opzioni con opzioni personalizzate per il tema o il plug-in è necessario creare un file config.php separato. Leggi di più su come funziona:

Quindi i pro e i contro di questo approccio sono:

Contro	Professionisti
Installazione separata del plug-in che deve essere archiviata come file zip sul server o all'interno della cartella dei temi.	Riduci le dimensioni del tuo tema quando il pannello delle opzioni non fa parte del tema principale.
Sensibilità aumentata che il tema / plug-in dipende dallo sviluppo e dagli strumenti di terze parti.	Si evitano numerosi avvisi ed errori dal plug-in Verifica tema.

Includilo nel tuo tema principale

Non c'è niente che ti impedisca di includere Redux nel tuo tema, a meno che non sia in conflitto con il plug-in Tema del controllo. La logica è la stessa di prima, hai ancora bisogno di un file config.php con le tue opzioni personalizzate, ma ora eviti l'installazione di plugin aggiuntivi.

Contro	Professionisti
Aumenta la dimensione del pacchetto del tema.	Evita l'installazione di plugin aggiuntivi.
Potenziali conflitti e problemi possono sorgere dal plug-in Verifica tema.	Il pannello delle opzioni del tema sembra più connesso al tema e più integrato.
Ogni volta che il plug-in viene aggiornato, è necessario aggiornare anche il tema.

Includilo in un plugin dipendente dal tema

Secondo me, questo approccio è il modo migliore per includere il framework Redux. Il processo è semplice come una normale installazione di plugin, con l'unica differenza che ora fa parte del plug-in aggiuntivo richiesto dal tuo tema.

I temi premium moderni solitamente includono elementi personalizzati, tipi di post personalizzati e così via, tutti componenti di un plug-in, quindi l'approccio logico è creare un plug-in aggiuntivo collegato al tema. In quel plug-in aggiuntivo è possibile includere il pannello delle opzioni del tema. Ulteriori informazioni sulla creazione di plugin dipendenti dal tema in questo tutorial:

Contro	Professionisti
Non ho trovato :)	Evita l'installazione di plugin aggiuntivi.
	Il pannello delle opzioni del tema si sente più parte integrante del tuo tema.

Il processo di configurazione di Redux non è influenzato dal metodo di installazione, quindi spetta a te decidere come includere Redux nel tuo progetto. Detto questo, preferisco ancora l'ultima opzione, quindi questo è l'approccio che userò per descrivere la configurazione.

2. Configurazione generale

Se esamini la cartella del plugin Redux Framework di default troverai molti file e directory, ma tutto quello che ti serve qui è la cartella ReduxCore.

La cartella ReduxCore

Copia tutto il contenuto di quella cartella nella cartella del plugin aggiuntivo. Crea una cartella, chiamala come vuoi, per esempio optionpanel, e inserire il contenuto di ReduxCore in esso. Quindi, crea un file vuoto all'interno di quella cartella e chiamalo config.php. Successivamente dovremo richiedere reduxframework, che faremo in un modo non conflittuale, quindi se il plugin aggiuntivo è installato nell'ambiente WordPress il sito non si bloccherà.

Nel tuo file principale del plugin aggiuntivo aggiungi il codice:

Questo è tutto! Il tuo Redux Framework è ora integrato, anche se non vedrai ancora alcun pannello delle opzioni, dato che prima dobbiamo creare alcune opzioni. Questo sarà fatto nel file config.php che abbiamo creato.

3. Creazione di un pannello delle opzioni

Come linea guida e punto di partenza puoi usare il file sample-config.php fornito con il plugin Redux. Questo contiene tutto il codice necessario per iniziare a creare le tue opzioni personalizzate. Per ora evidenziamo il processo di configurazione principale.

Apri il tuo file config.php e all'inizio aggiungi questo codice (l'apertura il tag non sarà necessario se è già presente):

 Questo controllo fa in modo che Redux Framework sia attivo, altrimenti tutte le opzioni che creeremo non funzioneranno e probabilmente genereranno tonnellate di errori PHP.
 Prima di iniziare a creare le nostre opzioni, abbiamo prima bisogno di qualche configurazione aggiuntiva. Creare una variabile che memorizzerà tutte le opzioni e può essere utilizzata all'interno dei file del tema:
$ opt_name = "your_variable_name";
 Rendilo unico, usando i prefissi, ad esempio: yourbrandname_yourthemename.
Successivamente, aggiungi il codice:
$ theme = wp_get_theme ();
Questo è necessario per configurare qualsiasi argomento di Redux che usi le informazioni sul tema installato.
argomenti
 A questo punto dobbiamo aggiungere i seguenti argomenti:
$ args = array ('opt_name' => $ opt_name, 'display_name' => $ theme-> get ('Name'), 'display_version' => $ theme-> get ('Version'), 'menu_type' => 'submenu', 'allow_sub_menu' => true, 'menu_title' => esc_html __ ('Impostazioni tema', yourtextdomain '),' page_title '=> esc_html __ (' ThemeSettings ', yourtextdomain'), 'google_api_key' => ", ' google_update_weekly '=> false,' async_typography '=> true,' admin_bar '=> true,' admin_bar_icon '=> ",' admin_bar_priority '=> 50,' global_variable '=> $ opt_name,' dev_mode '=> false,' update_notice '=> false,' customizer '=> true,' page_priority '=> null,' page_parent '=>' themes.php ',' page_permissions '=>' manage_options ',' menu_icon '=> ",' last_tab ' => ", 'page_icon' => 'icon-themes', 'page_slug' => 'themeoptions', 'save_defaults' => true, 'default_show' => false, 'default_mark' =>", 'show_import_export' => vero );
 Ci sono molti argomenti qui, ma non preoccuparti, metterò in evidenza quelli più importanti.
 menu_type
 Se vuoi che la pagina delle opzioni del tema appaia come elemento separato del menu di livello superiore, devi impostare questo valore su menu, se hai bisogno che le opzioni del tuo tema appaiano come sottomenu (preferisco metterle sotto Aspetto) imposta il valore a sottomenu.
 dev_mode
 Puoi abilitarlo durante lo sviluppo, ma non dimenticare di disabilitarlo quando pubblichi il tema.
 update_notice
 Poiché Redux farà parte del tuo progetto, non vorrai che i tuoi utenti ricevano avvisi di aggiornamento da Redux Framework, quindi imposta questo a falso.
 customizer
 Se vuoi mostrare le tue impostazioni personalizzate come parte del customizer di WordPress, imposta semplicemente questo argomento vero.
 La matrice degli argomenti contiene molti più elementi e se vuoi informazioni su ognuno di essi puoi trovare i dettagli in sample-config.php. Per i nostri bisogni, abbiamo personalizzato abbastanza gli argomenti. Ora impostiamo gli argomenti.
Redux :: setArgs ($ opt_name, $ args);
 Aggiungere sezioni
Ora il tuo pannello tematico è pronto, puoi aggiungere sezioni con opzioni. Pensa alle sezioni come a gruppi. Se si desidera aggiungere (ad esempio) le opzioni di intestazione, si crea una sezione di intestazione e si aggiungono opzioni. Per creare qualsiasi sezione avrai bisogno della seguente struttura:
Redux :: setSection ($ opt_name, array ('title' => esc_html __ ('Titolo sezione', 'yourtextdomain'), 'id' => esc_html __ ('section-unique-id', 'yourtextdomain'), 'icon' => 'nome-icona', 'campi' => array ()));
 Qui voglio evidenziare il id attributo: assicurati che sia unico. È possibile utilizzare icone personalizzate, ma il pacchetto di icone predefinito è elusiveicons.
 La tua sezione è stata creata, quindi ora puoi aggiungere opzioni all'array dei campi. Qui è possibile trovare un elenco di tipi di opzioni disponibili, nonché la struttura del codice con spiegazioni e punti salienti. 
Se vuoi fare la sezione a sottosezione della sezione aggiunta in precedenza, basta aggiungere un nuovo argomento 'subsection' => true. 
L'opzione stessa non è altro che una matrice con argomenti, ad esempio:
array ('id' => 'opt-checkbox', 'type' => 'checkbox', 'title' => esc_html __ ('Checkbox', 'yourtextdomain'), 'sottotitolo' => esc_html __ ('Nessuna convalida può essere fatto su questo campo digita ',' yourtextdomain '),' desc '=> esc_html __ (' Questo è il campo descrizione, di nuovo buono per ulteriori informazioni. ',' yourtextdomain '),' default '=>' 1 '// 1 = on | 0 = off), 
 Con questo codice abbiamo aggiunto una casella di controllo alla nostra sezione. Le cose più importanti qui sono l'id (dovrebbe essere unico), e il tipo (dovrebbe essere corretto, e seguire l'esatta denominazione del tipo di campo che Redux fornisce). Ancora una volta, maggiori dettagli sui campi possono essere trovati nel file sample-config.php.
 In generale, questo è tutto ciò che devi sapere per creare un pannello delle opzioni. Successivamente vedremo come utilizzare queste opzioni.
 4. Utilizzo delle opzioni all'interno di un tema
 Redux memorizza tutte le opzioni in una variabile globale. Ricorda il $ opt_name variabile che abbiamo creato nel file config.php? Questa è la variabile che memorizza tutte le opzioni e puoi accedervi nel modo seguente.
 Innanzitutto, è necessario dichiarare la variabile globale. E questo presenta il primo potenziale problema: non è consigliabile dichiarare una variabile globale al di fuori di una funzione o azione. La soluzione è quella di aggiungere al tuo file functions.php questa piccola funzione:
function yourprefix_theme_options_global_variable () global $ yourglobalvariable; 
Quindi, in ciascuna pagina in cui desideri utilizzare le tue opzioni, esegui prima la funzione in questo modo:
yourprefix_theme_options_global_variable ();
 Se hai bisogno della variabile globale all'interno di un'altra funzione o azione, puoi dichiararla senza questa funzione.
Utilizzo delle opzioni
 Se si usano le opzioni senza prima verificare l'opzione, si otterrà un avviso PHP che dice qualcosa variabile / indice non definito. Perché questo è importante? Perché se l'utente attiva il tema, ma non attiva il plug-in aggiuntivo che contiene il pannello delle opzioni, vedrà una raccolta di avvisi di avviso PHP su variabili non definite. Non ideale.
C'è un buon modello per evitare questa situazione: assomiglia a questo:
$ your_option_name = (isset ($ GLOBALS ['yourglobalvariable'] ['youroption']))? $ GLOBALS ['yourglobalvariable'] ['youroption']: "yourdefaultvalue for thisoption";
 Con questo piccolo assegno si assicura che non si otterranno avvisi di variabili / indici indefiniti. Se non si desidera assegnare valori predefiniti o creare una variabile, è possibile utilizzare invece questo modello: 
Se (isset ($ GLOBALS ['yourglobalvariable'] ['youroption']) // fai le cose ...
Conclusione
Grazie per la lettura, spero che questo ti permetta di iniziare a utilizzare Redux per le tue opzioni tematiche! Se avete domande o suggerimenti, si prega di lasciare un commento qui sotto.
link utili
 reduxframework.com
  ReduxFramework su Facebook
  @ReduxFramework su Twitter
 



		
			
	   
	




Web design