Blog

Site Editor otporan na greške klijenata: Priručnik za theme.json

Koristite theme.json kako biste postavili granice u WordPress Site Editoru, tako da klijenti mogu uređivati sadržaj bez narušavanja vašeg dizajna.

Sažetak

Kada klijent prvi put otvori WordPress Site Editor, mogućnost uređivanja svakog bloka, boje i rasporeda može im izgledati kao funkcija — a vama kao prijetnja. Ovaj članak objašnjava kako koristiti theme.json kako biste povukli jasnu liniju između uređivanja sadržaja i kontrole dizajna. Umjesto da se borite sa Site Editorom, postavljate presete, zadane vrijednosti i granice koje čine sigurnim za netehničke klijente da ažuriraju vlastitu stranicu. Proći ćemo kroz šta zaključati, šta ostaviti otvorenim i zašto je prekomjerno zaključavanje stvarni rizik. Pristup je izgrađen oko dizajn tokena i ograničenja na nivou šablona, tako da dosljedno radi na svakoj klijentskoj stranici koju održavate. Na kraju ćete imati ponovljiv tok rada za predaju Site Editora bez predaje ključeva vašeg dizajn sistema.

Šta je prva stvar koju uradite kada vam se klijent javi e-poštom da kaže da je "samo pokušao ažurirati naslov" i da se cijeli razmak na stranici srušio?

Ako održavate više od jedne WordPress stranice, vjerovatno ste primili tu poruku u nekom obliku. Site Editor je vašem klijentu dao ključeve auta sa pet brzina i bez kočnice. Mislite da rade jednostavnu promjenu teksta, a odjednom je globalna tipografija poremećena, hero na početnoj stranici ima neonsku boju koju niste odabrali, a dva bloka su sada naslagana umjesto jedno pored drugog.

U međuvremenu, mislite na šest drugih klijentskih stranica koje podržavate, i posljednje što vam treba je zamka održavanja u kojoj svaka "korisna" klijentska izmjena zahtijeva vraćanje iz sigurnosne kopije.

Odgovor nije oduzeti Site Editor. Radi se o postavljanju granica unutar njega pomoću theme.json. Prema WordPress Developer Resources, theme.json je centralni izvor istine za postavke i stilove editora blokova — on definira palete boja, tipografiju i opcije rasporeda koje se pojavljuju klijentu. To znači da isti fajl koji kontroliše vaš dizajn može također kontrolisati šta vaš klijent može i ne može uređivati.

Prođimo kroz to kako razmišljati o ovome, jer većina tutorijala se fokusira na to šta theme.json može učiniti za programere. Pitanje za agenciju je drugačije: kako ga koristimo da klijenti budu sigurni a da se ne osjećaju ograničeno?

Zašto Site Editor djeluje tako opasno?

Vaš klijent ne pokušava pokvariti stranicu. Pokušavaju učiniti ono što ih godinama učite u starom editoru: promijeniti naslov, zamijeniti sliku, možda dodati paragraf. Opasnost nije njihova namjera — to je što Site Editor prikazuje globalne kontrole na istom mjestu kao i kontrole sadržaja.

Evo uobičajenog scenarija. Klijent otvori šablon u Site Editoru i vidi blok naslova. Promijeni njegovu boju kako bi odgovarala novoj boji brenda. Ali pošto je taj naslov u šablonu, promjena se primjenjuje svuda gdje se taj šablon koristi. Klijentu je to izgledalo kao jedna izmjena. Za stranicu, to je bila globalna promjena.

Opći princip: kada nekome date builder stranica, oni će na kraju pronaći "postavke sa zaštitnim ogradama" i isključiti ih. Ali uz theme.json, možete sakriti same zaštitne ograde. Umjesto da klijentu kažete "ne dirajte globalne stilove," jednostavno im ne pokazujete paletu boja koja može proizvesti loš rezultat. Definišete paletu odobrenih boja, skalu veličina fonta i set preseta za razmak — i klijent bira između njih, a ne iz punog spektra CSS-a.

