Slik legger du til tilpasset CSS på WordPress-nettstedet ditt

Det er sikkert mange interessante måter du kan lage et spesifikt utseende og preg på nettstedet ditt – hvis det er det du ønsker. Noen ganger er det mye enklere og sannsynligvis mer produktivt å ha et begrenset sett med valg å velge mellom. Hvis du bruker WordPress, innholdsstyringssystemet som kontrollerer to tredjedeler av CMS-markedet, kan du bestemme hvor involvert du vil være i å lage utseendet til nettstedet ditt.

Det første nivået av tilpasning er vanligvis temaet. For noen kan det være det siste nivået også, fordi et godt tema lett kan skape et utseende som passer for nettstedets rolle. Så hvis du for eksempel er i restaurantbransjen, kan du velge et mat- og restauranttema for nettstedet ditt og være ferdig med det. Eller, hvis du har en IT-oppstart, kan du nøye deg med et flott teknisk WordPress-tema.

Hvert tema kommer med noen tilpasningsalternativer. Du kan kanskje velge sideoppsett, for eksempel, eller utseendet til enkelte elementer på siden. Men hvis du ønsker å gjøre noen endringer utover de som følger med temaet, vil bruk av tilpasset CSS være en god vei å gå. Her er de tre måtene du kan gjøre det på.

Hvordan legge til tilpasset CSS ved hjelp av Customizer

Den mest praktiske måten å legge til tilpasset CSS på nettstedet ditt er å bruke Customizer. Finn alternativet «Utseende» i dashbordmenyen. Hold markøren over den, og du vil se «Tilpass»-knappen. Klikk på den for å komme inn i Customizer.

Når du først er inne, vil du ha tilgang til forskjellige tilpasningsalternativer, avhengig av temaet og pluginene du har installert. Rett der nederst vil alternativet «Ekstra CSS» være.

Klikk på den, og du kommer inn i området der du kan legge til all den tilpassede CSS du ønsker. Du vil kunne se effekten av hver endring du gjør i sanntid, men de vil ikke gå live før du trykker på «publiser»-knappen.

WYSIWYG-naturen til Customizer kan være dens sterkeste fordel, men det er ikke den eneste. Den kommer med WordPress som en kjernefunksjon, slik at du kan bruke den rett ut av esken, uten ekstra fiksing med plugins. Du vil også få en ganske grunnleggende sjekk for å sikre at syntaksen din er i orden.

Problemet med å legge til tilpasset CSS på denne måten er at det hele er knyttet til temaet ditt. Hvis du vil bytte til en annen, vil den tilpassede CSS ikke følge. I hvert fall ikke alene, det vil si – du kan alltid kopiere det over til ditt nye tema.

Legg til tilpasset CSS ved å redigere (barnet)-temaets stilark

Ekstra CSS-feltet i Customizer er ikke det eneste stedet du kan legge til tilpasset CSS på WordPress-nettstedet ditt. Hvis du vil gjøre mange endringer ved å bruke hundrevis av linjer med kode, kan stilarket til temaet ditt være et bra sted å gjøre det.

Å redigere stilarket er en avansert operasjon, og ikke bare fordi det innebærer at du forstår CSS godt nok til å kunne legge til hundrevis av linjer med kode når du tilpasser nettstedet. Hovedproblemet med å redigere stilarket er at hver gang du oppdaterer temaet ditt, vil redigeringene du har gjort slettes.

Måten du går rundt dette problemet på er ved å lage et barnetema. Den beste måten å forstå hva et WordPress-barnetema er, er å tenke på det som et lag du lager over det vanlige – overordnede – temaet. Endringene du gjør i dette laget forblir de samme selv når du oppdaterer det overordnede temaet.

Så hvis du vil legge til tilpasset CSS på nettstedet ditt, må du det lage et barnetema først. Deretter, naviger over til Theme Editor, finn stylesheet.css-filen og slipp løs din egendefinerte CSS-kode.

Hvordan legge til tilpasset CSS ved hjelp av en tilpasset CSS-plugin

Hvis du vil legge til tilpasset CSS som vil overleve en fullstendig endring av temaet, for eksempel, vil verken Customizer eller stilarkredigering kutte det. Men du kan fortsatt gjøre endringer du kan overføre til et annet tema ved å bruke en tilpasset CSS-plugin som Enkel tilpasset CSS-plugin.

Etter at du har lastet ned og installert Simple Custom CSS-plugin, har du to måter å få tilgang til den på. For å komme til pluginens administrasjonsskjerm kan du navigere til utseendealternativet til hovedmenyen, og deretter velge Custom CSS fra undermenyen. Du kan legge til den tilpassede CSS-en i vinduet, og klikk på «Oppdater tilpasset CSS»-knappen for å lagre endringene.

Det er også mulig å bruke Simple Custom CSS fra Customizer. Etter at du har navigeret til Customizer – Utseende > Tilpass – klikker du på «Simple Custom CSS»-fanen og du kommer til plugin-tilpasningsdelen. Der vil du se forhåndsvisningen av alle endringene du gjør før du lagrer dem.

La oss avslutte det!

Noe av det beste med WordPress er hvor mye frihet det gir deg når det kommer til tilpasning av nettstedet ditt. Men hvis du ikke finner hvert eneste tilpasningsalternativ du trenger blant de mange temaene du kan laste ned og installere, trenger du ikke å bekymre deg. Du kan gjøre endringene du trenger ved å legge til tilpasset CSS. Med tre forskjellige metoder du kan bruke for å gjøre det, vil du garantert finne en som er så praktisk som du trenger den.