Să presupunem că am creat o temă cu un număr de setări și controale personalizate, care permit utilizatorilor temei să personalizeze o serie de lucruri pe front-endul temei, cum ar fi titlul site-ului, linia de slogan și culoarea.

Cu toate acestea, unii dintre utilizatorii noștri ar putea să nu știe imediat că pot personaliza aceste părți ale temei, mai ales dacă sunt îngropați în mai multe panouri și secțiuni. Deci, cum putem face mai repede pentru ei să personalizeze tema?

WordPress.com a adăugat recent butoanele de editare pe unele zone editabile, care sunt imediat vizibile la lansarea Customizer. Când utilizatorul face clic pe aceste butoane, le va afișa controlul respectiv.

Noul buton "Editați" din fereastra de previzualizare personalizată de pe WordPress.com, 

Aceasta este o ameliorare plăcută pentru UX pe care, de fapt, o putem realiza și cu API JavaScript Customizer pe tema noastră. Și veți descoperi că acest lucru nu este atât de complicat cum ați fi imaginat. Deci, hai să aruncăm o privire rapidă asupra modului în care funcționează.

Cerințe preliminare

În ultimul tutorial, am scris doar cod în -control.js personalizare , care afectează interfețele back-end personalizate. În acest tutorial, vom folosi și celălalt fișier, -preview.js personalizare, care este încărcat în fereastra de previzualizare. Ar trebui să aveți aceste două fișiere create și încărcate. În caz contrar, vă sugerăm să urmați primul tutorial al acestei serii înainte de a continua.

Crearea unui buton de editare

Mai întâi de toate, adăugăm câteva Editați | × butoanele de lângă Titlul site-ului.

 "rel =" acasă ">     

Utilizarea is_customize_preview (), acest buton va fi afișat numai în fereastra de previzualizare personalizată. Fiecare dintre aceste butoane este asociat cu a clasă Nume, .-edit personalizare, care ne va permite să selectăm aceste butoane și să le legăm cu o clic Eveniment mai târziu.

Mai mult, am adăugat și aceste butoane cu un De control a datelor atribut care conține numele sau ID-ul setărilor înregistrate în Customizer. Numele din acest atribut ne va ajuta să determinăm corect setarea și controlul pentru a fi ulterior difuzate utilizatorului.

Două butoane de editare pentru a personaliza titlul și culoarea titlului.

Deoarece prezentarea nu este preocuparea noastră principală pentru moment, butoanele noastre "Editare" din fereastra Previzualizare nu arată la fel de frumoase ca cele din WordPress.com. Puteți adăuga stilurile într-un mod care să corespundă designului dvs. de temă în ansamblu.

Definirea unui eveniment personalizat

Apoi, definim un eveniment personalizat; este apasat un eveniment care spune unul dintre aceste butoane. Adăugați următorul cod în -preview.js personalizare fişier.

var customize = wp.customize; $ (document.body) .on ('click', '.customizer-edit', functie () customize.preview.send ('preview-edit', $ (this) );

Codul leagă fiecare dintre aceste butoane cu clic Eveniment, folosind  .preview.send () metoda de a lansa un eveniment. .preview.send () metoda ia doi parametri, și anume numele personalizat al evenimentului și argumentul. În cazul nostru, am definit un nou eveniment numit preview-edit, și să treacă un argument cu datele recuperate de la De control a datelor atributul butonului.

Ascultarea evenimentului personalizat

Putem asculta un eveniment personalizat din .preview.send () metodă printr-o altă metodă Customizer numită .previewer.bind ()-observați Detectoare cu er. Această metodă este similară cu jQuery .pe() Metoda, în care definim numele evenimentului pentru a asculta și o funcție care va rula la declanșarea evenimentului. Adăuga .previewer.bind () în -control.js personalizare, după cum urmează.

var customize = wp.customize; customize.previewer.bind ('preview-edit', funcția (date) );

Apoi, transformăm datele transmise într-un format de conformitate JSON, selectăm un element de control bazat pe Nume extras din date, și să se concentreze asupra elementului de control folosind Customizer .se concentreze () metodă.

var customize = wp.customize; customize.previewer.bind ('preview-edit', funcția (data) var data = JSON.parse (data); var control = customize.control (data.name); control.focus (););

Acum, după cum puteți vedea mai jos, atunci când faceți clic pe, de exemplu, butonul "Editare text", acesta va afișa setarea "Titlul site-ului" și va focaliza cursorul în intrare.

Butonul Editați în acțiune.

În plus, dacă ne uităm la codul sursă al acesteia, .se concentreze () metoda acceptă un parametru numit completeCallback. Acest parametru rulează consecutiv după .se concentreze () funcția este executată. Putem folosi acest parametru, de exemplu, pentru a adăuga un efect de animație.

customize.previewer.bind ('preview-edit', funcția (data) var data = JSON.parse (data); var control = customize.control (data.name); control.focus (completeCallback: setTimeout (funcția () control.container.addClass ('shake animated');, 300);););

Experiența generală se simte acum mai vie.

Element de intrare îmbunătățit cu animație CSS

Înfășurarea în sus

Am menționat un număr de API JavaScript Customizer:

• .preview.send () metodă de distribuire a unui eveniment personalizat.
• .previewer.bind () metodă de legare a personalizatorului cu un eveniment personalizat.
• .se concentreze () metoda de concentrare pe un element de intrare al unui control, precum și al unui element de control completeCallback parametru.

În acest tutorial, folosim aceste metode pentru a permite utilizatorilor noștri temă să editeze rapid textul Titlu site, făcând clic pe butonul "Editare text" din fereastra de examinare.

Mai avem încă un buton rămas pentru a aduce comenzile Color. Dar o voi lăsa aici ca o provocare; utilizați aceleași trei metode pentru a face funcția "Editare culoare". Când aveți dubii, nu ezitați să aruncați o privire la codul sursă.