Blog
Uređivač web-mjesta otporan na klijente: priručnik za theme.json
Koristite theme.json za postavljanje granica u WordPressovom uređivaču web-mjesta kako bi klijenti mogli uređivati sadržaj bez narušavanja vašeg dizajna.
Sažetak
Kada klijent prvi put otvori WordPressov uređivač web-mjesta, mogućnost uređivanja svakog bloka, boje i izgleda može im izgledati kao prednost — a vama kao prijetnja. Ovaj članak objašnjava kako pomoću theme.json-a povući jasnu granicu između uređivanja sadržaja i kontrole dizajna. Umjesto da se borite s uređivačem, postavljate unaprijed definirane postavke, zadane vrijednosti i granice koje ne-tehničkim klijentima omogućuju sigurno ažuriranje vlastite web stranice. Proći ćemo kroz što zaključati, što ostaviti otvoreno i zašto je pretjerano zaključavanje stvarni rizik. Pristup se temelji na design tokenima i ograničenjima na razini predloška, tako da dosljedno djeluje na svim klijentskim stranicama koje održavate. Na kraju ćete imati ponovljivi postupak za predaju uređivača web-mjesta bez predaje ključeva vašeg dizajnerskog sustava.
Koja je prva stvar koju napravite kada klijent e-poštom kaže da je "samo pokušao ažurirati naslov", a cijeli se razmak na stranici srušio?
Ako održavate više WordPress stranica, vjerojatno ste već primili takvu poruku u nekom obliku. Uređivač web-mjesta dao je vašem klijentu ključeve automobila s pet stupnjeva prijenosa i bez kočnice. Oni misle da rade jednostavnu izmjenu teksta, a odjednom je globalna tipografija poremećena, hero dio na početnoj stranici ima neonsku boju koju niste odabrali, a dva su bloka složena jedan iznad drugog umjesto jedan pored drugog.
U međuvremenu, razmišljate o šest drugih klijentskih stranica koje podržavate, i zadnje što trebate je zamka održavanja gdje svaka "korisna" klijentska izmjena zahtijeva vraćanje iz sigurnosne kopije.
Odgovor nije oduzeti uređivač web-mjesta. Već postaviti granice unutar njega pomoću theme.json-a. Prema WordPress Developer Resources, theme.json je središnji izvor istine za postavke i stilove blok uređivača — definira palete boja, tipografiju i mogućnosti izgleda koje se pojavljuju klijentu. To znači da ista datoteka koja kontrolira vaš dizajn može kontrolirati i što vaš klijent može, a što ne može uređivati.
Prođimo kako razmišljati o ovome, jer se većina uputa usredotočuje na to što theme.json može učiniti za developere. Pitanje za agenciju je drugačije: kako ga iskoristiti da klijenti budu sigurni, a da se ne osjećaju ograničeno?
Zašto se uređivač web-mjesta čini tako opasnim?
Vaš klijent ne pokušava pokvariti stranicu. Pokušava učiniti ono što ih godinama učite u starom uređivaču: promijeniti naslov, zamijeniti sliku, eventualno dodati odlomak. Opasnost nije u njihovoj namjeri — nego u tome što uređivač web-mjesta prikazuje globalne kontrole na istom mjestu kao i kontrole sadržaja.
Evo uobičajenog scenarija. Klijent otvori predložak u uređivaču web-mjesta i vidi blok naslova. Promijeni njegovu boju kako bi odgovarala novom brend uzorku. Ali budući da se taj naslov nalazi u predlošku, promjena se primjenjuje svugdje gdje se predložak koristi. Klijentu je to izgledalo kao jedna izmjena. Za stranicu je to bila globalna promjena.
Opće načelo: kad nekome date builder stranica, on će na kraju pronaći "postavke sa zaštitnim ogradama" i isključiti ih. Ali s theme.json-om 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 dati loš rezultat. Definirajte paletu odobrenih boja, ljestvicu veličina fontova i skup unaprijed definiranih razmaka — a klijent bira između njih, a ne iz cijelog spektra CSS-a.
To je prvi pomak: prestanite razmišljati o pravilima i počnite razmišljati o tvornicama. theme.json je vaša proizvodna linija. Konfigurirate opcije koje klijent vidi, a ograničenja provodi samo sučelje, a ne skup uputa u dokumentu o primopredaji.
Što biste zapravo trebali zaključati?
Ne baš sve. Ako područje sadržaja zaključate prečvrsto, klijent će vas zvati svaki put kad treba dodati odlomak ili će pronaći zaobilaznicu — često dodavanjem jednokratnog dodatka ili kopiranjem HTML-a sa stare stranice.
Evo praktične tablice što zaključati, što ostaviti i zašto:
| Područje uređivanja | Zaključati? | Zašto |
|---|---|---|
| Struktura predloška i raspored blokova | Zaključati | Sprječava slučajno uklanjanje ili preuređivanje glavnih blokova izgleda |
| Globalni stilovi (boje, fontovi, unaprijed postavljeni razmaci) | Zaključati uz presete | Klijenti biraju iz odobrenog skupa, a ne proizvoljne vrijednosti |
| Tekst i slike sadržaja | Ostaviti otvoreno | To je njihov posao; neka to rade bez traženja dopuštenja |
| Razmak između blokova | Djelomično zaključati | Omogućite unaprijed postavljene razmake kako bi mogli prilagoditi ritam bez narušavanja poravnanja |
| Odabrani uzorci blokova | Ostaviti otvoreno ako ste ih provjerili | Siguran način da klijenti dodaju nove odjeljke bez izrade od nule |
Važna nijansa je "zaključati uz presete", a ne "potpuno zaključati". Kod globalnih stilova ne skrivate ploču s postavkama; već smanjujete broj izbora na odabrani skup. Kod strukture predloška možete zaključati određene blokove tako da se ne mogu ukloniti, ali i dalje dopustiti klijentima uređivanje teksta unutar njih.
Jedna opomena: zaključavanje bloka u predlošku razlikuje se od zaključavanja na određenoj stranici. Zaključavanje predloška utječe na sav sadržaj koji koristi predložak. Ako trebate različite razine zaključavanja na različitim stranicama, morat ćete raditi na razini bloka unutar uređivača, što je osjetljivije. Za ponovljiv rad agencije, dizajnirajte predloške tako da zaključana područja budu dosljedna.
Kako postaviti granice, a da se uređivač ne osjeća kao zamka?
Tehnika je definirati svoje dizajn tokene u theme.json-u i zatim se suzdržati od bilo čega drugog u CSS-u.
Na primjer, umjesto da klijentu dopustite postavljanje proizvoljne boje na gumb, definirate stil gumba u theme.json-u koji koristi određenu boju iz vaše palete. Klijent i dalje može odabrati gumb i promijeniti njegov tekst, ali birač boja prikazuje samo vaše odobrene uzorke. Isto vrijedi za veličine fontova, visinu redaka i razmake.
Isto načelo primjenjuje se na predloške. Možete koristiti značajku "zaključaj" na određenim blokovima unutar predloška — na primjer, zaključajte strukturu stupaca bloka izjave (testimonijala) tako da klijent može promijeniti tekst citata, ali ne može pretvoriti tri stupca u dva. Ako još niste koristili zaključavanje blokova, dostupno je na alatnoj traci uređivača; kada zaključate blok, možete odabrati može li klijent uređivati sadržaj, pomicati ga ili oboje. To možete primijeniti i u theme.json-u za zadane vrijednosti na razini bloka.
Cilj vam je uređivač 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 pogreška koju mogu napraviti jest promijeniti tekst naslova, a ne izgled cijele stranice.
Ako koristite prilagođene vrste objava, ista načela vrijede i izvan zadanih predložaka — pogledajte naš vodič o proširivanju theme.json-a na prilagođene vrste objava i izlaz dodataka.
Što se događa kada zaključate previše?
Ovdje je kontradiktorna poanta: pretjerano zaključavanje jednako je štetno kao i premalo zaključavanja. Klijent koji ne može promijeniti veličinu naslova ili dodati razmak između odjeljaka na kraju će vas zamoliti da "samo to sredite" — i onda se vraćate na male izmjene besplatno. Što je još gore, mogli bi zaključiti da je uređivač web-mjesta beskoristan i vratiti se na builder stranica treće strane, koji im opet daje previše kontrole.
Kompromis je stvaran. Zaključani uređivači proizvode manje hitnih poziva, ali i više zahtjeva "možeš li samo pomaknuti ovaj gumb za pet piksela". Otvoreni uređivači proizvode suprotno. Vaš je posao pronaći ravnotežu za svakog klijenta, a ne primijeniti jednu konfiguraciju univerzalno.
Dobra početna heuristika: zaključajte sve što utječe na sve instance nečega (globalni stilovi, struktura predložaka), a ostavite otvorenim sve što utječe na jednu instancu (tekst i slike jedne stranice). Ako klijent pokvari jednu stranicu, to je popravak od 5 minuta. Ako pokvari globalni stil, to je popravak od 20 minuta i sigurnosni problem.
Kako to učiniti ponovljivim za više klijenata?
Ovdje na scenu stupa agencijski tijek rada. Trebali biste imati osnovni theme.json koji definira vaše dizajn tokene — paletu boja, tipografsku ljestvicu i unaprijed postavljene razmake — i zatim datoteku nadjačavanja po klijentu koja proširuje ili mijenja određene vrijednosti.
Započnite izradom "starter" blok teme. Evo kako izraditi prilagođenu blok temu s theme.json-om — nakon što je razvijete i dokumentirate, kopiranje na novog klijenta stvar je zamjene boja i fontova brenda. Ne izmišljate toplu vodu; mijenjate tokene. To je upravo mentalitet prestanite ponovno izrađivati svaku WordPress stranicu, ali primijenjen na uređivač, a ne na pozadinski sustav.
Budući da je theme.json jedna datoteka, lako ju je verzionirati i implementirati u više okruženja. Možete pregledavati promjene, vidjeti što je klijent izmijenio u globalnim stilovima i usporediti te promjene s vašom osnovnom datotekom. To vam daje snažan 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 jedini dio prilagođenog WordPress rada koji se isplati svaki put kad klijent otvori uređivač.
Što s klijentima koji stalno traže "još jednu boju"?
Vaša je paleta obećanje. Ako definirate pet boja brenda, a klijent zatraži šestu, odgovor nije "ne" — nego "da, ali kao namjerni dodatak paleti, a ne kao jednokratni hex kod u naslovu." Kada dodate boju u theme.json, ona postaje dosljedno dostupna na cijeloj stranici. To je pravi način rješavanja takvih zahtjeva.
Ovdje također morate komunicirati s klijentom. Objasnite im da im uređivač web-mjesta prikazuje samo boje i fontove koji odgovaraju njihovim brend standardima. Ako žele proširiti te standarde, riješit ćete to u dizajn sustavu, a zatim će svaka nova boja biti dostupna svugdje — uključujući i buduće stranice koje još nisu izradili. To je puno bolji odgovor od "to ne radimo".
U isto vrijeme, nemojte akumulirati paletu od četrdeset boja. Pregledavajte je tromjesečno i uklonite sve što je bilo jednokratni slučaj. Cilj je mali, namjerni skup opcija.
Ako zaključate izgled, ali ostavite sadržaj otvorenim, i ako paletu učinite živim dijelom odnosa s klijentima, uređivač web-mjesta prestaje biti prijetnja. Postaje način da svojim klijentima pružite stvarnu autonomiju bez žrtvovanja dizajnerskih standarda koje plaćeni štitite.
Sources (5)
- WordPress Architecture: A Complete Guide - Liquid Web
- Inside WordPress - A Deep Dive into Technical Architecture and Essential Components
- WordPress Tech Stack Explained: Core Components and Uses - WPoptic
- A Guide To Understanding WordPress Architecture - Pressable
- A Detailed Guide About WordPress Architecture - Auxilium Technology