Skapa WordPress-tema: Steg för steg för anpassad utveckling

Sedan sin ursprungliga lansering 2003 har WordPress utvecklats från ett enkelt bloggverktyg till en kraftfull och populär webbplatsbyggare och ett omfattande CMS (content management system) som används av cirka 38% av webbplatserna på webben! Med tanke på dess popularitet måste du skapa WordPress-tema som är unikt för din webbplats om din webbplats behöver sticka ut från mängden.

I verkligheten är det inte konstigt att WordPress lyckades göra det så långt och bli så populärt.

Mängden flexibilitet det har och de funktioner det är värd för, gör det möjligt att använda det på olika webbplatstyper. Dessutom är WordPress ganska lätt att använda med liten eller ingen tidigare erfarenhet av kodning eller webbutveckling alls.

Detta är orsakerna bakom WordPress framgångshistoria och är just anledningarna till nästan 40 procent av alla webbplatser på Internet drivs av denna programvara. 

WordPress har en rad praktiska funktioner som gör webbutveckling och programmering less komplicerat och mer tillgängligt för alla.

Introduktion till WordPress Theme Development 

En annan populär funktion som gör WordPress så populär är dess teman. Temat är helt enkelt en samling stilark och mallar som definierar hur en WP-driven webbplats kommer att se ut och visas.

Programvaran ger användaren ett brett utbud av olika redigeringsalternativ när det gäller teman från WP-adminområdet.

Hundratals WordPress-teman är helt gratis eller med många andra till ett rimligt pris på några tiotals dollar.

Faktum är att WordPress.org är värd för en enorm databas med teman i sin temakatalog.

Andra webbplatser som Themeforest erbjuder också massor av premiumteman från olika utvecklare.

skapa wordpress tema anpassad

Var och en av dessa teman har olika layout, designmönster och funktioner.

Det är upp till användaren att hitta en som passar bäst på deras webbplats. I de flesta fall skapas teman med särskilda branscher eller yrken i åtanke, vilket innebär att till exempel restaurangägare enkelt kan hitta teman med bokningsfunktioner.

Även om det finns många fantastiska teman som kan passa dina behov, är det säkert att säga att om du vill göra något enastående måste du ganska mycket göra det själv. Om du inte kan programmera, ett bra alternativ alternativet skulle vara att gå till en frilans mjukvaruutvecklare (priserna kan variera beroende på olika faktorer).

I den här artikeln kommer vi dock att gå igenom ALLA de steg som krävs för att skapa ditt eget WordPress-tema för din WP-drivna webbplats. Vi kommer att titta på alla viktiga aspekter för att se till att du får det bästa som WordPress har att erbjuda. 

Att komma igång med att skapa ditt eget tema som nybörjare kan vid första anblicken verka som en enorm uppgift.

Att skapa ett anpassat tema från grunden är dock inte så komplicerat i WP. Du behöver inte vara en webbutvecklare, om du har grunderna i kodning med PHP kan du enkelt lära dig att skapa ett WordPress-tema.

Dessutom kan det vara ganska givande att skapa ditt eget tema, särskilt när du ser slutresultatet live på din webbplats.

Skapa ditt första anpassade WordPress-tema

För att komma igång med att skapa ett WordPress-tema behöver du några grundläggande saker:

  • En WordPress-webbplats
  • En bra värdplan
  • Lite tidigare erfarenhet av saker som lokala scenmiljöer
  • Grundläggande förståelse för CSS- och PHP-kodningsspråk
  • Ett starttema

 

Förstå WordPress-hierarkin 

I WordPress är mallfiler (byggstenarna för ditt tema) modulära och återanvändbara.

Mallfiler ansvarar för att generera sidorna på din WP-webbplats. Vissa av dessa filer används på nästan alla dina sidor medan andra endast används under specifika omständigheter.

Ta en titt på diagrammet nedan - det förklarar hur WordPress-mallhierarkin är organiserad.

wordpress mallhierarki 

Mallfiler bestämmer det övergripande utseendet på innehållet på webbplatsen. Om du vill skapa en rubrik använder du en header.php fil, eller om du vill lägga till en kommentarsektion använder du comments.php fil. 

För att förstå mallhierarkin bör du veta att WordPress använder något som kallas en "frågesträng" för att bestämma vilken mall eller malluppsättning som ska användas för att skapa och visa en viss sida.

