Share
WordPress Customizer a fost dezvoltat activ încă de la începuturile sale. API-urile continuă să evolueze, inclusiv API-ul JavaScript. Cu toate acestea, acesta este unul dintre cele mai puțin documentate API-uri din Codul WordPress. Prin urmare, există doar câteva înregistrări ample care arată modul în care puteți utiliza JavaScript API practic.
Folosirea JavaScript API-ului în WordPress Customizer poate de fapt să ne permită să oferim o experiență mai realistă în timp real, în timp ce personalizarea temei dincolo de distribuirea schimbării de la Control la fereastra Preview.
S-ar putea să fiți familiarizați cu modul în care API-ul Customizer JavaScript este utilizat pentru a aduce o schimbare la fereastra de previzualizare în timp real. Pentru a face acest lucru, am setat setarea transport mod pentru a postMessage și adăugați codul JavaScript corespunzător, după cum urmează.
Accentsconagua
wp.customize ('blogname', funcție (valoare) value.bind (funcția (la) $ ('.site-title a') .text (to);););Cu toate acestea, putem întinde, de asemenea, API în continuare, de exemplu, să ascundă, să afișeze, sau muta o secțiune, Panel, un control, modificați valoarea unei setări bazate pe o altă valoare de setare, și interconecta interacțiunile de control și previzualizarea. Și acestea sunt lucrurile pe care le vom examina în acest tutorial.
Am acoperit destul de extensiv WordPress Customizer cu câteva articole și câteva serii care acoperă intrările și ieșirile API-urilor Customizer.
Presupun ca ati inteles conceptul de baza al WordPress Customizer precum si componentele precum Panel, Section, Setting si Control. În caz contrar, vă recomandăm să petreceți ceva timp pe tutorialele și cursurile video pe această temă, înainte de a merge mai departe.
În primul rând, vom examina "Setările" și "Controalele" din Customizatorul pe care l-am adăugat în scopul acestui tutorial. Vom analiza, de asemenea, codul care le pune în locul lor.
În acest tutorial, ne vom concentra pe site-ul "Titlul site-ului". Și după cum puteți vedea mai sus, avem două controale: câmpul de intrare WordPress "Site Title" nativ și caseta de validare personalizată pentru a activa sau dezactiva "Titlul site-ului". Aceste două comenzi se află în secțiunea "Identitatea site-ului". Și în partea dreaptă a imaginii este Previzualizarea, unde puteți vedea "Titlul site-ului" redat.
Mai mult, după cum puteți vedea mai jos, avem de asemenea două comenzi care se află în secțiunea Culori pentru a schimba culoarea "Titlul site-ului" și planare culoarea de stat.
Tema noastră se bazează pe Underscores, care are toate codurile legate de personalizare plasate în /inc/customizer.php fişier.
funcția tuts_customize_register ($ wp_customize) $ wp_customize-> get_setting ('blogname') -> transport = 'postMessage'; $ wp_customize-> get_setting ('blogdescription') -> transport = 'postMessage'; $ wp_customize-> get_control ('blogdescription') -> prioritate = '12'; $ wp_customize-> get_setting ('header_textcolor') -> implicit = '# f44336'; $ wp_customize-> get_setting ('header_textcolor') -> transport = 'postMessage'; // Bifați caseta de selectare pentru a afișa numele blogului $ wp_customize-> add_setting ('display_blogname', array ('transport' => 'postMessage',)); $ Wp_customize-> add_control ( 'display_blogname', array ( 'eticheta' => __ ( 'Afișează titlul site-ului', 'Tuts'), 'secțiunea' => 'title_tagline', 'tip' => 'caseta de selectare', „prioritate '=> 11,)); // Adăugați setarea și controlul principal al culorilor textului. $ wp_customize-> add_setting ('header_textcolor_hover', array ('default' => '# C62828', 'sanitize_callback' => 'sanitize_hex_color', 'transport' => 'postMessage')); $ wp_customize-> add_control (noul WP_Customize_Color_Control ($ wp_customize, 'header_textcolor_hover', array ('label' => __ (' => '11'))); add_action ('customize_register', 'tuts_customize_register'); Și după cum puteți vedea mai sus, am făcut câteva modificări la cod, respectând nevoia noastră în acest tutorial.
blogdescription, la 12 astfel că caseta de selectare Setare, display_blogname, apare sub câmpul de introducere a titlului site-ului.display_blogname. Am setat prioritate la 11 care, în cazul nostru, se află între câmpul de introducere a titlului site-ului și "tagline".antet culoarea implicită la # f44336 si transport tip la postMessage.header_text_color. În mod similar, am stabilit și prioritatea 11 astfel încât să apară chiar sub limita header_textcolor reglaj.Toate aceste setări sunt setate cu postMessage în loc de cu reîmprospăta. postMessage permite ca valoarea să fie transportată în mod asincron și afișată în fereastra de previzualizare în timp real. Cu toate acestea, va trebui să scriem propriul JavaScript pentru a face față schimbării.
Trebuie să creați două fișiere JavaScript: un fișier, -preview.js personalizare, pentru a rezolva examinarea și celălalt fișier, -control.js personalizare, pentru a gestiona comenzile din panoul personalizat.
js ├──-preview.js // personalizare 1. fișiere pentru a gestiona previzualizarea ├──-control.js // personalizare 2. fișiere pentru a gestiona comenzile de ├── navigation.js └── skip-link-focus fix.js
În -preview.js personalizare este următorul cod.
(funcția ($) // Coduri aici.) (jQuery);
În prezent, este o funcție JavaScript închisă. Vom discuta mai exact cum previzualizăm modificările din fereastra de previzualizare în următorul tutorial din această serie.
În celălalt fișier, -control.js personalizare, adăugăm următorul cod:
(funcția ($) wp.customize.bind ('gata', funcția () var customize = this; // Codurile aici);) (jQuery);Așa cum puteți vedea mai sus, vom împacheta codul în acest fișier pe Customizer gata eveniment. Acest lucru va asigura că totul din cadrul personalizatorului este complet pregătit, inclusiv setările, panourile și comenzile, înainte de a începe executarea oricăror funcții personalizate.
În sfârșit, odată ce am adăugat codul, vom încărca aceste două fișiere JavaScript în două locații diferite.
// 1.-preview.js tuts_customize_preview_js funcția de personalizare () wp_enqueue_script ( 'tuts_customizer_preview', get_template_directory_uri () '/js/customizer-preview.js', array ( 'particularizați-preview'), null, adevărat.); add_action ('customize_preview_init', 'tuts_customize_preview_js'); // 2.-control.js tuts_customize_control_js funcția de personalizare () wp_enqueue_script ( 'tuts_customizer_control', get_template_directory_uri (). '/Js/customizer-control.js', array ( 'particularizați-control', 'jquery'), null, Adevărat ); add_action ('customize_controls_enqueue_scripts', 'tuts_customize_control_js'); -preview.js personalizare fișierul va fi încărcat în fereastra de previzualizare personalizată prin customize_preview_init Cârlig de acțiune. -control.js personalizare fișierul va fi încărcat în back-end-ul Customizer, unde elementele Setare și Control sunt accesibile prin intermediul customize_controls_enqueue_scripts Cârlig de acțiune.
WordPress a fost puternic investit în PHP încă de la începuturile sale. Astfel, nu va fi o surpriză faptul că majoritatea dezvoltatorilor care susțin ecosistemul sunt mai competenți și mai familiarizați cu API-urile PHP decât API-urile JavaScript.
Numai recent a integrat JavaScript extensiv prin Customizer și WP-API. Apucarea API-urilor JavaScript în WordPress Customizer poate fi o provocare. Așa cum am menționat, este partea de WordPress care este în prezent cel mai puțin documentat. Prin urmare, vom trece prin acest subiect temeinic.
Între timp, dacă sunteți în căutarea pentru alte utilități pentru a vă ajuta să construi setul tot mai mare de instrumente pentru WordPress sau de cod pentru a studia și de a deveni mai bine versat în WordPress, nu uitați să vedem ce avem la dispoziție în Envato Piaţă.
Aici am pregătit toate elementele esențiale pentru a lucra cu API-urile WordPress JavaScript. Și vom termina aici. În următoarea parte a seriei, vom descoperi mai mult ce se află sub API-urile JavaScript în WordPress și începeți să scrieți scripturi funcționale pe care le puteți implementa imediat în tema dvs..
Rămâneți aproape!
