Vahetasin teema fondi ja mobiilivaade läks katki. Lisasin lapiteema kaudu polsterdust ja kogu sait lakkas laadimast. Igaüks, kes WordPressi haldab, on vähemalt korra tabanud „valget surmaekraani" pärast pealtnäha süütut stiilimuudatust.

Varem nõudis CSS-i kohandamine veebidisainerit või tunde käsitsi kodeerimist koos vahekaartide vahetamise ja lõputu F5-ga. Nüüd on olemas reaalajas CSS-redaktori pluginad, mis näitavad tulemust enne salvestamist, otse esiküljel ja reaalajas. Pole vaja sügavaid CSS-teadmisi ega failihaldurit.

Allpool on neli pluginat ja üks sisseehitatud tööriist visuaalseks ja käsitsi WordPressi stiilide redigeerimiseks: alates esmaklassilistest kõik-ühes tööriistadest koos animatsioonidega kuni täiesti tasuta lahendusteni. Igaüht on testitud testsaidil ja need töötavad enamiku kaasaegsete teemadega.

💡 Kiirülevaade:

• Käivita WordPressi kohandaja (Välimus → Kohanda → Täiendav CSS), see on sisseehitatud tasuta tööriist koos reaalajas eelvaatega lihtsate muudatuste jaoks.
• Kui vajad visuaalset redaktorit ilma koodita, paigalda CSS Hero või Yellow Pencil: osuta hiirega elemendile ja muuda stiile paneeli kaudu.
• Käsitsi CSS-i kodeerimiseks koos automaatlõpetusega vali SiteOrigin CSS (tasuta) või Microthemer (premium, lisaks SCSS ja mustandirežiim).

Võrdlustabel: reaalajas CSS-redaktorid WordPressile

1. CSS Hero

CSS Hero, visuaalne WordPressi teemaredaktor, mis töötab „osuta ja klõpsa" põhimõttel. Vali lehel ükskõik milline element, pealkiri, nupp, plokk, ja muuda paremal asuva paneeli kaudu fonti, värvi, polsterdust või varje. CSS-kood genereeritakse automaatselt, teemafaile ei puudutata.

CSS Hero peamine eelis on täielik muudatuste ajalugu. Iga muudatus salvestatakse versioonina: tegid polsterduse või nupu värviga vea, keri konkreetne element tagasi teema algsesse olekusse, kaotamata ülejäänud kohandusi. Pluginaga tuleb kaasa ka 29 valmis „nahka" ja sadu eelseadistusi, võid võtta malli ja kohandada seda oma brändile.

Edasijõudnud kasutajatele on olemas CSS-redaktor koos süntaksi esiletõstmise ja LESS-toega. CSS Hero ühildub DIVI, Elementori, Beaver Builderi, Genesise ja enamiku WordPressi teemadega. Jõudlus ei kannata: esiküljele edastatakse üks staatiline CSS-fail, serverikoormust pole.

• Plussid: täielik muudatuste ajalugu koos üksiku elemendi tagasipööramisega, 29 valmis nahka, ei puuduta teemafaile, CSS-i eksport pluginast loobumiseks pärast kujunduse valmimist.
• Miinused: tellimus alates $29/aasta (Starter 1 saidile); tellimuse lõppedes uuendused enam ei tule, kuid kujundus jätkab töötamist.
• Hind: Starter, $29/aasta (1 sait), Personal, $59/aasta (5 saiti), Pro, $199/aasta (kuni 999 saiti), Lifetime Pro, $599 (ühekordne, sisaldab Animatorit).
• Allalaadimine: 🔗 CSS Hero, ametlik sait | 🔗 Reaalajas demo

2. Yellow Pencil

Yellow Pencil, visuaalne CSS-redaktor, mis on WordPress.org kataloogis tasuta saadaval piiratud omaduste komplektiga. Pro-versioon avab täieliku juurdepääsu enam kui 60-le CSS-omadusele, üle 900 Google'i fondi, üle 300 taustamustri ja üle 50 animatsiooni.

Liides on minimalistlik: klõpsa lehel elemendil, vasakule ilmub saadaolevate omadustega paneel. Veeriste ja polsterduse lohista-ja-lohista funktsioon töötab intuitiivselt: lohista hiirega, näed polsterdust pikslites jooksvalt. Sisseehitatud „Mõõtmise" tööriist näitab elementide vahelisi kaugusi ja „Traatraam" lülitab sisse traatraami täpseks paigutuseks.

Plugin ei muuda teemafaile, genereerib eraldi stiililehe, mida saab faili eksportida ja pluginat keelata. Mugav ühekordsete projektide jaoks: kujundus valmis, CSS eksporditud, Yellow Pencil eemaldatud.

