Redux è un robusto framework in PHP utilizzato per creare applicazioni web molto flessibili. Oggi vedremo Redux implementato all’interno di un tema WordPress per creare un’area di opzioni che ci permette di gestire qualunque aspetto del nostro sito web. Iniziamo!
Redux può essere installato come un classico plugin: => https://devs.redux.io/guides/basics/install.html =>Download plugin: https://nl.wordpress.org/plugins/redux-framework/
Redux Configurazione di Base
Dopo aver installato il plugin, vediamo alcune configurazioni di base da aggiungere all’interno del functions.php. Con Redux possiamo creare un vero e proprio pannello di amministrazione per qualunque tema WordPress e decidere di modificare qualunque cosa e qualunque comportamento del tema. Possiamo anche decidere di nascondere o rendere visibile una sezione al verificarsi di un evento oppure se il template di pagina (o il tipo di contenuto) è di un certo tipo.
Dopo aver installato e attivato il plugin dobbiamo iniziare a creare la nostra dashboard dove inserire, man mano, tutti i controlli che vogliamo. Vediamo il codice da aggiungere nel function.php del nostro tema per creare la voce di menu nel backend di WordPress:
<?php
if ( ! class_exists( 'Redux' ) ) {
return;
}
$opt_name = 'redux_demo';
$theme = wp_get_theme(); // For use with some settings. Not necessary.
$args = array(
'display_name' => $theme->get( 'Name' ),
'display_version' => $theme->get( 'Version' ),
'menu_title' => esc_html__( 'Dashboard', 'redux-framework-demo' ),
'customizer' => true,
);
Redux::setArgs( $opt_name, $args );
Redux::setSection( $opt_name, array(
'title' => esc_html__( 'Campi di Base', 'redux-framework-demo' ),
'id' => 'basic',
'desc' => esc_html__( 'Campi HTMl di base', 'redux-framework-demo' ),
'icon' => 'el el-home',
'fields' => array(
array(
'id' => 'opt-text',
'type' => 'text',
'title' => esc_html__( 'Testo di esempio', 'redux-framework-demo' ),
'desc' => esc_html__( 'Descrizione di esempio', 'redux-framework-demo' ),
'subtitle' => esc_html__( 'Esempio di sub-titolo', 'redux-framework-demo' ),
'hint' => array(
'content' => 'This is a <b>hint</b> tool-tip for the text field.<br/><br/>Add any HTML based text you like here.',
)
)
)
) );
Salviamo il file functions.php e nel backend vedremo una nuova voce “Dasboard”, cliccando su “Campi di Base” vediamo un campo HTML di tipo text. Ipotizziamo di volere aggiungere nella pagina che mostra il singolo articolo, il contenuto di questo campo text. Vediamo come fare.
Redux: Aggiungiamo un Campo TEXT
All’interno del template di pagina che si occupa di mostrare il contenuto del singolo articolo (single.php oppure in template-part/content-singole.php) aggiungere, nella posizione desiderata, il seguente codice PHP:
// Utilizziamo le Redux API
echo Redux::getOption( 'OPT_NAME', 'FIELD_ID', 'DEFAULT_VALUE' );
// Utilizziamo global argment
global $redux_demo;
echo $redux_demo['opt-text'];
A questo punto, torniamo nel backend e accediamo a “Campi di Base” e inseriamo un testo di prova nel campo. Vedere immagine di seguito.
Salviamo e visualizziamo un articolo, vedremo comparire il contenuto aggiunto tramite Redux.
Redux: Aggiungiamo un Campo Swicth
Ora che stiamo iniziando a configurare Redux per creare il nostro pannello delle opzioni, non abbiamo più limiti.. e possiamo ad esempio creare un pulsante di tipo Switch per decidere se mostrare una sezione HTML nel nostro sito web. Iniziamo!
Per questo esempio impostiamo un’opzione all’interno del nostro pannello di amministrazione che ci permette di decidere se mostrare il box autore alla fine di ogni articolo. Per farlo dobbiamo aggiungere un campo HTML di tipo Switch e una regola CSS.
array(
'id' => 'opt-switch',
'type' => 'switch',
'title' => __('Attiva/Disattiva', 'redux-framework-demo'),
'subtitle' => __('Attivare o disattivare il box Autore nei singoli articoli', 'redux-framework-demo'),
'default' => true
),Con il codice sopra che dovrà essere aggiunto nel function.php subito dopo il precedente campo Text, indichiamo a Redux di aggiungere un campo Switch e di impostarlo come impostazione predefinita su “On”. Il risultato è nell’immagine di seguito.
A questo punto dobbiamo aggiungere una condizione IF in PHP che assegna un display:none; al DIV del box autore. All’interno del template di pagina del singolo articolo, aggiungiamo codice PHP per l’IF dopo avere intercettato la classe del div che contiene il box:
Tramite gli strumenti di Google Chrome individuiamo il DIV che ospita il nostro box Autore che è quello con classe “editorial-author-wrapper”. Ora dobbiamo aggiungere del codice PHP per assegnare una regola CSS all’interno di uno STYLE.
All’interno del template di pagina aggiungiamo questo codice:
<?php
global $redux_demo;
// L'output sarà 1 che corrisponde a On mentre 0 corrisponde a Off
if ($redux_demo['opt-switch'] == "1") {
$nascondi_box_autore = "none";
}
?>
<style>
.editorial-author-wrapper {
display: <?php echo $nascondi_box_autore; ?>;
}
</style>Cosa abbiamo fatto? con il codice sopra, stiamo dicendo che, se il valore del campo “Swicth” è su on la variabile $nascondi_box_autore dovrà contenere “none” e questo valore dovrà essere aggiunto come attributo nella regola CSS aggiunta direttamente in pagina.
Conclusioni
Con Redux abbiamo la possibilità di creare una sezione interna al back-end di WordPress che permette di avere controllo su tutto il nostro tema. Si possono effettuare configurazioni sia per aspetti di base sia per impostazioni più avanzate. Si può, ad esempio, impostare il controllo sui font del nostro tema, oppure uno stile per gli heading tags o altre configurazioni condizionali che si attivano al verificarsi di determinati eventi, ad esempio integrando i conditional tag (leggi articolo) o lavorando con controlli PHP.
