Guida al personalizzatore del tema WordPress aggiunta di una nuova impostazione

A questo punto, abbiamo dato un'occhiata a ciò che è il Customizer tema, come funziona e ai componenti che sono unici. Abbiamo anche discusso di come le opzioni sono serializzate nel database in modo che possiamo recuperarle in seguito quando utilizziamo il nostro tema.

A tal fine, è tempo per noi di iniziare a fare il nostro lavoro con il Customizer tema. In questo articolo, daremo un'occhiata ai trasporti, al loro funzionamento e alla differenza nei loro due metodi principali.

Inoltre, introdurremo il nostro controllo in una delle sezioni esistenti di WordPress e vedremo come funziona con i vari modelli di trasporto.

Tutto sui trasporti

Prima di iniziare a scrivere qualsiasi codice, un altro concetto con cui dobbiamo familiarizzare è il concetto di trasportoS. In sostanza, questo è il modo in cui il Personalizzatore tema invia i dati al tema per visualizzare le modifiche.

Ci sono due modi in cui i dati possono essere trasportati:

ricaricare - Questo è il metodo predefinito. Usando questo metodo, quando un utente apporta una modifica a un'impostazione nel Customizer tema, la cornice che visualizza il tema verrà letteralmente aggiornata prima di mostrare la modifica.
postMessage - Questo metodo deve essere dichiarato esplicitamente, ma offre un'esperienza utente molto più avanzata. Quando viene utilizzato questo metodo, verrà eseguita una richiesta asincrona e l'aspetto del tema verrà aggiornato per riflettere le impostazioni dell'utente senza ricaricare la pagina.

Concetto abbastanza semplice, giusto?

In questo articolo, implementeremo due versioni delle nostre nuove impostazioni di Personalizzazione del tema. In primo luogo, lavoreremo con l'introduzione di un'impostazione che utilizza il ricaricare trasporto. Dopodiché, miglioreremo le impostazioni in modo che utilizzi il postMessage trasporto.

Alla fine dell'articolo, collegherò ad entrambe le versioni del codice in modo da avere qualcosa che puoi scaricare e installare sulla tua macchina locale invece di dover semplicemente fare riferimento a questo articolo.

Quindi, detto questo, cominciamo.

Implementazione delle nostre nuove impostazioni

In questo articolo, introdurremo un'impostazione che consentirà agli utenti di cambiare il colore di tutte le ancore esistenti nel loro tema. È raro che probabilmente avremo bisogno di cambiare il colore delle ancore universalmente in un sito, ma l'implementazione di questa particolare impostazione insegnerà quanto segue:

Come implementare una nuova impostazione in una sezione esistente
Come lavorare con WP_Customize_Color_Control
Come lavorare con ricaricare metodo di trasporto e come lavorare con postMessage metodo di trasporto

Ovviamente, c'è molto terreno da trattare.

Aggiungere il nostro gancio

Per iniziare, aggiungiamo un'ancora al nostro index.php modello in modo da avere qualcosa da colorare. Questo è un cambiamento facile. Assicurati semplicemente che il tuo index.php modello contiene questo:

  Questo è il contenuto. Questa è un'ancora in modo che possiamo dire che il Customizer del tema sta funzionando.

Successivamente, abbiamo bisogno di introdurre una funzione che è agganciata al customize_register azione:

 function tcx_register_theme_customizer ($ wp_customize) // Altro a cui venire ... add_action ('customize_register', 'tcx_register_theme_customizer');

Qui, abbiamo definito una funzione che verrà utilizzata per introdurre la nostra nuova impostazione. Nota che la cosa più importante su questa funzione è che accetta un singolo parametro - wp_customize - che è ciò che ci consente di aggiungere le nostre sezioni, impostazioni e controlli al Customizer tema.

Ricordiamo nell'ultimo articolo, abbiamo accennato al fatto che WordPress fornisce un numero di sezioni in modo da non dover aggiungere il nostro. In questo caso, trarremo vantaggio dal predefinito colori sezione.

Implementazione dell'impostazione

Nel contesto del tcx_register_theme_customizer funzione, aggiungi il seguente blocco di codice:

 $ wp_customize-> add_setting ('tcx_link_color', array ('default' => '# 000000'));

Questo dice che stiamo introducendo una nuova impostazione per il customizer con l'ID di tcx_link_color e il colore predefinito sarà nero.

Questo entrerà in gioco quando implementeremo il color picker. Quindi andiamo avanti e farlo ora. Subito dopo il blocco del codice sopra, aggiungi il seguente blocco alla tua funzione:

 $ wp_customize-> add_control (new WP_Customize_Color_Control ($ wp_customize, 'link_color', array ('label' => __ ('Link Color', 'tcx'), 'section' => 'colors', 'settings' => ' tcx_link_color ')));

Ciò introdurrà un controllo del selettore di colori nel colori sezione. Aggiungerà un'etichetta internazionalizzata che recita "Link Color" e si lega a tcx_link_color impostazione che abbiamo definito nel primo blocco di codice sopra.

La versione finale della funzione dovrebbe assomigliare a questa:

 function tcx_register_theme_customizer ($ wp_customize) $ wp_customize-> add_setting ('tcx_link_color', array ('default' => '# 000000')); $ wp_customize-> add_control (new WP_Customize_Color_Control ($ wp_customize, 'link_color', array ('label' => __ ('Link Color', 'tcx'), 'section' => 'colors', 'settings' => ' tcx_link_color ')));  add_action ('customize_register', 'tcx_register_theme_customizer');

Demo del controllo

