Blog

Editorul de Site Sigur pentru Clienți: Un Playbook theme.json

Folosește theme.json pentru a stabili limite în Editorul de Site WordPress, astfel încât clienții să poată edita conținut fără să-ți strice designul.

Rezumat

Când un client deschide Editorul de Site WordPress pentru prima dată, capacitatea de a edita fiecare bloc, culoare și layout poate părea o funcție utilă pentru el — și o amenințare pentru tine. Acest articol explică cum să folosești theme.json pentru a trasa o linie clară între editarea conținutului și controlul designului. În loc să te lupți cu Editorul de Site, configurezi presetări, valori implicite și limite care fac sigur pentru clienții non-tehnici să își actualizeze propriul site. Vom analiza ce să blochezi, ce să lași deschis și de ce supra-blocarea este un risc real. Abordarea este construită în jurul tokenilor de design și constrângerilor la nivel de template, astfel încât funcționează consecvent pe fiecare site de client pe care îl întreții. Până la final, vei avea un flux de lucru repetabil pentru a preda Editorul de Site fără a preda cheile sistemului tău de design.

Care este primul lucru pe care îl faci când un client trimite un e-mail să spună că „a încercat doar să actualizeze titlul” și întreaga spațiere a site-ului s-a prăbușit?

Dacă întreții mai mult de un site WordPress, probabil ai primit acest mesaj într-o formă sau alta. Editorul de Site i-a dat clientului tău cheile unei mașini cu cinci trepte de viteză și fără frână. Ei cred că fac o simplă modificare de text și, brusc, tipografia globală este dereglată, hero-ul paginii de start are o culoare neon pe care nu ai ales-o, iar două blocuri sunt acum stivuite unul peste altul în loc să fie unul lângă altul.

Între timp, te gândești la celelalte șase site-uri de clienți pe care le suporți, iar ultimul lucru de care ai nevoie este o capcană de întreținere în care fiecare editare „utilă” a clientului necesită o restaurare din backup.

Răspunsul nu este să elimini Editorul de Site. Ci să stabilești limite în interiorul său folosind theme.json. Conform Resurselor pentru Dezvoltatori WordPress, theme.json este sursa centrală de adevăr pentru setările și stilurile editorului de blocuri — definește paletele de culori, tipografia și opțiunile de layout care apar clientului. Asta înseamnă că același fișier care controlează designul tău poate controla și ce poate și ce nu poate edita clientul.

Hai să analizăm cum să gândim despre asta, pentru că majoritatea tutorialelor se concentrează pe ce poate face theme.json pentru dezvoltatori. Întrebarea pentru o agenție este diferită: cum îl folosim pentru a-i face pe clienți să fie în siguranță fără să se simtă limitați?

De ce pare Editorul de Site atât de periculos?

Clientul tău nu încearcă să strice site-ul. Încearcă să facă ceea ce l-ai antrenat ani de zile în vechiul editor: să schimbe un titlu, să înlocuiască o imagine, poate să adauge un paragraf. Pericolul nu este intenția lui — ci faptul că Editorul de Site expune controale globale în același loc cu controalele de conținut.

Iată un scenariu comun. Un client deschide un șablon în Editorul de Site și vede un bloc de titlu. Schimbă culoarea acestuia pentru a se potrivi cu noul nuanțar al mărcii. Dar pentru că acel titlu este într-un șablon, modificarea se aplică peste tot unde este folosit șablonul. Pentru client, a părut o singură editare. Pentru site, a fost o schimbare globală.

Principiul general: atunci când îi dai cuiva un constructor de pagini, va găsi în cele din urmă „setările cu balustrade” și le va dezactiva. Dar cu theme.json, poți ascunde balustradele în sine. În loc să-i spui clientului „nu atinge stilurile globale”, pur și simplu nu-i arăți o paletă de culori care poate produce un rezultat prost. Definești o paletă de culori aprobate, o scală de dimensiuni de font și un set de presetări de spațiere — iar clientul alege din acestea, nu din spectrul complet al CSS-ului.

