Share
In questa serie, abbiamo dato un'occhiata al Customizer del tema, come implementarlo nei nostri temi, come salvare, serializzare, recuperare le impostazioni e come implementare le opzioni in modo che si aggiornino automaticamente ogni volta che le opzioni vengono aggiornate.
Mentre iniziamo a concludere la serie, daremo un'occhiata ai controlli avanzati offerti da WordPress e a come implementarne uno nel nostro tema. Quindi esamineremo alcune delle risorse disponibili per quelli di voi che scelgono di considerare la ricerca, l'implementazione e l'utilizzo del Personalizzatore del tema nel vostro lavoro quotidiano.
Ma prima, iniziamo dando un'occhiata ad alcuni dei controlli offerti in modo nativo con WordPress.
Forse una risposta più adatta al tema dei controlli particolari è semplicemente nativo Controlli di Custom Theme. La verità è che sono un insieme di controlli che sono in bundle con WordPress che ci permettono di trarne vantaggio.
Mi riferisco semplicemente a loro come i controlli avanzati principalmente perché offrono più funzionalità rispetto al solito set di selezionare scatole, ingresso elementi, Radio pulsanti, e caselle di controllo.
Nota che al momento della stesura di questo articolo, non c'è molta documentazione sul codice attorno ad alcuni controlli, ma faremo tutto il possibile per documentarli, mostrare come implementarne uno e poi riempire il resto con l'articolo finale della serie.
Se vuoi introdurre la capacità di implementare una casella di input per l'acquisizione di testo, come il titolo del sito e / o la descrizione del sito, potresti essere interessato a utilizzare il WP_Customize_Control.
Sebbene questo non sia ufficialmente documentato nel Codex, è inteso per essere usato per catturare input dagli utenti in testo normale. Si noti che se si sceglie di utilizzare un controllo come questo, allora si desidera disinfettare i dati che vengono salvati nel database prima in realtà salvandolo in modo che nulla di pericoloso venga salvato e alla fine recuperato.
Infine, per coloro che sono sviluppatori orientati agli oggetti, vale la pena ricordare che questa chiamata è la classe base per tutti i controlli che verranno discussi nel resto di questo articolo.
Il color picker è ufficialmente conosciuto come il WP_Customize_Color_Control. Lo abbiamo visto in precedenza nella serie quando abbiamo implementato la funzione per selezionare il colore delle ancore nel nostro tema.
In breve, questo ci permette di selezionare un colore dalla tavolozza dei colori disponibili e quindi serializzare il valore nel database per recuperarlo in seguito quando si utilizza il tema.
Naturalmente, questo non si limita ad applicarlo globalmente ad ancore o testo, ma può essere applicato a qualsiasi cosa con cui è possibile accedere utilizzando un selettore CSS.
Uno dei controlli più comuni, ma potenzialmente confusi, è il controllo del caricamento dei file. Puoi trovare la sua pagina nel codice a WP_Customize_Upload_Control. Sebbene ci siano altri controlli per il caricamento di file come le immagini - uno che implementeremo momentaneamente - questo dà alcuni flessibilità nel caricare una varietà di file diversi.
Detto questo, questo controllo viene in genere implementato nel contesto di altri controlli, ad esempio il controllo Image Upload, per semplificare il caricamento dei file.
Certo, se lì è un caso in cui è necessario caricare un file più generico come PDF, CSV o altro, quindi il controllo fornisce una bella interfaccia per farlo.
Il WP_Customize_Image_Control è un modo semplice per implementare funzionalità che consentono agli utenti di caricare un'immagine generica. Più avanti in questo articolo, implementeremo questo controllo per caricare un'immagine di sfondo.
Ovviamente, questo controllo è più generico e può essere utilizzato per caricare altre immagini per qualcosa come un logo, un'immagine per il footer o qualcos'altro.
Il WP_Customize_Background_Image_Control è progettato per consentire agli utenti di caricare un'immagine di sfondo. Questo controllo integra la funzionalità di sfondo personalizzata introdotta in WordPress 3.4.
Il controllo stesso assomiglia molto all'altro controllo di caricamento delle immagini, ma è progettato specificamente per implementare l'immagine di sfondo.
Finalmente, il WP_Header_Image_Control viene utilizzato - solo il controllo immagine e il controllo immagine di sfondo - per facilitare agli utenti il caricamento delle immagini di intestazione.
La cosa unica di questo particolare controllo è che fornisce agli utenti la possibilità di ritagliare, ridimensionare e manipolare l'immagine proprio come la funzionalità di intestazione personalizzata introdotta in WordPress 3.4.
Ora che abbiamo trattato l'avanzato - oi controlli nativi - implementiamo il WP_Customize_Image_Control nel nostro tema. Questa particolare funzionalità richiede quanto segue:
Poiché abbiamo già messo a punto la nostra metodologia, possiamo continuare a introdurre la nuova funzione proprio come abbiamo fatto con le funzionalità del passato, nonché.
Nel functions.php, aggiungi il seguente blocco di codice:
Accentsconagua
$ wp_customize-> add_section ('tcx_advanced_options', array ('title' => 'Opzioni avanzate', 'priorità' => 201)); Questo introdurrà il Opzioni avanzate sezione nel Customizer tema, e la sua priorità lo posizionerà direttamente sotto la nostra sezione precedente.
Tuttavia, poiché non abbiamo effettivamente implementato alcuna sezione o impostazioni, la sezione non verrà ancora visualizzata nel customizer.
Successivamente, introdurremo le nuove impostazioni e le daremo il tcx_background_image ID in modo che possiamo fare riferimento ad esso functions.php, in tutto il tema e in JavaScript.
Per fare ciò, aggiungi il seguito subito dopo il codice che abbiamo definito sopra:
$ wp_customize-> add_setting ('tcx_background_image', array ('default' => ", 'transport' => 'postMessage')); Si noti che abbiamo anche definito il trasporto essere postMessage in modo che possiamo mostrare in modo asincrono le modifiche mentre l'utente carica un'immagine.
Successivamente, dobbiamo aggiungere il controllo e associarlo alla nuova impostazione. Per fare ciò, aggiungeremo quanto segue:
$ wp_customize-> add_control (new WP_Customize_Image_Control ($ wp_customize, 'tcx_background_image', array ('label' => 'Immagine di sfondo', 'settings' => 'tcx_background_image', 'section' => 'tcx_advanced_options'))); A questo punto, dovrebbe essere chiaro esattamente come stiamo collegando i controlli, ma per essere chiari, stiamo collegando il controllo impostando il suo impostazioni valore uguale a quello dell'impostazione, e il sezione valore uguale a quello del Impostazioni avanzate ID della sezione.
Dal momento che abbiamo definito il trasporto, passiamo ora all'aggiornamento a tema customizer.js immagine di sfondo dell'elemento.
wp.customize ('tcx_background_image', function (value) value.bind (function (to) 0 === $ .trim (to) .length? $ ('body') .css ('background-image', "): $ ('body') .css ('background-image', 'url (' + a + ')'););); Sopra, stiamo usando l'operatore ternario per determinare se il a parametro è una stringa vuota. Se è così è una stringa vuota, quindi rimuoviamo il immagine di sfondo proprietà; altrimenti, lo impostiamo sull'URL impostato su tale variabile.
L'ultima cosa che dobbiamo fare è aggiornare il stile blocco nel tcx_customizer_css funzione in modo che possiamo recuperare l'immagine di sfondo dopo che è stata serializzata.
Per fare ciò, aggiungi il seguente codice al stile bloccare:
background-image: url ( );
Essenzialmente, questo fa esattamente la stessa cosa che fa JavaScript sopra: Se il tcx_background_image il valore non è vuoto, quindi imposteremo il suo valore uguale a quello del immagine di sfondo Proprietà CSS.
Nel prossimo articolo, esamineremo una raccolta di risorse che forniscono un aspetto significativamente avanzato al Customizer del tema WordPress.
Comprenderemo anche lo sviluppo del nostro tema, ma fino ad allora è possibile scaricare la versione 0.6.0 del tema per dare un'occhiata al codice sorgente prima di finire nel prossimo articolo.
