Om du vill anpassa teman eller bygga nya från grunden är det viktigt att förstå hur WordPress mallhierarki fungerar.

Detta WordPress-system hjälper först och främst till att hålla allt organiserat. När du vet vad alla temamallfiler är, vad de gör och hur de prioriteras, kommer du att kunna ändra nästan alla aspekter av hur din WordPress-webbplats ser ut.

I den här artikeln förklarar vi vad WordPress mallhierarki är och hur den fungerar. Sen kommer vi att tillhandahålla en fullständig uppdelning av mallfilerna som är involverade i varje typ av WordPress-sida (inklusive en fusklapp som referens), för att hjälpa dig att använda dem till din fördel.

Låt oss komma igång!

En introduktion till WordPress mallhierarki

Vanligtvis använder icke-dynamiska webbplatser statiska HTML och CSS-filer för att återge sitt innehåll. WordPress är dock en dynamisk plattform som är baserad på  PHP-programmeringsspråket. Varje WordPress-webbplats laddar flera .php-filer, var och en styr hur en viss sektion eller komponent ser ut.

När du läser in en viss typ av sida letar CMS (Content Management System) efter mallfilerna som motsvarar den.

Om du exempelvis använder WordPress sökfunktion och läser in en sökresultatsida kommer CMS att leta efter två mallfiler:

  1. search.php , som styr hur sökresultatsidorna ser ut
  2. index.php , som är standardmallfilen som WordPress använder när den inte kan hitta det översta alternativet i varje hierarki

Vilka mallfiler som du har tillgång till beror på vilket tema du använder. Alla WordPress-teman är en samling mallar, stilmallar och andra element, exempelvis  bilder. Så i ovanstående exempel, om temat du använder innehåller en search.php-mall, kommer WordPress att hitta och ladda den.

I vissa fall kanske du använder ett tema som inte innehåller mallfiler för de typer av sidor som du vill läsa in. Det är där WordPress mallhierarki kommer in i bilden. Det är ett inbyggt system som berättar för WordPress vilka mallfiler som ska laddas och i vilken ordning.

Om WordPress inte kan hitta search.php-filen i en söksida kommer den att ta nästa fil i hierarkin, som är index.php. Den här filen är den sista reserven för varje enskild gren i mallhierarkin.

I teorin kan du ha ett fullt fungerande tema som endast innehåller en mallfil, och det är index.php.

I praktiken skulle dock ett tema med en enda mallfil knappt innehålla några stilanpassningar alls, och varje typ av sida skulle se ungefär likadan ut. Om du inte vill ha det så är förståelsen av WordPress mallhierarki ett av de viktigaste stegen du kan ta som temautvecklare.

Så här fungerar WordPress mallhierarki

Som du kanske vet låter WordPress dig använda flera typer av sidor beroende på vad du vill publicera. Det finns sju huvudkategorier som du kan använda:

  1. Förstasidan
  2. Enstaka inlägg
  3. Enstaka sidor
  4. Anpassade inläggstyper
  5. Sökresultatsidor
  6. Kategori- och taggsidor
  7. 404-felsidor

Var och en av dessa sidor har sin egen anpassade hierarki, vilket innebär att den använder en viss uppsättning mallfiler.

Om du tar en snabb titt på något av temats mappar hittar du vanligtvis en samling mallfiler. Här kommer ett exempel på mallfiler som listas i temakatalogen för ett blogginlägg:

Mallfiler listade i en WordPress-temakatalog
Mallfiler listade i en WordPress-temakatalog

Detta är en sidotyp för ett enskilt inlägg, vilket innebär att den använder single.php-filen som mall för huvudinnehållet på sidan (själva blogginlägget).

Dessutom har den en separat mallfil för varje sidelement, som du bör kunna identifiera snabbt:

Det är viktigt att förstå att även om varje sidtyp har sin egen hierarki, delar de även ofta gemensamma mallfiler, exempelvis header.php och footer.php.

Om du skapar ditt eget tema kan du skapa anpassade format för varje typ av sida, samtidigt som du skapar mallfiler som ska användas igen.

Du kan även skapa anpassade mallfiler för element som sidofält och sidfötter som bara gäller för vissa sidtyper. Den flexibiliteten finns tack vare WordPress modulära inställning till mallar.

När du byter teman beror skillnaderna i layouter på de nya mallfilerna som WordPress laddar. Barnteman har också en viktig del i WordPress temahierarki, som vi kommer att diskutera snart.

Var man hittar och ändrar WordPress mallfiler

En .php-fil kan både innehålla PHP-kod och HTML-markering (som du kan redigera). WordPress mallfiler kan med andra ord bli så komplexa som du vill att de ska vara. I många fall är mallfilerna som WordPress använder en samling funktioner för de element som de styr.

Som ett exempel, kommer här en snabb titt på mallfilen header.php som det officiella WordPress-temat Twenty Twenty-One använder:

twenty twentyone Twenty Twenty One-temats rubrikmallfilheader
Twenty Twenty One-temats rubrikmallfil

Som vi nämnde innehåller varje WordPress-tema sin egen uppsättning mallfiler. Du kan se vilka mallfiler ditt tema innehåller genom att komma åt mappen i webbplatsens rotkatalog via en FTP-klient (File Transfer Protocol).

Så här ser detta ut för det tidigare officiella WordPress-temat, Twenty Twenty:

Twenty Twenty-temats katalog- och mallfiler
Twenty Twenty-temats katalog- och mallfiler

Som standard kommer WordPress att ladda mallfiler som antingen finns i temats huvudkatalog (wp_content>themes) eller i  template-partsmappen.

Om du planerar att skapa flera mallfiler rekommenderar vi att du håller dina primära sidmallar inom huvudkatalogen. För mer specifika mallfiler, exempelvis en helbreddssida eller sidofältslayouter, kan du använda underkataloger.

Det bästa sättet att förstå WordPress fullständiga mallhierarki är genom en fusklapp. I det här fallet visar vi dig en visuell översikt över mallhierarkin, med tillstånd av WordPress Codex:

WordPress mallhierarki
WordPress mallhierarki

WordPress Codex innehåller mycket information om mallhierarkin, så vi rekommenderar att du bokmärker den resursen. Nu är det dags att gräva i varje sidtyp och de mallfiler som den använder.

En uppdelning av WordPress mallhierarki efter sidtyp

WordPress använder sju huvudtyper av sidor. I det här avsnittet kommer vi att prata om var och en av dem och ge dig en uppdelning av mallfilerna som de använder. Låt oss börja med förstasidan.

Mallfiler för första sidan

Din WordPress-hemsida är det första stoppet som de flesta användare gör när de besöker din webbplats. Förstasideslayouter kan variera dramatiskt från en webbplats till en annan.

Men för en grundläggande förstasida kommer WordPress att leta efter dessa tre mallfiler i denna ordning:

  1. front-page.php
  2. home.php
  3. index.php

Om ditt tema inte innehåller mallfilen front-page.php kommer WordPress att gå till det andra alternativet och så vidare. Index.php är som alltid det sista stoppet.

Enstaka inlägg

Enskilda WordPress-artiklar använder mall-hierarkin för ett enskilt inlägg. För huvudinnehållet i varje blogginlägg kommer WordPress att leta efter följande filer:

  1. single.php
  2. singularis.php
  3. index.php

Om du tittar på mallens fusklapp kommer du dock att märka att en mer komplex hierarki dyker upp i vissa fall.

Detta beror på att WordPress låter dig ange mallfiler för enskilda inlägg och enskilda kategorier och väljer single.php  om det inte kan hitta något av dessa alternativ.

Utöver de primära mallfilerna har du element som rubrik, sidfot, sidofält och kommentars-sektionen. Som vi nämnde tidigare kan vart och ett av dessa element ha sin egen mallfil.

Enstaka sidor

Efter inlägg är enskilda sidor det som bygger upp de flesta WordPress-webbplatserna. I de flesta fall använder de en annan mall än förstasidan, såvida inte båda typerna av sidor väljer index.php.

Så här ser mallhierarkin för en enskild sida ut:

  1. page.php
  2. singularis.php
  3. index.php

Även om mallhierarkin för enskilda inlägg och sidor är liknande finns det några viktiga skillnader.

När det gäller sidor, använder WordPress get_page_templates()-sökvägen för anpassade filer, som du kan använda för att ändra eller omdirigera standardsidmallen.

Du kan dessutom skapa mallar för specifika slugs och ID:s.  Om du antingen har en page–{slug}.php eller en page-{id}.php fil försöker WordPress läsa in varje fil i ordning innan det väljer page.php.

Anpassade inläggstyper

Du kan skapa anpassade inläggstyper för olika typer av innehåll som du kanske inte vill bunta ihop med sidor eller inlägg. Anpassade inläggstyper ger dig en bättre organisering av ditt innehåll och har även sin egen mallhierarki:

  1. archive-{post_type}.php
  2. archive.php
  3. index.php

Mallhierarkin för anpassade inläggstyper är inte lika komplex som för hela sidor eller inlägg. WordPress låter dig dock skapa mallfiler för varje anpassad inläggstyp, så att de inte behöver dela exakt samma layouter.

Sökresultatsidor

Vi har redan gett en introduktion till den mallhierarki som WordPress använder för sökresultatsidor, så låt oss kort sammanfatta hur den ser ut:

  1. search.php
  2. index.php

När vi frångår ”komplexa” sidtyper som inlägg eller din förstasida blir WordPress mallhierarki mycket enklare.

