Slik tilpasser du WordPress-nettstedet ditt med CSS: 3 enkle metoder

WordPress har utviklet seg gjennom årene, og i dag er det en ganske fleksibel og enkel å tilpasse plattform gjennom blokkredigeringsprogrammet Gutenberg. Likevel vil det være tider når du trenger litt mer rekkevidde enn Gutenberg-redaktøren gir.

Det er her tilpasset CSS kommer godt med. CSS-styling lar deg redigere farger, mellomrom, fonter, layouter og i utgangspunktet alle andre visuelle elementer på WordPress-nettstedet ditt, slik at du kan få det til å se akkurat slik du vil.

I denne artikkelen vil vi lede deg gjennom det viktigste for å tilpasse WordPress-nettstedet ditt med CSS.

Hvorfor tilpasse nettstedet ditt med CSS?

Å legge til tilpasset CSS er bare en av metodene du kan bruke for å finjustere nettstedets utseende. Andre metoder inkluderer å bruke en velutstyrt premium WordPress-tema, eller installere en sidebygger.

Selv om disse to metodene er litt enklere å bruke for nybegynnere, og ikke krever kodekunnskap, er det mer fordelaktig å bruke tilpasset CSS på to hovedmåter:

Null kostnad

Premium-temaer og WordPress-sidebyggere kan være nyttige, men de koster penger – i kroner og øre. Bevæpnet med kunnskapen om hvordan du skriver tilpasset CSS, derimot, kan du oppnå de samme effektene uten å pådra deg noen ekstra utgifter.

Minimal oppblåsthet

Sidebyggere og velkjente temaer er designet for å gi brukerne mer fleksibilitet og et bredt utvalg av alternativer for å tilpasse nettsidene deres. På grunn av dette har de en tendens til å legge til oppblåsthet på nettsteder, noe som potensielt bremser dem.

Når du skriver tilpasset CSS, derimot, vil du bare legge til de nødvendige funksjonene, noe som vanligvis resulterer i lettere nettsteder og raskere lastehastigheter.

3 enkle metoder for å tilpasse WordPress-nettstedet ditt med CSS

Forhåpentligvis vet du det allerede hvordan skrive CSS. Når du er kjent med det grunnleggende, kan du bruke en av følgende metoder for å legge til tilpasset CSS på WordPress-nettstedet ditt:

Metode 1: Bruk WordPress Customizer

Med WordPress 4.7 eller en hvilken som helst versjon etter den, kan du legge til tilpasset CSS direkte fra administrasjonsområdet. Dette er den enkleste metoden, og fordi det er en live forhåndsvisning tilgjengelig, kan du se alle endringer du gjør i sanntid.

Det er også den mest anbefalte, siden alle endringene du skal gjøre lagres i selve WordPress. Dette betyr at selv om du endrer eller oppdaterer temaet ditt, vil du ikke miste din egendefinerte CSS.

Her er trinnene du må ta:

Trinn 1: Navigere til Utseende > Tilpass.

Dette vil åpne WordPress-tematilpasseren, som viser deg en live forhåndsvisning av nettstedet ditt til høyre, sammen med noen tilpasningsalternativer til venstre. Rull ned til bunnen av venstre panel, og du finner en Ekstra CSS fanen.

Steg 2: Klikk på Ekstra CSS Tab.

Dette åpner en liten boks i venstre rute der du kan legge til din egendefinerte CSS. Du kan skrive inn så mange linjer med CSS-kode du vil. Det fine med denne editoren er at den validerer koden din, og varsler deg hvis det er noen feil.

Trinn 3: Publiser endringene dine.

Enhver gyldig CSS-regel du legger til, vises i forhåndsvisningsområdet til høyre. For å bruke endringene på nettstedet ditt, klikk på publisere knappen øverst i venstre rute når du er fornøyd. Hvis du ikke vil at endringene skal tre i kraft umiddelbart, kan du også planlegge publisering på et senere tidspunkt eller lagre arbeidet ditt som et utkast.

Det er viktig å merke seg at alle endringer du gjør ved hjelp av tilpasningen er knyttet til ditt nåværende tema. Hvis du noen gang bytter til et annet tema, vil endringene gå tapt med mindre du kopierer din egendefinerte CSS og legger den til i det nye temaet. Det er god praksis å lagre all tilpasset CSS du legger til et tema på en notisblokk. På den måten kan du ganske enkelt kopiere koden og lime den inn i delen "Ekstra CSS" for et annet tema.

