Det er ikke mulig å være borti WordPress uten også å ha med temaer å gjøre. Et WordPress-tema gjør langt mer enn å gi et overfladisk ansiktsløft, slik man kanskje kan forvente, men bestemmer både hva som skal vises hvor og når – og hvordan det skal se ut. Sagt med andre ord gjør WordPress-kjernen alle muligheter tilgjengelige, mens det er temaet som tar mulighetene i bruk – riktig nok i tillegg til utvidelsene (plugins). Men uten et aktivt tema får heller ikke utvidelsene utrettet stort, i hvert fall ikke visuelt.

Dermed bør det ikke være overraskende at temaer finnes i hopetall, som generer alle typer nettsteder – alt fra blogger til nettbutikker, kompliserte firmanettsteder til enkle bryllupsnettsteder, også videre. Bak kulissene er det den samme kjernen som skjuler seg, og leverer innhold til temaet.

Her finner du temaer

Det finnes enorme mengder ferdigutviklede WordPress-temaer. Mange av dem er gratis å bruk, mens de aller beste, mest fleksible og funksjonsrike gjerne koster noen kroner. Nedenfor får du noen tips til hvor du finner gode temaer, installerer dem, i tillegg til en kort introduksjon til den riktige måten å foreta tilpasninger på.

Er du på jakt etter et godt tema tenker du kanskje aller først å oppsøke WordPress sine egne nettsider. Og det er godt tenkt, for her finnes et rikt utvalg både av temaer som er gratis i bruk, og som koster. Dessuten har du her fordelen av at temaene gjerne er karaktersatt av brukerne, noe som gjør det lettere å finne et kvalitetstema som passer ditt prosjekt.

En oversikt over temaer hos WordPress.org som er gratis å bruke bruk finner du her, og temaer som du må betale for finner du her.

Andre steder du kan finne temaer er for eksempel hos:

  • ThemeForest – som i skrivende stund har over 5.600 temaer for salg.
  • TemplateMonster – som også tilbyr et stort antall temaer mot betaling.

Fant du ikke noe tema som var helt mitt i blinken noen av disse stedene? Da er det bare å ta din foretrukne søkemotor i bruk, og gjøre et søk. Utvalget er enormt og med litt research finner du helt sikkert et tema som mer eller mindre treffer blink.

Installere temaer

Å installere et WordPress-tema er enkelt, og skjer enten i nettleseren eller ved å laste opp filene manuelt til området hvor nettstedet ditt ligger. Detaljer om hvordan du logger på filområdet ditt får du av tilbyderen din av webhotell, og foregår normalt ved hjelp av FTP. Rent faktisk hvordan denne opplastingen skjer vil ikke gjennomgås her, men er normalt heller ikke nødvendig. WordPress støtter nemlig installasjon av temaer fra zip-filer direkte i administrasjonspanelet.

Utklipp av themeside. Illustrasjon.For å installere et tema går du til Utseende > Temaer og trykker Legg til nytt. Herfra kan du for øvrig også bla rundt i tilgjengelige temaer hos WordPress.org, og installere temaet du ønsker deg direkte – uten å måtte laste ned, for så å laste opp. Men i dette tilfellet ønsker vi å laste opp en fil, og trykker Last opp tema. Deretter er det bare å velge zip-filen som inneholder temaet og trykke Installer nå. Hvis alt går som det skal får du like etterpå en melding om at temaet er installert. Alt som nå gjenstår er å aktivere det. Dette gjør du ved å trykke Utseende > Temaer igjen, peke på temaet du aktivere, og trykke knappen Aktiver.

Temaet er nå aktivert og klart til bruk. Ulike temaer kommer med ulike, spesialtilpassede instillingssider. Hva disse innstillingsmulighetene innebærer og hvordan de er utformet, varierer fra tema til tema. Her er det bare å lese seg opp i vedlagte dokumentasjon, og gjøre de tilpasningene du måtte ønske.

Trygg tilpasning av temaer

Uansett hvor fleksibelt temaet du har gått til anskaffelse av måtte være, vil det ofte være slik at man ønsker å gjøre ytterligere tilpasninger – utover tilpasningsmulighetene temaet tilbyr. Også denne utfordringen har man tatt høyde for i WordPress, og løst ved hjelp av såkalte dattertemaer (child themes). Tiden har kommet for å gi en liten introduksjon til dattertemaer, hvordan de enkelt kan settes opp, hvorfor de i det hele tatt eksisterer – og hva de kan hjelpe deg med å løse.

Aller først; hvorfor dattertemaer? Som nevnt er det vanskelig å finne et tema som gjør akkurat den jobben du vil at det skal gjøre. Kanskje vises en meny du ikke vil at skal vises eller en bunntekst du ikke er fornøyd med – som heller ikke kan stille på i temaets innstillinger. Det du da kan gjøre er å åpne tema-filene og endre koden i dem direkte, for deretter å klappe deg selv på skulderen og kalle det en dag. Problemet med denne løsningen åpenbarer seg så snart du mottar varsel om at temaet du benytter har fått en oppdatering. For vil du da kunne miste alle tilpasningene du har gjort? Absolutt. Denne løsningen er defor langt fra ideell.

