Theme Customizer WordPress – Parte 2

Il mio articolo precedente sul Theme Customizer WordPress ero improntato specificatamente sul cambio del logo tramite il nostro potente strumento di Theme Customizer che ci permette di cambiare lo stile del nostro sito e vedere le modifiche in tempo reale senza usare una riga di codice.

Questa volta vi mostrerò come utilizzare il Theme Customizer WordPress per fare altre modifiche al nostro tema.

Mettiamo il caso volessimo cambiare per esempio il colore di sfondo del nostro sito, oppure il colore di un font; abbiamo a disposizione un’altra classe di wordpress che ci permetterà di far visualizzare un cosiddetto Color Picker nel nostro Theme Customizer, mettiamo mano al codice.

Guida per il Theme Customizer WordPress – Parte 2

Creiamo di nuovo la nostra funzione come spiegato nel precedente articolo sul Theme Customizer.

<?php function my_customize_register( $wp_customize ) {
    //code goes here...
}
add_action( 'customize_register', 'custom_customize_register' );

All’interno della nostra funzione, che potrebbe essere anche la stessa creata seguendo l’articolo precedente, andremo a creare la nostra section, necessaria a contenere il Color Picker.

$wp_customize->add_section( 'background_section' , array(
 'title' => __( 'Background', 'textdomain' ),
 'priority' => 30,
 'description' => __('Inserisci qui un codice colore per cambiare lo sfondo del sito. ( es: #fff )', 'textdomain'),
 ) );

Ora creeremo la parte delle impostazioni di base che poi andremo a richiamare nella parte di controllo:

 $wp_customize->add_setting( 'background_color' , array(
 'default' => '#000000',
 'transport' => 'refresh',
 ) );

Abbiamo dato un nome alla nostra impostazione di base, “background_color”, che andremo a richiamare in seguito. Poi dentro l’array abbiamo assegnato un colore di default che verrà utilizzato dal WordPress Theme Customizer nel caso in cui l’utente non avrà selezionato nessun tipo di colore specifico dal color picker. Transport è il parametro per far si che al cambiamento di un dato nel theme customizer la pagina si aggiorni in modo automatico facendoci vedere l’anteprima delle modifiche effettuate. Nel caso volessimo aggiornare la pagina in modo manuale possiamo assegnare il valore “postMessage” al posto di “refresh”.

Creata la nostra sezione per contenere il Color Picker e la parte delle impostazioni iniziali possiamo procedere con il creare il controllo del color picker, nel seguente modo.

 $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array(
 'label' => __( 'Header Color', 'mytheme' ),
 'section' => 'background_section',
 'settings' => 'background_color',
 ) ) );

Il metodo usato è quello che di base ci fornisce il theme customizer per poter visualizzare il color picker, gli abbiamo assegnato la variabile $wp_customize, il background_color preso dalle impostazioni iniziali. Nell’array si decide la label del color picker, la sezione alla quale sarà assegnato il color picker e le impostazioni da utilizzare.

A questo punto abbiamo potuto vedere come cambiare wordpress dal theme Customizer  e come poter cambiare un colore di sfondo, ma questa tecnica si può utilizzare con qualsiasi altro stile che voi vogliate, il colore di un link, dei titoli, il font dei testi o addirittura il layout di una pagina, senza dover ricorrere alle più complesse page option wordpress.

Per approfondimenti vi consiglio fortemente di visualizzare la pagina principale del codex wordpress che si occupa del theme customizer