Introduksjon
Hvis du fulgte innføringen i WordPress-kontrollpanelet for å sette opp nettstedet ditt, er et tema det neste du må velge.
Når man lager et nettsted med WordPress for første gang, er det vanlig å tenke på valg av tema som den aller viktigste beslutningen. Det er sant at temaet definerer nesten alt det en besøkende ser, men du har likevel større spillerom enn du kanskje tror. En av fordelene med WordPress er nemlig at alt innholdet ditt ligger i en WordPress-database, og der forblir det uansett hvilket tema som er aktivt. Bytter du tema beholder du innholdet, og det er kun utseendet som endres.
I denne veiledningen går vi gjennom nøyaktig hva temaer faktisk styrer, og hvorfor vi anbefaler såkalt “lette” temaer. Vi viser deg også hvordan du installerer og konfigurerer Astra, som er et utmerket utgangspunkt. Når vi kommer til slutten vil nettstedet ditt ha et egnet tema med typografi du selv har valgt, samt et fungerende oppsett for toppteksten.
Hva styrer temaet egentlig?
Et tema er en samling filer som forteller WordPress hvordan innholdet ditt skal vises. Det styrer layout, typografi, farger, strukturen på topp- og bunntekst, plasseringen av menyer og hvordan ulike innholdstyper presenteres. Et blogginnlegg, en arkivside for en kategori, et bildegalleri og en 404-feilside vil alle se forskjellige ut, fordi temaet har egne maler for hver av dem.
Det temaet ikke styrer, er selve innholdet ditt. Innlegg, sider, bilder og innstillinger lagres i WordPress-databasen, som er atskilt fra temafilene. Dette skillet mellom innhold og utforming er en av de fremste kvalitetene til WordPress. Det betyr nemlig at du kan redesigne nettstedet ditt fullstendig uten å måtte bygge det opp på nytt.
Kjernefunksjoner som caching, SEO, kontaktskjemaer og sikkerhet hører hjemme i utvidelser eller i webhotellet ditt. Når et tema integrerer disse funksjonene direkte i sin egen kode, skaper det avhengigheter som gjør det mye vanskeligere å bytte tema senere. Et godt utviklet tema tar seg i stedet av presentasjonen og holder seg i ellers bakgrunnen.
Fordelene med “lette” temaer
Når en besøkende kommer til en side på nettstedet ditt, må nettleseren laste ned og behandle koden til temaet før noe av innholdet kan bli vist. Et tema som inneholder mengder av CSS-filer, registrerer skript for funksjoner som den besøkende aldri får se eller initialiserer alt på en gang, sløser bort tid og båndbredde ved hver eneste sideinnlasting.
Besøkende har liten tålmodighet med sider som laster sakte. Ifølge Googles veiledning for ytelse på web.dev forlater 53 % av brukerne nettsteder som tar mer enn tre sekunder å laste inn.
Et lett tema med minimalistisk kode løser ikke alle hastighetsproblemer, men det unngår at du kaster bort det korte tidsvinduet for oppmerksomhet på funksjoner de besøkende ikke har bedt om. Et godt designet tema laster inn et lite standardoppsett, og legger bare til kode for funksjoner som faktisk er i bruk på den aktuelle siden.
En standardinstallasjon av Astra bruker lite ressurser, noe som gir deg god kapasitet til å legge til utvidelser, bilder og innhold før ytelsen blir et problem.
Hastighet påvirker for øvrig mer enn bare brukeropplevelsen. Googles Core Web Vitals, et sett med ytelsesmålinger som brukes som signaler for søkerangering, har direkte innvirkning på hvor nettstedet ditt havner i søkeresultatene. Et tema som lastes raskt inn gir et godt utgangspunkt for disse målingene. Komplekse temaer gjør det vanskeligere å lykkes med søkemotorrangeringen, uansett hvilke ytelsesutvidelser du legger til senere.
Hos STW er AccelerateWP inkludert i WordPress-hostingpakkene for caching på servernivå. Dette fungerer best når selve temaet spiller på lag. Å starte med et lett tema betyr at alt fra caching til bildeoptimalisering forsterker effekten, i stedet for at du må prøve å kompensere for mangler i temaet.
Problemet med allsidige temaer
Hvis du søker etter “beste WordPress-temaer” vil du se at Avada, Divi og andre allsidige temaer er godt synlige. Dette er populære produkter med millioner av brukere, men de er bygget på en annen filosofi. De laster nemlig inn alt som standard, og lar deg deaktivere det du ikke vil bruke.
Problemet er at “deaktivert” og “ikke lastet inn” er to forskjellige ting. Mange slike temaer registrerer skript og stiler på hver side, uavhengig av om disse funksjonene er i bruk. De har også en tendens til å inkludere egenutviklete funksjoner for sidebygging som binder deg til temaet og leverandøren. Hvis du bytter til et annet tema kan sidene dine slutte å fungere ordentlig, fordi de er avhengige av det aktuelle temaets spesifikke kortkoder (egne koder som et tema eller en utvidelse konverterer til HTML) eller struktur.
Det som teller er hvordan nettstedet ditt ser ut når det kun inneholder ditt eget innhold og de funksjonene du faktisk trenger. Det er nettopp denne enkle utformingen et lett tema vil starte med.
Slik installerer du Astra
Som eksempel på et lett tema benytter vi her Astra. Astra installeres på samme måte som alle andre gratis WordPress-temaer, nemlig direkte fra temakatalogen i kontrollpanelet i WordPress. I innføringen til kontrollpanelet slettet vi de ekstra standardtemaene og beholdt Twenty Twenty-Five som aktivt tema. Nå skal vi erstatte det med et tema som er laget for ekte nettsteder.
- I WordPress-kontrollpanelet, gå til Utseeende → Temaer.
- Klikk Legg til tema øverst på siden.
- Skriv “Astra” i søkefeltet.
Astra vil vises øverst i søkeresultatene. Temaet er utviklet av Brainstorm Force og har millioner av aktive installasjoner.
- Hold musepekeren over Astra-kortet og klikk Installer. WordPress laster ned temafilene til serveren din. Etter noen sekunder endres knappen til Aktiver.
- Klikk Aktiver.
Astra er nå aktivt på nettstedet ditt. Det forrige standardtemaet er fortsatt installert som reserveløsning, og slik kan du la det være. WordPress anbefaler å ha ett reservetema tilgjengelig.
Hvis du går inn på nettstedet ditt nå, vil du se at utformingen har endret seg. Astra bruker sin egen standardutforming for toppteksten, fontene og den generelle strukturen. Innholdet ditt er imidlertid akkurat som før. Det er bare designet som er annerledes.
Kontrollpanelet i Astra
Når du har aktivert Astra, vises et nytt Astra-element i menyen til venstre. Klikk på det for å åpne Astra-oversikten.
Kontrollpanelet viser snarveier til tilpasningsverktøyet, startmaler, nyttige lenker og den gjeldende versjonen av Astra. Du trenger ikke å konfigurere noe på denne siden inntil videre, men det er et nyttig utgangspunkt hvis du senere trenger å finne innstillinger som er spesifikke for Astra.
Velg utseende i tilpasningssverktøyet
I Tilpass-seksjonen kan du velge hvordan Astra skal vise nettstedet ditt, fra skrifttyper og farger til topptekstlayout og bredden på innrammingsfeltene. Åpne verktøyet fra Utseende → Tilpass eller via lenken på Astra-dashbordet.
Panelet til venstre viser tilpasningskategoriene dine. I panelet til høyre ser du en forhåndsvisning. Hver endring du gjør i panelet til venstre oppdaterer forhåndsvisningen i sanntid, slik at du kan se nøyaktig hva som vil vises for besøkende før du publiserer noe.
Globale innstillinger
Klikk Global for å finne innstillinger som gjelder for hele nettstedet.
Her angir du fargepalett og standardavstander for nettstedet. I underkategorien Farger kan du velge primær- og aksentfarger som Astra bruker konsekvent på lenker, knapper og overskrifter over hele nettstedet. Hvis profilhåndboka til bedriften din inkluderer merkevarefarger, bør du angi dem her først. Alt annet arver innstillingene fra disse valgene.
Typografi
Typografi styrer skrifttypene (fontene) og størrelsene som brukes på hele nettstedet.
Du kan velge forskjellige skrifttyper for brødtekst og overskrifter. Astra kobler seg som standard til Google Fonts, noe som gir deg hundrevis av alternativer. For brødtekst bør du velge en skrifttype som er lett å lese selv i små størrelser. I overskriftene har du større frihet til å velge noe mer unikt og gjenkjennelig. Angi standard skriftstørrelse her, så vil Astra skalere overskriftene proporsjonalt.
Hvis du ikke er sikker på hvilke skrifttyper du vil bruke ennå, er standardinnstillingene i Astra et helt greit utgangspunkt. Kom tilbake til denne delen når du har lagt inn ekte innhold på nettstedet og kan se hvordan de ulike skrifttypene ser ut når de blir anvendt på din egen tekst.
Topp- og bunntekst-verktøyet
Klikk Sidehode i sidepanelet for å åpne dra-og-slipp-verktøyet for endring av topptekst.
Verktøyet deler toppteksten din inn i rader og kolonner. Du kan dra komponenter som logo, navigasjonsmeny, søkeikon og en handlingsknapp til ulike posisjoner. Det visuelle rutenettet nederst på skjermen viser hvor hvert element befinner seg.
Det er her Astra tar seg av det strukturelle arbeidet med topp- og bunntekst, noe som i mange andre temaer krever utvidelser eller tilpasset kode. Du kan lage en topptekst med logo til venstre, navigasjon i midten og en knapp til høyre, uten å røre koden. Bunntekst-verktøyet fungerer på samme måte, og er tilgjengelig via et eget menyvalg i sidepanelet i Tilpass-seksjonen.
For en ny nettside er det sannsynligvis tilstrekkelig med en enkel topptekst med logoen din og en hovedmeny for navigasjon. Du kan komme tilbake til nettsidebyggeren senere, etter hvert som innholdet vokser og navigasjonsbehovene dine blir tydeligere.
Startmaler: En valgfri snarvei
Astra tilbyr en tilleggsutvidelse kalt Startmaler som inneholder ferdige nettstedsdesign du kan importere med noen få klikk. Det er komplette startmaler med gjennomtenkt struktur, forhåndsinnstilt typografi og eksempelinnhold som du kan erstatte med ditt eget.
For å prøve dem går du til Utvidelser → Legg til ny utvidelse, søk etter “Startmaler”, og installer og aktiver utvidelsen fra Brainstorm Force. Gå deretter til Utseende → Startmaler for å bla gjennom biblioteket.
Dette er helt valgfritt. Hvis du heller vil bygge sidene dine fra bunnen av ved hjelp av blokkredigereren eller Elementor kan du hoppe over startmalene. De sparer tid hvis du ønsker et ferdig utformet nettsted å ta utgangspunkt i, men du trenger dem ikke for å bruke Astra.
Andre lette temaer det er verdt å kjenne til
Vi bruker Astra som eksempel i hele denne veiledningsserien, men det er ikke det eneste gode alternativet. Hvis du undersøker saken selv, vil du finne at mange alternativer er basert på den samme filosofien.
- GeneratePress har en lignende ytelsesprofil, med et tilpasningsverktøy som er litt mer rettet mot utviklere og et godt gratisabonnement.
- Kadence satser på blokkredigereren med stadig bedre støtte for Full Site Editing. Gratisversjonen inneholder et nyttig komponentbibliotek.
- Hello Elementor er et svært minimalistisk tema utviklet av Elementor-teamet som et blankt lerret. Det fungerer best når du ønsker at Elementor skal ta seg av det meste av sidedesignet, spesielt hvis du planlegger å bruke temabyggeren i Elementor Pro. Mer om dette i del 9.
- Twenty Twenty-Five er det nåværende standardtemaet i WordPress. Det egner seg godt til testing, men tilbyr begrensede muligheter for nettsteder som allerede er live og trenger reelle tilpasningsalternativer.
Et godt tema er et tema som lastes raskt, oppdateres jevnlig, fungerer problemfritt med blokkredigereren og ikke binder deg til leverandøren. Astra oppfyller alle disse kravene, og det samme gjør alternativene som er nevnt her.
Konklusjon
Nettstedet ditt har nå et ordentlig tema. Astra gir deg et godt grunnlag med innebygde tilpasningsverktøy, fra skrifttyper og farger til en dra-og-slipp-funksjon for å lage toppmenyer. Alt du konfigurerer her vil følge med videre i resten av denne veiledningsserien, uansett om du lager sider med den innebygde blokkredigereren eller legger til Elementor senere.
Neste trinn: