Kuidas kohandada oma WordPressi veebisaiti CSS-iga: 3 lihtsat meetodit

WordPress on aastate jooksul arenenud ja tänapäeval on see plokiredaktori Gutenbergi kaudu üsna paindlik ja hõlpsasti kohandatav platvorm. Siiski on aegu, mil vajate veidi suuremat ulatust, kui Gutenbergi toimetaja pakub.

Siin tuleb kasuks kohandatud CSS. CSS-stiil võimaldab teil redigeerida oma WordPressi veebisaidi värve, vahesid, fonte, paigutusi ja põhimõtteliselt kõiki teisi visuaalseid elemente, võimaldades teil muuta see täpselt selliseks, nagu soovite.

Selles artiklis tutvustame teile WordPressi veebisaidi CSS-iga kohandamise põhitõdesid.

Miks kohandada oma veebisaiti CSS-iga?

Kohandatud CSS-i lisamine on vaid üks meetoditest, mida saate oma saidi välimuse viimistlemiseks kasutada. Muud meetodid hõlmavad a hästi funktsioneeritud esmaklassiline WordPressi teemavõi lehe koostaja installimine.

Kuigi neid kahte meetodit on algajatele pisut lihtsam kasutada ja need ei nõua kodeerimisteadmisi, on kohandatud CSS-i kasutamine kasulikum kahel peamisel viisil:

Nullkulu

Esmaklassilised teemad ja WordPressi lehtede koostajad võivad olla käepärased, kuid need on tasulised – dollarites ja sentides. Teisest küljest, kui olete teadlik kohandatud CSS-i kirjutamise kohta, saate sama efekti saavutada ilma lisakulutusi tegemata.

Minimaalne turse

Lehekülje koostajad ja hästi pakutavad teemad on loodud selleks, et anda kasutajatele rohkem paindlikkust ja laia valikut võimalusi oma veebisaitide kohandamiseks. Seetõttu kipuvad nad veebisaite turgutama, mis võib nende tegevust aeglustada.

Kohandatud CSS-i kirjutamisel lisate seevastu ainult vajalikke funktsioone, mille tulemuseks on üldiselt kergemad veebisaidid ja kiirem laadimiskiirus.

3 lihtsat meetodit oma WordPressi veebisaidi kohandamiseks CSS-iga

Loodetavasti teate juba kuidas CSS-i kirjutada. Kui olete põhitõdedega kursis, saate oma WordPressi veebisaidile kohandatud CSS-i lisamiseks kasutada ühte järgmistest meetoditest.

1. meetod: kasutage WordPressi kohandajat

WordPress 4.7 või mis tahes sellele järgneva versiooniga saate lisada kohandatud CSS-i otse administraatorialast. See on kõige lihtsam meetod ja kuna saadaval on reaalajas eelvaade, näete kõiki tehtud muudatusi reaalajas.

See on ka kõige soovitatavam, kuna kõik teie tehtavad muudatused salvestatakse WordPressis endas. See tähendab, et isegi kui muudate või värskendate oma teemat, ei kaota te kohandatud CSS-i.

Siin on järgmised sammud.

Samm 1: navigeerige asukohta Välimus > Kohanda.

See avab WordPressi teemakohandaja, mis näitab teile paremal teie saidi reaalajas eelvaadet koos mõne kohandamisvalikuga vasakul. Kerige alla vasakpoolse paneeli allossa ja leiate Täiendav CSS sakk.

2. samm: klõpsake nuppu Täiendav CSS Tab.

See avab vasakpoolsel paanil väikese kasti, kuhu saate lisada oma kohandatud CSS-i. Saate sisestada nii palju CSS-koodi ridu, kui soovite. Selle redaktori suurepärane asi on see, et see kinnitab teie koodi ja hoiatab teid, kui esineb tõrkeid.

3. samm: avaldage oma muudatused.

Kõik kehtivad CSS-reeglid, mille lisate, kuvatakse paremal reaalajas eelvaatealal. Muudatuste rakendamiseks oma saidile klõpsake Avalda nuppu vasakpoolse paani ülaosas, kui olete rahul. Kui te ei soovi, et muudatused kohe jõustuksid, võite ajastada avaldamise ka hilisemaks ajaks või salvestada oma töö mustandina.

Oluline on märkida, et kõik kohandaja abil tehtavad muudatused on seotud teie praeguse teemaga. Kui lülitute kunagi teisele teemale, lähevad muudatused kaotsi, välja arvatud juhul, kui kopeerite oma kohandatud CSS-i ja lisate seda uude teemasse. Hea tava on salvestada kõik kohandatud CSS-id, mille teemale lisate, märkmikusse. Nii saate koodi lihtsalt kopeerida ja kleepida selle teise teema jaoks jaotisesse "Täiendav CSS".

Kui see tundub liiga palju tööd ja eelistate lahendust, mis võimaldab teil kohandatud CSS-i rakendada mis tahes kasutatavale WordPressi teemale, on järgmine meetod teie jaoks.

