Et tema i WordPress kan må mange måten sammenlignes med utseendet på en bil. Vi har allerede motoren og grunnrammen i selve CMS-et, mens innstikkene fungerer som nødvendig ekstrautstyr. Men de stiligste bilene har et kult design, og det samme gjelder for enhver WordPress-side.
Med andre ord kan man si at et tema er designet på siden din. WordPress har et standard tema aktivert fra start, som oppdateres hvert eneste år. Men du vil naturligvis ikke at siden din skal se ut som en hvilken som helst annen standardisert WordPress-side, og vi skal derfor i denne delen av vår fem-stegs introduksjonsguide se nærmere på hvordan man behandler og lager temaer.
Introduksjon
I skrivende stund har WordPress passert versjon 4.0, og det har blitt svært enkelt å endre og redigere temaer «ut av boksen». Med det menes det at man kan gjøre nødvendige endringer for å få nettsiden til å se unik og brukervennlig ut, uten at man må kunne koding eller være dataekspert. I denne guiden skal vi se nærmere på hvordan man lager et tema om man er sistnevnte, men også litt på hvordan man kan simpelt endre et tema fra kontrollpanelet.
For å installere et tema går du til Utseende > Temaer i administrasjonsmenyen. Her kan du legge til temaer som finnes på WordPress.org. Har du kjøpt et tema, så må du først laste det opp i «wp-content/themes» via FTP på webhotellet ditt.
Dersom du ikke kan lage et eget design og kode det for bruk til WordPress, så finnes det mange steder du kan laste ned gratis temaer, eller kjøpe noen som er litt mer avanserte. I første del av guiden vår finner du et par aktuelle nettsider der du finner svært mange temaer.
Endre et tema uten HTML/CSS-kunnskaper
Som vi nevnte innledningsvis, så kan man endre en hel del ting direkte via kontrollpanelet til WordPress. De mest grunnleggende funksjonene er «klikk og pek», og vi skal ikke gå ytterligere inn på hvordan man gjør slike endringer her – det finnes en omfattende guide for det på WordPress.org.
For å gjøre endringer på temaet ditt, så går du til Utseende og Temaer i menyen. Her vil du kunne trykke på «Endre» på det aktuelle temaet. Da vil du få opp en rekke forskjellige valg, som inkluderer navn, slagord, bakgrunnsfarge, toppbilde/logo og bakgrunnsbilde. Du kan også justere ulike widgets, samt at en del temaer har noen spesialfunksjoner.
Det er begrenset hvilke endringer du kan gjøre her, så vi skal videre se på noen litt mer kompliserte endringer som de fleste WordPress-brukere vil tenke seg å gjøre med temaet sitt.
Hvis du skal endre ting i koden, så kan du gå til Utseende > Redigering i menyen. Her vil du få tilgang til alle filene som er nødvendige for de endringene vi nå skal beskrive.
Endre logoen på nettstedet
For å endre logoen på temaet til din egenproduserte logo, så går du simpelthen til Utseende og Sidetopp i menyen. Her vil du kunne laste opp logoen din, og skalere den til riktig størrelse i forhold til resten av designet. Dersom temaet du ikke bruker støtter slik opplasting av logo, må du inn i temafilene for å laste opp bildet ditt. Da må du først finne ut hva den nåværende logoen heter, og erstatte den med den nye logoen.
Den nye logoen din lastes opp via FTP, i riktig mappe, som vil være noe lignende «wp-content/themes/ditt_tema/img/logo.jpg».
Endre nettstedets favicon (ikon)
Et ikon er svært viktig for at brukerne skal gjenkjenne nettstedet ditt dersom de legger det til i favoritter-feltet i nettleseren. Et favicon vises også i fanetoppen i de ulike nettleserne, og vil være en måte å gjenkjenne nettstedet ditt på. Det bør samsvare med logoen. Et favicon lager du enkelt i et billedbehandlingsprogram, og det må være 16x16px stort og helst lagres med navnet «favicon.png».
For å legge til ditt favicon, så må du inn i «Redigering av temaet» som vi snakket om tidligere. Her må du åpne filen som heter «header.php». Legg inn følgende kode før </head>-taggen slutter:
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
Husk også å laste opp ikonet ditt via FTP, og sett «href» i kodesnutten ovenfor til å referere til bildet ditt. Det lastes opp i samme mappen som du la opp logoen din.
Endre farger på tekst og lenker
Hvis du vil endre farger på tekst og lenker, så må du også her inn på redigering av temaet ditt. Finn frem til filen som heter «style.css», den ligger som nederst til høyre i filoversikten. Vil du endre tekstfargen på hele nettstedet, så kan du legge til følgende kodelinje under «body», som du finner øverst i filen:
color:#FFFFFF;
Da vil all tekst på nettstedet bli hvit. Bruk denne fargegeneratoren for å finne fargekoder. Vil du kun endre teksten på lenkene, så skal du se etter «a» i stil-filen. Du endrer fargen med samme kode som nevnt ovenfor. For å endre fargen når noen peker på lenken legger du koden til under «a:hover».
Lage ditt eget tema for WordPress
På lik linje som at mange ønsker å designe sin egen bil, så vil mange ha et helt unikt design på nettstedet sitt. Da nytter det ikke å laste ned et ferdigtema som flere hundre andre nettsider også benytter seg av – man må lage et eget tema fra bunn av. Det er ikke så komplisert som mange tror, men vil blant annet kreve at du har disse ferdighetene:
Mestrer HTML
God forståelse for CSS
Forstår og kan bruke PHP
Kunne lage et design
Det er i bunn og grunn det man behøver for å lage et eget WordPress-tema. Kjennskap til mySQL er også en fordel, da man vil kunne gjøre direkte endringer i databasen. Dersom du føler at følgende er overkommelig, så er det bare å kaste seg ut i det.
Komme i gang: Laste ned et eksempeltema
Selv om du skal lage ditt eget tema, så er det greit å ha «grunnmuren» klar. Det er idioti å opprette en ny mappe for å deretter opprette en og en fil, spesielt når du ikke trenger det. Vi anbefaler at du laster ned temaet Roots, som er spesialberegnet for deg som skal utvikle ditt eget tema. Her får du alle filene du trenger, og de er blanke og tom for kode slik at du egentlig bare kan begynne med jobbingen din. Det koster ingenting å bruke temafilene til Roots.
Hvilke filer inneholder hva?
For å sette sammen designet til å fungere med WordPress, så må man vite hva man skal putte inn i de ulike filene. Vi skal nå gå igjennom de viktigste temafilene i WordPress, som må endres dersom du vil lage et eget tema for nettsiden din.
style.css: Dette er stilfilen for hele temaet ditt. Her skrives all CSS, som betyr at du her bestemmer utseendet på alt av bokser, tekster og innhold på nettstedet ditt. De fleste temaer bruker kun en slik fil.
header.php: Denne filen inneholder alt som skal plasseres på sidetoppen, og vil være repeterende for alle sidene på nettstedet ditt. Her plasserer man som regel logo, slagord og kanskje en meny – rett og slett alt som skal være gjennomgående på nettstedet.
index.php: Filen er unik for forsiden, og kan redigeres for å presentere akkurat det stoffet du vil ha. Mange vil her velge å ha for eksempel en bildekarussel som ikke skal vises på andre sider. Her kan man også lage egenproduserte løkker som viser innhold som kun skal være på forsiden.
sidebar.php: En sidemeny som kan vises på undersider på nettstedet. Denne vil automatisk vise aktiverte widgets, men du kan også «hardkode» det du måtte ønske inn i denne filen.
category.php/tags.php: Disse to filene viser en samling av alle artikler som er publisert i enten en kategori eller under ett stikkord. De kan endres for å få en annen presentasjon av innleggene o.l.
Hvert tema inneholder som regel flere filer, men dette er de viktigste. Du kan også lage dine egne feilmeldinger i 404.php-filen, og endre nettstedets bunntekst i filen footer.php. Her er det egentlig bare å prøve seg frem!
Fra statisk design til dynamisk tema
Før man i det hele tatt begynner med jobben å lage et WordPress-tema, så må man ha et design. Akkurat hvordan du lager dette bestemmer du naturligvis selv, men det er vanlig å begynne med en skisse i PhotoShop. Deretter anbefaler vi at du som nybegynner setter opp designet til å fungere med vanlig HTML og CSS, uten at du blander inn PHP og WordPress.
På denne måten kan du selv se at designet fungerer, før du integrerer det med CMS-et ditt. Når du er kommet til dette punktet, så kan du bruke informasjonen om hvor du skal plassere innholdet i de ulike filene ovenfor. Denne guiden er kun en innføring og tar ikke for seg steg for steg til hvordan du syr sammen designet til et tema, men du bør nå ha et greit utgangspunkt for å gjøre det.
Neste steg på veien
Vi har nå gått igjennom alt fra WordPress er til hvordan man publiserer med det og bruker plugins, og nå sist hvordan man endrer og lager et tema. En mer detaljert guide til hvordan man lager et tema finner du enkelt ved å søke på Google.
I neste, og siste del, av denne introduksjonsguiden skal vi se nærmere på hva man gjør når nettstedet er «ferdig». For WordPress er stadig i utvikling, og på samme måte som en bil, så holder den ikke seg selv vedlike selv om den er moderne.
1 – En introduksjon til WordPress
2 – Publisere med WordPress
3 – Bruke plugins i WordPress
4 – Endre og lage temaer i WordPress
5 – Oppdatere og vedlikeholde WordPress
Leave A Comment?