Blogi

Kliendikindel saidiredaktor: theme.json-i käsiraamat

Kasutage theme.json-i, et seada WordPressi saidiredaktoris piirid, nii et kliendid saavad sisu redigeerida ilma teie kujundust lõhkumata.

Kokkuvõte

Kui klient avab esimest korda WordPressi saidiredaktori, võib võimalus redigeerida iga plokki, värvi ja paigutust tunduda talle funktsioonina — ja teile ohuna. See artikkel selgitab, kuidas kasutada theme.json-i, et tõmmata selge piir sisu redigeerimise ja kujunduse kontrolli vahele. Selle asemel, et võidelda saidiredaktoriga, seadistate eelseadistused, vaikeväärtused ja piirid, mis muudavad mittetehnilistele klientidele oma saidi värskendamise ohutuks. Käime läbi, mida lukustada, mida lahtiseks jätta ja miks ülelukustamine on reaalne risk. Lähenemine põhineb disainitokenitel ja mallitasandi piirangutel, nii et see töötab järjekindlalt kõigi teie hallatavate klientide saitide puhul. Lõpuks on teil korratav töövoog saidiredaktori üleandmiseks ilma oma disainisüsteemi võtmeid üle andmata.

Mis on esimene asi, mida teete, kui klient saadab meili, et ta "üritas lihtsalt pealkirja uuendada" ja kogu saidi vahed on kokku kukkunud?

Kui haldute rohkem kui ühte WordPressi saiti, olete seda sõnumit tõenäoliselt mingil kujul saanud. Saidiredaktor andis teie kliendile võtmed autole, millel on viis käiku ja puudub pidur. Nad arvavad, et teevad lihtsa tekstimuudatuse, ja äkki on globaalne tüpograafia paigast ära, esilehe hero on neonvärvi, mida te ei valinud, ja kaks plokki on nüüd virnastatud üksteise kõrval asemel.

Vahepeal mõtlete kuuele teisele kliendisaidile, mida toetate, ja viimane asi, mida vajate, on hoolduslõks, kus iga "abivalmis" kliendimuudatus nõuab varukoopiast taastamist.

Vastus pole saidiredaktori äravõtmine. See on piiride seadmine selle sees theme.json-i abil. WordPressi arendaja ressursside kohaselt on theme.json plokkredaktori seadete ja stiilide keskne tõeallikas — see määratleb värvipaletid, tüpograafia ja paigutuse valikud, mida klient näeb. See tähendab, et sama fail, mis juhib teie kujundust, saab juhtida ka seda, mida teie klient saab ja ei saa redigeerida.

Vaatame, kuidas sellele mõelda, sest enamik õpetusi keskendub sellele, mida theme.json saab arendajate heaks teha. Agentuuri jaoks on küsimus teistsugune: kuidas kasutada seda klientide turvaliseks muutmiseks ilma, et nad tunneksid end kastistatuna?

Miks tundub saidiredaktor nii ohtlik?

Teie klient ei ürita saiti lõhkuda. Nad üritavad teha seda, mida olete neid aastaid vanas redaktoris õpetanud: vahetada pealkirja, vahetada pilti, võib-olla lisada lõik. Oht pole nende kavatsus — vaid see, et saidiredaktor toob globaalsed juhtnupud samasse kohta sisu juhtnuppudega.

Siin on levinud stsenaarium. Klient avab saidiredaktoris malli ja näeb pealkirjaplokki. Nad muudavad selle värvi, et see sobiks uue kaubamärgi värvinäidisega. Kuid kuna see pealkiri on mallis, rakendub muudatus kõikjal, kus seda malli kasutatakse. Kliendi jaoks nägi see välja nagu üks muudatus. Saidi jaoks oli see globaalne muudatus.

Üldpõhimõte: kui annate kellelegi lehekülje ehitaja, leiab ta lõpuks "turvapiiretega seaded" ja lülitab need välja. Kuid theme.json-iga saate peita turvapiirded ise. Selle asemel, et öelda kliendile "ärge puudutage globaalseid stiile", lihtsalt ei näita te neile värvipaletti, mis võib anda halva tulemuse. Määratlete heakskiidetud värvide paleti, fondisuuruste skaala ja reavahede eelseadistused — ja klient valib nende hulgast, mitte kogu CSS-i spektrist.

