En guide till alternativen för utveckling av WordPress-teman

admin 0 Comments Articles

En guide till alternativen för utveckling av WordPress-teman

  • 14 min läsning
  • WordPress,Tekniker (WP)
  • Sparas för offline-läsning
  • Dela på Twitter, LinkedIn
På WordCamp Edinburgh nyligen deltog jag i en paneldiskussion om utveckling av WordPress-teman och de alternativ som finns tillgängliga för utvecklare när de bygger teman. Den övergripande slutsatsen från sessionen var att det inte finns något universellt svar och att den bästa metoden beror på webbplatsens behov och utvecklarens möjligheter.

På WordCamp Edinburgh nyligen deltog jag i en paneldiskussion om utveckling av WordPress-teman och de alternativ som finns tillgängliga för utvecklare när de bygger teman. Den övergripande slutsatsen från sessionen var att det inte finns någon universallösning och att den bästa metoden beror på webbplatsens behov och utvecklarens förmåga.

Men om du börjar bygga WordPress-teman eller vill utveckla ett system för att bygga dem mer effektivt eller robust, hur bestämmer du dig då för vilket tillvägagångssätt du ska välja? I den här artikeln beskriver vi kortfattat hur WordPress-teman fungerar och tittar sedan på några av de olika tillvägagångssätten för att utveckla dem, med tips om vilket tillvägagångssätt som kan passa bäst för din webbplats och dina omständigheter.

Ytterligare läsning på SmashingMag:

  • Migreringen av en webbplats till WordPress är enklare än du tror
  • Användning av WP_Query i WordPress
  • Skemaläggning av händelser med hjälp av WordPress Cron
  • Hur man kan förbättra distributionen av WordPress-webbplatser

Hur fungerar ett WordPress-tema?

I WordPress driver teman en webbplats och bestämmer vad den innehåller, hur den beter sig och hur den ser ut. Temat är skilt från innehållet, som finns i databasen. Det betyder att du kan använda samma tema på mer än en webbplats, oavsett webbplatsernas innehåll – vilket du kanske redan gör om du har laddat ner teman från WordPress’ temaregister.

Ett tema består av ett antal mallfiler, som alla lagras i mappen theme, som du hittar i wp-content/themes i din WordPress-installation. Varje WordPress-tema måste innehålla minst två filer: index.php och style.css. Indexfilen definierar vilket innehåll som visas av temat, och formatmallen (du gissade det) stylar det, samt innehåller metainformation om temat som WordPress använder för att få temat att fungera korrekt.

Det är faktiskt så att de flesta teman har ytterligare några filer:

  • header.php Innehåller <head>-avsnittet för varje sida, plus rubriken för webbplatsens design.
  • sidebar.php Innehåller sidofältet, inklusive eventuella widgetområden.
  • footer.php Innehåller sidfoten, som kan ha eller inte ha widgetområden.
  • functions.php Innehåller alla funktioner som är specifika för ditt tema. Du hittar information om funktionsfilen i WordPress Codex.
  • Filer som innehåller slingan, som anropar innehållet från databasen. Beroende på vilken del av webbplatsen du arbetar i kan detta vara en av flera filer:
    • page.php För statiska sidor
    • single.php För enskilda inlägg (blogginlägg, till exempel)
    • index.php, archive.php, category.php osv. För sidor som listar ett antal inlägg

Yoast har skrivit en bra visuell representation av hur temafiler fungerar, och WordPress Codex innehåller en detaljerad beskrivning av teman, inklusive detaljer om de olika filerna och när de kallas.

Jag skulle dock vilja hävda att formatmallarna är den viktigaste filen och den som du troligen kommer att börja med, eftersom ett ”underbarnstema” (mer om det inom kort) behöver en formatmall även om det inte innehåller något annat. Stilbladet innehåller viktig metainformation om själva temat, som kommenteras ut före alla stilar. Nedan finns de inledande kommentarerna för WordPress nuvarande standardtema, Twenty Eleven:

Denna information kommenteras ut så att den inte läses av webbläsare, men den läses av WordPress och ger information till alla som använder ditt tema. Vi återkommer till detta inom kort när vi tittar på hur man skapar ett undertema.

När du nu vet hur teman fungerar är nästa steg att ta reda på hur du ska gå tillväga för att skapa ditt eget. Innan du börjar kan det vara värt att överväga några punkter som hjälper dig att fatta det beslutet.

Vad ska du tänka på när du utvecklar ett WordPress-tema?

