Share
Il personalizzatore di WordPress è stato sviluppato attivamente sin dal suo inizio. Le API sono in continua evoluzione, compresa l'API JavaScript. Tuttavia, è una delle API meno documentate nel codice WordPress. Quindi ci sono solo pochi record che mostrano come sfruttare l'API di JavaScript in pratica.
L'utilizzo dell'API JavaScript nel Personalizzatore di WordPress può effettivamente consentirci di offrire un'esperienza in tempo reale più convincente mentre personalizzi il tema oltre a trasmettere la modifica dalla finestra Controllo alla finestra Anteprima.
Potresti avere familiarità con il modo in cui l'API JavaScript di Personalizzazione viene utilizzata per trasmettere una modifica alla finestra di anteprima in tempo reale. Per fare ciò, impostiamo l'impostazione trasporto modalità a postMessage e aggiungi il codice JavaScript corrispondente, come segue.
Accentsconagua
wp.customize ('blogname', function (value) value.bind (function (to) $ ('.site-title a') .text (to);););Tuttavia, è anche possibile estendere ulteriormente l'API, ad esempio, nascondere, mostrare o spostare una sezione, un pannello, un controllo, modificare il valore di un'impostazione in base a un altro valore di impostazione e interconnettere le interazioni di anteprima e controllo. E questi sono ciò che esamineremo in questo tutorial.
Abbiamo coperto il personalizzatore di WordPress abbastanza estesamente con un pugno di articoli e un paio di serie che coprono i dettagli delle API di Customizer.
Presumo che tu abbia colto il concetto centrale di WordPress Customizer così come i componenti come Panel, Section, Setting e Control. Altrimenti, ti consiglio vivamente di dedicare un po 'di tempo ai nostri tutorial e ai nostri corsi video sull'argomento, prima di procedere ancora oltre.
Per cominciare, esamineremo le "Impostazioni" e i "Controlli" nel Customizer che abbiamo aggiunto per lo scopo di questo tutorial. Analizzeremo anche il codice che li inserisce al loro posto.
In questo tutorial, ci concentreremo sul sito "Titolo del sito". E come puoi vedere sopra, abbiamo due controlli: il campo di input "Titolo del sito" nativo di WordPress e la nostra casella di controllo personalizzata per abilitare o disabilitare il "Titolo del sito". Questi due controlli risiedono nella sezione "Identità sito". E sul lato destro dell'immagine è l'anteprima, dove è possibile vedere il "titolo del sito" in fase di rendering.
Inoltre, come puoi vedere qui sotto, abbiamo anche due controlli che risiedono nella sezione Colori per cambiare il colore del "Titolo del sito" e il suo librarsi colore dello stato.
Il nostro tema qui è basato su Underscores, che ha tutti i codici relativi al Customizer inseriti nel /inc/customizer.php file.
function tuts_customize_register ($ wp_customize) $ wp_customize-> get_setting ('blogname') -> transport = 'postMessage'; $ wp_customize-> get_setting ('blogdescription') -> transport = 'postMessage'; $ wp_customize-> get_control ('blogdescription') -> priority = '12'; $ wp_customize-> get_setting ('header_textcolor') -> default = '# f44336'; $ wp_customize-> get_setting ('header_textcolor') -> transport = 'postMessage'; // Checkbox per visualizzare Blogname $ wp_customize-> add_setting ('display_blogname', array ('transport' => 'postMessage',)); $ wp_customize-> add_control ('display_blogname', array ('label' => __ ('Visualizza titolo del sito', 'tuts'), 'section' => 'title_tagline', 'type' => 'checkbox', 'priority '=> 11,)); // Aggiungi l'impostazione e il controllo del colore del testo principale. $ wp_customize-> add_setting ('header_textcolor_hover', array ('default' => '# C62828', 'sanitize_callback' => 'sanitize_hex_color', 'transport' => 'postMessage',)); $ wp_customize-> add_control (new WP_Customize_Color_Control ($ wp_customize, 'header_textcolor_hover', array ('label' => __ ('Intestazione testo Colore: Hover', 'tuts'), 'sezione' => 'colori', 'priorità' => '11'))); add_action ('customize_register', 'tuts_customize_register'); E come puoi vedere sopra, abbiamo apportato alcune modifiche al codice, rispettando le nostre necessità in questo tutorial.
BlogDescription, a 12 in modo che la casella di controllo Impostazioni, display_blogname, appare sotto il campo di inserimento "Titolo del sito".display_blogname. Abbiamo impostato il priorità a 11 che, nel nostro caso, risiede tra il "Titolo del sito" e il campo di inserimento "Tagline".titolo colore predefinito a # f44336 e il trasporto digitare a postMessage.header_text_color. Allo stesso modo, impostiamo anche la priorità 11 in modo che appaia appena sotto il header_textcolor Ambientazione.Tutte queste impostazioni sono impostate con postMessage invece di con ricaricare. Il postMessage opzione consente il trasporto del valore in modo asincrono e visualizzato nella finestra di anteprima in tempo reale. Tuttavia, dovremo scrivere anche il nostro JavaScript per gestire il cambiamento.
Dobbiamo creare due file JavaScript: un file, customizer-preview.js, trattare con l'anteprima e l'altro file, customizer-control.js, per gestire i controlli all'interno del pannello Customizer.
js ├── customizer-preview.js // 1. File per gestire l'anteprima ├── customizer-control.js // 2. File per gestire i controlli ├── navigation.js └── skip-link-focus- fix.js
Entro customizer-preview.js è il seguente codice.
(function ($) // Codes here.) (jQuery);
Attualmente è una funzione JavaScript chiusa vuota. Discuteremo in modo più specifico in che modo visualizziamo l'anteprima delle modifiche nella finestra di anteprima nel prossimo tutorial di questa serie.
Nell'altro file, customizer-control.js, aggiungiamo il seguente codice:
(function ($) wp.customize.bind ('ready', function () var customize = this; // Codes here);) (jQuery);Come puoi vedere sopra, avvolgeremo il codice in questo file sul Customizer pronto evento. Ciò garantirà che tutto all'interno del Customizer sia completamente pronto, comprese le impostazioni, i pannelli e i controlli, prima di iniziare l'esecuzione di eventuali funzioni personalizzate.
Infine, una volta aggiunto il codice, verranno caricati questi due file JavaScript in due posizioni diverse.
// 1. funzione customizer-preview.js tuts_customize_preview_js () wp_enqueue_script ('tuts_customizer_preview', get_template_directory_uri (). '/Js/customizer-preview.js', array ('customize-preview'), null, true); add_action ('customize_preview_init', 'tuts_customize_preview_js'); // 2. funzione customizer-control.js tuts_customize_control_js () wp_enqueue_script ('tuts_customizer_control', get_template_directory_uri (). '/Js/customizer-control.js', array ('customize-controls', 'jquery'), null, vero ); add_action ('customize_controls_enqueue_scripts', 'tuts_customize_control_js');Il customizer-preview.js il file verrà caricato all'interno della finestra di Anteprima personalizzazione attraverso il customize_preview_init Gancio di azione. Il customizer-control.js il file verrà caricato nel back-end di personalizzazione, in cui gli elementi di impostazione e controllo sono accessibili tramite customize_controls_enqueue_scripts Gancio di azione.
WordPress è stato pesantemente investito in PHP sin dal suo inizio. Pertanto, non sarà una sorpresa che la maggior parte degli sviluppatori che supportano l'ecosistema siano più abili e familiari con le API PHP rispetto alle API JavaScript.
È solo di recente che ha integrato JavaScript estensivamente tramite Customizer e WP-API. Afferrare le API JavaScript nel personalizzatore di WordPress può essere una vera sfida. Come accennato, è il lato di WordPress che è attualmente meno documentato. Pertanto, esamineremo attentamente questo argomento.
Nel frattempo, se stai cercando altre utilità che ti aiutino a costruire il tuo set crescente di strumenti per WordPress o che il codice studi e diventi più esperto in WordPress, non dimenticare di vedere cosa abbiamo a disposizione in Envato Mercato.
Qui abbiamo preparato tutti gli elementi essenziali per lavorare con le API JavaScript di WordPress. E finiremo qui. Nella prossima parte della serie, scopriremo di più ciò che si trova sotto le API JavaScript in WordPress e inizieremo a scrivere script funzionali che è possibile implementare immediatamente nel tema.
Rimanete sintonizzati!