Frågesträngen är information som lagras i länken till varje del av webbplatsen du försöker ändra. I enklare termer analyserar WordPress informationen och gör sökningar genom mallhierarkin för att hitta en mallfil som matchar den angivna informationen i frågesträngen.

Detta är i grunden ett schema där WP letar efter matchande mallfiler varje gång sidor laddas.

Till exempel om du skriver in följande webbadress http://example.com/post/this-post, WordPress hittar de nödvändiga mallfilerna i följande ordning: 

  1. Filer som matchar snigeln, i det här fallet, den här posten.
  2. Filer som matchar inläggets ID.
  3. En generisk enda postfil, som single.php.
  4. En arkivfil, i det här fallet, archive.php.
  5. Du har nu möjlighet  index.php fil.

 

Den sista filen (index.php) krävs i alla teman, eftersom det är standard (eller reserv) om ingen annan fil kan hittas i matchningsprocessen. streck (ett WP-starttema) har de vanligaste filerna. Dessa filer som ingår i detta tema fungerar direkt från lådan.

Du kan redigera dem om du vill experimentera eller behöver skapa anpassad funktionalitet på din webbplats.

Vad är ett WordPress-starttema? 

Ett starttema är en grundläggande grund för ett anpassat WordPress-tema.

Du kan använda den som bas för att få ditt eget unika tema igång. Med ett starttema kan du bygga ditt eget WordPress-tema utan att behöva designa eller koda ett helt tema från grunden.

WordPress-startteman innehåller alla filer som definierats enligt ovanstående hierarki.

Med hjälp av ett starttema kan du få en bättre förståelse för hur WordPress fungerar eftersom det visar dig grunderna, strukturen i ett tema och hur de olika delarna fungerar tillsammans.

Ett specialbyggt WordPress-tema kan tillämpas på en rad olika webbplatstyper, från presentationer och kataloger till onlinebutiker byggd med WooCommerce, sociala medier eller vad du än behöver din webbplats för.  

Att välja startteman (som UnderStrap, Underscores och Bones) hjälper till att skapa WordPress-tema som öppnar dörren för att använda en mängd olika alternativ.

Att använda Underscores kan vara det bästa valet för nybörjare eftersom det erbjuder de viktigaste funktionerna. Det kommer också från en långvarig och pålitlig utvecklare. Det betyder att det är mer troligt att det är kompatibelt, säkert och pålitligt och kommer att ha bättre stöd på lång sikt.

Varför ska du använda ett starttema

understryker det anpassade wordpress-temat

Som nämnts ovan är ett starttema en grund, en ritning som hjälper dig att komma med en unik webbplats. Det fungerar redan fullt men saknar fortfarande de definierande viktiga funktionerna som gör en användarvänlig webbplats. 

I grund och botten behöver den fortfarande utformas och konfigureras korrekt. 

Med detta sagt är startteman idealiska för dem som har liten eller ingen erfarenhet av WordPress eller webbutveckling i allmänhet. Det är ett utmärkt sätt att lära känna ämnet temabyggning och lära sig grunderna på WP-drivna webbplatser. 

Ett WordPress Starter-tema sparar tid och kräver liten eller ingen bakgrundskunskap i kodning och resten av WordPress-komplexiteten. 

Du kan utnyttja år av hårt arbete från utvecklarna av starttemat och använda dessa riktlinjer för att få en bättre förståelse för hur WordPress och temadesign fungerar.   

  • streck - Ett pålitligt och känt starttema som ger nybörjare ett försprång temautveckling. Understreck är ganska grundläggande och perfekt för att komma igång direkt om du har alla nödvändiga verktyg. Temat är bra för att förstå begreppen temautveckling. Underscores handlar om att starta ett nytt projekt som borde ses mer som en ständigt utvecklande verktygslåda och less som en ram.

  • rötter - Detta starttema ger dig ett tillvägagångssätt som är mer inriktat på utvecklare med sin markering baserad på HTML5 Boilerplate. Det stöder också mer avancerade verktyg som Bootstrap och grunt. Roots starttema innehåller också ett temapaket som hjälper dig att hålla din process strömlinjeformad och eliminerar att anropa samma malldelar upprepade gånger.

Roots använder också CSS förprocessorer och stöd LESS, ett bakåtkompatibelt språktillägg för CSS, som kan påskynda processen för att utveckla ditt tema avsevärt.

Med detta sagt ger Roots en mer pragmatisk inställning och kräver lite mer kunskap från utvecklaren.  