Innan du bestämmer dig för vilket tillvägagångssätt du ska använda för att utveckla ditt tema, ska du identifiera dina begränsningar. Dessa omfattar sannolikt följande:

  • Tid. Hur mycket tid har du för att utveckla ditt tema, eller för att lära dig hur man gör det?
  • Budget. Detta är relaterat till tid men har också att göra med om du har råd att betala för ett premiumtema eller ett ramverk för teman.
  • Kapacitet. Hur bekant är du med temautveckling, med CSS och PHP och med hur teman fungerar? Om du inte är bekant, hur mycket vill du lära dig?
  • Framtidssäkring. Kommer ditt tema att behöva uppdateras i framtiden? Kommer andra utvecklare att arbeta med det utöver dig? Om så är fallet måste ditt tillvägagångssätt vara så robust som möjligt.
  • Upprepning. Kan du tänka dig att utveckla ett antal liknande teman i framtiden? Om så är fallet måste ditt tillvägagångssätt göra det möjligt att återanvända kod.

Vi återkommer till dessa överväganden i slutet av artikeln och identifierar vilka utvecklingsalternativ som är bäst lämpade för olika situationer.

Temautveckling: Några alternativ finns tillgängliga för att utveckla ditt eller dina teman, och det lönar sig att undersöka dem innan du kavlar upp ärmarna och börjar koda. Att välja rätt tillvägagångssätt kommer att resultera i ett bättre tema, med mer robust kod, och det kommer att minimera antalet revideringar som du måste göra senare. Det kommer också att hjälpa dig att bygga temat mer effektivt.

De alternativ vi kommer att titta på här är:

  • Bygg ett tema från grunden,
  • Redigera (eller ”hacka”, kan vissa säga) ett befintligt tema,
  • Använd temaanpassaren för att justera ett befintligt tema,
  • Skapa ett undertema för att göra ändringar i ett befintligt tema,
  • Skapa ett eget överordnat tema (med hjälp av någon av metoderna ovan) och underteman,
  • Använd ett ramverk för teman.

1. Bygg ett tema från grunden

Detta tillvägagångssätt är det svåraste om du är oerfaren. Men om du är en erfaren WordPress-utvecklare ger den dig mest kontroll. Det kan vara den lämpligaste metoden om du importerar HTML från en befintlig statisk webbplats som uppgraderas till WordPress utan några andra ändringar.

När du överför en webbplats till WordPress är det dock en bra idé att genomföra en granskning av den som en del av processen, snarare än att bara kopiera koden över. Om du kopierar en statisk webbplats måste du hålla ett vakande öga på koden för att se till att den är ren, effektiv och giltig.

2. Redigera (eller hacka) ett befintligt tema

Det är så här de flesta börjar med utveckling av WordPress-teman: när de arbetar med ett tema som de har laddat ner ser de att en del av stilen inte stämmer, så de gräver ner sig i formatmallen och gör några ändringar. Att börja så här är frestande eftersom det känns som ett snabbt och enkelt sätt att uppnå den effekt du vill ha. Men det finns vissa faror:

  • Om du någon gång byter tema kommer den uppdateringen att åsidosätta alla ändringar som du har gjort.
  • Det är lätt att lägga till repetitiv kod genom att lägga till nya stilar längre ner i formatmallen som åsidosätter stilar högre upp, i stället för att ta bort det du inte behöver.
  • Sajten kan sluta med mycket mer kod än vad den behöver.
  • Om temat inte är välkodat eller kommenterat från början kan du hamna i en större röra och upptäcka att du måste göra många korrigeringar.

Hursomhelst kan det fungera att hacka ett tema om du går in i det med öppna ögon. Det kan vara ett alternativ om följande är sant:

  • Temat du använder är välskrivet, giltigt och kommenterat (t.ex, standardtemat för WP, Twenty Eleven);
  • De ändringar du gör är så drastiska att du inte skulle behöva uppdatera det ursprungliga temat;
  • Du förstår PHP och CSS som finns i temat och är bekväm med att redigera, lägga till och ta bort det utan att bryta ner temat.

Om du bestämmer dig för att gå den här vägen, är det viktigt att du sparar en säkerhetskopia av det ursprungliga temat och att du kommenterar din kod noggrant. Jag skulle också råda dig att kommentera ut kod som du inte vill ha och sedan testa för att se vad som händer innan du raderar något.

3. Använd temaanpassaren för att justera ett befintligt tema

