Hvordan tilpasse et WordPress-tema med CSS

Vet du at du kan eksperimentere med WordPress-nettstedet ditt og endre utseendet med CSS? Du kan legge til små estetiske endringer, helle inn farger, endre oppsettet eller til og med endre WordPress-temaet ditt fullstendig.

Å ha kontroll over nettstedets utseende gir deg en sjanse til å lage det på en måte du liker.

Du kan legge til ditt personlige preg på merkevarens nettsted, noe som gjør det mye forskjellig fra andre mennesker eller bedrifter som bruker det samme WordPress-temaet!

I dette innlegget, la oss se nærmere på hvordan du kan tilpasse et WordPress-tema med CSS.

Hva er CSS?

CSS eller Cascading Style Sheets er et nettspråk som brukes til å presentere nettsider. Med CSS kan du angi layout, farger, font, bakgrunn og andre elementer som kan gjøre nettsidene våre presentable for brukerne. Dette er grunnen til at vi kaller CSS frontend-klientsidespråk ettersom det kjøres på brukerenden. CSS brukes i kombinasjon med HTML og Javascript for å gjøre nettsidene responsive. Hvis du tenker at du må være en hardcore programmerer for å lære og implementere CSS, er det ikke sant. Du kan enkelt lære CSS og bruke den til å endre nettstedets presentasjon, selv om du ikke har kunnskap om programmering fra før.

Hva er WordPress?

WordPress er den mest populære og enkleste måten å starte nettstedet eller bloggen din på. Når vi snakker teknisk, er WordPress et innholdsstyringssystem med åpen kildekode. Den håndterer alle viktige aspekter ved en nettside som innhold, layout, sikkerhet osv. Du kan lage alle slags nettsider ved hjelp av WordPress. For eksempel forretningsnettsteder, e-handelsnettsteder, porteføljer, CVer, sosiale nettverk osv. WordPress er gratis å bruke og kommer med ulike temaer og plugins. Man kan endre utseendet og følelsen til WordPress-siden deres ved å bruke CSS.

CSS og WordPress

For å begynne å redigere WordPress-temaet ditt må du først forstå et par ting – malfiler, malkoder og CSS-stilark. Malfiler styrer WordPress-temaet ditt. Du kan se forskjellige filer som header.php, archive.php. Dette er malfiler som styrer WordPress-temaet ditt. Malkoder brukes til å kontrollere disse filene og andre databaseelementer. CSS-stilark eller style.css er filen du må se etter for å endre hvordan nettstedet ditt ser ut. Du vil redigere koden i style.css for å tilpasse WordPress-temaet ditt.

Hvordan tilpasse et WordPress-tema med CSS

Først av alt må du forstå at hvis du vil tilpasse WordPress-temaet ditt med CSS, må du enten legge til en bestemt kode til det, eller du må redigere koden som allerede er skrevet. Jeg vil anbefale deg å i det minste lære deg grunnleggende om CSS, HTML, JavaScript og PHP før du begynner å redigere temaet ditt.

En annen ting å merke seg er at hvis du skal gjøre endringer i stilarket til WordPress-temaet ditt, vil disse endringene bli fjernet når temaet oppdateres. Så du må lære om barnetemaer og bruke et undertema for å gjøre endringer ved å bruke style.css, functions.php eller andre temamalfiler. Jeg har snakket om barnetemaer senere i denne artikkelen.

Det er to måter å redigere eller legge til CSS i temaet ditt

1 Bruke dashbordet

Dette lar deg redigere WordPress-temaet ditt direkte ved å bruke CSS-stilarket i WordPress Dashboard. Men du må merke deg at store endringer som er gjort her kan være vanskelige å tilbakestille. Så jeg vil anbefale å ta en sikkerhetskopi av WordPress-temaets originale CSS og deretter gjøre eventuelle endringer. Jeg vil også anbefale deg å lage et undertema for nettstedet ditt. Hvis du ikke vet hva det er, bare les neste avsnitt og kom tilbake.

