5 sätt att utforma en WordPress-sajt

WordPress blir det allt mer dominerande publiceringsverktyget, så för många är det ett naturligt val när man ska bygga sin webbplats. Det är tråkigt att använda standardutseendet, och som tur är finns det mängder av färdiga teman att installera. Man kan förstås också skapa sitt eget tema från grunden.

Här kommer en överblick över de fem olika sätten att designa dina WordPress-sajt – och deras respektive fördelar och nackdelar. Jag har sorterat dem efter graden av anpassningsmöjlighet, från att göra allt själv till att nästan inte göra något alls själv…

1. Starta från ett blankt papper

Om du vill ha maximal kontroll kan du förstås bygga temat från grunden. Arbetsprocessen kan då gå till ungefär så här:

  1. Designa sajten i exempelvis Photoshop.
  2. Skapa en HTML-sida och en CSS-fil, och exportera de grafiska elementen från Photoshop.
  3. Omvandla HTML-filen till ett WordPress-tema, genom att dela upp koden i olika filer och skapa olika sidmallar.

Exempelvis lär du lägga sidhuvudet i en header.php, sidfoten i footer.php och en eventuell sidebar i sidebar.php. Antaligen vill du även skapa ett par olika sidmallar, exempelvis om förstasidan ska ha ett annat utseende än övriga sajten. Mer information finns i WordPress Codex.

Fördelar:

Du har full kontroll över designen. Om du samarbetar med en grafisk designer, som tar fram HTML-mallen, så kan du ta över arbetet därifrån och bygga WordPress-temat utifrån den. Det finns även specialfall där projektets särskilda behov gör att det är motiverat att bygga temat från grunden.

Nackdelar:

Det är tidskrävande. Det ställer rätt höga krav på dina kunskaper, särskilt om sajten ska vara responsiv för olika skärmstorlekar.

2. Använd ett starttema

Ett starttema är ofta ett enkelt, fungerande tema. Det har färdiga sidmallar, funktioner och en samling CSS-regler som gör det lätt att skapa en egen design genom att anpassa temat. Tanken är att du själv kan göra ändringar och tillägg överallt i temat, utan att behöva tänka på att vissa filer kan komma att skrivas över när det kommer nya versioner.

Mina favoriter för närvarande är Underscores och vidareutvecklingen Quark theme. De är responsiva i grunden, så att man enkelt kan bygga sajter som är anpassade efter mobiler och surfplattor. Men det finns många fler, vilket en enkel googling visar.

Fördelar:

Man får mycket gratis i starttemat. Särskilt den inbyggda hanteringen av olika skärmstorlekar kan vara användbart för många. Du har fortfarande bra kontroll, eftersom du kan ändra och lägga till vad du vill i temat.

Nackdelar:

Du behöver fortfarande rätt bra kunskap om HTML och CSS för att kunna göra ändringar. Du kan ofta inte pixel-styra designen, eftersom de flesta startteman använder någon slags ”grid-design” (ett rutnät som styr hur breda olika element kan vara). Därför kan det bli svårt att exakt överföra en design från exempelvis Photoshop, om inte Photoshop-designen redan från början är anpassad efter det grid-system som används.

3. Gör ett undertema till ett ramverk

Här utgår du från ett ramverk, men skapar ett eget undertema (”child theme”). Det innebär att du använder ett färdigt huvudtema (”parent theme”) som grund, och lägger dina ändringar i ett undertema. Poängen är att du kan nöja dig med att bara hantera ett par filer (ofta räcker det att du ändrar CSS-filen) och i övrigt använda huvudtemat. Läs mer i WordPress Codex.

Fördelar:

Du kan skapa egna lösningar inom just de områden du vill. Du kan uppdatera huvudtemat när det kommer nya versioner, utan att dina ändringar skrivs över.

Nackdelar:

Jag tycker att det ofta är ganska komplicerat att sätta sig in i hur huvudteman fungerar, och förstå hur man själv kan byta ut vissa delar. Men det är en vanesak – har man använt samma huvudtema länge så kan man det som ett rinnande vatten. Om man gör stora förändringar i sitt huvudtema så kan det bli problem när man uppdaterar huvudtemat, eftersom vissa filer då inte uppdateras.

Några exempel på stora ramverk är Genesis, Hybrid Core och Thematic.

4. Designa genom ett ”Drag och släpp”-ramverk

Det har blivit allt vanligare med ramverk där man kan skapa sin design utan att koda ett eget tema. Man kan bygga olika sidmallar genom att kombinera färdigdesignade element. Man installerar temat som vanligt, och sedan gör man inga ändringar i tema-filerna, utan allt sköts via webbläsaren. Till och med egen CSS-kod kan ofta läggas till genom ett formulär.

Fördelar:

Enkelt att ändra designen utan att behöva koda. Man kan uppdatera ramverket utan att egna anpassningar skrivs över. Det går snabbt att skapa designen på det här sättet. Dessutom kan man ofta använda olika mallar, så att layouten är anpassad efter olika typer av innehåll.

Nackdelar:

Man kommer nästan alltid att ”slå i taket” för vad som är möjligt att åstadkomma med ett ”drag-och-släpp”-ramverk. Man blir begränsad i möjligheterna till både design och vilka typer av funktioner som kan skapas. Ramverken är fortfarande ganska omogna produkter, så om ett par år är det säkert en helt annan situation, när de utvecklats till att täcka in fler behov. Vissa ramverk kan man köpa fler moduler till, för att lösa de behov man har. Men utbudet är rätt begränsat. I bästa fall kan man programmera helt egna moduler, men då faller lite av poängen med den här typen av ramverk.

Några exempel: Headway, PageLines, Builder och Thesis.

5. Använd ett färdigt tema

Det finns flera tusen färdiga teman att ladda ner, inte minst i den officiella temakatalogen på WordPress.org.  Är du beredd att betala några hundralappar så ger en googling efter WordPress Premium Themes också många träffar.

Fördelar:

Enkelt att installera. Gratis eller billigt. Om du köper ett tema så är kvaliteten ofta hög.

Nackdelar:

Det kan vara svårt att veta vilka teman som håller hög kvalitet. Kolla hur de ser ut i mobilen. Undersök hur enkelt det är att göra ändringar, till exempel om grafiken går att ändra genom medföljande Photoshop-filer. Att det finns många teman gör det inte nödvändigtvis enkelt att hitta ett tema som passar dina behov. Det kan vara ganska omständigt att i efterhand ändra ett tema. Vissa teman bygger också på att inläggen eller sidorna har bilder, för att det ska se snyggt ut – fundera på om du har bilder så det räcker.

Avslutningsvis…

Alla startteman, ramverk och färdiga teman kan behöva översättas till svenska med ett program såsom Poedit. Vissa har bara några få ord som behöver översättas, andra har rätt många funktioner som innebär att det blir många ord och fraser som behöver översättas. Ofta syns många av orden bara på administrationssidan, så om man kan accepteras engelska beskrivningar där så räcker det med att översätta det som syns för besökarna.

När man börjar titta på de olika sätten att designa WordPress-sajter, så märks det att plattformen fortfarande spretar i sin utveckling. Det finns mängder av olika initiativ och ramverk för teman, och det är fortfarande en öppen fråga vilka ramverk och tekniker som kommer att segla upp som de facto-standard.

Det ena sättet är inte nödvändigtvis bättre än det andra, utan alla fem vägar jag presenterat fyller olika behov. Förhoppningsvis kan du nu lättare hitta vilken väg som passar dig. Lämna gärna en kommentar med tillägg eller synpunkter!

Om 

Webbutvecklare, entreprenör, kommunikatör, drömmare och diversearbetare. Har drivit egna företag i 15 år. Läs mer om mina tjänster på Smidig Webbyrå.