6 grundläggande steg för att utveckla ditt WordPress-tema

Efter att ha täckt grunderna är du äntligen redo att komma igång med att skapa ett WordPress-tema.

Eftersom den här artikeln är mer inriktad på nybörjare kommer vi att använda ett starttema, men du är också fri att skapa allt från grunden utan några startteman.

Om det är den vägen du vill gå, glöm inte att du behöver mycket mer tid och kommer att behöva fördjupa dig lite djupare i kodning och webbutveckling i allmänhet.

1. Ställa in utvecklingsmiljön

Ditt första steg i processen bör vara att skapa en utvecklingsmiljö.

Detta är i grunden en server som du behöver installera på din dator för att hantera och utveckla lokala WP-webbplatser. En utvecklingsmiljö gör att du kan utveckla din webbplats säkert, förutom att du ger dig flera alternativ för att skapa en lokal miljö.

Använda DesktopServer är en av de perfekta vägarna du kan ta. Det är ett enkelt sätt att få en lokal och snabb version av WP som är kompatibel med både Windows och Mac. Välj gratisversionen, registrera och ladda ner den och installera sedan programvaran.

desktopserver

 

När du har installerat öppnar du programmet och konfigurerar din lokala miljö.

Det är en ganska enkel process och du är redo på några minuter. Efter installationen har du en webbplats och utvecklingsmiljö som både kommer att fungera och se ut som alla levande WP-webbplatser.

2. Ladda ner och installera ett starttema

De mest grundläggande starttemanna (som Underscores) är enkla att börja med med för första gången.

I motsats till de flesta grundläggande teman tillåter Underscores att anpassa alternativ genom sina Avancerade alternativ (som författare och beskrivning) efter att ha dött ditt tema. 

understryker avancerade alternativ

Du kan också lägga till Syntactically Awesome StyleSheets eller SASS vilket är ett förbehandlat CSS-språk som gör att du kan introducera funktioner som kapsling, matematiska operationer, användning av variabler etc.

När du har gjort dina val är allt du behöver göra att klicka på Generera för att ladda ner .zip-filen med ditt starttema.

Installera nu filen på din lokala webbplats. Om du har gjort allt korrekt kan du nu se en grundläggande version av ditt anpassade WordPress-tema.

Förstå WordPress Core Principles 

Nu när grunderna är inställda kan du komma till jobbet. Innan du dyker in i anpassningsprocessen måste du dock bekanta dig med kärnprinciperna och komponenterna för att skapa ett WordPress-tema med hjälp av kärnprinciperna i WP. 

Först och främst måste du lära dig mer mallfiler, de viktigaste byggstenarna för något tema i WP.

Mallfiler bestämmer i princip hur din layout och ditt innehåll ska visas på din webbplats. Om du vill skapa en rubrik vill du använda header.php fil, medan comments.php skulle användas för att visa eventuella kommentarer.

Som diskuterats ovan använder WP sin mallhierarki för att bestämma vilken mallfil den väljer att köra innehållet som en användare begär / behöver. Du kan arbeta med de här filerna som de är, men med tanke på att du är här för att skapa WordPress-tema kommer din huvuddelen av arbetet att anpassa dessa filer efter dina behov.

 

När vi pratar om WP-kärnprinciper bör du också förstå konceptet bakom The Loop.

Det är koden som WP främst använder för att visa ditt innehåll och det finns i allt innehåll som visar mallfiler, som i index.php or sidofält.php. Det är ett ganska komplext ämne men som tur är kommer det med starttemat (om du använder Underscores) vilket innebär att din process borde vara enklare. 

Du måste förstå konceptet och arbeta med det. Kolla in några av exemplen i länken ovan för att bättre förstå hur slingan används och hur du kan anpassa koden efter dina behov.

3. Skapa temadetaljer

teman är inte rent kosmetiska komponenter.

Det finns massor av olika funktioner du kan lägga till på din webbplats som kan förbättra funktionaliteten. Vi ska diskutera hur man implementerar några grundläggande funktioner för att krydda din webbplats.

Lägga krokar kan göra det möjligt för dig att köra olika PHP-åtgärder, visa annan information eller infoga stylingdata efter behov.

Krokar är kodavsnitt som infogas i mallfiler. De flesta av dem implementeras direkt som en del av WordPress-kärnan, men vissa krokar är ganska användbara när du också anpassar teman.

Här är en lista över de vanligaste krokarna och deras roller:

  • wp_head () - läggs till i element i header.php. Det möjliggör skript, stilar och annan information som körs när webbplatsen börjar laddas.
  • wp_footer () - läggs vanligtvis till footer.php före tagg, används oftast för att infoga kod för Google Analytics eller annan kod som måste visas på varje sida men som är för tung för att laddas i rubriken.  
  • wp_meta () - Vanligtvis finns på sidebar.php, och det används oftast för att inkludera ytterligare skript (till exempel ett taggmoln).
  • comment_form () - Lades till comments.php direkt innan filen stängdes tagg för att visa kommentarer. 

När du använder Underscores kommer dessa krokar redan att ingå i temat, men det är alltid en bra idé att lära dig mer om dem och se alla tillgängliga krokar. Krokar låter dig utöka funktionerna för ditt anpassade tema.  

4. Lägga till stilar med CSS

Cascading Style Sheets eller CSS definierar utseendet på innehållet på webbplatsen du skapar.

Med hjälp av style.css fil, som redan ingår i ditt tema, kan du redigera alla stilar som finns här och spara dem för att se hur det ändrar din design. Som standard innehåller den bara den grundläggande stylingen.

CSS används för att möjliggöra presentation och separering av innehållet på din webbplats, allt från layout till teckensnitt och innehåll. CSS kan hjälpa till att göra innehållet på din webbplats mer tillgängligt och mer flexibelt.

Att gå in på djupet om hur man använder styling med WordPress-teman kan bli ganska hårigt och ligger utanför denna artikel. Om du inte är så säker på det här kanske du vill läsa mer om CSS innan du fortsätter.

5. Inklusive JavaScript

Att lägga till JavaScript-filer till ditt tema om det behövs kan öka interaktiva funktioner och funktioner och få en bättre fungerande webbplats. Det är särskilt användbart när du vill integrera plugins från tredje part på dina webbplatser, som specifika video- eller ljudspelare, saker som reglagen, popup-stöd och andra tredjepartsbibliotek för att skapa avancerad funktionalitet.

För att använda Javascript med din anpassade webbplats kan du ringa ett samtal med hjälp av syntaxen nedan för att lägga till skriptfilen till temat.

Alternativt kan du använda skriptet direkt i din header.php mallfilen mellan metataggarna och stilarklänken, som du skulle göra när det gäller en HTML-sida. När du använder den i rubrikfilen ska den se ut så här: 

Om du vill använda JS direkt lägga till samtalet för filerna direkt enligt nedan. Om du vill ställa in en "skicka detta till en vän" -funktion, kan du lägga den under postens titel. Det skulle se ut som detta: 

" rel="bookmark">

<!--

e-postsida ();

// ->

</div>

Du kan också ange skript med syntax som visas senare i den här artikeln.

6. Testa ditt tema och exportera det

När du är klar med allt ovan är det äntligen dags att testa ditt skapade anpassade WordPress-tema för att se till att det går smidigt.

För detta ändamål kan du använda Temaenhetstest Data, en uppsättning dummydata som du kan ladda upp till din webbplats. Datan består av stilvariationer och olika innehåll så att du kan se hur effektivt ditt tema kan hantera både förutsägbar och oförutsägbar data.

Testa allt grundligt (enligt ovanstående Codex-länk) så att du kan vara säker på att temat du skapat uppfyller de krav som krävs och uppfyller dina förväntningar innan du exporterar det.

När du är säker på testningen kan du exportera temat.

Du kan exportera genom att hitta platsen där du installerade webbplatsutvecklingsmiljön lokalt.

Öppna mappen och öppna  / Wp-innehåll / teman /, där du hittar temat du arbetade med.

Skapa nu ett med ett komprimeringsverktyg Zip fil baserat på mappen genom att komprimera den. När du är klar är allt du behöver göra att ladda upp och installera det på vilken WordPress-webbplats som helst. Du kan också skicka det till WordPress Temakatalog

Detaljerad WordPress Theme Development Guide

Nu när du har gjort grunderna kommer nästa steg att lista några ytterligare detaljer om hur du skapar WordPress-tema.

Skapa anpassade temafiler / kataloger

Som du redan vet skapas WP-teman från olika mallfiler som åtminstone kommer att innehålla en sidebar.php, header.php.och footer.php. Du kan ringa dessa med hjälp av malltaggarna (get_header (), när du ringer till rubriken, get_sidebar (), när du ringer sidofältet, etc.).

