Om författaren

Nick Schäferhoff är en entreprenör, online marknadsförare och professionell bloggare från Tyskland. När man inte bygger webbplatser, skapar innehåll eller hjälper sina kunder … Mer om Nick↬

Jag tycker om WordPress som gateway-läkemedlet för webbutveckling. Många som kommer igång med plattformen letar inledningsvis bara efter ett bekvämt (och gratis) sätt att skapa en enkel webbplats, ofta med hjälp av en WordPress-sida byggmästar-plugin. Liksom ”Jag ska bara prova en gång.”

Men en stor del användare slutar inte där. Istället blir de anslutna. Kom med fler idéer. Experimentera. Testa nya plugins. Upptäck Firebug. Bom. Snart finns det ingen väg tillbaka. Låter det som din historia? Som WordPress-användare är det bara naturligt att man vill ha mer och mer kontroll över din webbplats. Att längta efter anpassad design, anpassad funktionalitet, anpassat allt.

Ytterligare läsning på SmashingMag:

• Hur man skapar och anpassar ett WordPress-barntema
• Bygg En anpassad arkivsida för WordPress
• Anpassa WordPress-arkiv

Lyckligtvis är WordPress byggd för just det. Den flexibla strukturen och den delade arkitekturen gör det möjligt för alla att ändra praktiskt taget vad som helst på sin webbplats.

Bland de viktigaste verktygen i strävan efter fullständig webbplatsstyrning finns sidmallar. De tillåter användare att dramatiskt ändra sin webbplats design och funktionalitet. Vill du ha en anpassad rubrik för din första sida? Gjort. Ytterligare ett sidofält endast för din bloggsida? Inga problem. En unik 404-felsida? Vara. Min. Gäst.

Om du vill veta hur WordPress-sidmallar kan hjälpa dig att uppnå det, läs vidare. Men först lite bakgrundsinformation.

Mallfiler i WordPress

Vad pratar vi om när vi talar om mallar i WordPress-sammanhanget? Den korta versionen är att mallar är filer som berättar för WordPress hur olika typer av innehåll ska visas.

Den lite längre versionen: varje gång någon skickar en begäran om att se en del av din webbplats kommer WordPress-plattformen att räkna ut vilket innehåll de vill se och hur den specifika delen av din webbplats ska återges.

För den senare kommer WordPress att försöka använda den mest lämpliga mallfilen som finns inom ditt tema. Vilken som bestäms utifrån en fastställd ordning, WordPress-mallhierarkin. Du kan se hur detta ser ut på skärmdumpen nedan eller i den här interaktiva versionen.

Mallhierarkin är en lista över mallfiler som WordPress känner till som rankas för att avgöra vilken filen har företräde framför en annan.

Du kan se det som ett beslutsträd. När WordPress försöker bestämma hur en viss sida ska visas, arbetar den sig ner i mallhierarkin tills den hittar den första mallfilen som passar den önskade sidan. Till exempel, om någon försökte komma åt adressen http://yoursite.com/category/news, skulle WordPress leta efter rätt mallfil i den här ordningen:

Längst ner i hierarkin finns index .php. Den kommer att användas för att visa innehåll som inte har en mer specifik mallfil kopplad till sitt namn. Om en mallfil rankas högre i hierarkin använder WordPress automatiskt den filen för att visa innehållet i fråga.

Sidmallar och deras användning

För sidor är standardmallen är vanligtvis det passande namnet page.php. Om det inte finns en mer specifik mallfil tillgänglig (till exempel archive.php för en arkivsida) använder WordPress page.php för att återge innehållet på alla sidor på din webbplats.

Men i många fall det kan vara nödvändigt att ändra design, utseende, känsla eller funktionalitet för enskilda delar av din webbplats. Det är här sidmallar spelar in.Med anpassade sidmallar kan du anpassa någon del av din WordPress-webbplats utan att påverka resten av den.

Du kanske redan har sett detta på jobbet. Till exempel har många WordPress-teman idag möjlighet att ändra din sida till full bredd, lägga till ett andra sidofält eller byta sidofältets plats. Om så är fallet för din, gjordes det antagligen genom mallfiler. Det finns flera sätt att åstadkomma detta och vi kommer att gå igenom dem senare.

Först, dock, ett försiktighetsord: eftersom arbetet med mallar innebär att du redigerar och ändrar filer i ditt aktiva tema är det alltid bra idé att gå med ett barns tema när du gör sådana typer av anpassningar. På så sätt riskerar du inte att dina ändringar skrivs över när ditt överordnade tema uppdateras.

Så här anpassar du en sida i WordPress

Det finns tre grundläggande sätt att använda anpassade sidmallar i WordPress: lägga till villkorliga uttalanden till en befintlig mall; skapa specifika sidmallar som rankas högre i hierarkin; och direkt tilldela mallar till specifika sidor. Vi kommer att titta på var och en av dessa i tur och ordning.

Använda villkorliga taggar i standardmallar

Ett enkelt sätt att göra sidspecifika ändringar är att lägga till WordPress: s många villkorliga taggar till en mall som redan används. Som namnet antyder används dessa taggar för att skapa funktioner som bara körs om ett visst villkor är uppfyllt. Inom ramen för sidmallar skulle detta vara något i raden ”Utför bara åtgärd X på sidan Y.”

Normalt skulle du lägga till villkorliga taggar i temat page.php-fil (såvida inte naturligtvis vill du anpassa en annan del av din webbplats). De gör att du kan göra ändringar begränsade till hemsidan, förstasidan, bloggsidan eller någon annan sida på din webbplats.

Här är några som ofta används villkorliga taggar:

Till exempel, när den läggs till på din page.php i stället för standard get_header(); -taggen, kommer följande kod att ladda en anpassad rubrikfil med namnet header -shop.php när sidan http://yoursite.com/products visas.

Ett bra användningsfall för detta skulle vara om du ha en butik på din webbplats och du måste visa en annan rubrikbild eller anpassad meny på butikssidan. Du kan sedan lägga till dessa anpassningar i header-shop.php och den skulle visas på rätt plats.

Villkorliga taggar är dock inte li mited till en sida. Du kan göra flera uttalanden i en rad så här:

I det andra exemplet ändrar två villkor beteendet hos olika sidor på din webbplats. Förutom att ladda den ovannämnda butiksspecifika rubrikfilen, skulle den nu också ladda en header-about.php på en sida med ID på 42. För alla andra sidor gäller standardhuvudfilen.

För att lära dig mer om användning av villkorliga taggar rekommenderas följande resurser starkt:

• WordPress Codex: Villkorliga taggar
• ThemeLab: Den ultimata guiden till WordPress villkorliga taggar

Skapa sidspecifika filer i WordPress-hierarkin

Villkorliga taggar är ett utmärkt sätt att införa mindre ändringar i dina sidmallar. Naturligtvis kan du också skapa större anpassningar genom att använda många villkorliga påståenden efter varandra. Jag tycker dock att det här är en mycket besvärlig lösning och istället väljer designerade mallfiler.

Ett sätt att göra detta är att utnyttja WordPress-mallhierarkin. Som vi har sett kommer hierarkin att korsa en lista över möjliga mallfiler och välja den första den kan hitta som passar. För sidor ser hierarkin ut så här:

• Anpassad sidmall
• sida- {slug} .php
• sida- {id} .php
• page.php
• index.php

För det första finns anpassade sidmallar som har tilldelats direkt till en viss sida. Om en av dessa finns kommer WordPress att använda det oavsett vilka andra mallfiler som finns. Vi kommer att prata mer om anpassade sidmallar lite.

Därefter kommer WordPress att leta efter en sidmall som innehåller snigeln till sidan i fråga. Om du till exempel tar med en fil med namnet page-about.php i dina temafiler, använder WordPress den här filen för att visa din ’Om’ -sida eller vilken sida som helst kan hittas under http://www.yoursite.com/about .

Alternativt kan du uppnå detsamma genom att rikta in sidans ID. Så om samma sida har ett ID på 5, använder WordPress mallfilen page-5.php före page.php om den finns; det vill säga bara om det inte finns en högre sidmall tillgänglig.

(BTW, du kan ta reda på ID för varje sida genom att hålla muspekaren över titeln under ”Alla sidor” i din WordPress-baksida ID. ID kommer att visas i länken som visas i din webbläsare.)

Tilldela anpassade sidmallar