See on esimene nihe: lõpetage reeglitele mõtlemine ja hakake mõtlema tehastele. theme.json on teie tootmisliin. Seadistate valikud, mida klient näeb, ja piiranguid rakendab liides ise, mitte üleandmisdokumendi juhiste kogum.

Mida peaksite tegelikult lukustama?

Mitte kõike. Kui lukustate sisuala liiga tihedalt, helistab klient teile iga kord, kui ta peab lõigu lisama, või leiab teie ümber tee — sageli lisades ühekordse plugin või kopeerides HTML-i oma vanalt saidilt.

Siin on praktiline tabel, mida lukustada, mida lahti jätta ja miks:

RedigeerimispindLukustada?Miks
Malli struktuur ja plokkide paigutusedLukustaHoiab ära põhiplokkide juhusliku eemaldamise või ümberjärjestamise
Globaalsed stiilid (värvid, fondid, reavahe eelseadistused)Lukusta eelseadistustegaKliendid valivad heakskiidetud hulgast, mitte suvalistest väärtustest
Sisu tekst ja pildidJäta lahtiSee on nende töö; las neil teha seda ilma luba küsimata
Plokkide vaheline ruumOsaliselt lukustaPakkuge reavahe eelseadistusi, et nad saaksid rütmi kohandada ilma joondust lõhkumata
Kureeritud plokimustridJäta lahti, kui olete need üle vaadanudOhutu viis klientidel uusi sektsioone lisada ilma nullist ehitamata

Oluline nüanss on "lukusta eelseadistustega", mitte "lukusta välja". Globaalsete stiilide puhul ei peida te seadete paneeli; vähendate valikute arvu kureeritud hulgani. Malli struktuuri puhul saate teatud plokid lukustada, et neid ei saaks eemaldada, kuid lubate siiski klientidel nende sees olevat teksti redigeerida.

Üks hoiatus: ploki lukustamine mallis erineb selle lukustamisest konkreetsel lehel. Malli lukud mõjutavad kogu sisu, mis seda malli kasutab. Kui vajate erinevatel lehtedel erinevaid lukutasemeid, peate töötama ploki tasandil redaktori sees, mis on habras. Korduva agentuuritöö jaoks kujundage mallid nii, et lukustatud alad oleksid järjepidevad.

Kuidas seada piire ilma, et redaktor tunduks lõksuna?

Tehnika on määratleda oma disainitokenid theme.json-is ja seejärel hoiduda muude asjade tegemisest CSS-is.

Näiteks selle asemel, et lasta kliendil määrata nupule suvaline värv, määratlete theme.json-is nupustiili, mis kasutab teie paleti konkreetset värvi. Klient saab ikkagi nupu valida ja selle teksti muuta, kuid värvivalija näitab ainult teie heakskiidetud värvinäidiseid. Sama kehtib fondisuuruste, reavahe ja vahede kohta.

Sama põhimõte kehtib mallide puhul. Saate kasutada "lukustuse" funktsiooni konkreetsete plokkide jaoks mallis — näiteks lukustada iseloomustusploki veergude struktuuri, et klient saaks muuta tsitaadi teksti, kuid ei saaks muuta kolme veergu kaheks. Kui te pole plokilukustust veel kasutanud, on see saadaval redaktori tööriistaribal; ploki lukustamisel saate valida, kas klient saab sisu redigeerida, seda teisaldada või mõlemat. Saate seda rakendada ka theme.json-is plokitasandi vaikeväärtuste jaoks.

Eesmärk on redaktor, kus klient ei näe kunagi juhtnuppu, mis võiks kujundust lõhkuda. See ei tähenda, et nad ei saaks midagi valesti teha; see tähendab, et kõige halvem vale asi, mida nad saavad teha, on muuta pealkirja sõnastust, mitte kogu saidi välimust.

Kui kasutate kohandatud postitüüpe, kehtivad samad põhimõtted ka vaikemallidest kaugemale — vaadake meie juhendit theme.json-i laiendamine kohandatud postitüüpidele ja pluginaväljundile.

Mis juhtub, kui lukustate liiga palju?

