Sådan tilpasser du dit WordPress-websted med CSS: 3 nemme metoder

WordPress har udviklet sig gennem årene, og i dag er det en ret fleksibel og nem at tilpasse platform gennem sin blok-editor, Gutenberg. Alligevel vil der være tidspunkter, hvor du har brug for lidt mere rækkevidde, end Gutenberg-editoren giver.

Det er her, tilpasset CSS kommer til nytte. CSS-styling giver dig mulighed for at redigere farver, mellemrum, skrifttyper, layouts og stort set alle andre visuelle elementer på dit WordPress-websted, så du kan få det til at se ud præcis, som du vil.

I denne artikel vil vi guide dig gennem det væsentlige i at tilpasse dit WordPress-websted med CSS.

Hvorfor tilpasse dit websted med CSS?

Tilføjelse af tilpasset CSS er blot en af ​​de metoder, du kan bruge til at finjustere dit websteds udseende. Andre metoder inkluderer at bruge en veludviklet premium WordPress-tema, eller installation af en sidebygger.

Selvom disse to metoder er lidt nemmere at bruge for begyndere og ikke kræver kodningsviden, er det mere fordelagtigt at bruge tilpasset CSS på to hovedmåder:

Nul omkostninger

Premium-temaer og WordPress-sidebyggere kan være praktiske, men de koster – i kroner og øre. Bevæbnet med viden om, hvordan man skriver tilpasset CSS, kan du på den anden side opnå de samme effekter uden at pådrage dig ekstra udgifter.

Minimal oppustethed

Sidebyggere og veludviklede temaer er designet til at give brugerne mere fleksibilitet og en bred vifte af muligheder for at tilpasse deres websteder. På grund af dette har de en tendens til at tilføje bloat til websteder, hvilket potentielt bremser dem.

Når du skriver tilpasset CSS, tilføjer du på den anden side kun de nødvendige funktioner, hvilket generelt resulterer i lettere hjemmesider og hurtigere indlæsningshastigheder.

3 nemme metoder til at tilpasse dit WordPress-websted med CSS

Forhåbentlig ved du det allerede hvordan man skriver CSS. Når du er fortrolig med det grundlæggende, kan du bruge en af ​​følgende metoder til at tilføje tilpasset CSS til dit WordPress-websted:

Metode 1: Brug WordPress Customizer

Med WordPress 4.7 eller en anden version efter det, kan du tilføje tilpasset CSS direkte fra administrationsområdet. Dette er den mest ligetil metode, og fordi der er en live forhåndsvisning tilgængelig, kan du se alle ændringer, du foretager, i realtid.

Det er også den mest anbefalede, da alle de ændringer, du foretager, gemmes i selve WordPress. Det betyder, at selvom du ændrer eller opdaterer dit tema, mister du ikke din tilpassede CSS.

Her er de trin, du skal tage:

Trin 1: Naviger til Udseende > Tilpas.

Dette åbner WordPress-tematilpasningen, som viser dig en live forhåndsvisning af dit websted til højre sammen med nogle tilpasningsmuligheder til venstre. Rul ned til bunden af ​​venstre panel, og du finder en Yderligere CSS fanen.

Trin 2: Klik på Yderligere CSS Tab.

Dette åbner en lille boks i venstre rude, hvor du kan tilføje din brugerdefinerede CSS. Du kan indtaste så mange linjer med CSS-kode, som du vil. Det fantastiske ved denne editor er, at den validerer din kode og advarer dig, hvis der er nogen fejl.

Trin 3: Offentliggør dine ændringer.

Enhver gyldig CSS-regel, du tilføjer, vises i området for live-eksempel til højre. For at anvende ændringerne på dit websted skal du klikke på Offentliggøre knappen øverst i venstre rude, når du er tilfreds. Hvis du ikke ønsker, at ændringerne skal træde i kraft med det samme, kan du også planlægge udgivelsen på et senere tidspunkt eller gemme dit arbejde som en kladde.

Det er vigtigt at bemærke, at alle ændringer, du foretager ved hjælp af tilpasningen, er knyttet til dit aktuelle tema. Hvis du nogensinde skifter til et andet tema, vil ændringerne gå tabt, medmindre du kopierer din tilpassede CSS og føjer den til det nye tema. Det er god praksis at gemme al den brugerdefinerede CSS, du føjer til et tema, på en notesblok. På den måde kan du blot kopiere koden og indsætte den i afsnittet "Yderligere CSS" for et andet tema.