Aceasta este prima schimbare de paradigmă: nu te mai gândi la reguli și începe să te gândești la fabrici. theme.json este linia ta de producție. Configurezi opțiunile pe care clientul le vede, iar constrângerile sunt aplicate de interfață însăși, nu de un set de instrucțiuni într-un document de predare.

Ce ar trebui să blochezi de fapt?

Nu totul. Dacă blochezi zona de conținut prea strict, clientul fie te va suna de fiecare dată când trebuie să adauge un paragraf, fie va găsi o cale de a te ocoli — adesea instalând un plugin de o singură dată sau copiind HTML din vechiul său site.

Iată un tabel practic cu ce să blochezi, ce să lași și de ce:

Suprafața de editareBlochezi?De ce
Structura șablonului și layout-urile blocurilorBlocheazăPrevine eliminarea sau reordonarea accidentală a blocurilor de layout de bază
Stiluri globale (culori, fonturi, presetări de spațiere)Blochează cu presetăriClienții aleg dintr-un set aprobat, nu valori arbitrare
Text și imagini de conținutLasă deschisAceasta este treaba lor; lasă-i să o facă fără să ceară permisiunea
Spațierea dintre blocuriBlochează parțialOferă presetări de spațiere pentru a putea ajusta ritmul fără a strica alinierea
Modele de blocuri curatoriateLasă deschis dacă le-ai verificatO modalitate sigură pentru clienți de a adăuga secțiuni noi fără a construi de la zero

Nuanța importantă este „blochezi cu presetări”, nu „blochezi total”. Pentru stilurile globale, nu ascunzi panoul de setări; reduci numărul de alegeri la un set curatoriat. Pentru structura șablonului, poți bloca anumite blocuri astfel încât să nu poată fi eliminate, dar totuși permiți clienților să editeze textul din interiorul lor.

Un cuvânt de precauție: blocarea unui bloc într-un șablon este diferită de blocarea acestuia într-o pagină specifică. Blocările de șablon afectează tot conținutul care folosește șablonul. Dacă ai nevoie de niveluri diferite de blocare pe pagini diferite, va trebui să lucrezi la nivel de bloc în interiorul editorului, ceea ce este mai fragil. Pentru munca repetabilă de agenție, proiectează-ți șabloanele astfel încât zonele blocate să fie consistente.

Cum stabilești limite fără ca editorul să pară o capcană?

Tehnica este să îți definești tokenii de design în theme.json și apoi să rezisti tentației de a face orice altceva în CSS.

De exemplu, în loc să lași clientul să seteze o culoare arbitrară pe un buton, definești un stil de buton în theme.json care folosește o anumită culoare din paleta ta. Clientul poate selecta butonul și poate schimba textul, dar selectorul de culori arată doar nuanțele tale aprobate. La fel este și pentru dimensiunile fonturilor, înălțimile liniilor și spațiere.

Același principiu se aplică șabloanelor. Poți folosi funcția „blocare” pe blocuri specifice dintr-un șablon — de exemplu, blocarea structurii de coloane a unui bloc de testimoniale, astfel încât clientul să poată schimba textul citatului, dar nu să transforme trei coloane în două. Dacă nu ai folosit încă blocarea blocurilor, aceasta este disponibilă în bara de unelte a editorului; când blochezi un bloc, poți alege dacă clientul poate edita conținutul, îl poate muta sau ambele. Poți aplica acest lucru chiar și în theme.json pentru valorile implicite la nivel de bloc.

Scopul tău este un editor în care clientul nu vede niciodată un control care să poată strica designul. Asta nu înseamnă că nu poate face nimic greșit; înseamnă că cel mai rău lucru greșit pe care îl poate face este să schimbe formularea unui titlu, nu aspectul întregului site.

Dacă folosești tipuri de postări personalizate, aceleași principii se aplică dincolo de șabloanele implicite — consultă ghidul nostru despre extinderea theme.json la tipuri de postări personalizate și ieșirea pluginurilor.