To je prvi pomak: prestanite razmišljati o pravilima i počnite razmišljati o fabrikama. theme.json je vaša proizvodna linija. Konfigurišete opcije koje klijent vidi, a ograničenja provodi sam interfejs, a ne skup uputa u dokumentu o primopredaji.

Šta zapravo trebate zaključati?

Ne sve. Ako previše čvrsto zaključate područje sadržaja, klijent će vas ili zvati svaki put kada treba dodati paragraf, ili će naći način da vas zaobiđe — često dodavanjem jednokratnog dodatka ili kopiranjem HTML-a sa svoje stare stranice.

Evo praktične tablice šta zaključati, šta ostaviti i zašto:

Površina za uređivanjeZaključati?Zašto
Struktura šablona i rasporedi blokovaZaključatiSprječava slučajno uklanjanje ili preuređivanje ključnih blokova rasporeda
Globalni stilovi (boje, fontovi, preset za razmak)Zaključati uz preseteKlijenti biraju iz odobrenog skupa, a ne proizvoljne vrijednosti
Tekst i slike sadržajaOstaviti otvorenoTo je njihov posao; neka to rade bez traženja dozvole
Razmak između blokovaDjelomično zaključatiOmogućite presete za razmak kako bi mogli prilagoditi ritam bez narušavanja poravnanja
Odabrani blok obrasciOstaviti otvoreno ako ste ih provjeriliSiguran način za klijente da dodaju nove sekcije bez izgradnje od nule

Važna nijansa je "zaključati s presete," a ne "potpuno zaključati." Za globalne stilove, ne skrivate ploču s postavkama; smanjujete broj izbora na kustodirani skup. Za strukturu šablona, možete zaključati određene blokove kako se ne bi mogli ukloniti, ali i dalje omogućiti klijentima da uređuju tekst unutar njih.

Jedna riječ opreza: zaključavanje bloka u šablonu razlikuje se od zaključavanja na određenoj stranici. Zaključavanje šablona utječe na sav sadržaj koji koristi taj šablon. Ako vam trebaju različiti nivoi zaključavanja na različitim stranicama, morat ćete raditi na nivou bloka unutar editora, što je krhkije. Za ponovljiv agencijski rad, dizajnirajte svoje šablone tako da zaključana područja budu dosljedna.

Kako postaviti granice a da editor ne djeluje kao zamka?

Tehnika je definirati svoje dizajn tokene u theme.json i zatim se suzdržati od bilo čega drugog u CSS-u.

Na primjer, umjesto da klijentu dopustite da postavi proizvoljnu boju na dugmetu, definirate stil dugmeta u theme.json koji koristi specifičnu boju iz vaše palete. Klijent i dalje može odabrati dugme i promijeniti njegov tekst, ali birač boja prikazuje samo vaše odobrene nijanse. Isto je i za veličine fonta, visine linija i razmak.

Isti princip se primjenjuje na šablone. Možete koristiti funkciju "zaključaj" na određenim blokovima unutar šablona — na primjer, zaključati strukturu kolona bloka s preporukama (testimonial) tako da klijent može promijeniti tekst citata, ali ne pretvoriti tri kolone u dvije. Ako još niste koristili zaključavanje blokova, dostupno je na alatnoj traci editora; kada zaključate blok, možete odabrati može li klijent uređivati sadržaj, pomicati ga ili oboje. Ovo možete primijeniti čak i u theme.json za zadane vrijednosti na nivou bloka.

Ono čemu težite je editor u kojem klijent nikada ne vidi kontrolu koja može pokvariti dizajn. To ne znači da ne mogu ništa pogriješiti; znači da najgora stvar koju mogu pogriješiti je promijeniti tekst naslova, a ne izgled cijele stranice.

Ako koristite prilagođene tipove sadržaja (custom post types), isti principi se primjenjuju i izvan zadnih šablona — pogledajte naš vodič o proširenju theme.json na prilagođene tipove sadržaja i izlaz dodataka.