Förutom att tillhandahålla mallar i ett formulär som WordPress använder automatiskt är det också möjligt att manuellt tilldela anpassade mallar till specifika sidor.Som du kan se från mallhierarkin kommer dessa att trumma alla andra mallfiler som finns i temamappen.

Precis som att skapa sidspecifika mallar för WordPress-hierarkin kräver detta att du anger en mallfil och länka den sedan till vilken sida du vill använda den till. Det senare kan göras på två olika sätt som du kanske redan känner till. Om du inte gör det här, gör du så här.

1. Tilldela anpassade sidmallar från WordPress-redigeraren

I WordPress-redigeraren hittar du ett alternativfält som heter ’Sidattribut’ med en rullgardinsmeny under ’Mall’.

Om du klickar på den får du en lista över tillgängliga sidmallar på din WordPress-webbplats. Välj den du vill, spara eller uppdatera din sida så är du klar.

2. Ställa in en anpassad mall via snabbredigering

Samma sak kan också uppnås utan att gå in i WordPress-redigeraren. Gå till ”Alla sidor” och håll muspekaren över ett objekt i listan där. En meny kommer att synas som innehåller ”Snabbredigering”.

Klicka på den för att redigera sidinställningarna direkt från listan. Du kommer att se samma rullgardinsmeny för att välja en annan sidmall. Välj en, uppdatera sidan så är du klar.

Inte alls så svårt, eller hur? Men tänk om du inte har en anpassad sidmall än? Hur skapar du den så att din webbplats ser ut precis som du vill ha den? Oroa dig inte, det är vad nästa del handlar om.

En steg-för-steg-guide för att skapa anpassade sidmallar

Att lägga ihop anpassade mallfiler för dina sidor är inte så svårt men här är några detaljer du måste vara uppmärksam på. Låt oss därför gå igenom processen bit för bit.

1. Hitta standardmallen

Ett bra sätt är att börja med att kopiera mallen som för närvarande används av den sida du vill ändra. Det är lättare att ändra befintlig kod än att skriva en hel sida från grunden. I de flesta fall kommer detta att vara page.php-filen.

(Om du inte vet hur du tar reda på vilken mallfil som används på sidan du vill redigera, plugin Vad filen kommer att visa sig vara användbara.)

Jag kommer att använda Twenty Twelve-temat för demonstration. Så här ser dess vanliga sidmall ut:

Som du kan se, inget för snyggt här: de vanliga samtalen för sidhuvud och sidfot och slingan i mitten. Sidan i fråga ser ut så här:

2. Kopiera och byt namn på mallfilen

När du har identifierat standardmallfilen är det dags att göra en kopia. Vi kommer att använda den duplicerade filen för att göra de önskade ändringarna på vår sida. För det måste vi också byta namn på det. Kan inte ha två filer med samma namn, det är bara förvirrande för alla.

Du är fri att ge filen vilket namn du vill så länge den inte börjar med något av de reserverade temafilnamnen . Så namnge det inte page-something.php eller något annat som får WordPress att tro att det är en dedikerad mallfil.

Det är vettigt att använda ett namn som enkelt identifierar vad den här mallfilen används för, till exempel my-custom-template.php. I mitt fall går jag med anpassad fullbredd.php.

3. Anpassa mallfilhuvudet

Därefter måste vi berätta för WordPress att den här nya filen är en anpassad sidmall. För det måste vi justera filhuvudet på följande sätt:

Namnet under ’Mallnamn’ är det som kommer att visas under ’Sida Attribut ’i WordPress-redigeraren. Se till att justera det till ditt mallnamn.

4. Anpassa koden

Nu är det dags att komma till sidmallens kött och potatis: koden. I mitt exempel vill jag bara ta bort sidofältet från min demosida.

Detta är relativt enkelt, eftersom allt jag behöver göra är att ta bort <?php get_sidebar(); ?> från min sidmall eftersom det är det som kallar sidofältet. Som en konsekvens slutar min anpassade mall att se ut så här:

5. Ladda upp sidmallen

Efter att jag har sparat min anpassade fil är det nu dags att ladda upp den till min webbplats. Anpassade sidmallar kan sparas på flera ställen för att kännas igen av WordPress:

• Din aktiva (underordnade) temamapp
• Mappen för ditt huvudsakliga överordnade tema
• En undermapp inom något av dessa

Jag vill personligen skapa en mapp med namnet page_templates i mitt barns tema och placera eventuella anpassade mallar där.Jag tycker det är lättast att behålla en översikt över mina filer och anpassningar.

6. Aktivera mallen

Som ett sista steg måste du aktivera sidmallen. Som tidigare nämnts görs detta under Sidattribut → Mallar i WordPress-redigeraren. Spara, visa sidan och voilà! Här är min anpassade sida utan sidofält:

Inte så svårt, eller hur? Oroa dig inte, du kommer snabbt att få tag på det. För att ge dig en bättre bild av vad du ska använda dessa sidmallar för kommer jag att visa ytterligare användningsfall (inklusive koden) för resten av artikeln.

Fem olika sätt att använda sidmallar

Som redan nämnts kan sidmallar användas för många olika ändamål. Du kan anpassa stort sett vad som helst på vilken sida som helst med deras hjälp. Endast din fantasi (och kodningsförmåga) står i din väg.

1. Sidmall med full bredd

Det första fallet vi ska titta på är en avancerad version av demomallen vi skapade ovan. Där uppe har vi redan tagit bort sidofältet genom att ta bort <?php get_sidebar(); ?> från koden. Som du har sett från skärmdumpen resulterar det dock inte i en layout i full bredd eftersom innehållsavsnittet förblir till vänster.

För att ta itu med detta måste vi hantera CSS, i synnerhet denna del:

Attributet width begränsar elementet som håller vårt innehåll till 65,1042% av tillgängligt utrymme . Vi vill öka detta.

Om vi bara ändrar det till 100% kommer detta dock att påverka alla andra sidor på vår webbplats, vilket är långt ifrån vad vi vill ha. Därför är den första beställningen här att ändra den primära div klass i vår anpassade mall till något annat, som class="site-content-fullwidth”. Resultatet:

Nu kan vi justera CSS för vår nya anpassade klass:

Som ett resultat sträcker innehållet nu allt över skärmen.

2. Dynamisk 404-felsida med widgetområden

404-felsidan är där varje person landar som försöker komma åt en sida på din webbplats som inte finns, vare sig det sker genom ett stavfel, en felaktig länk eller för att sidans permalänk har ändrats.

Trots det faktum att det inte gillar att få en 404 av internet på internet, är 404-felsidan inte så viktig om du kör en webbplats. Innehållet kan vara den avgörande faktorn för om någon omedelbart överger din webbplats eller håller fast vid och kollar ditt andra innehåll.

Att koda en anpassad felsida från grunden är besvärlig, speciellt om du inte är säker på dina förmågor . Ett bättre sätt är att bygga widgetområden i din mall så att du flexibelt kan ändra vad som visas där genom att dra och släppa.

För detta kommer vi att ta tag i och redigera filen 404.php som levereras med Twenty Twelve ( mallhierarki, minns du?). Innan vi ändrar något där kommer vi dock först att skapa en ny widget genom att infoga följande kod i våra funktioner.php-fil:

Detta ska visa den nyskapade widgeten i din WordPress-back-end. För att se till att det verkligen dyker upp på webbplatsen måste du lägga till följande kodrad till din 404-sida på rätt plats:

Efter när jag laddar upp mallen till min webbplats är det dags att fylla i mitt nya widgetområde:

Om jag nu tittar på felsidan 404 visas mina nyskapade widgets där:

3. Sidmall för visning av anpassade inläggstyper

Anpassade inläggstyper är ett utmärkt sätt att introducera innehåll som har sin egen uppsättning datapunkter, design och andra anpassningar. Ett favoritanvändningsfall för dessa inläggstyper är recensionsartiklar som böcker och filmer. I vårt fall vill vi skapa en sidmall som visar portföljobjekt.

Vi måste först skapa vår anpassade posttyp (CPT). Detta kan göras manuellt eller via plugin. Ett plugin-alternativ som jag kan rekommendera helhjärtat är Typer. Det låter dig enkelt skapa anpassade inläggstyper och anpassade fält.

Installera och aktivera typer, lägg till ett anpassat inlägg, se till att dess slug är ”portfölj”, anpassa alla fält du behöver (till exempel lägga till en utvald bild ), justera alla andra alternativ och spara.