Lag et undertema og deretter, i det underordnede temaet, gå til Utseende og deretter Temaredigering. En pop-up vises når du bruker et undertema, men det er ikke noe å bekymre seg for. Bare klikk på «Jeg forstår», så kommer du inn i stilarket. Hvis du vil gjøre endringer i malfiler som header.php, functions.php, etc. må du først lære PHP og deretter prøve kodingsferdighetene dine. Ellers er det bare å holde seg til å redigere stilarket.

Hva er et undertema i WordPress?

Et undertema er en kopi av et originalt tema (også kjent som overordnet tema). Barnetemaet inkluderer funksjonaliteten og stilen til overordnet tema. Det anbefales å bruke et undertema når du vil beholde den originale koden intakt mens du gjør endringer i utformingen av nettstedet ditt. Så du kan lage nye, bedre design på barnetemaet og beholde funksjonaliteten til overordnet tema. Noen få fordeler med å bruke et barnetema inkluderer:

• Du trenger ikke å bekymre deg for å rote med den originale koden, siden overordnet tema er trygt og uredigert.
• Du kan bruke koding til å utvide funksjonaliteten til et overordnet tema, eksperimentere med det og lage noe nytt.
• Du trenger ikke lage et tema fra bunnen av. Hvis du ved en tilfeldighet glemmer en viss funksjonalitet eller funksjon, er foreldretemaets kode der for deg.

Du må imidlertid være veldig forsiktig når du bruker barnetemaer. En av grunnene er at det ville kreve kodeferdigheter og erfaring. Hvis du nettopp har begynt med CSS, HTML, JavaScript og PHP, gi deg selv litt tid til å bli en ekspert først. Ellers kan læringskurven være ganske høy.

En annen ting å ta vare på mens du bruker et barnetema er at du må sjekke oppdateringene først. Hvis foreldretemaet ditt er oppdatert med en funksjon du ikke vil ha, må du ikke oppdatere WordPress-temaet ditt, da det vil reflektere i barnets tema. Noen ganger, hvis noen av funksjonene utelates i hovedtemaet og du oppdaterer det, kan barnetemaet ditt bli påvirket. Dermed øker kodingsarbeidet ditt.

2 Bruke FTP-server

Det kan være en sjanse for at du ikke kan få tilgang til dashbordet for temaet ditt direkte. Noen ganger deaktiverer bruk av plugins denne funksjonen. Så du må bruke FTP eller File Transfer Protocol for å få ekstern tilgang til nettstedets filer. Start med å laste ned en hvilken som helst FTP-klientapplikasjon. Kontakt verten din og be om FTP-legitimasjonen din.

Når du skriver inn legitimasjonen, vil du få tilgang til style.css. Gjør nå endringer i filen, lagre endringene og last dem opp tilbake til serveren. Dette kan være en ganske hektisk metode for å legge til CSS på nettstedet ditt, så bruk det bare hvis du ikke har tilgang til dashbordet.

Enkle måter å legge til CSS på WordPress-siden din

Det er to enkle metoder som du kan bruke til å legge til CSS på WordPress-siden din. De inkluderer bruk av en WordPress Customiser eller en plugin. Det vil være mye enklere å legge til CSS-koden din ved å bruke disse metodene. Å legge til CSS ved hjelp av en WordPress Customiser eller en plugin vil heller ikke forsvinne koden din når temaet er oppdatert. Jeg vil likevel anbefale deg å ta en sikkerhetskopi av nettstedets originalkode i tilfelle noe skulle skje utilsiktet. La oss nå sjekke de to enkle måtene å legge til CSS på WordPress-siden din.

1 Redigering gjennom WordPress Customiser

Bare logg inn på WordPress-backend. Klikk på Utseende og deretter på Tilpass. Det åpner en tilpasningsskjerm. Denne skjermen viser deg en forhåndsvisning av nettstedet ditt i det øyeblikket, og det vil være noen alternativer på venstre side av skjermen for å tilpasse elementer som farger, menyer eller andre widgets.

På venstre side av skjermen vil du se et alternativ som heter Ekstra CSS. Det er her du må drysse magien din. Når du klikker på tilleggs-CSS, åpnes en ny side med koden til nettstedet ditt. Nå kan du gjøre endringer i koden, og hvis du har skrevet den riktig (ingen feil!) vil du se endringene gjenspeiles i forhåndsvisningen.