Du kan också skapa anpassade versioner av dessa filer med små ändringar som dessa: sidofält-{your_custom_template} .php, rubrik-{your_custom_template} .php och sidfot-{your_custom_template} .php. 

Du kan också ringa malltaggarna med samma analogi med mallnamnet som en parameter så här:

get_header ( 'din_anpassade_mall' ); 

Sidor skapas av olika filer, vilket innebär att du också kan skapa andra anpassade mallfiler och ringa dem på valfri plats på sidan genom att helt enkelt använda get_template_part (). Ge bara filen ett lämpligt namn och använd samma anpassade metod som med sidhuvud, sidfot och sidofält. 

Låt oss säga att du vill skapa en mall som hanterar ditt innehåll - du behöver bara skapa en fil som heter content.php och förläng sedan filnamnet för att lägga till en specifik layout. I det här fallet, låt det vara content-product.php.

I slutändan, när du laddar mallfilen i temat, skulle det se ut så här:

get_template_part ('content', 'product') ;.

Använda kataloger

För att länka till temakataloger använder du bara funktionen get_theme_file_uri ();

Den här funktionen returnerar hela URI: n till ditt temas huvudmapp och du kan använda den för att referera till filer och undermappar med följande exempel:

echo get_theme_file_uri ('images / logo.png');

Enqueue-skript och StyleSheets

När du kommer med ditt eget tema kan du också skapa anpassade formatmallar och dina egna JavaScript-filer.

Var noga med att ladda dem med standard WordPress-metoden när du gör det, annars finns det en chans att ditt tema och plugins inte fungerar korrekt under alla omständigheter.

Allt du behöver göra är att skapa en funktion som omsluter alla stilar och skript. För detta skapar WP både ett handtag och en sökväg för att hitta filen och beroenden (om det finns någon), när detta händer måste du använda en krok för att infoga stilark och skript. 

Grundfunktionen för att ange stil:

wp_enqueue_style ($ handtag, $ src, $ deps, $ ver, $ media);

För att ange skript:

wp_enqueue_script ($ handtag, $ src, $ deps, $ ver, $ in_footer); 

Starta Google-teckensnitt

Google-teckensnitt är en utmärkt gratis teckensnittsresurs för webbdesigners och de kan enkelt läggas till i ditt anpassade tema.

google teckensnitt öppnar sans

Först måste du hitta en typsnitt du gillar i Googles teckensnittsbibliotek. När du har hittat ett teckensnitt du vill arbeta med klickar du bara på knappen "Välj den här stilen", som tar dig till en ny sida.

Om du rullar ner här hittar du instruktionerna för deras användning i en ruta med den nödvändiga koden som du kan lägga till på din webbplats.   

Du kan lägga till teckensnitt antingen enligt standardmetoden och den rekommenderade metoden, eller så kan du välja antingen @import CSS-metoden eller använda Javascript-metoden.

Du kan också lägga till det i WP genom att skriva teckensnittet i ditt temas funktioner.php.fil eller genom att använda ett specifikt plugin.

funktion wpb_add_google_fonts () {

wp_enqueue_style ('wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300', false);

}

add_action ('wp_enqueue_scripts', 'wpb_add_google_fonts');

På de flesta webbplatser kommer sidhuvudet, sidfoten och sidofältet att vara samma på alla sidor. Det är sant att du i vissa fall vill anpassa några saker, men i allmänhet är de konsekventa.

Så, för att dela upp sidan i en sidhuvud och sidfot vill du klippa och klistra in från index.php sidan, de relevanta delarna som ska finnas i sidhuvudet / sidfoten och sidofältet. Detta beror lite på ditt nuvarande index.php.

Om du till exempel använder understrykningar har sidhuvudet och sidfoten redan definierats korrekt i header.php och footer.php.

Låt oss fortsätta detta exempel som om vi skapar innehållet för rubriken.

På de flesta webbplatser innehåller rubrikerna de viktigaste huvudstilarna och navigering till webbplatsen.   

Börja från Lägg till före stängningen . Du borde ha något så här. Detta baseras på understrykningens starttema, men du kanske vill justera rubriken efter behov för att skapa dina egna anpassningar.

header.php

 


/ **
* Rubriken för vårt tema
*
* Detta är mallen som visar alla avsnitt och allt fram till
*
* @länk https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @paket Daves_Theme
*/

?>

>