A questo punto, salva il tuo lavoro, avvia WordPress, vai al Customizer tema e dovresti vedere qualcosa di simile a questo:

Si noti che è possibile espandere il selettore di colori, selezionare i colori e in genere utilizzarlo come previsto; tuttavia, l'ancora nel contenuto non cambia affatto. Successivamente, aggiungiamo la seguente funzione al nostro functions.php file.

 function tcx_customizer_css () ?>   Ovviamente, questa funzione è agganciata al wp_head azione. È responsabile della lettura del valore dalla tabella delle opzioni che corrisponde alla nostra nuova impostazione (identificata da tcx_link_color) e quindi scrive il valore in a stile bloccare nell'intestazione della pagina.
 Una volta terminato, aggiorna il Customizer del tema e dovresti notare che le modifiche si verificano ogni volta che selezioni un colore. Dovresti anche notare che lo sfarfallio della pagina ogni volta che viene apportata una modifica non solo al colore, ma anche alle opzioni Titolo, Tagline o Pagina iniziale statica, nonché.
 Aggiornamento del nostro trasporto
 Ora che abbiamo funzionato, possiamo introdurre alcune modifiche che renderanno l'esperienza dell'utente un po 'migliore in relazione alla modifica delle opzioni del tema usando il Customizer Theme di WordPress.
 Per prima cosa, dobbiamo aggiornare il nostro footer.php modello in modo che includa una chiamata a wp_footer (). Questo è così che possiamo caricare JavaScript nel footer del nostro tema che è necessario per postMessage trasporto.
 Il piè di pagina dovrebbe assomigliare a questo:
   ©   Tutti i diritti riservati 
   
 Successivamente, dobbiamo aggiornare il add_setting chiamare functions.php in modo che usi il metodo di trasporto corretto.
 Aggiorna il codice in modo che assomigli a questo:
  $ wp_customize-> add_setting ('tcx_link_color', array ('default' => '# 000000', 'transport' => 'postMessage'));
 Finalmente, fallo non rimuovere la funzione tcx_customizer_css che abbiamo definito nella versione precedente, poiché sarà comunque necessario leggere il valore che stiamo selezionando per i nostri ancoraggi: li salveremo in modo asincrono piuttosto che sull'aggiornamento.
 Ora crea una directory nella radice del tuo tema chiamata js quindi aggiungere un a tema customizer.js file nella directory.
 In questo file JavaScript, dobbiamo aggiungere il seguente blocco di codice. Di solito, mi piace provare a spiegare quello che stiamo facendo, ma in questo caso, sarà più facile da esaminare dopo visualizzazione del codice.
  (function ($) "use strict"; wp.customize ('tcx_link_color', function (value) value.bind (function (to) $ ('a') .css ('color', a); ););) (jQuery);
 In questo codice, notiamo che abbiamo accesso a a wp Oggetto JavaScript che ci offre a personalizzare messaggio, molto simile al lato server $ Wp_customize-> add_setting () è l'installazione.
 Successivamente, si noti che la funzione acquisisce l'ID di un'impostazione, una funzione di callback che riceve un oggetto con originale valore, e quindi ci consente di associare un'altra funzione a quell'oggetto per apportare modifiche ogni volta quello l'oggetto è cambiato.
 Ancora con me?
 Un altro modo per dirlo è questo: quando il colore del link viene modificato, siamo in grado di apportare modifiche alla visualizzazione del tema ogni volta che viene utilizzato il selettore di colori.
 Detto ciò, rivisitiamo il functions.php file e introdurre una nuova funzione in modo da poter correttamente accodare il nostro file JavaScript.
 Innanzitutto, introdurremo una funzione chiamata tcx_customizer_live_preview () e si aggancia al customize_preview_init azione:
  function tcx_customizer_live_preview () // More to come add_action ('customize_preview_init', 'tcx_customizer_live_preview');
 Successivamente, faremo una chiamata standard a wp_enqueue_script quello porterà nel nostro a tema customizer.js file, ma nota che stiamo passando l'argomento finale come vero in modo che lo script venga aggiunto al footer del documento:
  wp_enqueue_script ('tcx-theme-customizer', get_template_directory_uri (). '/js/theme-customizer.js', array ('jquery', 'customize-preview'), '0.3.0', vero);
 La versione finale della funzione si presenta così:
  function tcx_customizer_live_preview () wp_enqueue_script ('tcx-theme-customizer', get_template_directory_uri (). '/js/theme-customizer.js', array ('jquery', 'customize-preview'), '0.3.0', vero );  add_action ('customize_preview_init', 'tcx_customizer_live_preview');
 Salva tutto il tuo lavoro. Supponendo che tu abbia fatto tutto bene, ora dovresti essere in grado di cambiare le opzioni Titolo, Tagline, Colore link e Pagina iniziale statica senza dover aggiornare la pagina.
 Un'esperienza utente molto migliore, eh?
 
 Ma c'è di più da venire ... 
 Abbiamo guardato Un sacco in questo articolo. Tanto che il codice sorgente di questo articolo è stato rilasciato in due diversi download:
  Innanzitutto, scarica la versione che utilizza il ricaricare trasporto
 Quindi, scaricare la versione che utilizza il postMessage trasporto
 
 Ma non abbiamo ancora finito. Nel prossimo articolo, daremo un'occhiata a come introdurre la nostra sezione originale insieme alle nostre impostazioni e controlli originali per completare questa serie.
 Per ora, sperimenta il codice che abbiamo reso disponibile sopra in modo che tu sia pronto per lavorare nel prossimo articolo!



		
			
	   
	




Codice