CSS-koden du skriver her vil ikke endres eller forsvinne når temaet ditt er oppdatert! Men hvis du flytter til et nytt tema, vil koden som er skrevet her bli slettet. Så det foreslås at du må sikkerhetskopiere CSS-en din før du endrer temaet.

2 Bruk en plugin

I denne delen vil jeg diskutere fire forskjellige plugins som du kan bruke til å redigere CSS for WordPress-temaet ditt – Advanced CSS Editor, Modular Custom CSS, SiteOrigin CSS og CSS Hero. Hvis du ikke vet, er WordPress-plugins små programvarebiter som kan kobles til WordPress for å utvide funksjonaliteten. Noen plugins er tilgjengelige gratis, mens for noen må du betale litt penger for å legge dem til WordPress-siden din. Plugins kan hjelpe deg med å redigere eller legge til CSS på WordPress-siden din med bare noen få klikk!

Bruke Advanced CSS Editor Plugin

Den første plugin-en jeg vil anbefale heter Advanced CSS Editor. Denne plugin-modulen lar deg legge til CSS for hvordan nettstedet ditt ser ut på en datamaskin, nettbrett og mobiltelefon. På denne måten kan du finjustere nettstedet ditt for hver enhet. For å begynne å redigere, installer programtillegget. Gå til WordPress-dashbordet, klikk på Utseende og deretter Customiser. Du vil se et nytt alternativ kalt Advanced CSS Editor. Legg til den tilpassede CSS-en du vil ha, og lagre endringene.

En stor fordel med å bruke denne plugin er at du kan kontrollere hvordan nettstedet ditt ser ut på forskjellige enheter. Dessuten kan du fortsatt bruke teknikken jeg fortalte i punkt #1 for å redigere WordPress-temaet ditt. Men for noen mennesker som ikke er vant til koding, kan det være mye arbeid å gjøre endringer for hver type enhet. De må først lære å skrive CSS for hver enhetstype.

Bruke Modular Custom CSS Plugin

Den andre plugin-en jeg vil anbefale er Modular Custom CSS. Denne plugin-en hjelper deg å gjøre endringer i WordPress-nettstedet ditt temamessig. For eksempel, hvis du for øyeblikket bruker ett tema og du gjør endringer i det temaet ved hjelp av Modular Custom CSS. Deretter bestemmer du deg for å velge et annet tema for nettstedet ditt. Så endringene som ble gjort i det første temaet ville ikke bli slettet. De vil forbli intakte i denne plugin-en. Du kan også legge til global CSS ved å bruke denne plugin. At CSS ville forbli den samme til tross for temaendringer.

For å bruke denne plugin, last først ned plugin og legg den til WordPress-siden din. Klikk deretter på Utseende -> Tilpasser -> Ekstra CSS. Den eneste ulempen jeg kunne finne med denne metoden er at å legge til global CSS kanskje ikke alltid er den beste ideen. Noen ganger kan det hende at den globale CSS ikke fungerer med et tema, og det kan være et rot.

Bruke SiteOrigin CSS-plugin

Den tredje pluginen som jeg anbefaler er kjent som SiteOrigin CSS. Dette pluginet gir deg visuelle kontroller som lar deg redigere utseendet og følelsen av nettstedet ditt i sanntid. Denne plugin er egnet for både nybegynnere og avanserte CSS-brukere. Forhåndsvisningen i sanntid og de visuelle kontrollene hjelper nybegynnere mens avanserte brukere kan kode raskt ved å bruke funksjonen for automatisk fullføring av kode i denne plugin-en.

Denne plugin-modulen åpner en frittstående CSS-editor for WordPress. For å få tilgang til denne plugin-en må du først laste ned plugin-en og legge den til på WordPress-siden din. Klikk deretter på Utseende -> Egendefinert CSS. En flott funksjon med denne plugin er at du kan redigere et hvilket som helst element på nettstedet ditt ved å bare klikke på det. Du kan endre noen enkle elementer i temaet uten å bruke CSS. En ulempe med slik funksjonalitet kan imidlertid være at hvis du gjør endringer i mange forskjellige elementer i et tema, kan det være vanskelig å spore dem.