">


>





the_custom_logo ();
om (is_front_page () && is_home ()):
?>
" rel="home">

annat:
?>
" rel="home">

endif;
$ daves_theme_description = get_bloginfo ('beskrivning', 'display');
if ($ daves_theme_description || is_customize_preview ()):
?>





wp_nav_menu (
array (
'theme_location' => 'menu-1',
'menu_id' => 'primär-meny',
)
);
?>

 

Samma process bör också gälla för sidfoten.

Använda Functions.php

Temat functions.php filen är en mallfil i WP-temat som fungerar som en "master" som laddas automatiskt både för administratörer och front-end-sidor på en webbplats.

Vanligtvis definieras funktioner, åtgärder, filter och klasser som andra mallfiler använder i temat. Det kan också användas för att utöka tematets funktionalitet genom ytterligare krokar, åtgärder och filter.

Du hittar enkelt functions.php-filen i temamappen. Du kan lägga till inbyggda WP och vanliga PHP-funktioner lika till filter och krokar som redan är definierade i WP-kärnan.

Du kan helt enkelt skapa en functions.php-fil genom att skapa en vanlig textfil som du namnger functions.php och placera den i temakatalogen. Med den här filen kan du aktivera inläggsformat, navigeringsmenyer och inläggsminiatyrer tillsammans med WP-åtgärder och filter. 

Kolla in funktions.php-filen från ett starttema för att se några exempel på vad som kan göras. Du kan också söka efter artiklar som använder function.php som utökar funktionerna på en WordPress-webbplats med hjälp av funktionsfilen.

Använda huvudinställningarna i temat

Med huvudinställningarna kan du ändra vissa temainställningar utan att ändra temafiler eller behöva ändra någon kod. En detaljerad beskrivning av detta ligger utanför denna artikel, så vi hänvisar till ett par artiklar som förklarar detta koncept i detalj.

  1. Inställningar API beskrivning på WordPress Codex.
  2. Komplett guide till API för WordPress-inställningar

WordPress-slingan

Som vi har diskuterat tidigare är Loop en standardmekanism som används av WP för att visa inlägg via mallfiler.

Med hjälp av slingmekanismen hämtar WP inläggen på nuvarande sidor och formaterar dem enligt "instruktionerna" i slingan.

I grund och botten slår den igenom inläggen för de aktuella sidorna en i taget genom att utföra den åtgärd som anges i temat. 

Du kan använda slingan för

  • Visar innehåll och kommentarer
  • Visar inläggstitlar och utdrag på bloggens hemsida
  • Visa data från anpassade fält och anpassade inläggstyper
  • Visa innehållet på enskilda sidor med hjälp av malltaggar.
  • Anpassa Loop för att visa och manipulera innehåll i mallfiler

Om du använder Underscores starttema hittar du WordPress-slingan som används i single.php- och page.php-filerna. Du kanske vill titta på dessa filer för att förstå hur det fungerar och / eller kan användas.

 

get_header ();
?>


medan (have_posts ()):
stolpen();

get_template_part ('mall-delar / innehåll', get_post_type ());

the_post_navigation (
array (
'prev_text' => ' '. esc_html __ ('Tidigare:', 'daves-tema'). ' % title ',
'next_text' => ' '. esc_html __ ('Nästa:', 'daves-tema'). ' % title ',
)
);

// Om kommentarer är öppna eller om vi har minst en kommentar, ladda upp kommentarmallen.
if (comments_open () || get_comments_number ()):
comments_template ();
endif;

slutligen // Slutet på slingan.
?>


get_sidebar ();
get_footer ();

 

Meny och sidor

Primär meny

Du kan välja din primära meny i WP Menu Editor (finns på Utseende - Meny). Ditt tema kan stödja mer än en navigeringsmeny på olika platser inom ditt tema. 

Det finns också sätt att registrera ytterligare menyer, till exempel kanske du vill skapa en "sidfot" -meny.

Ta en titt på WordPress codex för att förstå hur du gör detta: https://codex.wordpress.org/Navigation_Menus

Anpassad sida

WP tillåter att du skapar sidor och inlägg som standard. Det styr sidans utseende genom page.php mallfil.

Även om den här filen påverkar alla enskilda sidor i ditt tema kan du ändra deras layout och utseende. Redigering av dessa anpassade sidmallar i WP kräver lite HTML, PHP och CSS, men än en gång bör det vara ganska enkelt.

index.php

