Theme Customizer WordPress

In questi giorni mi sono trovato una richiesta di un cliente che richiedeva di avere un vero e proprio “Tema WordPress”, come quelli a pagamento per intenderci, da poter personalizzare in modo semplice e rivendere ai suoi propri clienti.

Cosi sono partito con il fare delle ricerche sulla pagina options.php di WordPress, ma la gestione non era troppo semplice e lo studio e la visualizzazione delle form non troppo veloce.
Navigando sul codex di wordpress mi sono accorto che da qualche versione (ormai la 3.4, sono un po’ in ritardo) il nostro amato CMS permette di personalizzare il proprio tema in versione Live con il famoso “Theme Customizer” ( Aspetto->Temi->Personalizza Tema corrente, vedi foto).

Con il Theme Customizer, su un tema base senza particolari funzioni è possibile cambiare il titolo e il motto del sito, il menu di navigazione e scegliere la pagina iniziale statica con la pagina del blog.

La cosa fantastica è che possiamo aggiungere al Theme Customizer tutte le sezioni che vogliamo come per esempio cambiare il colore del background, il colore del testo o addirittura il logo. Questo lo si può fare seguendo la guida del codex senza avere grandi conoscenze di php o di programmazione avanzata.

Guida per il Theme Customizer WordPress

Le mia prima esigenza era quella di dover cambiare il logo. Bene Cominciamo!

Innanzi tutto nella cartella del tema wordpress dove tengo tutti file delle funzioni da includere ho creato un file chiamandolo “customizer.php”, ma avrei potuto chiamarlo anche Pippo o Pluto oppure avrei potuto scrivere la nostra funzione direttamente nel “function.php”, qui sta a voi la scelta.

A questo punto ho creato la funzione necessaria e la sua azione con un add_action().

<?php function my_customize_register( $wp_customize ) {

//code goes here…

}
add_action( ‘customize_register’, ‘custom_customize_register’ );

Dopo aver creato la funzione, dobbiamo includere in nostro file customizer.php nel function.php in questo modo require_once locate_template('/lib/customizer.php'); e poi possiamo procedere con la parte core del Theme Customizer ovvero creare le form di cui necessitiamo.

Premetto che ogni form ha bisogno di una cosiddetta section per essere visualizzata.

Ne esitono alcune presenti di base su wordpress e possono essere riutilizzate come le seguenti:

• title_tagline – Site Title & Tagline
• colors – Colors
• header_image – Header Image
• background_image – Background Image
• nav – Navigation
• static_front_page – Static Front Page

Ma in questo caso ne dovremo fare una ad hoc per il nostro logo. Creiamo la section.

$wp_customize->add_section( 'logo_section' , array(
'title' => __( 'Logo', 'textdomain' ),
'priority' => 20,
'description' => __('Carica un logo per sostituire il nome del sito di default', 'textdomain'),
) );

La section viene creata associando un gruppo di opzioni al metodo $wp_customize->add_section().

Il primo valore è la slug della nostra sezione, il secondo è un array che contiene il titolo visualizzato della sezione, la posizione nel pannello con la priority e la descrizione visualizzata per spiegarne la funzione.

Cosi abbiamo la nostra bella sezione con il nome “Logo”.

A questo punto possiamo aggiungere la parte che salverà le nostre impostazioni con il metodo $wp_customize->add_setting().

$wp_customize->add_setting( 'logo' , array(
'default' => 'http://www.example.com/immagine',
'transport' => 'refresh',
) );

Il primo valore è la slug assegnata, il secondo è l’array con le opzioni da assegnare. Il primo il valore dell’array di default assegnato al campo del logo dove potremo inserire la URL dell’immagine che vedremo nel caso nessuna immagine sia associata, ma possiamo anche farne a meno. Il valore transport è di default impostato su refresh per permettere di ricaricare la pagina del Theme Customizer ogni volta che viene fatta una modifica a questo campo. Se non si vuole permettere il refresh automatico possiamo inserire il valore “postMessage”.

Ora è arrivato il momento di creare la form per inserire i nostri valori.

Per quanto riguarda le immagini il Theme Customizer di WordPress mette a disposizione delle classi gia create per alcuni occasioni specifiche come ad esempio l’upload di un immagine, il cambio di un colore con un color-picker, l’upload di un file media. Per altre esigenze dovremo usufruire di campi di input semplici come text, radio o checkbox.

$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'logo', array(
'label' => __( 'Logo', 'roots' ),
'section' => 'logo_section',
'settings' => 'logo', )
)
);

Stavolta per il nostro metodo $wp_customize->add_control() aggiuggiamo la classe WP_Customize_Image_Control, inserendo al suo interno la variabile $wp_customize, la slug presa dal add_setting() e un array contenente la label del campo di input, la slug della section al quale sarà associato in nostro campo di input e la slug della section.

Finalmente la nostra prima sezione è stata completata, ora all’interno del Theme Customizer del nostro tema wordpress troveremo una nuova voce chiamata “Logo” dove potremo semplicemente uploadare la nostra immagine e salvarla.

Ma ci manca ancora una cosa per permettere ciò, cosa?

Beh dobbiamo ovviamente stampare la nostra immagine nell’HTML una volta salvata. :)

Per stampare il nostro logo dovremo usare il codice che segue ed inserirlo nella header.php o ovunque vogliate far visualizzare il vostro logo :

<img src="<?php echo esc_url( get_theme_mod( 'logo' ) ); ?>">

E magicamente l’immagine salvata nel Theme Customizer si visualizzerà al suo posto.

Con questa tecnica potrete inserire tutti i campi desiderati e personalizzare il vostro tema in tempo reale senza dover scrivere una riga di codice successivamente, potrete cambiare l’immagine di sfondo, il colore del font, il font-family o addirittura il layout di una pagina.

Potrete trovare maggiori e più dettagliate informazione sul codex