2. meetod. Kasutage pluginat

Kohandatud CSS-i pistikprogrammid salvestavad teie kohandatud CSS-i teie teemast eraldi, võimaldades teie muudatusi rakendada olenemata kasutatavast teemast. Nendel pistikprogrammidel on ka lisafunktsioonid, nagu automaatne lõpetamine, mis muudab CSS-i lisamise lihtsamaks.

Ainus puudus on see, et tegemist on kolmanda osapoole tarkvaraga, mis tähendab, et need võivad teie saiti aeglustada. Enamik neist pistikprogrammidest on siiski kerged, nii et üldiselt ei mõjuta need teie saidi toimivust. Siin on mõned parimad kohandatud CSS-i pistikprogrammid, mida saate kasutada:

• Lihtne kohandatud CSS

Lihtne kohandatud CSS on üks populaarsemaid kohandatud CSS-i pistikprogramme. See on kerge, hõlpsasti kasutatav ja pakub suurepäraseid funktsioone. Selle seadistamine on lihtne. Kõik, mida pead tegema, on pistikprogrammi installimine ja aktiveerimine. Seejärel navigeerige lehele Välimus armatuurlaua vasakpoolsel paanil.

Näete uut valikut nimega Kohandatud CSS. Sellel klõpsates avaneb redaktor, kuhu saate oma kohandatud CSS-i lisada. Klõpsake nuppu Värskendage kohandatud CSS-i nuppu muudatuste salvestamiseks. Muudatuste vaatamiseks värskendage lihtsalt oma veebisaiti.

• Lihtne kohandatud CSS ja JS

Kui soovite veelgi rohkem funktsioone, Lihtne kohandatud CSS-i ja JS-i pistikprogramm on suurepärane võimalus. Lisaks CSS-i lisamisele võimaldab see lisada JavaScripti kirjeid.

• CSS-i kangelane

Kui te ei soovi kirjutada ühtegi koodirida, CSS Hero pistikprogramm sobib teile ideaalselt. See pistikprogramm pakub visuaalset CSS-i redigeerijat koos rippmenüüde ja sisestusväljadega, mis võimaldavad teil redigeerida peaaegu kõiki saidi CSS-stiile, ilma et peaksite koodi kirjutama.

3. meetod. Redigeerige töötlemata koodi

Kaks ülalkirjeldatud meetodit võimaldavad teil lisada saidile kohandatud CSS-i, ilma et peaksite puudutama ühtegi teemafaili. Kuid mõnel juhul võite soovida muuta oma teema CSS-i või lisada kohandatud CSS-i otse oma teema koodi.

Selleks peate pääsema juurde oma veebisaidi stiilitabelile. Lihtne viis sellele stiilitabelile juurde pääseda on läbi Teemaredaktor oma WordPressi juhtpaneelil.

Enne kui läheme kaugemale, peate siiski kehtestama mõned kaitsemeetmed. Esiteks, varundage oma veebisait. Teemafailide redigeerimisel on lihtne teha vigu, mis võivad teie saidi krahhi põhjustada.

Varukoopia tagab, et teil on toimiv veebisait, millele naasta. Järgmiseks luua lapse teema. Kui muudate oma emateemat otse, lähevad muudatused teema värskendamisel kaotsi.

Kui need kaitsemeetmed on paigas, logige sisse oma WordPressi taustaprogrammi. Minema Välimus > Teemaredaktor. Kui klõpsate teemaredaktori valikul, näete hüpikakent, mis hoiatab teid teemafailides otseste muudatuste tegemise eest. Kui järgite ülaltoodud samme, on kõik korras.

Klõpsake ma saan aru jätkama.

Pärast klõpsamist peaksite vaikimisi nägema oma saidi laaditabelit. Kui ei, siis vaadake lihtsalt parempoolset paani ja klõpsake nuppu stiil.css all Stiilitabel valik.

Siit saate oma teemafailides otse muudatusi teha. Lihtsalt ärge unustage klõpsata Salvesta ja värskenda kui olete lõpetanud.

Saate kohandatud CSS-iga kontrollida oma saidi välimust

WordPressis kohandatud CSS-i kirjutamise õppimine võib algajatel aega võtta, kuid see annab teile tõelise kontrolli oma veebisaidi välimuse üle. Ja see on nullkuluga ning teie saidi toimivusele minimaalne mõju.

Kui eelistate käsitsi kujundamist mitte teha, on töö tegemiseks ka muid viise, näiteks kasutades ühte WordPressi parimatest lehtede koostajatest.

5 WordPressi leheehitajat, mis aitavad teil luua hämmastavaid veebisaite

Kas soovite muuta oma WordPressi saidi hämmastavaks, kuid te ei saa endale lubada arendajat? Proovige selle asemel neid WordPressi lehtede koostajaid.

Loe edasi

Autori kohta