Den här mallen är standardmall i WordPress för att visa en sida när mallhierarkin inte kan hitta någon annan sida som matchar dina angivna parametrar.

Du måste använda detta för att tillgodose allt som inte hanteras av resten av mallfilerna.

Arkiv.php

Du har nu möjlighet archive.php mall används för att visa taggar, författare, kategorier och andra arkivanpassade sidor.

Att skapa en arkivsida kan vara ett bra sätt att dra allt ditt innehåll till en enda sida.

Kategori

I WP-webbutveckling är det inte ovanligt att använda olika mallar för kategorier, anpassade inläggstyper, taxonomier och taggar. Genom att skapa olika mallkategorier kan du inkludera olika funktioner på varje kategorisida.   

En typisk category.php-mall ser ut som den här:

/ **

* En enkel kategorimall

*/

get_header (); ?>

// Kontrollera om det finns några inlägg att visa

if (have_posts ()):?>

Kategori:

// Visa valfri kategoribeskrivning

 if (category_description ()):?>

// Loopen

while (have_posts ()): the_post (); ?>

förbi

 <?php

  comments_popup_link ('Inga kommentarer ännu', '1 kommentar', '% kommentarer', 'kommentarer-länk', 'Kommentarer stängda');

?>

</div>

<?php endwhile;

annat:?>

Tyvärr, Inga inlägg matchade dina kriterier.

</div>

Sidofält.php

Sidofältet är det område där du kan placera dina widgets i ett WP-tema. Oftast är det på höger sida eller under ditt innehåll på alla sidor.

Sidofält används för att visa saker som inte är direkt kopplade till inlägget eller sidinnehållet men saker som länkar till olika områden på din webbplats, registreringsformulär, annonser, sociala medialänkar och så vidare.

Sidofältet används vanligtvis i kombination med WP-widgets.   

Så här kan du lägga till en widget-klar sidofält till ditt tema:

funktion wpb_widgets_init () {

    register_sidebar (array (

        'name' => __ ('Main Sidebar', 'wpb'),

        'id' => 'sidofält-1',

        'beskrivning' => __ ('Huvudfältet visas till höger på varje sida förutom förstasidesmallen', 'wpb'),

        'before_widget' => ' ',

        'after_widget' => ' ',

        'before_title' => ' ',

        'after_title' => ' ',

    ));

    register_sidebar (array (

        'name' => __ ('Startsidans sidofält', 'wpb'),

        'id' => 'sidofält-2',

        'description' => __ ('Visas på den statiska förstasidesmallen', 'wpb'),

        'before_widget' => ' ',

        'after_widget' => ' ',

        'before_title' => ' ',

        'after_title' => ' ',

    ));

    }

add_action ('widgets_init', 'wpb_widgets_init');

Enskilda inläggssidor (single.php)

Låt oss säga att du vill använda en annan mall eller layout för en specifik artikel på din webbplats.

För detta måste du skapa en anpassad mall för en post. Detta liknar ganska att skapa anpassade sidor. Genom att följa de grundläggande riktlinjerna som används där kan du enkelt skapa enskilda inlägg också. 

För att lägga till stöd för utvalda bilder, lägg bara till följande kod i temat functions.php fil:

add_theme_support ( 'post-miniatyrer'); 

Nu kan du gå till dina sidor eller inlägg och kontrollera om alternativet för utvalda bilder är tillgängligt. Chansen är stor att WP inte visar den automatiskt, så för att visa bilden kan du behöva göra små ändringar i dina mallar där sidor och inlägg visas genom att lägga till den här koden:

Paginering 

Med den här funktionen kan du bläddra fram och tillbaka genom dina innehållssidor. Du kan använda den här funktionen när du visar inläggslistor med fler poster än vad som kan passa på en enda sida eller när du vill dela upp längre inlägg med hjälp av märka.

Den enklaste formen av paginering är att placera posts_nav_link (). -Funktionen i mallen efter slingan. Detta genererar länkar både till nästa inläggssida (när du bryter upp inläggslistor) och till föregående inlägg där det är tillämpligt.  

posts_nav_link ();

Du kan också använda nästa_posts_link & prev_posts_link för att styra var länken till föregående och nästa inlägg visas.

next_posts_link ();

previous_posts_link ();

Kommentarer 

Kommentarer är en viktig del av en blogg eller sida. Det ger webbplatsbesökare möjlighet att nå ut till dig, ge feedback, ställa frågor och generellt skapa ett djupare band med din webbplats och ditt innehåll.