Nu när vi har vår portföljposttyp vill vi att den ska visas på vår webbplats. Det första vi ska göra är att skapa sidan i fråga.Tänk på att om du väljer ”portfolio” som slug i din CPT, kan sidan inte ha samma slug. Jag gick med min clients-portfolio och lade också till exempeltexter.

Efter att ha lagt till några artiklar i avsnittet ”portfölj” efter inlägg, vill vi att de ska visas på vår sida precis under sidinnehåll.

För att uppnå detta använder vi återigen ett derivat av page.php-filen. Kopiera det, kalla det portfolio-template.php och ändra rubriken till detta:

I det här fallet måste vi dock göra några ändringar i den ursprungliga mallen. När du tittar på koden för page.php ser du att den anropar en annan mallfil i mitten, namnet content-page.php (där det står <?php get_template_part( ‘content’, ‘page’ ); ?>). I den filen hittar vi följande kod:

Som du kan se är det här som sidans titel och innehåll heter. Eftersom vi definitivt vill ha dem på vår portföljwebbplats måste vi kopiera de nödvändiga delarna av den här mallen till vår page.php-fil. Resultatet ser ut så här:

För att få portföljvarorna till vår sida lägger vi till följande kod precis under the_content() samtalet.

Detta kommer att göra att CPT visas på sidan:

Jag är säker på att vi alla är överens om att det ser mindre än fantastiskt ut, så en del styling är i ordning.

Mycket bättre, tycker du inte?

Och här är hela koden för portföljens sidmall:

4. Sidan med bidragsgivare med avatarbilder

Nästa sida i vår sidmall är en sida med bidragsgivare. Vi vill skapa en lista över författare på vår webbplats, inklusive deras bilder och antalet inlägg de har publicerat under deras namn. Slutresultatet kommer att se ut så här:

Vi börjar igen med vår hybridfil från tidigare och lägger till koden för listan över bidragsgivare till den. Men tänk om du inte vet hur du skapar en sådan sak? Inga bekymmer, du kan klara dig med intelligent stjälning.

Du förstår, tjugofjorton-standardtemat kommer som standard med en sida för bidragsgivare. Du hittar dess mall i mappen med sidmallar med namnet contributors.php.

När du tittar i filen hittar du dock bara följande samtal där inne: twentyfourteen_list_authors();. Lyckligtvis, som en ivrig WordPress-användare drar du nu slutsatsen att detta förmodligen hänvisar till en funktion i Twenty Fourteen’s function.php-fil och du skulle ha rätt.

Från vad vi hittar där är den del som intresserar oss detta:

Vi lägger till det igen under samtalet för the_content() med följande resultat:

Nu för lite styling:

Och det borde vara det. Tack tjugofyra!

5. Anpassad arkivsida

Twenty Twelve levereras med en egen mall för arkivsidor. Det kommer till exempel att gå till handling när du försöker visa alla tidigare inlägg från en viss kategori.

Men jag vill ha något lite mer som Problogger har gjort: en sida som låter människor upptäcka ytterligare innehåll på min webbplats på flera olika sätt. Återigen görs det med en sidmall.

Att hålla oss till vår blandade mall från tidigare kommer vi att lägga till följande under the_content() samtalet:

Plus, lite styling för sökfältet:

Och resultatet ska se lite ut så här:

För kompletteringens skull är här hela filen:

Glöm inte att tilldela den till en sida!

WordPress-sidmallar i ett nötskal

På vägen för att bemästra WordPress är det viktigt att lära sig att använda sidmallar. De kan göra anpassningen av din webbplats väldigt, väldigt enkel och låter dig tilldela unik funktionalitet och design till så många eller få sidor som du vill. Från att lägga till widgetområden till att visa anpassade inläggstyper till att visa en lista över webbplatsens bidragsgivare – möjligheterna är praktiskt taget oändliga.

Oavsett om du använder villkorliga taggar, utnyttjar WordPress-mallhierarkin eller skapar sidspecifika mallfiler är helt upp till dig och vad du försöker uppnå. Börja litet och arbeta dig upp till mer komplicerade saker. Det kommer inte dröja länge innan alla delar av din WordPress-webbplats besvarar alla dina samtal.