Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Theme Development
Code

WordPress Theme Customizer: Metodologia per Sections, Settings, e Controls - Part 1

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called A Guide to the WordPress Theme Customizer.
A Guide to the WordPress Theme Customizer: Adding a New Setting
WordPress Theme Customizer: Methodology for Sections, Settings, and Controls – Part 2

Italian (Italiano) translation by Roberto Codognesi (you can also view the original English article)

A questo punto della serie, abbiamo visto tutti gli argomenti che dimostrano i benefici per noi designer e sviluppatori di utilizzare il "Theme Customizer", come implementarlo nel nostro tema, comprendendo le relazioni tra Sections, Settings, e Controls

Abbiamo visto anche come implementare un nostro "setting" e un "control" in una "section" predefinita di WordPress

In questo articolo vedremo come aggiungere una nostra section e vari settings e controls Verrà spiegata la metodologia per implementare nuove sections, nuovi settings e controls.

Nella seconda parte di questo articolo vedremo come creare controls ulteriroi Per ora vediamo il metodo e aggiungiamo un nuovo setting nel Customizer


Un metodo per aggiungere Options

Prima di aggiornare il nostro tema, spieghiamo cosa è necessario fare per aggiungere una nuova section, un novo setting e un nuovo control. Nota: da questo punto in poi diamo per scontato che useremo il metodo postMessage per i live updates.

Avere un metodo per aggiungere nuove options è molto meglio che procedere alla cieca, quindi diamo un'occhiata a cosa ci serve per implementare sections, settings, e controls ad un alto livello:

  1. Definire una section
  2. Aggiungere un setting ad una section
  3. Aggiungere un control per gestire la setting
  4. Scrivere il codice Javascript necessario
  5. Fare le necessarie chiamate al get_theme_mod

Niente di così complicato no? Certo, i fatti parlano meglio delle parole, quindi iniziamo.


Implementare Sections, Settings, e Controls

Proseguiremo questo articolo lavorando sulle stesse funzioni, templates, e file Javascript che abbiamo già definito nell'articolo precedente, quindi se non l'hai ancora fatto, ti consiglio di leggerlo

Detto questo, cominciamo.

1. definire una Section

Nella funzione php tcx_register_theme_customizer implementeremo una nuova Section chiamata Display Options, e la posizioneremo in fondo alla lista delle Sections del nostro Theme Customizer  La posizione nella lista viene definita dalla proprietà priority della funzione add_section

Abbiamo definito due argomenti:

  1. L'ID della section, così potremo collegare uno o più settings a questa section
  2. Il titolo e la posizione ('title' e 'priority') che verranno visualizzati nel nostro Theme Customizer Più è alto il numero di 'priority' e più in basso apparirà nel Customizer

Salva il file che contiene questa funzione e prova a ricaricare la finestra del browser che contiene il Customizer. La nostra sezione appena creata Display Options non appare. Questo avviene perché non ci sono ancora options da visualizzare - per ora.

Aggiungere una Setting alla Section

Per visualizzare la Section è necessario inserire almeno una Setting utilizzabile dall'utente Per poterlo fare aggiungiamo una opzione che consente all'utente di visualizzare o nascondere l'header

La prima cosa da fare è una chiamata alla funzione add_setting che identifica la Setting che stiamo creando, definisce il suo valore di default e il metodo di transport

Dovrebbe riuscirti tutto facilmente se hai seguito l'articolo precedente Appena sotto la chiamata alla funzione add_section, aggiungi la chiamata seguente:

In particolare, abbiamo creato una nuova Setting chiamata tcx_display_header che useremo per alternare la visualizzazione dell'intestazione utilizzando get_theme_mod e JavaScript.

Ma questo non basta per dare all'utente la possibilità di modificare la visibilità dell'intestazione - ora abbiamo bisogno di implementare un Control.

Aggiungere un Control per la Setting

Per realizzare questa Setting inseriamo una Checkbox per permetterà all'utente di visualizzare o nascondere la visibilità dell'header

Prima di tutto definiamo il Control Dopo la funzione add_setting definita sopra, aggiungi questo codice:

In questa chiamata colleghiamo il Control appena definito, alla Setting tcx_display_header. Nell'array definiamo l'ID della sezione in cui questa Setting deve essere mostrata Subito dopo definiamo la label che apparirà a sinistra del Control, e infine definiamo il tipo di controllo. Ovviamente definiamo 'checkbox'.

A questo punto salviamo il file che contiene le funzioni, facciamo un reload della pagina del browser e dovremmo vedere qualcosa di simile:

Theme Customizer Display Options

Bene! - vuol dire che tutto è stato assemblato correttamente per quanto riguarda il Customizer, però facendo click sulla checkbox non succede nulla.

Ora è il momento di collegare il nostro Theme Customizer al tema.

4. Scrivere il codice Javascript necessario

Apri il file theme-customizer.js. Dovrebbe essere all'interno della cartella js, come è stato definito nelle lezioni precedenti

Poi aggiungi questo codice

La funzione "cattura" l'ID della Setting che abbiamo creato e poi esegue la seguente logica: Se to è false, allora nascondi l'elemento header; altrimenti mostralo.

A questo punto, dopo aver ricaricato la pagina nel browser, potrai notare che l'header viene nascosta o resa visibile cliccando sulla checkbox.

Ma se salvi, non succede niente. Questo perché il valore salvato nel database non viene letto. L'ultima cosa che dobbiamo fare è utilizzare get_theme_mod.

5. Effettuare le chiamate a get_theme_mod

Infine, per implementare la nostra Setting, dobbiamo fare in modo che il valore salvato nel database venga letto quando la pagina viene caricata

Per effettuare questa operazione, individua la funzione tcx_customizer_css e quindi aggiungi il seguente codice tra il blocco style:

In breve, questa funzione legge il valore che è salvato nel database, associato all'ID. Se il valore è 'false' l'elemento header viene nascosto (display: none) altrimenti la regola CSS non viene renderizzata.


Cosa abbiamo fatto

A questo punto, dovresti aver effettuato una completa implementazione di questo checkbox che nasconde o rende visibile l'elemento header, dinamicamente quando l'utente utilizza il Customizer. Quando l'utente salva, l'impostazione viene aggiornata e salvata nel database, per essere utilizzata in maniera stabile in ogni pagina del tema.


Prossimo passo...

Ora che abbiamo definito una metodologia per l'implementazione di Controls, Settings e Sections, possiamo cominciare a lavorare con una varietà di altri controlli.

Nel prossimo articolo daremo un'occhiata al set di Controls base, e ad alcuni Controls avanzati che WordPress offre nel Theme Customizer.

Come per le lezioni precedenti, puoi scaricare i file nella versione 0.4.0 da GitHub per rivedere il codice, giocarci, e utilizzarlo nella prossima lezione.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.