Siin on vastupidine seisukoht: ülelukustamine on sama kahjulik kui alalukustamine. Klient, kes ei saa pealkirja suurust muuta ega sektsioonide vahele vahet lisada, palub teil lõpuks "lihtsalt see ilusaks teha" — ja siis olete jälle tasuta väikseid muudatusi tegemas. Hullem, nad võivad otsustada, et saidiredaktor on kasutu, ja naasta kolmanda osapoole lehekülje ehitaja juurde, mis annab neile jälle liiga palju kontrolli.

Kompromiss on reaalne. Lukustatud redaktorid tekitavad vähem hädaabikõnesid, kuid ka rohkem "kas sa saad selle nuppu viie piksli võrra ülespoole nihutada" taotlusi. Lahti lukustatud redaktorid tekitavad vastupidist. Teie ülesanne on leida iga kliendi jaoks tasakaalupunkt, mitte rakendada ühte konfiguratsiooni universaalselt.

Hea algusreegel: lukustage kõik, mis mõjutab kõiki eksemplare millestki (globaalsed stiilid, malli struktuur), ja jätke lahti kõik, mis mõjutab ühte eksemplari (ühe lehe tekst ja pildid). Kui klient lõhub ühe lehe, on see 5-minutiline parandus. Kui nad lõhuvad globaalse stiili, on see 20-minutiline parandus ja turvaprobleem.

Kuidas muuta see korratavaks erinevate klientide lõikes?

Siin tuleb mängu agentuuri töövoog. Teil peaks olema põhi-theme.json, mis määratleb teie disainitokenid — värvipaleti, tüpograafia skaala ja reavahe eelseadistused — ning seejärel kliendipõhine ülekirjutamisfail, mis laiendab või muudab konkreetseid väärtusi.

Alustage "starter" plokiteema loomisega. Siin on, kuidas ehitada kohandatud plokiteema tema.json-iga — kui olete selle välja töötanud ja dokumenteerinud, on selle kopeerimine uuele kliendile vaid kaubamärgi värvide ja fontide vahetamine. Te ei ehita ratast uuesti; vahetate tokeneid. See on täpselt lõpetage iga WordPressi saidi ümberehitamine mõtteviis, kuid rakendatuna redaktorile, mitte taustaprogrammile.

Kuna theme.json on üks fail, on seda lihtne ka versioonikontrollida ja mitmesse keskkonda juurutada. Saate muudatusi üle vaadata, näha, mida klient on globaalsetes stiilides muutnud, ja neid muudatusi oma põhifailiga võrrelda. See annab tugeva auditijälje tugipäringute jaoks.

Kui haldute mitut saiti ja pole veel põhiteemat seadistanud, on see teie võimalus. See on üks kohandatud WordPressi töö osa, mis tasub end ära iga kord, kui klient redaktori avab.

Aga kliendid, kes küsivad pidevalt "veel ühte värvi"?

Teie palett on lubadus. Kui määratlete viis kaubamärgivärvi ja klient küsib kuuendat, pole vastus "ei" — see on "jah, kuid see jõuab paletti teadliku lisandusena, mitte ühekordse hex-koodina pealkirjas." Kui lisate värvi theme.json-i, muutub see järjekindlalt kogu saidil kättesaadavaks. See on õige viis selliste taotlustega toimetulemiseks.

Siin on ka koht, kus peate kliendiga suhtlema. Selgitage, et saidiredaktor näitab neile ainult värve ja fonte, mis vastavad nende kaubamärgi standarditele. Kui nad soovivad neid standardeid laiendada, lahendate selle disainisüsteemis ja siis on iga uus värv saadaval kõikjal — sealhulgas tulevastel lehtedel, mida nad pole veel ehitanud. See on palju parem vastus kui "me seda ei tee".

Samal ajal ärge koguge neljakümne värvi paletti. Vaadake see kord kvartalis üle ja eemaldage kõik, mis oli ühekordne õnnetus. Eesmärk on väike, läbimõeldud valikute hulk.

Kui lukustate paigutuse, kuid jätate sisu lahti, ja muudate paleti elavaks osaks oma kliendisuhtest, lakkab saidiredaktor olemast oht. Sellest saab viis anda oma klientidele tõeline autonoomia, ohverdamata disainistandardeid, mille kaitsmise eest teile makstakse.

Sources (5)