• Plussid: lohistav polsterdus, Pro versioonis 60+ CSS atribuuti, joonlaud ja traatraam, stiilide eksport, ei puuduta teemat.
• Miinused: fondi värv, taustapildid ning laius/kõrgus pole tasuta versioonis saadaval; tugi wordpress.org-is on piiratud, täistugi ainult Pro versioonis.
• Hind: Tasuta (piiratud) WordPress.org kataloogis; Pro, alates $26 (ühekordne makse CodeCanyonis, üks sait).
• Allalaadimine: 🔗 Yellow Pencil WordPress.org-is | 🔗 Live demo

3. SiteOrigin CSS

SiteOrigin CSS, tasuta plugin SiteOrigini meeskonnalt, millel on WordPress.org-is hinnang 4,9 ja 100 000+ aktiivset paigaldust. Ühendab visuaalsed juhtnupud algajatele ja täieliku koodiredaktori arendajatele.

Neile, kes CSS-i ei kirjuta: visuaalsete juhtnuppude paneel võimaldab muuta värve, fonte, polsterdusi ja ääriseid rippmenüüde ja valijate abil, tulemused on kohe esilehel nähtavad. Arendajatele: sisseehitatud inspektor aitab leida konkreetse elemendi jaoks õige CSS selektori (sageli käsitsi muutmise kõige tüütum osa) ning koodiredaktor toetab automaatset lõpetamist nii selektorite kui ka atribuutide jaoks.

Omaette plussiks on vea esiletõstmine CSS-is enne avaldamist. Plugin ei ole seotud SiteOrigini teemaga ja töötab iga WordPressi teemaga.

• Plussid: täiesti tasuta, visuaalsed juhtnupud + koodiredaktor, selektori inspektor, automaatne lõpetamine, vea esiletõstmine.
• Miinused: valmis skinnid/eelseadistused puuduvad (kõik nullist); liides on spartalik, jääb visuaalse redaktori mugavuselt CSS Herole alla.
• Hind: Tasuta.
• Allalaadimine: 🔗 SiteOrigin CSS WordPress.org-is

4. Microthemer

Microthemer, visuaalne CSS redaktor ettevõttelt ThemeOver, mis toetab käsitsi kodeerimist CSS-is, SCSS-is ja JavaScriptis. Tasuta Lite versioon on saadaval WordPress.org-is (10 000+ aktiivset paigaldust, hinne 5/5), premium versioon ühekordse maksega $45 koos eluaegsete uuendustega.

Peamine erinevus konkurentidest on mustandirežiim. Saate nädalaid disainiga katsetada, ilma et see mõjutaks seda, mida külastajad näevad. Kui kõik on valmis, avaldage muudatused ühe nupuvajutusega. Neile, kes kujundavad klientidele või teevad ümberkujundust töötaval saidil, on see kriitilise tähtsusega.

Microthemer toetab responsiivset redigeerimist: lülituge liideses lauaarvuti, tahvelarvuti ja mobiili vahel ning redigeerige stiile konkreetse eraldusvõime jaoks. SCSS-i tugi koos reaalajas kompileerimisega, mis on visuaalsete redaktorite seas haruldane ja tõsine argument arendajatele, kes tulid puhtalt kodeerimise juurest.

• Plussid: mustandirežiim ilma külastajaid mõjutamata, SCSS + JS, responsiivne redigeerimine, eluaegsed uuendused 45 dollari eest.
• Miinused: liides on algajale ülekoormatud, sobib pigem neile, kes juba CSS-i mõistavad; Lite-versiooni funktsionaalsus on piiratud.
• Hind: Lite, WordPress.org-is tasuta; Premium, 45 dollarit (ühekordne, eluaegsed uuendused ja tugi).
• Allalaadimine: 🔗 Microthemer Lite WordPress.org-is | 🔗 Ametlik sait

Boonus: WordPressi kohandaja, sisseehitatud CSS-redaktor

WordPress sisaldab alates versioonist 4.7 täiendava CSS-i redaktorit otse tavalises kohandajas (Välimus → Kohanda → Täiendav CSS). See ei ole plugin, vaid sisseehitatud põhifunktsioon, mis töötab iga teemaga ega vaja paigaldamist.

Lihtsate muudatuste jaoks, nagu pealkirja värvi muutmine, ühe lehe veeriste reguleerimine või elemendi peitmine, on see enam kui piisav. Otse-eelvaade töötab kohe: sisesta CSS vasakusse paneeli, tulemus on paremal nähtav, ilma salvestamise ja uuesti laadimiseta. Kood salvestatakse andmebaasi ja seotakse teemaga: teemat vahetades kohandatud CSS ei kao, vaid jääb ootama eelmise teema juurde naasmist.

Varem paigaldati selliste ülesannete jaoks eraldi pluginaid, nagu Theme Junkie TJ Custom CSS, kuid seda pole 2016. aastast saadik uuendatud ega testitud uusimate WordPressi versioonidega. Kohandaja katab selle niši täielikult ja tasuta.