Hvis det høres ut som for mye arbeid, og du foretrekker en løsning som lar deg bruke din egendefinerte CSS på et hvilket som helst WordPress-tema du bruker, er neste metode for deg.

Metode 2. Bruk en plugin

Egendefinerte CSS-plugins lagrer din egendefinerte CSS separat fra temaet ditt, slik at endringene dine kan brukes uavhengig av hvilket tema du bruker. Disse pluginene kommer også med ekstra funksjoner som autofullføring som kan gjøre det enklere å legge til CSS.

Den eneste ulempen er at de er tredjepartsprogramvare, noe som betyr at de potensielt kan bremse nettstedet ditt. De fleste av disse pluginene er imidlertid lette, så de har generelt liten innvirkning på nettstedets ytelse. Her er noen av de beste tilpassede CSS-pluginene du kan bruke:

• Enkel tilpasset CSS

Enkel tilpasset CSS er en av de mest populære tilpassede CSS-plugins. Den er lett, enkel å bruke og tilbyr flotte funksjoner. Det er enkelt å sette opp det. Alt du trenger å gjøre er å installere og aktivere plugin. Deretter navigerer du til Utseende delen til venstre på dashbordet.

Du vil se et nytt alternativ kalt Tilpasset CSS. Ved å klikke på den åpnes en editor der du kan legge til din egendefinerte CSS. Klikk på Oppdater tilpasset CSS for å lagre endringene. For å se endringene, bare oppdater nettstedet ditt.

• Enkel tilpasset CSS og JS

Hvis du vil ha enda flere funksjoner, kan du Enkel tilpasset CSS og JS-plugin er et flott alternativ. I tillegg til å legge til CSS, lar den deg legge til JavaScript-oppføringer.

• CSS Hero

Hvis du ikke vil skrive en enkelt kodelinje, kan du CSS Hero-plugin er perfekt for deg. Dette pluginet tilbyr en visuell CSS-editor med rullegardinmenyer og inndatafelt som lar deg redigere nesten hvilken som helst CSS-stil på nettstedet ditt uten at du trenger å skrive noen kode.

Metode 3. Rediger råkoden

De to metodene vi beskrev ovenfor lar deg legge til tilpasset CSS på nettstedet ditt uten å måtte berøre noen av temafilene dine. Men i noen tilfeller vil du kanskje redigere temaets CSS eller legge til tilpasset CSS direkte til temaets kode.

For å gjøre dette, må du få tilgang til nettstedets stilark. En enkel måte å få tilgang til dette stilarket er gjennom Temaredaktør på WordPress-dashbordet ditt.

Før vi går videre, er det imidlertid noen få sikkerhetstiltak du må sette på plass. Først, sikkerhetskopiere nettstedet ditt. Når du redigerer temafilene dine, er det lett å gjøre feil som potensielt kan krasje nettstedet ditt.

En sikkerhetskopi sikrer at du har et funksjonelt nettsted å gå tilbake til. Neste, lage et barnetema. Hvis du gjør direkte endringer i overordnet tema, vil endringene gå tapt hver gang temaet oppdateres.

Når disse sikkerhetstiltakene er på plass, logger du på WordPress-backend. Gå til Utseende > Temaredigering. Når du klikker på temaredigeringsalternativet, vil du se en popup-boks som advarer deg mot å gjøre direkte endringer i temafilene dine. Hvis du følger trinnene ovenfor, er du i gang.

Klikk jeg forstår å fortsette.

Etter at du har klikket, bør du se nettstedets stilark som standard. Hvis ikke, se bare på høyre rute og klikk på style.css under Stilark alternativ.

Herfra kan du gjøre direkte endringer i temafilene dine. Bare ikke glem å klikke Lagre og oppdater når du er ferdig.

Ta kontroll over nettstedets utseende med tilpasset CSS

Å lære å skrive tilpasset CSS på WordPress kan ta litt tid for nybegynnere, men det vil gi deg ekte kontroll over utseendet til nettstedet ditt. Og det er til null kostnad, og med minimal innvirkning på nettstedets ytelse.

Hvis du foretrekker ikke å utføre manuell utforming, finnes det imidlertid andre måter å få jobben gjort på, for eksempel ved å bruke en av de beste sidebyggerne for WordPress.

5 WordPress-sidebyggere som kan hjelpe deg med å bygge fantastiske nettsteder

Vil du få WordPress-siden din til å se fantastisk ut, men har ikke råd til en utvikler? Prøv disse WordPress-sidebyggerne i stedet.

Les Neste

Om forfatteren