märka. Du kan till exempel dela upp din webbplatss body() i flera sektioner, såsom navigering, sidhuvud, huvudinnehåll, sidofält och sidfot, bland annat.
När du har din webbsida i sektioner kan du beställa (eller organisera) sektionerna hur du vill med CSS. Denna process är känd som styling och innebär att man lägger till andra stylingelement som färg, storlek, kanter, specialeffekter, etc. Sådan är kraften i CSS, som för övrigt är en förkortning för Cascading Style Sheets. När du sätter ihop dina HTML- och CSS-filer och lägger till ett par bilder får du en komplett webbplats.
Saker och ting är inte mycket annorlunda med WordPress-teman. Som vi såg i del 1 av Hur man skapar ett WordPress-tema från HTML är WordPress-teman uppdelade i olika filer. Om du inte kan upptäcka några likheter vid det här laget, låt mig förklara.
Statiska HTML-webbsidor är indelade i divisioner (vad vi kallade avsnitt ovan) med hjälp av
etiketter (eller tabeller om du verkligen är gammal). Å andra sidan är WordPress-teman uppdelade i olika php-filer, som sedan sammanfogas med malltaggar.
Därför, istället för att ha alla body-element (sidhuvud, huvudinnehåll, sidofält, sidfot, etc.) i en enda fil (som är fallet med statisk HTML), lever var och en av body-elementen body (i WordPress-teman) i separata filer.
Så rubriken kommer att finnas i header.php, sidofältet kommer att hitta början i sidebar.php, huvudinnehållet kommer att finnas i index.php eller single.php (om det är ett inlägg) eller page.php (om det är en sida ) . ). Sidfotssektionen kommer att finnas i footer.php och så vidare.
Följer du? Titta på följande illustration:
Från vår tidigare illustration kallas , och malltaggar. Dess uppgift är att hämta header.php, sidebar.php och footer.php i den ordningen från din temakatalog, och visa innehållet i din index.php, vilket gör webbsidan färdig.
Låt honom inte .php skrämma dig, innehållet i php-filer är bara HTML-kod som du är bekant med. Till exempel kan din header.php innehålla typisk HTML-listanavigering. På samma sätt kan du lägga typisk HTML-kod i footer.php, sidebar.php och index.php.
Du kan också placera loop.php i din index.php (eller var du vill) för att visa dina blogginlägg, men du bör sakta ner och gå tillbaka till WordPress-temans anatomi. Jag har nämnt en sak eller två om loopen i del 2 om hur man skapar ett WordPress-tema från HTML. och vi kommer att prata om det (slingan) och andra funktioner i framtiden.
Fram…
Ett grundläggande WordPress-tema består av minst fyra mallfiler, nämligen:
- index.php
- header.php
- sidebar.php
- sidfot.php
Låt oss se vad var och en av dessa innehåller magisk filer:
Index.php mallfil
Detta är huvudfilen utan vilken du inte har ett fungerande WordPress-tema. Det är den första (eller standard) filen som laddas när du besöker en WordPress-webbplats. Betrakta det som motsvarighet till index.html.
En typisk index.php i WordPress-teman kommer att se ut så här:
Du kan lägga till slingan mellan och för att visa blogginlägg på hemsidan (index.php) som visas nedan:
Header.php mallfil
Dessa mallfiler innehåller din rubrikkod, navigering och HTML-huvudkod. I princip lagrar header.php allt du vill visa högst upp på din webbplats. Du vet, saker som titeln på din webbplats och sådana saker.
Den länkar också till din CSS-stilmall i header.php. Här är ett grundläggande header.php-exempel:
"> "> " type="text/css" />This is header section. Put your logo and other details here.
Sidebar.php mallfil
Sidebar.php innehåller allt du behöver för att visas i dina sidofält. Sidofältet innehåller ytterligare menyer, widgets, kategorier, ikoner för sociala medier, anpassat innehåll, HTML-kod som annonser, etc.
Sidebar.php kan innehålla ren HTML-kodning eller php-funktionsanrop beroende på dina behov. Som sådan kan en grundläggande sidebar.php se ut så här:
Put your custom content or HTML code here.
Footer.php mallfil
Vad tror du går in i footer.php? Du kan lägga din upphovsrättsinformation här, ytterligare menyer, länkar, ikoner för sociala medier, vad du vill! Vill du se hur en grundläggande footer.php ser ut? Här:
Put your footer content here including php function calls (to fetch different template files e.g. search.php) if need be.
Lägg märke till och avslutande taggar i footer.php? Kan du gissa varför de ska inkluderas i footer.php? Likaså kan du gissa varför och
Ingår öppningstaggarna i header.php? Låt oss veta dina gissningar i kommentarsfältet i slutet av detta inlägg 😉
De fyra mallfilerna vi just täckte ovan utgör ett mycket grundläggande WordPress-tema. Det finns många andra mallfiler; Det finns en mallfil för varje element du ser i ett WordPress-tema, oavsett om det är kommentarer, sökresultat och 404-felsidor, bara för att nämna några.
För att helt förstå anatomin i ett WordPress-tema måste du bekanta dig med olika mallfiler. Du kan bläddra bland alla mallplattor som är användbara i WordPress.
Sedan har vi malltaggar, som WordPress använder för att hitta mallfiler från temakatalogen. Du kan lära dig mer om malltaggar och vilken roll de spelar i WordPress.
Sammanfattning
Ett WordPress-tema består av följande anatomiska element:
- Mallfiler som index.php, header.php, search.php, category.php, etc.
- Malltaggar som , etc.
- css
- Bilder och andra mediafiler
- JavaScript-filer
Och här är en illustration som sammanfattar anatomin i ett WordPress-tema:
Vill du fortsätta lära dig? Kolla in den detaljerade temaanatomiguiden i WordPress Codex.
Slutsats
Varje WordPress-tema du ser på webben använder samma anatomiska struktur (även vårt populära Total WordPress-tema), som du kan anpassa för att passa dina behov. När du väl förstår grunderna i WordPress-temautveckling finns det ingen gräns för vad du kan göra med WordPress-teman.
