WordPress Tutorial: Hur man skapar ett WordPress-tema från HTML (del 1)

  1. 1. Läser för tillfället: 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. En introduktion till anatomi av ett WordPress-tema

Om du började med en HTML (+ CSS) webbplats behöver du inte kasta bort allt när du flyttar till WordPress. Du kan konvertera din HTML till WordPress och köra din (nu kraftfullare) webbplats på den dynamiska WordPress-plattformen.


Eller kanske det inte är fallet. Du undrar kanske hur du konverterar en klients HTML-design till ett fullständigt WordPress-tema. Eller kanske du vill lära dig grundläggande WordPress (+ PHP) programmering från den mer bekanta HTML-sidan.

Oavsett anledning till att du är här idag kommer denna WordPress-tutorial att presentera dig grunderna för att skapa ett WordPress-tema från HTML. Du kan följa den här guiden för att skapa ditt tema från grunden eller så kan du gå över till Github och ladda ner WPExplorer-starttema som ger en “tom duk” för att skapa ditt tema med alla nödvändiga mallfiler och kod för att komma igång. Så om du är en av dessa människor som hellre lär sig genom att läsa igenom koden, ladda ner starttemat, hoppa över guiden och se hur saker fungerar … Annars får du en kodredigerare (jag använder och rekommenderar Anteckningar++, eller SublimeText) och en webbläsare redo, följ sedan denna enkla guide till slutet.

Namnge ditt WordPress-tema

Först måste vi ge ditt tema ett unikt namn, vilket inte är nödvändigt om du bara bygger ett tema för din webbplats. Oavsett, måste vi namnge ditt tema för att göra det lätt identifierbart vid installationen.

Allmänna antaganden vid denna punkt:

  • Du har ditt index.html- och CSS-formatmall redo.
  • Du har en fungerande WordPress-installation med minst ett tema, t.ex. Tjugo fjorton
  • Du har redan skapat en temamapp där du sparar ditt nya WordPress-tema ��

Låt oss komma tillbaka till att namnge ditt WordPress-tema. Öppna din kodredigerare och kopiera och klistra in innehållet i stilmallen i en ny fil och spara den som style.css i din temamapp. Lägg till följande information högst upp i nyskapad style.css:

/ *
Tema Namn: Ditt temas namn
Tema URI: Ditt temas URL
Beskrivning: En kort beskrivning av ditt tema
Version: 1.0 eller någon annan version du vill ha
Författare: Ditt namn eller WordPress.org: s användarnamn
Författare URI: Din webbadress
Taggar: Taggar för att hitta ditt tema i WordPress-temlagret
* /

Lämna inte kommentarerna (/ *… * /). Spara ändringarna. Den här informationen berättar WordPress namnet på ditt tema, författaren och liknande saker. Den viktiga delen är tematens namn, som låter dig välja och aktivera ditt tema via WP-instrumentpanelen.

Dela upp din HTML-mall i PHP-filer

Denna handledning antar vidare att du har din HTML-mall ordnad från vänster till höger: sidhuvud, innehåll, sidofält, sidfot. Om du har en annan design kan du behöva spela med koden lite. Det är roligt och superlätt.

Nästa steg innebär att skapa fyra PHP-filer. Skapa index.php, header.php, sidebar.php och footer.php och spara dem i din temamapp. Alla filerna är tomma just nu, så förvänta dig inte att de gör något. Som illustrationssyfte använder jag följande index.html- och CSS-formatmallfiler:

index.html




Hur man konverterar HTML-mall till WordPress Theme - WPExplorer



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

Detta är huvudinnehållsområdet.

Och detta är sidfoten.

CSS STYLESHEET

