En introduktion till anatomi av ett WordPress-tema

  1. 1. WordPress Tutorial: Hur man skapar ett WordPress-tema från HTML (del 1)
  2. 2. WordPress Tutorial: Hur man skapar ett WordPress-tema från HTML (del 2)
  3. 3. Läser för tillfället: En introduktion till anatomi av ett WordPress-tema

För ett tag sedan introducerade vi dig konceptet att skapa ett WordPress-tema från HTML. Vi delade handledning i två delar och idag handlar vi alla om att utplåna de två handledningarna, så känn dig fri att betrakta detta inlägg som den tredje tjänsten i postserien. Mitt mål är att ta isär WordPress-temat för att ge dig en tydlig bild av hur det (temat) fungerar.


Det här inlägget antar att du har en fungerande kunskap om HTML och CSS. Jag kommer att gå vidare och förklara att ha HTML- och CSS-färdigheter är en förutsättning för att utforma WordPress-teman. En sak till, detta inlägg kommer att förbli klart från stora ord och svåra begrepp – det kommer att vara lätt att förstå, så var redo att ha kul och lära sig.

Lite HTML-grundning

Varje HTML-webbsida är uppdelad i olika delar med hjälp av

märka. Till exempel kan du bryta kroppen () på din webbplats i flera avsnitt som navigering, sidhuvud, huvudinnehåll, sidfält och sidfot bland andra.

När du har fått din webbsida i sektioner kan du beställa (eller ordna) avsnitten som du vill med hjälp av CSS. Denna process kallas styling, och den innebär att lägga till andra stilelement som färg, storlek, gränser, specialeffekter etc. Sådan är kraften hos CSS, som – förresten – är förkortning för Cascading Style Sheets. När du sätter ihop dina HTMl- och CSS-filer och kastar in ett par bilder, hamnar du med en komplett webbplats.

Det är inte så annorlunda med WordPress-teman. Som vi såg i del 1 av Hur man skapar ett WordPress-tema från HTML, delas WordPress-teman upp i olika filer. Om du inte kan upptäcka någon likhet vid denna punkt, låt mig förklara.

Statiska HTML-webbsidor delas upp i avdelningar (vad vi tidigare kallade avsnitt) med

taggar (eller tabeller om du verkligen är gamla skolan). Å andra sidan delas WordPress-teman upp i olika php-filer, som sedan sätts samman igen med malltaggar.

I stället för att ha alla kroppselement (sidhuvud, huvudinnehåll, sidofält, sidfot etc.) som lever i en enda fil (som är fallet med statisk HTML) lever var och en av kroppselementen (i WordPress-teman) i en separat fil.

Så kommer rubriken att leva i header.php, sidfältet hittar hem i sidebar.php, huvudinnehållet kommer att leva i index.php eller single.php (om det är ett inlägg) eller page.php (om det är en sida ). Sidfoten kommer att leva i footer.php och så vidare.

Följer du? Kolla in bilden nedan:

html-wordpress = struktur

Från vår illustration ovan, , och kallas malltaggar. Deras arbete ä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 och därmed komplettera webbsidan.

Låt inte .php tillägg skrämmer 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-listnavigering. På liknande sätt kan du lägga till typisk HTML-kod i footer.php, sidebar.php och index.php.

Du kan också placera loop.php fungera i din index.php (eller var du än vill) för att visa dina blogginlägg, men jag borde sakta ner och komma tillbaka till anatomin i WordPress-teman. 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 (loopen) och andra funktioner i framtiden.

Gå vidare…

Ett grundläggande WordPress-tema består av minst fyra mallfiler, nämligen:

  1. index.php
  2. header.php
  3. sidebar.php
  4. footer.php

Låt oss se vad som går in i var och en av dessa 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 motsvarande 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) enligt nedan:




Mallfil för Header.php

Denna mallfiler innehåller din huvudkod, 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ådant.

Du länkar också till ditt CSS-formatmall i header.php. Här är ett grundläggande exempel på header.php:





<?php wp_title( '|', true, 'right' ); ?>







Detta är rubrikavsnitt. Lägg din logotyp och andra detaljer här.

Sidfält.php-mallfil

Sidebar.php innehåller allt du behöver för att visas på din sidofält. Sidofältet innehåller ytterligare menyer, widgetar, kategorier, sociala medieikoner, anpassat innehåll, HTML-kod som annonser etc..

Sidebar.php kan innehålla ren HTML-markering eller php-funktionssamtal beroende på dina behov. Som sådan kan en grundläggande sidofält.php se ut:

Footer.php mallfil

Vad tror du går in i footer.php? Du kan lägga din copyrightinformation här, ytterligare menyer, länkar, ikoner på sociala medier – allt du vill! Vill du se hur en grundläggande footer.php ser ut? Här:

Placera sidfotens innehåll här inklusive php-funktionssamtal (för att hämta olika mallfiler, t.ex. search.php) vid behov.

Lägg märke till och stänger taggarna i footer.php? Kan du gissa varför de måste ingå i footer.php? På samma sätt kan du gissa varför och öppningstaggar ingår i header.php? Låt oss veta dina gissningar i kommentarsektionen i slutet av detta inlägg ��

De fyra mallfilerna som 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 vare sig det är kommentarer, sökresultat och 404-felsidor bara för att nämna några.

För att fullt ut förstå anatomin i ett WordPress-tema måste du bekanta dig med olika mallfiler. Du kan bläddra i alla användbara mallar på WordPress.

Sedan har vi malltaggar, som WordPress använder för att hämta mallfiler från temakatalogen. Du kan lära dig mer om malltaggar och vilken roll de spelar på WordPress.

Sammanfattning

Ett WordPress-tema består av följande anatomiska element:

  • Mallfiler som index.php, header.php, search.php, category.php osv
  • Malltaggar som , etc
  • CSS
  • Bilder och andra mediefiler
  • JavaScript-filer

Och här är en illustration som sammanfattar anatomin i ett WordPress-tema:

Vill du fortsätta lära? Kassan det detaljerade temaanatomi guide 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 tillgodose dina behov. När du har lindat huvudet kring grunderna i WordPress-temautveckling finns det ingen gräns för vad du kan göra med / till WordPress-teman.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map