Praktikas on saidiomanikule, kes peab kord poole aasta jooksul paari stiili muutma, eraldi plugina paigaldamine üleliigne. Kohandaja on juba olemas, igas WordPressi installatsioonis.

• Plussid: WordPressi tuuma sisse ehitatud (pole vaja eraldi pluginat), otse-eelvaade, ei kao teemat vahetades, täiesti tasuta.
• Miinused: ainult käsitsi koodi sisestamine (visuaalne redaktor puudub), muudatuste ajalugu puudub, automaatlõpetamine puudub, keerukamaks kohandamiseks on vaja eraldi tööriista.
• Hind: Tasuta (WordPressi tuuma osa).
• Kust leida: Välimus → Kohanda → Täiendav CSS WordPressi administraatoris.

⁉️🤔 Korduma kippuvad küsimused

Kas ma pean visuaalse redaktoriga töötamiseks CSS-i oskama?

CSS Hero ja Yellow Pencil puhul ei pea. Vali hiirega element ja muuda stiile paneeli kaudu: font, värv, veerised. Plugin genereerib taustal CSS-koodi. SiteOrigin CSS-il ja Microthemeril on samuti visuaalsed juhtelemendid, kuid keerukamaks kohandamiseks on kasulikud selektorite algteadmised.

Milline plugin ei aeglusta saiti?

Kõik loetletud pluginad genereerivad staatilise CSS-faili, mida brauser puhverdab ega koorma serverit. Microthemer ja Yellow Pencil võimaldavad lisaks lõpliku CSS-i eksportida ja plugina enda keelata, sait jätkab kohandatud stiilidega töötamist ning plugina saab eemaldada. Praktikas on laadimiskiiruse erinevus nende kõigi puhul mõõtmisvea piires.

Kas ma saan CSS-i mobiiliversioonis eraldi muuta?

Jah. Microthemer ja Yellow Pencil toetavad responsiivset redigeerimist: lülitu otse plugina liideses lauaarvuti, tahvelarvuti ja telefoni vahel ning määra stiilid kindlale resolutsioonile. CSS Hero võimaldab samuti stiile responsiivses režiimis muuta, kuid nõuab meediapäringute käsitsi lisamist.

Mida teha, kui sait läks pärast muudatusi katki?

CSS Heros on täielik muudatuste ajalugu, keri probleemne element või kogu kujundus soovitud punkti tagasi. Microthemer töötab mustandirežiimis: külastajad näevad vana kujundust, kuni sa uue avaldad. Yellow Pencilil on seansi piires Undo/Redo. Igal juhul hoia enne tõsisemat kohandamist värsket varukoopiat, see reegel kehtib eranditult kõigi pluginate puhul.

Kas premium-redaktori eest on mõtet maksta, kui kohandaja on tasuta?

Sõltub muudatuste mahust. Kohandaja sobib suurepäraselt 5-10 CSS-i rea jaoks kord hooaja jooksul. Kui teed ümber kogu teema, värvid, tüpograafia, veerised, animatsioonid, säästab visuaalne redaktor nagu CSS Hero tunde käsitsi selektorite valimisest. Mitut saiti haldavatele agentuuridele ja vabakutselistele tasub premium-plugin end ära teise või kolmanda projekti juures.

Milline live CSS-redaktor oma ülesande jaoks valida

Kõik valikus olevad tööriistad katavad erinevaid stsenaariume alates „nupu värvi kohendamine kord aastas" kuni „kogu teema ümberkujundamine ilma ühegi koodireata".

• Kui sa CSS-i ei kirjuta ja soovid visuaalset redaktorit koos valmisstiilidega, võta CSS Hero. Starterplaan $29/aasta ühele saidile 30-päevase raha tagasi garantiiga.
• Kui vajad soodsamat visuaalset redaktorit igaveseks, Yellow Pencil ühekordselt $26 CodeCanyonis. Tasuta versioon samuti töötab, proovi enne ostmist.
• Kui eelarve on piiratud ja vajad täisfunktsionaalset tasuta pluginat visuaalsete juhtelementide ja koodiredaktoriga, SiteOrigin CSS. 100 000+ kasutajat ei eksi.
• Kui oled arendaja, kes vajab SCSS-i, mustandirežiimi ja responsiivset redigeerimist, Microthemer. $45 ühekordselt ja igaveseks, pluss tasuta Lite testimiseks.
• Kui muudatusi on vähe ja need on lihtsad, ava Välimus → Kohanda → Täiendav CSS. WordPressi sisseehitatud redaktor katab 80% igapäevastest ülesannetest ilma ühegi täiendava pluginata.

Alusta kohandajaga kohe: mine administraatorisse, ava Täiendava CSS-i sektsioon ja lisa paar rida. Näed, kuidas teema käigu pealt reageerib, ja saad aru, kas vajad võimsamat tööriista. Ja milline plugin sind teemade kohandamisel päästis, kirjuta kommentaaridesse.