WordPress Theme Customizer: Guida allo sviluppo

WordPress 4.7 è stato rilasciato con una gran quantità di nuove funzionalità, inclusi alcuni aggiornamenti alla user experience e dell’interfaccia utente del theme customizer.

Se stai sentendo parlare del Customizer per la prima volta, è una funzionalità dell’amministratore di WordPress (vai a Aspetto> Personalizza ) che consente agli utenti di modificare le impostazioni del tema utilizzando un’interfaccia WYSIWYG e personalizzare i colori, i caratteri, il testo e praticamente qualsiasi altra cosa che si desidera cambiare.

In questo articolo vi spiegherò come utilizzare il Customizer nei temi per creare una migliore esperienza utente.

Introduzione al theme Customizer

Il theme Customizer è stato introdotto per la prima volta in WordPress 3.4 e consente di visualizzare le modifiche al tuo tema con una “live preview”. Puoi modificare molti aspetti grafici senza modificare il tuo sito live. E quando hai apportato le modifiche, fai clic su Salva  e tutto viene applicato all’istante.

Come sviluppatori, abbiamo accesso alle funzionalità principali come la modifica del titolo del sito o dell’immagine di intestazione e possiamo anche creare controlli personalizzati per qualsiasi cosa desideriamo tramite l’ API di Personalizzazione temi .

Sviluppo per il Theme Customizer

Quando si codifica per il Customizer ci sono tre aree di interesse. Dovrai creare i comandi per il customizer, il CSS e/o la logica che implementa le impostazioni nel tema e, opzionalmente, la funzionalità di anteprima dal vivo che offre una migliore esperienza utente.

Primi passi

Prima di iniziare, creiamo un ambiente in cui possiamo lavorare. Per questo tutorial, useremo il tema di default di WordPress: Twenty Seventeen.

Se si visita il Customizer nell’area admin di WordPress, è possibile controllare già il titolo del sito, la descrizione e il CSS aggiuntivo del tuo sito web. Questo perché per impostazione predefinita il Customizer visualizza le modifiche aggiornando l’intera pagina.

Posa delle Fondamenta

Cominciamo dando le basi per i nostri sforzi di personalizzazione. Creiamo un file customizer.php e assicuriamoci di includerlo nel file functions.php.

include ('customizer.php');

Il file customizer.php inizierà con un’azione hook che contiene tutte le sezioni, le impostazioni e i controlli.

add_action( 'customize_register', 'cd_customizer_settings' );
function cd_customizer_settings( $wp_customize ) {
}

Sezioni, Impostazioni e Controlli

Le sezioni rappresentano la navigazione all’interno del Customizer. Dovresti già vederne sette: Denominazione del sito, Colori, Media dell’header, Menu, Widget, Pagina iniziale statica e Css aggiuntivo. Definendo una sezione possiamo creare una nuova voce all’interno della navigazione e riempirla con i controlli.

I controlli sono gli elementi visivi – l’interfaccia utente – che ci permettono di manipolare le impostazioni. Questi possono essere campi di input, aree di testo, selettori di colore e altri tipi di controlli che consentono di creare una migliore esperienza utente.

Le impostazioni rappresentano i dati che vogliamo che il nostro tema accetti e usi. Creiamo i controlli per consentire agli utenti di modificare facilmente le impostazioni.

Creazione di una sezione

Per aggiungere una nuova sezione usiamo il metodo $wp_customize->add_section(). Ci vogliono due argomenti: un identificatore di sezione e una serie di opzioni aggiuntive come il titolo della sezione visibile e la sua posizione nell’elenco delle sezioni.

$wp_customize->add_section( 'cd_colors' , array(
'title' => 'Colors',
'priority' => 30,
) );

Non dimenticare che il codice riportato sopra e qualsiasi altro codice che crea sezioni, controlli o impostazioni dovrebbero essere inseriti nella funzione cd_customizer_settings().

La nostra sezione è ora registrata, ma non verrà visualizzata finché non aggiungiamo un controllo su di essa.

Creazione di un’impostazione

Le impostazioni informano WordPress che il nostro tema userà un valore che può essere modificato dall’utente. Sono aggiunti utilizzando il metodo $wp_customize->add_setting() che richiede due parametri: l’identificatore per l’impostazione e una serie di opzioni che contengono informazioni come il valore predefinito.

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