Alla kommentarer visas i administratörsområdet och det finns flera funktioner du kan lägga till, från att aktivera kommentarer endast för specifika användare till kommentarer moderering.

Du kan använda comments.php-filen för att anpassa utseendet och känslan för kommentarer i ditt tema.

Andra sidor och filer 

Beroende på dina behov kan du hitta eller skapa olika sidor och filer och kan anpassa dem till dina preferenser genom att använda samma eller liknande riktlinjer som nämns ovan. 

Använda föräldra / barn tema

Överordnat tema

Överordnade teman i WP är teman som förklaras ”föräldrar” av andra teman, nämligen barnteman.

Ett underordnat tema används för att tillåta designers och utvecklare att skapa anpassningar till teman utan att bryta möjligheten att uppdatera det överordnade temat. Detta beror på att om en utvecklare ändrar de ursprungliga temafilerna förloras ändringarna när de utför en temauppdatering.

Men överordnade teman överför deras funktioner och funktionalitet till sina underordnade teman. Utvecklare är fria att göra ändringar i barnets temafunktionalitet och funktioner utan att det påverkar överordnat temas uppgraderbarhet.

Barntema

Barnteman ärver funktionaliteten hos överordnade teman. De används främst för att modifiera ett befintligt tema utan att förlora någon tidigare tillagd anpassad styling under temauppdateringar.  

Barn teman påskyndar utvecklingsprocessen eftersom det är enkelt att skapa modifieringar med dem.

De flesta teman skapar ett barntema och gör det tillgängligt med temat, så att alla som använder temat kan anpassa det genom barnetemnet. Vi definierar hur man skapar ett barntema, i vår artikel här.

Använda utvecklingsramar

Denna term hänvisar till kodbiblioteken som används vid temautveckling. 

Utvecklingsramar skapades för att fungera som överordnade temamallar med all funktionalitet. I grund och botten, som med överordnade teman, förblir ramar orörda medan utvecklare kan utföra modifieringar i underordnade teman.

Detta gör utvecklingen snabbare och underlättar att bli av med buggar i specifika temaramar. Anmärkningsvärda utvecklingsramar inkluderar Genesis temamiljö, Themify och Divi by Elegant Themes.

Avsluta hur du skapar WordPress-tema

Ovanstående har varit en detaljerad steg-för-steg-guide för att komma igång med att utveckla ditt eget anpassade WordPress-tema.

Allt som allt, även om du behöver ha en god förståelse för WordPress och PHP, är det inte en så krävande process. Att veta grunderna för webbutveckling är viktigt och du kan förstå WordPress-kärnan mer detaljerat när du utvecklar. Om du inte känner för att klara uppgiften ännu, är det okej, ta dig tid och experimentera lite.

När du har gjort några misstag börjar du lära dig mer och mer. Det är också bra att ta en titt på kodbasen för andra populära teman för att förstå vad de gör och få en god uppfattning om metoder som är vettiga.

Låt oss veta om du har några frågor i kommentarerna nedan.

Om författaren
David Attard
Författare: David Attardwebbplats: https://www.linkedin.com/in/dattard/
David har arbetat i eller runt online / digital industrin under de senaste 18 åren. Han har stor erfarenhet av mjukvaru- och webbdesignindustrin med WordPress, Joomla och nischer som omger dem. Som digital konsult fokuserar han på att hjälpa företag att få en konkurrensfördel med en kombination av deras webbplats och digitala plattformar som finns idag.

En sak till... Visste du att människor som delar användbara saker som det här inlägget ser fantastiska ut också? ;-)
Tveka inte, lämna en användbara kommentera med dina tankar, dela sedan detta på din Facebook-grupp (er) som skulle tycka att det var användbart och låt oss skörda fördelarna tillsammans. Tack för att du delade och var trevlig!

Upplysningar: Denna sida kan innehålla länkar till externa webbplatser för produkter som vi älskar och rekommenderar helhjärtat. Om du köper produkter vi föreslår kan vi tjäna en remissavgift. Sådana avgifter påverkar inte våra rekommendationer och vi accepterar inte betalningar för positiva recensioner.

Författare Utvalda på:  Inc Magazine-logotyp   Sitepoint-logotyp   CSS Tricks-logotyp    webbdesignerdepot-logotyp   WPMU DEV-logotyp   och många fler ...