Temaanpassaren släpptes med WordPress 3.4. Den ger dig möjlighet att anpassa ett tema utan att skriva någon kod, helt enkelt genom att använda ett WYSIWYG-gränssnitt. Beroende på hur väl anpassaren är skriven i själva temat kan du använda den för att ändra bilder, titlar, färger och till och med layouten. Räkna med att se fler teman med anpassaren integrerad i dem.

Användning av WordPress temaanpassare med Twenty Ten-temat.

Temaanpassaren lagrar dina ändringar i en separat fil, inte i temats formatmall, så det kommer att finnas repetitiv kod.

För mer information kan du ta en titt på Otto on WordPress videohandledning eller guide för att integrera temaanpassaren i dina egna teman.

4. Skapa ett undertema för att göra ändringar i ett befintligt tema

Detta tillvägagångssätt liknar redigering av ett befintligt tema, men är säkrare. Den består av att skapa ett helt nytt tema som definieras som ett underbarn till det befintliga temat. Om ditt undertema inte har en viss fil men föräldratemat har det, kommer det att använda den. Om det underordnade temat har en fil kommer den filen att åsidosätta motsvarande fil i det överordnade temat. Låt oss titta på ett exempel:

Filer för modertema Filer för barntema
  • style.css
  • page.php
  • single.php
  • archive.php
  • header.php
  • sidebar.php
  • footer.php
  • style.css
  • page.php
  • header.php

I ovanstående exempel, WordPress skulle använda följande filer för att leverera innehåll:

  • style.css från barntemat,
  • page.php från barntemat,
  • single.php från modertemat,
  • archive.php från modertemat,
  • header.php från barntemat,
  • sidebar.php från modertemat,
  • footer.php från modertemat.

Du kan se hur detta kan vara användbart om du vill använda det mesta av det överordnade temats markeringar, men ändra innehållet i rubriken (lägga till t.ex. din logotyp och adressuppgifter) och eventuella statiska sidor (kanske ändra sättet som metadata visas på).

Den fil som alla underordnade teman måste ha för att fungera är formatmallarna, eftersom de innehåller den information som WordPress behöver för att få det underordnade temat att fungera korrekt. För att göra detta lägger du till lite extra kod i stilarkets kommentarer:

Kan du se de extra raderna? Den första är:

Template: twentyeleven

Denna rad talar om för WordPress att temat är ett undertema och att Twenty Eleven är dess överordnade tema. Du skulle lägga till namnet på det överordnade temats katalog, inte dess fullständiga namn.

Och den andra:

@import url("../twentyeleven/style.css");

Denna rad talar om för webbläsaren att den ska läsa in det överordnade temats formatmall innan den återger formatmallarna i det aktuella formatmallen. På så sätt slipper du kopiera alla stilar i det överordnade temat som du vill använda.

Så, det är så här underordnade teman fungerar. Men när är detta det bästa tillvägagångssättet? Jag skulle föreslå att du använder det i följande fall:

  • Du har redan ett tema (som ska användas som överordnat tema) som innehåller det mesta du behöver för ditt tema;
  • Du vill kunna uppdatera ditt överordnade tema (till exempel när temauppdateringar släpps efter en WordPress-uppdatering);
  • Du vill inte bli bunden i knutar av att hacka ett befintligt tema;
  • Du vill ha möjlighet att återgå till det överordnade temat eller att utveckla ett annat liknande tema i framtiden (vilket skulle vara ett nytt undertema);
  • Du utvecklar ett antal liknande webbplatser med några mindre skillnader i stil eller innehåll (jag gjorde detta när jag byggde liknande webbplatser för en kund som ägde flera företag);
  • Skillnaden mellan ditt under- och överordnade tema är inte så stor att du måste börja om från början, eller så stor att koden för ditt underordnade tema kommer att åsidosätta allt som påverkas av uppdateringar av det överordnade temat.

5. Skapa ett eget modertema (med hjälp av något av ovanstående tillvägagångssätt) och barnteman

Situationen som jag nyss nämnde, att bygga en uppsättning webbplatser för en kund med flera företag, är ett tillfälle då du kan skapa ett modertema och sedan sätta upp barnteman för enskilda webbplatser. Du kanske också vill göra detta i följande fall:

  • Du planerar att utveckla många webbplatser med liknande innehåll och uppmärkning i framtiden (inte bara för en kund);
  • Du hanterar många webbplatser och måste dyka in i var och en av dem regelbundet, och du vill att koden ska vara mycket likartad;
  • Du känner dig bekväm med att skapa ett eget föräldratema och redigera koden för att skapa ett robust föräldratema som kommer att fungera bra med underteman.