L’opzione transport  in realtà è già impostata su refresh di default, ma l’ho aggiunto pperché la modificheremo in seguito. Refresh significa che quando l’impostazione viene modificata, WordPress deve aggiornare la vista live. Implementazioni più complesse del Customizer consentono, aggiornare la live view solo sull’elemento modificato, anziché sull’intera pagina.

Creazione di un controllo

Un Controllo collega le impostazioni all’input dell’utente. Viene dichiarato con il metodo $wp_customize->add_control(). Dal punto di vista degli argomenti richiesti, questo metodo è un po’ più complesso del precedente.

Se il primo argomento è un control object, è necessario un solo argomento, un’istanza dell’oggetto. L’oggetto probabilmente avrà propri argomenti aggiuntivi.

Il primo argomento può anche essere un identificatore, nel qual caso è necessario un secondo argomento con le sue opzioni.

Nel nostro caso usiamo la classe WP_Customize_Color_Control per creare una palette di selezione dei colori.

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array(
 'label'  => 'Background Color', 
'section' => 'cd_colors', 
'settings'  => 'background_color',
) ) );

Il primo parametro di questo oggetto é il $wp_customize stesso, il secondo è l’ID del controllo che stiamo creando. Il terzo parametro è un array che contiene alcune opzioni come l’etichetta, l’id della sezione in cui verrà inserita e l’id dell’impostazione che controlla.

Ora disponiamo di una coppia completa di impostazioni che verranno visualizzate nella nostra nuova sezione. Non fa ancora nulla, ma l’impostazione è lì e il suo valore sta cambiando.

Generazione del CSS

Per farlo funzionare effettivamente, dovremo applicare il valore dell’impostazione al nostro tema. In questo caso, vogliamo assicurarci che il corpo abbia sempre il valore di colore di sfondo come la nostra nuova impostazione. La classe .site-content-contain è propria del tema Twenty Seventeen, in base al tema installato andrete a cambiare classe, id o tag.

add_action( 'wp_head', 'cd_customizer_css');
function cd_customizer_css()
{
?>
<style type="text/css">
.site-content-contain { background: #<?php echo get_theme_mod('background_color', '#43C6E4'); ?>; }
</style>
<?php
}

Tieni presente che questo codice non deve essere inserito all’interno della funzione cd_customizer_settings().

La funzione get_theme_mod()recupererà le impostazioni del tema corrente; Il primo parametro è il nome dell’impostazione, il secondo è il valore predefinito.

Anteprime live

Abbiamo un sistema pulito, ma sarebbe molto più bello e fluido se i cambi di colore e altre modifiche fossero istantanei. Le anteprime live ci permettono di utilizzare Javascript per modificare in modo selettivo gli elementi.

Per iniziare, creiamo il file customizer.js e accertatiamoci che esso sia accodato correttamente.

add_action( 'customize_preview_init', 'cd_customizer' );
function cd_customizer() { wp_enqueue_script(  'cd_customizer',  get_template_directory_uri() . '/customizer.js',  array( 'jquery','customize-preview' ),  '',  true );}

Creiamo all’interno di customizer.js una funzione in cui inseriremo il nostro codice

( function( $ ) {

} )( jQuery );

( function( $ ) {

} )( jQuery );

Successivamente, assicurariamoci che il valore transportdell’opzione dell’impostazione background_color sia impostato su postMessage.

Infine, ecco come deve presentarsi il file customizer.js.

( function( $ ) {(
function( $ ) {
    wp.customize( 'background_color', function( value ) {
        value.bind( function( newval ) {
            $( '.site-content-contain' ).css( 'background-color', newval );
        } ); 
    } ); 
} )( jQuery );

La funzione customize()richiede due parametri, il nome dell’impostazione da monitorare e una funzione che esegue un’azione. La funzione a sua volta esegue un’altra funzione che lega il valore della nostra impostazione e ci permette di usarlo in tempo reale. Qui l’ho usata per modificare il CSS dell’elemento .site-content-contain.

Customizzati!

Ora dovresti essere in grado di lavorare all’interno del Customizer di WordPress per creare controlli più avanzati per i tuoi temi.

Per qualunque dubbio, qui sotto c’é il form dei commenti… Alla prossima!

Fonte