Bruke CSS Hero Plugin

Nå er dette noe interessant. Min tredje plugin-anbefaling inkluderer en plugin som hjelper deg med å redigere CSS på WordPress-siden din ved å dra og slipp. Det er kjent som CSS Hero. For å redigere CSS ved hjelp av denne plugin, må du bare muse over elementet du vil endre og klikke på det. Deretter kan du justere det som du vil. Her er noen fantastiske funksjoner i denne plugin-en:

• Denne plugin-modulen inkluderer enkel redigering av skriftstiler og topografi. Programtillegget støtter Google Fonts og TypeKit-fonter.
• Du kan også bruke en fargevelger og eksperimentere med en levende farge- og bakgrunnsendring. Du kan enkelt finne de siste brukte fargene dine.
• Du kan bare dra en glidebryter og se hvordan margene ser ut.
• Programtillegget støtter også sideelementer som gradient, boksskygger, tekstskygger og andre moderne CSS-egenskaper.
• Du kan lagre øyeblikksbilder av redigeringene dine med denne plugin-modulen. Så du trenger ikke å gjøre alt live. Bare fortsett å jobbe og publiser den endelige versjonen.
• Denne plugin-en påvirker ikke temafilene dine. Så du trenger ikke å bekymre deg for at oppdateringer ødelegger endringene dine.

Sammenligning av de forskjellige måtene å tilpasse WordPress-tema med CSS

Så i dag lærte vi om 4 forskjellige måter å tilpasse et WordPress-nettsted ved hjelp av CSS. Du kan redigere eller legge til CSS til WordPress-temaet ditt ved å bruke Dashboard, eller du kan bruke en FTP-applikasjon. Du kan bruke WordPress Customiser til å legge til eller redigere CSS, eller til slutt kan du bruke noen plugins for å tilpasse WordPress-temaet ditt med CSS.

• Hvis du er ganske ny på WordPress og CSS, vil jeg anbefale deg å bruke WordPress Customiser for å redigere eller legge til CSS. På denne måten kan du sjekke endringene i forhåndsvisningen og trenger ikke å bekymre deg for at endringer fjernes når temaet er oppdatert.
• Hvis du har litt erfaring med CSS og WordPress og du har jobbet med plugins før, vil jeg anbefale deg å velge noen av de fire pluginene som jeg delte med deg i dag. Programtilleggene gir bedre alternativer og muligheter for å forbedre nettstedet ditt.
• Hvis du er en CSS-veteran. Du har laget nettsider og kunnskap om CSS fungerer grundig. Deretter vil jeg anbefale deg å bruke Dashboard eller FTP for å gjøre endringer direkte i WordPress-stilarket.

Det er viktig hvordan nettstedet ditt ser ut

Design, layout, farger, fonter eller tema på nettstedet ditt er ganske viktig. Det hjelper med å formidle følelsen du vil at brukeren skal ha om bedriften din. Det kan sette opp et unikt merkevarebilde og definere identiteten din.

Designet og utformingen av nettstedet ditt spiller også en stor rolle for å forbedre brukeropplevelsen. Hvis designet ditt ikke er så bra, du har plassert annonser på feil plassering, fargene på nettstedet ditt er ganske distraherende, alt dette kan påvirke brukeropplevelsen.

Et flott design og oppsett kan hjelpe deg med å kontrollere hvordan meldingen blir levert til brukerne. Du kan fange oppmerksomheten deres til rett tid og lede dem til en vei som oppfyller målene dine. Så å endre, legge til eller redigere CSS-en til WordPress-siden din er et spørsmål om ansvar. Ansvaret for å gjøre nettstedet ditt bedre for brukerne.

Håper disse tipsene og triksene for å tilpasse WordPress-temaet ditt med CSS vil hjelpe deg med å gi et personlig preg på nettstedet ditt. Hvis du bruker noen av dem eller har brukt dem tidligere, del dine erfaringer i kommentarfeltet og spre ordet!