Om du bestämmer dig för detta tillvägagångssätt kan du antingen bygga ditt överordnade tema från grunden eller hacka ett befintligt tema. För de flesta av de webbplatser jag bygger använder jag ett föräldratema som jag utvecklat genom att hacka Twenty Ten-temat, det tidigare standardtemat för WordPress. Jag gjorde så många ändringar att jag inte längre behövde aktivera uppdateringar av det ursprungliga temat. Jag var också bekväm med koden i temat och ville göra betydande ändringar i det, minska koden, omstrukturera den så att den passar mitt sätt att arbeta och ta bort kod som jag visste att jag inte skulle behöva.

Du kan också skapa ett undertema baserat på ett befintligt tema och sedan skapa underteman för det – i praktiken barnbarn till det ursprungliga temat. Fördelen med detta är att du inte skriver över koden i det ursprungliga temat, samtidigt som du har flexibiliteten att göra ändringar i barntemat som kommer att föras vidare till barnbarnstemana. En liten varning här, dock: Med tre teman är det lätt att bli förvirrad över vad som händer, och du kan få en massa onödig kod.

6. Använd ett tema ramverk

Det sista alternativet används av tusentals WordPress-användare och -utvecklare. Det finns ett antal temaramverk som du kan använda som ett slags överordnat tema, men med mycket mer funktionalitet och i vissa fall med möjlighet att göra ganska tjusiga layout- och stiländringar utan att skriva en rad kod. Vissa ramverk är gratis, medan andra är premium. De har redan granskats i detalj på Smashing Magazine, men de viktigaste listas nedan.

Gratis ramverk för WordPress:

  • Theme Hybrid innehåller en myriad av krokar och widgetområden som hjälper dig att anpassa dina teman. Det har också några barnteman tillgängliga. Ramverket och barnteman är alla gratis, men om du vill ha support måste du betala för det genom att registrera dig på Theme Hybrids webbplats. Att arbeta med det kan vara ganska komplicerat om du inte förstår PHP eller använder ett av barnteman.
  • Wonderflux bygger på ett flexibelt rutnätssystem. Det har alternativ för att justera layout och stilar utan att behöva skriva kod, och det innehåller många krokar och widgetområden. Det är gratis att använda och stöds via WordPress-forum.
  • Carrington är det mest etablerade av de kostnadsfria ramverken, och det har ett antal barnteman.
  • Thematic är utvecklat av Automattic, som utvecklar WordPress självt. Det innehåller ett antal krokar, filter och widgetområden.
Premiumramverk för WordPress:
  • Dess utvecklare beskriver Genesis som ”branschstandard”. Det kommer med ett stort antal underbarnsteman, alternativ för att anpassa utan att skriva kod och SEO-funktioner.
  • Thesis är det andra stora premiumramverket, och det ger dig också möjlighet att anpassa underbarnsteman utan att skriva kod.

Sammanfattning: Att välja tillvägagångssätt

Sannolikt är det så att du, efter att ha läst det här, har en uppfattning om vilket tillvägagångssätt som du ska använda. Men om du fortfarande kliar dig i huvudet får du här en sammanfattning av när varje metod är lämplig:

Ansats Tid Kostnad Förmåga Framtid-bevisbarhet Förnyelse
Bygg från grunden Hög Låg Hög Låg Låg
Hacka befintligt tema Låg Låg Låg Medium Low Low
Använd temaanpassare Low Low Low Low Low Low
Skapa ett undertema baserat på ett befintligt undertema Medium Low Medium High High
Skapa överordnat tema High Low High High High High
Tema ramverk (gratis) Medium Low Medium High High
Theme framework (premium) Medel Hög Låg till medelhög Hög Hög Hög

Totalt i allo, Varje metod har sin plats; Det beror bara på webbplatsen och på dig. Det viktiga är att välja ett tillvägagångssätt efter att ha vägt för- och nackdelar – och inte bara dyka in och prova, bara för att upptäcka att du har brutit ett tema eller att du har skapat en massa omarbete för dig själv.

Och som alltid, vad du än bestämmer dig för, glöm inte att spara säkerhetskopior!

(al)

Lämna ett svar

Din e-postadress kommer inte publiceras.