Med dattetemaer gjør du derimot ingen endringer direkte i temaet, du oppretter heller et tilleggstema som kjøres parallelt med hovedtemaet. Dermed kan du oppdatere hovedtemaet uten å være redd for at endringene dine blir overskrevet, og i tillegg er det vesentlig enklere å holde oversikten over hvilke tilpasninger du har gjort.

Slik oppretter du et dattertema

For å opprette et dattertema logger du først på filområdet hvor nettløsningen din ligger. Gå deretter inn i wp-content/themes – hvor du vil se alle installerte temaer liggende i hver sin mappe. Dersom hovedtemaet ditt har mappenavn «kongetema» oppretter du her en ny, tom mappe som heter «kongetema-datter». Hva mappen heter er helt opp til deg selv, men det anbefales å velge et navn som klart indikerer at dette er et dattertema, og hvilket tema det er datter av.

Inne i den nye mappen er det kun to filer du må ha for å kunne skru på dattertemaet. I motsetningen til mappenavnet, hvor navnet var uvesentlig, er syntaksen i css-filen derimot striks. Det er altså viktig at filen du oppretter har nøyaktig samme innhold som beskrevet under, selv om innholdet til høyre for kolon selvfølgelig vil måtte endres. Fila functions.php kan på sin side være tom, men den må eksistere. Gjør nå følgende:

  1. Opprett en fil ved navn style.css og en ved navn functions.php
  2. I style.css limer du inn følgende tekst: 
    /*
 Theme Name:   Kongetema Datter
 Theme URI:    http://eksempel.no
 Description:  Kongetema Datter-tema
 Author:       Daniel Jahrø Jensen
 Author URI:   http://eksempel.no
 Template:     kongetema
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  kongetema-datter
*/
  3. Oppdater alle opplysningene i høyre kolonne slik at de matcher temaet du vil opprette et dattertema i tilknytning til. Det er spesielt navnet på dattertemaet (Theme Name) og navnet på temaet det skal være datter av (Template) som er viktig å oppdatere. Navnet på dattertemaet er det som vises når du velger tema i WordPress, og Template forteller WordPress hvilket tema ditt nye dattertema skal være datter av.
  4. Gå til Utseende > Temaer og aktivér det nye dattertemaet.

Dattertemaet er nå aktivert, men gjør foreløpig ingen nytte for seg. Alt som så langt er gjort er å definere dets eksistens. Du vil også se at alt innhold vises som før, men ribbet for all form for visuell styling. Grunnen til dette er at WordPress finner et stilsett i dattertemaet ditt, og antar at du vil benytte dette heller enn det som tilhører hovedtemaet. Dermed må vi fortelle WordPress at også stilsettet til hovedtemaet skal lastes inn.

I fila functions.php legger du derfor inn følgende kode:

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>

Det som nå skjer er at begge stilsett lastes inn, både style.css som tilhører hovedtemaet, og style.css som tilhører dattertemaet. I de tilfeller hvor samme element styles, er det stilsettet til dattertemaet som avgjør hvordan utseendet ender opp med å bli. Dermed blir det enkelt å overstyre hovedtemaet med dine egne tilpasninger, uten at du risikerer å miste dem ved en senere oppdatering.

La oss si at det var fargen på lenkene dine du ønsker å endre på. Det du ganske enkelt nå gjør er:

    1. Åpne style.css.
    2. Lim inn følgende kodesnutt:
a {
color: red;
}

Denne koden forteller WordPress at alle lenker skal være røde. Dersom det finnes en annet fargevalg for lenker i stilsettet til hovedtemaet, vil likevel lenkene ende opp som røde – fordi dattertemaet alltid «vinner».

Så enkelt er det å opprette dattertemaer, og å foreta endringer i utseendet til temaet ditt. Mulighetene her er uendelige, og de aller mest spennende tilpasningene gjør du i functions.php. Her kan du tilpasse mer enn bare hvordan nettstedet ditt tar seg ut, men også hvordan det oppfører seg.

Mer om funksjonen til fila functions.php, og måter å gjøre tilpasninger på, vil du få i en fremtidig guide. Men kort fortalt er dette en fil som alltid lastes sammen med temaet, og som inneholder et utvalg PHP-funksjoner som enten endrer på funksjonalitet, legger til ny funksjonalitet eller fjerner/deaktiverer eksisterende funksjonalitet. Litt forenklet kunne kode vi legger til i denne fila også vært utformet som ett eller flere tillegg (plugin), hvor den største forskjellen da ville vært at vi ville kunne skru av og på funksjonaliteten fra administrasjonspanelet, og like enkelt flyttet samme funksjonalitet til et annet nettsted.

Dette var en kort introduksjon til temaer og tilpasninger av dem. Har du tilbakemeldinger eller spørsmål til guiden er du velkommen til å legge igjen en kommentar.

Vi i Dahls Data AS tilbyr hjelp til alt innen WordPress. Om du har behov for hjelp er det bare å ta kontakt for et uforpliktende pristilbud.