Šta se događa kada zaključate previše?

Evo suprotne tačke: prekomjerno zaključavanje je jednako štetno kao i nedovoljno zaključavanje. Klijent koji ne može promijeniti veličinu naslova ili dodati razmak između sekcija će na kraju zamoliti vas da "samo to dovedete u red" — i onda ste opet u malim izmjenama besplatno. Još gore, mogli bi zaključiti da je Site Editor beskoristan i vratiti se na vanjski page builder, što im opet daje previše kontrole.

Kompromis je stvaran. Zaključani editori proizvode manje hitnih poziva, ali također proizvode više zahtjeva "možete li samo pomaknuti ovo dugme gore za pet piksela". Otvoreni editori proizvode suprotno. Vaš posao je pronaći tačku ravnoteže za svakog klijenta, a ne primjenjivati jednu konfiguraciju univerzalno.

Dobra početna heuristika: zaključajte sve što utječe na sve instance nečega (globalni stilovi, struktura šablona), a ostavite otvorenim sve što utječe na jednu instancu (tekst i slike jedne stranice). Ako klijent pokvari jednu stranicu, popravak traje 5 minuta. Ako pokvari globalni stil, popravak traje 20 minuta i sigurnosni je problem.

Kako ovo učiniti ponovljivim kod klijenata?

Ovdje ulazi tok rada agencije. Trebali biste imati osnovni theme.json koji definira vaše dizajn tokene — paletu boja, tipografsku skalu i presete za razmak — a zatim datoteku za izmjene po klijentu koja proširuje ili mijenja specifične vrijednosti.

Počnite s kreiranjem "starter" blok teme. Evo kako izgraditi prilagođenu blok temu s theme.json — nakon što je razvijete i dokumentujete, kopiranje na novog klijenta je stvar zamjene boja i fontova brenda. Ne gradite točak iz početka; zamjenjujete tokene. To je točno mentalitet prestanite obnavljati svaku WordPress stranicu, ali primijenjen na editor umjesto na pozadinu.

Budući da je theme.json jedna datoteka, lako je vršiti kontrolu verzija i primijeniti je u više okruženja. Možete pregledati izmjene, vidjeti šta je klijent izmijenio u globalnim stilovima i usporediti te izmjene s vašom osnovnom datotekom. To vam daje čvrst trag revizije za zahtjeve podrške.

Ako održavate više stranica i još niste postavili osnovnu temu, ovo je vaša prilika. To je jedan dio prilagođenog WordPress posla koji se isplati svaki put kada klijent otvori editor.

Šta s klijentima koji stalno traže "još jednu boju"?

Vaša paleta je obećanje. Ako definirate pet boja brenda, a klijent traži šestu, odgovor nije "ne" — nego "da, ali ona stiže kao promišljeni dodatak paleti, a ne kao jednokratni hex kod u naslovu." Kada dodate boju u theme.json, ona postaje dostupna dosljedno na cijeloj stranici. To je pravi način za rješavanje takvih zahtjeva.

Ovdje je također potrebno komunicirati s klijentom. Objasnite da Site Editor prikazuje samo boje i fontove koji odgovaraju njihovim brend standardima. Ako žele proširiti te standarde, vi ćete to riješiti u dizajn sistemu, a zatim će svaka nova boja biti dostupna svuda — uključujući i buduće stranice koje još nisu izgradili. To je mnogo bolji odgovor od "mi to ne radimo."

U isto vrijeme, ne gomilajte paletu od četrdeset boja. Pregledajte je tromjesečno i uklonite sve što je bilo jednokratni slučaj. Cilj je mali, namjerni skup opcija.

Ako zaključate raspored, a ostavite sadržaj otvorenim, i ako paletu učinite živim dijelom vašeg odnosa s klijentom, Site Editor prestaje biti prijetnja. Postaje način da svojim klijentima date stvarnu autonomiju bez žrtvovanja dizajn standarda koje ste plaćeni da štitite.

Sources (5)