Med en söksida behöver du vanligtvis inte inkludera så många element utöver själva resultaten. Ju enklare struktur, desto kortare är vanligtvis hierarkin.

Kategori- och taggsidor

Även om många webbplatser inte länkar till dem direkt, genererar WordPress insamlings-sidor för dina taggar och kategorier. Det finns även specifika undersidor för varje artikel i  taxonomin.

Med tanke på hur komplex taxonomi kan bli för webbplatser med stora innehållsbibliotek innebär denna hierarki fler ”steg” än vanligt:

  1. category–{slug}.php
  2. category-{id}.php
  3. category.php
  4. archive.php
  5. index.php

Observera att samma hierarki används för taggar, förutom att ”tagg” ersätter ”kategori” i alla instanser.

I teorin kan du skapa enskilda mallfiler för varje kategori eller tagg på din WordPress-webbplats och antingen identifiera dem genom slugs eller ID: er. Men det är få webbplatser som kräver ett sådant krångel.

Om du inte planerar att låta besökare bläddra på din kategorisida kan du välja archive.php-mallen.

404-felsidor

Ibland försöker besökare komma åt en sida som inte finns. När detta händer kommer WordPress att returnera en 404-felsida.

WordPress erbjuder som standard inga alternativ för att anpassa utseendet på den här sidan. Du kan dock justera utseendet på den själv via mallfilen. Mallhierarkin är ganska kort:

  1. 404.php
  2. index.php

När din webbplats växer ökar även risken för att användare kan stöta på 404-fel. Att ha en anpassad felsida för dessa situationer kan hjälpa dig att informera besökarna om varför sidan inte laddas, leda dem i en annan riktning och minska frustrationen.

När du laddar en 404-mallfil letar WordPress efter och laddar din anpassade fil innan du använder standardfilen.

Här passar barnteman in i WordPress mallhierarki

Om du gillar att anpassa dina WordPress-teman är bästa praxis att använda ett barntema. Barnteman har också en plats i WordPress mallhierarki, men det är inte uppenbart om du tittar på fusklappen som vi tillhandahöll tidigare.

Om du använder ett barntema läggs ytterligare ett lager till i mallhierarkin för alla sidtyper som du använder.

Låt oss säga att du använder ett barntema som innehåller anpassade mallfiler för enskilda sidor. Här är ordningen i vilken WordPress kommer att försöka ladda filerna:

  1. page.php i barntemat
  2. page.php i föräldratemat
  3. singular.php i barntemat
  4. singular.php i föräldratemat
  5. index.php i barntemat
  6. index.php i föräldratemat

Om WordPress kan hitta en version av en mallfil i ditt barntema, är det den versionen som laddas, även om det finns en motsvarighet till den i föräldratemat. I vissa fall kan du hamna i en situation där du vill anpassa mallfilerna för ett tema som du använder, och att använda ett barntema är perfekt för dessa scenarier.

Precis som med andra typer av anpassningar förlorar du ändringar i ett temas mallfiler när du uppdaterar det. Om du lägger till ändringarna via ett barntema slipper du detta.

Användning av WordPress malltaggar för temautveckling

I WordPress-utveckling stöter du ofta på malltaggar, som är PHP-funktioner som du kan använda för att generera och hämta data dynamiskt. Malltaggar är ofta en del av mallfiler, men de är inte utbytbara.

WordPress bygger dussintals malltaggar i sin kod, som du kan använda i temautveckling. Några exempel är:

  • get_header()
  • get_footer()
  • get_sidebar()
  • get_search_form()
  • get_template_part()

Med de här taggarna kan du samla in mallfiler från temat du använder. Det innebär i praktiken att du kan lägga till specifika element i primära mallfiler, exempelvis front-page.php eller index.php.

Om du vill ha en fullständig lista över alla malltaggar som du kan använda i WordPress-utveckling, kan du kolla in WordPress Codex.

Där hittar du instruktioner om hur du använder varje malltagg, deras individuella parametrar och exempel på koden i aktion.

Sammanfattning

Även om WordPress mallhierarki kan se komplex ut vid första anblicken, består den egentligen bara av en serie enkla beslutsträd. När du besöker en WordPress-webbplats ser CMS vilken typ av sida du försöker komma åt och använder sedan hierarkin för att bestämma vilken mallfil som ska läsas in.

Utöver huvudmallarna för varje sidtyp kan du även ha mallfiler för enskilda element som rubriker, sidfötter och sidofält.

Detta modulära tillvägagångssätt ger dig full kontroll över hur varje sida på din webbplats ser ut och hjälper dig att spara tid under WordPress-utvecklingen.

Har du några frågor om hur WordPress mallhierarki fungerar? Dela dem i kommentars-sektionen nedan!

Matteo Duò Kinsta

Head of Content at Kinsta and Content Marketing Consultant for WordPress plugin developers. Connect with Matteo on Twitter.