WordPress-temahandledning för nybörjare – Del 1: Introduktion

I den här lektionen kommer du att börja lära dig hur WordPress laddar innehåll beroende på vilken sida du är på och hierarkin av temamallfiler. Du kommer också att lära dig vad som behövs för ett giltigt tema. Och i slutet kommer vi äntligen att skapa vårt tema och aktivera det.

Temamallsfiler

Bakom huven räknar WordPress ut vilken mall som ska laddas baserat på webbadressen du befinner dig på. Om din WordPress är installerad på domänen "example.com/wordpress/" bör du se förstasidesmallen. Om du går till "example.com/wordpress/category/news/" får du som standard en lista över inlägg som tilldelats kategorin Nyheter använda en kategorimall.

WordPress följer en hierarki över vilken mall som ska laddas, och vilken den väljer beror på vilka mallar du har tillgängliga i ditt tema. Till exempel "example.com/wordpress/category/news" kommer WordPress först att leta efter en mall som är specifik för kategorin "nyheter". Om den inte hittades kommer WordPress att leta efter en mall som är specifik för kategori-ID. Återigen, om det inte hittades, letar WordPress efter den allmänna kategorimallen. Om det inte hittades kommer WordPress att leta efter en ännu mer generell mall för arkiv. Och så vidare.

WordPress Codex, som är WordPress dokumentationssida, har en användbar och uppdaterad bild som illustrerar hierarkin av temamallfiler; https://codex.wordpress.org/File:Template_Hierarchy.png#file

Oroa dig inte om bilden ser för förvirrande ut i början! När vi går igenom handledningen kommer du att hänvisa tillbaka till den här bilden för att hitta vilka mallar du vill implementera i ditt tema.

Sättet du läser bilden är genom att gå från vänster till höger. Baserat på vilken sida du befinner dig på är mallarna väldigt specifika, och ju mer du går mot höger desto mer generella blir mallarna. Den sista fallbacken är den längst till höger; index.php, som kommer att laddas om inga andra passningsmallar hittades.

Alla mallfiler som listas i bilden ovan måste ligga i rotmappen för ditt tema och ha exakta namn som anges. Du kan inte placera dina mallar i undermappar i organisatoriska syften för då kommer WordPress inte att kunna hitta dem!

Vi börjar enkelt! Idag kommer vi att skapa de enda få filer som krävs för att WordPress ska känna igen det som ett tema och sedan expandera därifrån.

Anatomi av ett WordPress-tema

Du behöver bara två filer för att skapa ett giltigt WordPress-tema.

I illustrationen av mallens hierarki, märkte du den allra längst till höger; kallas index.php? Detta är den sista reservmallen om WordPress inte hittar någon mall. Det är en av filerna som krävs. Den andra filen är en stilmallsfil (.css). Den behöver inte nödvändigtvis ha någon CSS i den, men den måste innehålla ett kommentarblock som ger WordPress-information om ditt tema. Dessa två saker är allt du behöver för ett giltigt WordPress-tema.

Låt oss skapa vårt tema genom att skapa dessa två filer!

Skapar ditt första tema

Alla teman måste finnas i var och en av sina separata mappar i undermappen /wp-content/themes/. Om du navigerar till den här mappen i din filnavigator kommer du förmodligen redan att se några temamappar här; twentynineteen, twentyseventeen, etc. Det är teman som ingår i WordPress som standard.

Skapa /wp-content/themes/en ny mapp i. Namnge det på lämpligt sätt (gemener, inga mellanslag, inte samma som alla andra mappar). Vanligtvis är mappnamnet en slug-version av ditt temas namn. För den här handledningen kommer jag att namnge min temamapp " wptutorial".

Gå in i din temamapp och skapa en ny, tom fil med namnet index.php. Jag redigerade filen och lade bara till lite slumpmässig text, så att vi lättare kan se när den används:

Vi är redan halvvägs! Låt oss skapa den andra nödvändiga filen. Skapa en ny, tom fil med namnet style.css.

Öppna style.cssfilen och starta omedelbart ett kommentarblock (/*och stäng det med */). Inuti detta kommentarblock måste vi följa några WordPress-regler för hur vi definierar vårt tema. Som ett minimum måste vi definiera namnet på vårt tema. Men vi kan också lägga till information om vem författaren är, hemsida, versionsnummer, licensinformation och mycket mer. Se WordPress-dokumentationen om vad du kan lägga till.

I denna handledning kommer vi att hålla det enkelt; vi lägger till temanamnet och du skriver ditt eget namn som författare. Du kan gå vidare och använda vilket/vilka namn du vill, det här är vad jag har skrivit in i min style.css:

/* 
Theme Name: A White Pixel Theme 
Author: Alex White 
*/

Spara och stäng filen (den här handledningen kommer inte att röra den här filen igen), om du inte vill skriva CSS för ditt tema allt eftersom.

Grattis! Du har nu skapat ett giltigt WordPress-tema!

Aktiverar ditt tema

Låt oss gå in i WordPress adminpanel och navigera till "Utseende > Teman" och se om vi kan hitta vårt tema där.

Klicka på knappen Aktivera och besök din webbplats. Du borde se vad du än skrev i index.php!

Denna index.phpmall kommer att användas oavsett vilken sida du befinner dig på. Försök att se ett enda inlägg så kommer du att se detsamma. Ett tema bör ha minst 5-10 mallar för att hantera olika innehåll. Oroa dig inte, vi kommer dit.

Fantastiskt, vi har ett tema! I nästa lektion kommer vi att börja faktiskt koda i den och få den att göra saker.