Ce se întâmplă când blochezi prea mult?

Iată punctul contrar: supra-blocarea este la fel de dăunătoare ca și sub-blocarea. Un client care nu poate redimensiona un titlu sau nu poate adăuga un spațiu între secțiuni va ajunge în cele din urmă să îți ceară să „doar să faci să arate bine” — și apoi te trezești din nou făcând mici editări gratuit. Mai rău, s-ar putea să decidă că Editorul de Site este inutil și să se întoarcă la un page builder terț, care îi oferă din nou prea mult control.

Compromisul este real. Editorii blocați produc mai puține apeluri de urgență, dar produc și mai multe cereri de tip „poți muta acest buton cu cinci pixeli mai sus”. Editorii deschiși produc contrariul. Treaba ta este să găsești punctul de echilibru pentru fiecare client, nu să aplici o configurație universală.

O euristică bună de pornire: blochează tot ce afectează toate instanțele a ceva (stiluri globale, structura șablonului) și lasă deschis tot ce afectează o singură instanță (textul și imaginile unei singure pagini). Dacă un client strică o singură pagină, este o rezolvare de 5 minute. Dacă strică un stil global, este o rezolvare de 20 de minute și o problemă de securitate.

Cum faci acest lucru repetabil pe mai mulți clienți?

Aici intervine fluxul de lucru al agenției. Ar trebui să ai un theme.json de bază care să definească tokenii tăi de design — paleta de culori, scala tipografică și presetările de spațiere — și apoi un fișier de suprascriere per client care extinde sau schimbă valori specifice.

Începe prin a crea o temă bloc „starter”. Iată cum să construiești o temă bloc personalizată cu theme.json — odată ce ai dezvoltat-o și documentat-o, copierea ei pentru un client nou este doar o chestiune de înlocuire a culorilor și fonturilor mărcii. Nu reconstruiești roata; înlocuiești tokenii. Aceasta este exact mentalitatea nu mai reconstrui fiecare site WordPress, dar aplicată editorului, nu backend-ului.

Deoarece theme.json este un singur fișier, este ușor de controlat versiunile și de implementat în mai multe medii. Poți revizui modificările, poți vedea ce a modificat un client în stilurile globale și poți compara acele modificări cu fișierul tău de bază. Asta îți oferă o pistă de audit solidă pentru cererile de asistență.

Dacă întreții mai multe site-uri și nu ai configurat încă o temă de bază, aceasta este șansa ta. Este singura bucată de lucru WordPress personalizat care se amortizează de fiecare dată când un client deschide editorul.

Ce faci cu clienții care tot cer „încă o culoare”?

Paleta ta este o promisiune. Dacă definești cinci culori de brand, iar un client cere o a șasea, răspunsul nu este „nu” — ci „da, dar vine ca o adăugare deliberată la paletă, nu ca un cod hex de o singură dată într-un titlu”. Când adaugi o culoare în theme.json, aceasta devine disponibilă în mod constant pe tot site-ul. Aceasta este modalitatea corectă de a gestiona astfel de cereri.

Aici trebuie să comunici cu clientul. Explică-i că Editorul de Site îi arată doar culorile și fonturile care corespund standardelor mărcii sale. Dacă dorește să extindă acele standarde, te vei ocupa de asta în sistemul de design, iar apoi fiecare culoare nouă va fi disponibilă peste tot — inclusiv pe paginile viitoare pe care încă nu le-a construit. Acesta este un răspuns mult mai bun decât „noi nu facem asta”.

În același timp, nu acumula o paletă de patruzeci de culori. Revizuiește-o trimestrial și elimină orice a fost un accident de o singură dată. Scopul este un set mic și intenționat de opțiuni.

Dacă blochezi layout-ul dar lași conținutul deschis, și faci din paletă o parte vie a relației cu clienții tăi, Editorul de Site încetează să mai fie o amenințare. Devine o modalitate de a oferi clienților tăi autonomie reală fără să sacrifici standardele de design pe care ești plătit să le protejezi.

Sources (5)