Hvis det lyder som for meget arbejde, og du foretrækker en løsning, der giver dig mulighed for at anvende din tilpassede CSS på ethvert WordPress-tema, du bruger, er den næste metode for dig.

Metode 2. Brug et plugin

Brugerdefinerede CSS-plugins gemmer din brugerdefinerede CSS adskilt fra dit tema, så dine ændringer kan anvendes, uanset hvilket tema du bruger. Disse plugins kommer også med ekstra funktioner som autofuldførelse, der kan gøre tilføjelse af CSS nemmere.

Den eneste ulempe er, at de er tredjepartssoftware, hvilket betyder, at de potentielt kan bremse dit websted. De fleste af disse plugins er dog lette, så de har generelt ringe indflydelse på dit websteds ydeevne. Her er nogle af de bedste tilpassede CSS-plugins, du kan bruge:

• Simpel brugerdefineret CSS

Simpel brugerdefineret CSS er et af de mest populære brugerdefinerede CSS-plugins. Den er let, nem at bruge og tilbyder fantastiske funktioner. Det er nemt at sætte det op. Alt du skal gøre er at installere og aktivere plugin'et. Naviger derefter til Udseende sektion i venstre rude på dit dashboard.

Du vil se en ny mulighed kaldet Brugerdefineret CSS. Hvis du klikker på den, åbnes en editor, hvor du kan tilføje din tilpassede CSS. Klik på Opdater tilpasset CSS knappen for at gemme dine ændringer. For at se ændringerne skal du blot opdatere din hjemmeside.

• Simpel Custom CSS og JS

Hvis du vil have endnu flere funktioner, kan du Simpel Custom CSS og JS plugin er en god mulighed. Ud over at tilføje CSS giver det dig mulighed for at tilføje JavaScript-indgange.

• CSS Hero

Hvis du ikke ønsker at skrive en enkelt linje kode, CSS Hero plugin er perfekt til dig. Dette plugin tilbyder en visuel CSS-editor med rullemenuer og inputfelter, der lader dig redigere næsten enhver CSS-stil på dit websted uden at skulle skrive nogen kode.

Metode 3. Rediger råkoden

De to metoder, vi har beskrevet ovenfor, giver dig mulighed for at tilføje tilpasset CSS til dit websted uden at skulle røre ved nogen af ​​dine temafiler. Men i nogle tilfælde vil du måske redigere dit temas CSS eller direkte tilføje tilpasset CSS til dit temas kode.

For at gøre dette skal du have adgang til dit websteds stylesheet. En nem måde at få adgang til dette stylesheet er gennem Tema redaktør på dit WordPress-dashboard.

Inden vi går videre, er der dog et par sikkerhedsforanstaltninger, du skal indføre. Først, sikkerhedskopiere dit websted. Mens du redigerer dine temafiler, er det nemt at lave fejl, der potentielt kan crashe dit websted.

En backup sikrer, at du har en funktionel hjemmeside at gå tilbage til. Næste, oprette et børnetema. Hvis du foretager direkte redigeringer af dit overordnede tema, vil ændringerne gå tabt, hver gang temaet opdateres.

Når disse sikkerhedsforanstaltninger er på plads, skal du logge ind på din WordPress-backend. Gå til Udseende > Temaeditor. Når du klikker på temaredigeringsindstillingen, vil du se en popup-boks, der advarer dig mod at foretage direkte ændringer i dine temafiler. Hvis du følger ovenstående trin, er du godt i gang.

Klik jeg forstår at fortsætte.

Når du har klikket, bør du som standard se dit websteds stylesheet. Hvis ikke, skal du blot se på den højre rude og klikke på style.css under Stilark mulighed.

Herfra kan du foretage direkte ændringer i dine temafiler. Bare glem ikke at klikke Gem og opdater når du er færdig.

Tag kontrol over dit websteds udseende med tilpasset CSS

At lære at skrive tilpasset CSS på WordPress kan tage lidt tid for begyndere, men det vil give dig ægte kontrol over udseendet af dit websted. Og det er uden omkostninger og med minimal indvirkning på dit websteds ydeevne.

Hvis du hellere ikke vil lave noget manuel design, er der dog andre måder at få arbejdet gjort på, f.eks. ved at bruge en af ​​de bedste sidebyggere til WordPress.

5 WordPress-sidebyggere, der kan hjælpe dig med at bygge fantastiske websteder

Vil du få dit WordPress-websted til at se fantastisk ud, men har du ikke råd til en udvikler? Prøv i stedet disse WordPress-sidebyggere.

Læs Næste

Om forfatteren