#wrap {margin: 0 auto; bredd: 95%; margin-top: -10px; höjd: 100%;}
.header {bredd: 99,8%; kant: 1px solid # 999; höjd: 135px;}
.innehåll {bredd: 70%; kant: 1px solid # 999; margin-top: 5px;}
.sidofält {float: right; margin-top: -54px; bredd: 29%; gräns: 1px solid # 999;}
.sidfot {bredd: 99,8%; kant: 1 px solid # 999; margin-top: 10px;}

Du kan ta båda koderna om du inte har något att arbeta med. Kopiera och klistra in dem i din kodredigerare, spara dem, skapa de fyra PHP-filerna vi just nämnde och gör dig redo för nästa del. Öppna din nyskapade (och tomma) header.php. Logga in i din befintliga WordPress-installation, navigera till Utseende – >> Editor och öppna header.php. Kopiera all kod mellan taggar och klistra in den i din header.php-fil. Följande är koden jag fick från filen header.php i temat Twenty Fourteen:




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




Öppna sedan din index.html arkivera och kopiera rubrikskoden (dvs. koden i

avsnitt) till din header.php precis under taggar som visas nedan:




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







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

Sen Lägg till…

… var som helst mellan taggar i filen header.php för att länka ditt stilark. Kom också ihåg att sätta och öppna taggar i header.php som visas ovan. Spara alla ändringar.

Kopiera det andra avsnittet (dvs..

från index.html till nyligen skapade index.php , och lägg till…

… högst upp och …


… till den absoluta botten. Dessa tre rader hämtar header.php, sidebar.php och footer.php (i den ordningen) och visar dem i index.php, som sätter tillbaka din kod. Spara alla ändringar. Vid denna punkt bör din index.php-fil se ut:



Kopiera sedan innehållet från sidofältet och sidfotens avsnitt i indexet.html till sidofältet.php respektive fotfot.php.

Lägger till inlägg

Din HTML-mall håller på att förändras till ett WordPress-tema. Vi behöver bara lägga till dina inlägg. Om du har inlägg på din blogg, hur skulle du visa dem i ditt skräddarsydda tema “HTML till WordPress”? Du använder en speciell typ av PHP-funktion som kallas Slinga. Loop är bara en specialiserad kod som visar dina inlägg och kommentarer var du än placerar den.

Nu för att visa dina inlägg i innehållsavsnitt i index.php-mallen, kopiera och klistra in följande kod mellan

och

taggar som visas nedan:

>

Det kommer att ta hand om dina inlägg. Lätt som ABC. Vid detta tillfälle (och med hjälp av de exempelfiler som tillhandahålls i den här självstudien) ska din header.php se ut så här:




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




Din sidebar.php ska se ut så här:

Din footer.php ska se ut så här:

Och detta är sidfoten

Har du lagt märke till avslutningen? och taggar i sidfoten? Glöm inte att ta med dem också.

Din style.css ska se ut så här:

/ *
Temanamn: Skapa WordPress-tema från HTML
Tema URI: http://wpexplorer.com
Beskrivning: Detta tema visar hur du skapar WordPress-teman från HTML
Version: 1.0
Författare: Freddy för @WPExplorer
Författare URI: http://WPExplorer.com/create-wordpress-theme-html-1/
Taggar: wpexplorer, anpassat tema, HTML till WordPress, skapa WordPress-tema
* /
kropp {
fontfamilj: arial, helvetica, verdana;
typstorlek: 0,8em;
bredd: 100%;
höjd: 100%;
}

.rubrik {
bakgrundsfärg: # 1be;
marginal-vänster: 14%;
överst: 0;
kantbredd: 0,1 em;
kantfärg: # 999;
kantstil: solid;
bredd: 72%;
höjd: 250px;
}

.innehåll {
bakgrundsfärg: # 999;
marginal-vänster: 14%;
marginal-topp: 5px;
flyta till vänster;
bredd: 46%;
kantbredd: 0,1 em;
kantfärg: # 999;
kantstil: solid;
}

.sidofält {
bakgrundsfärg: # 1d5;
marginal-höger: 14%;
marginal-topp: 5px;
flottör: höger;
kantbredd: 0,1 em;
kantfärg: # 999;
kantstil: solid;
topp: 180px;
bredd: 23%;
}

.sidfot {
bakgrundsfärg: röd;
marginal-vänster: 14%;
flyta till vänster;
marginal-topp: 5px;
bredd: 72%;
höjd: 50px;
kantbredd: 0,1 em;
kantfärg: # 999;
kantstil: solid;
}

Och din index.php ska se ut som:





Återigen – detta baseras på en vänster till höger webbplats med en sidhuvud, innehåll, sidofält, sidfot layout. Följer du? Alla de fem filerna bör sparas i din temamapp. Namnge mappen vad du vill och komprimera den till ett ZIP-arkiv med WinRar eller ett motsvarande program. Ladda upp ditt nya tema till din WordPress-installation, aktivera det och se ditt konverterade tema i aktion!

Det var lätt, eller hur? Du kan utforma ditt tema hur du vill, men de flesta funktioner vi älskar i WordPress är fortfarande inaktiva eftersom … den här tutorialen täcker grunderna för att konvertera HTML-mallar till WordPress och bör vara av stort värde för dig som nybörjare. I nästa handledning kommer vi att ta saker och ting högre och leka med andra aspekter av WordPress-programmering (t.ex. Mallfiler och Malltaggar) som gör att du kan vända dina HTML-mallar, vilket sätt du vill. Håll dig uppdaterad!

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