Så här skapar du ett Wordpress-tema från början

Efter den senaste artikeln om "PSD till HTML" kommer denna handledning att se på att ta en HTML / CSS-mall och göra den till ett fungerande WordPress-tema. Det finns så mycket du kan göra när du skapar ditt eget tema, vi kunde inte nästan täcka allt. Så vi ska titta på hur teman är strukturerad, skapandet av kärnfilerna och dela upp den index.html filen.

Letar efter en gratis WordPress-tema att komma igång snabbt? Vi har några bra för dig att välja mellan!

Översikt - Strukturen av ett tema

Strukturen i ett WordPress-tema är ganska enkelt, jag gillar att börja med CSS-filen. Det beskriver allt om temat för WordPress att använda. Du har då index.php - Det är helt enkelt den mallfil du använder med inkluderade PHP-malltaggarna. Inkluderat med det är header.php & footer.php, filer som används över hela webbplatsen. Nu använder de flesta teman inte bara fyra filer och det beror på att WordPress låter dig använda mallfiler för att skapa olika innehåll. Det finns de definierade layoutfilerna, t.ex. archives.php och single.php. Men du kan också skapa din egen, säg om du ville skapa en sida som hade en helt annan layout till standard.

Eftersom det här är så stort ämne delar vi upp den i en tvådelad serie - den här delen gör ett enkelt men fungerande tema från en vanlig HTML & CSS-mall och den andra delen kommer att se på att lägga till fler avancerade funktioner.

Jag kommer att arbeta för att göra den stora mallen "Typography Paramount" av Six Shooter Media till ett enkelt WordPress-tema.

Steg 1 - style.css

Stilarkivet är den definierande filen av temat för WordPress. Det finns några enkla saker du behöver göra. Den första byter namn på huvudet (om du har mer den där) filen till style.css, nästa måste du lägga till lite kommentar till filen.

/ * Tema Namn: Typografi Paramount Tema URI: http://www.sixshootermedia.com/ Beskrivning: En bildlös mall som fokuserar på Typografi. Författare: Sam Parkinson Författare URI: http://xseria.com Version: 1.0. Allmänna kommentarer / Licensansökan om någon ... * /

Koden ovan är alla i en kommentar, så det påverkar inte stildefinitionerna. Nu fyllde jag ut det med några detaljer, dessa kommer att användas av WordPress för att visa detaljerna i temat till administratörer. Se till att du lägger till den högst upp i filen utan några vita mellanslag före den.

Jag har gått och bytt namn på stilarkfilen från mallen, den heter 1.css. Jag har också gjort en ny mapp som heter typografi-paramount vilket kommer att vara vad jag laddar upp till WordPress-temapappen. Lägg stilarken i den här mappen, men inte under en annan katalog annars kan den inte ses av WordPress.

Steg 2 - rubriken och sidfoten

I det här steget kommer vi att skapa de två filerna: header.php och footer.php. Även om de är valfria används båda i de flesta teman, de är inte exakt svåra att använda heller.

header.php

Börja med rubriken, skapa en ny fil i temamappen som heter header.php, öppna sedan upp index.html från mallen och kopiera följande från den. Detta blir huvudet och kommer att visas på varje sida på webbplatsen, kom ihåg när du gör andra mallar.

   -        En imageless mall som fokuserar på typografi. 
 Typografi Paramount
  Länk här
 Länk här
 Länk här
 Länk här
 Länk här

Vi lägger nu till WordPress-malltaggarna till header.php, dessa berättar WordPress var man ska injicera olika innehåll i temat. Kom också ihåg att ändra den länken till stilarket.

 >  <?php bloginfo('name'); ?> <?php wp_title(); ?>        
 / ">

Det är ganska mycket som har lagts till, men det är allt ganska enkelt när man tittar igenom det. Alla taggarna ovan är väl dokumenterade i WordPress Codex. Jag ska bara gå igenom vad varje funktion gör.

language_attributes () - Skriver ut språktypen för
märka.
bloginfo () - Används för att skriva ut information om webbplatsen, parametrarna
finns på Codex, "namn" returnerar bloggens titel.
wp_title () - Returnerar bara titeln på sidan.
wp_head () - Skriver ut javascript-länkarna och andra rubrikfiler.
get_option () - Hämtar ett värde från alternativdatabasen.
wp_list_pages () - Listar länkar till sidans sidor, parametrarna sorteras
sidorna korrekt och stoppa också WordPress från att skriva ut en standardtitel.

footer.php

Skapa filen footer.php och kopiera allt i mallen från

ned-wards och skjuta den i den nya filen. En dynamisk sidfot som visar rätt år, webbplatsens titel och en matlänk är vanligt förekommande i teman, så vi kan lägga till en.

  Malldesign av Six Shooter Media
  ©  
 "> Ta tag i matningen

< ?php wp_footer(); ?>

Jag har gått och ändrat sidfoten för att visa upphovsrättsikonet följt av det aktuella året () och webbplatsens namn () sedan på en ny rad sätta en länk till RSS-flödet ().

wp_footer () är vad WordPress använder för att lägga till saker i botten av
webbplats, oftare som inte används av plugins för att lägga till saker som spårningskod för webbplatsen.

Steg 3 - Kärnfilen

Vi ska nu skapa index.php

index.php

Detta är en av de två obligatoriska filerna för ett WordPress-tema (det andra är style.css), så får vi komma igång. Skapa filen och sätt den ihop med resten, lägg sedan till följande.

Detta berättar helt enkelt WordPress var att inkludera header.php och footer.php filer. Eftersom det här är en tvådelade serie kommer vi att inkludera skapandet av sidofältet i nästa artikel. Du kan antingen välja att lämna den är div i som statisk HTML eller bara lämna det som är vad jag ska göra. Lägg till följande mellan de två föregående taggarna.

  ">
   på  |  | 
  Woops ... 
 Tyvärr, inga inlägg som vi hittat.

Detta är vad WordPress kallar WordPress Loop. Den första raden av PHP startar den här slingan, EndWhile är slutet på det. WordPress fyller ut slingan för varje artikel på webbplatsen, och om det inte finns något visar det att "Woops ..." innehåll. Jag har också lagt till en navigeringslänk som kommer att placera länken till fler artiklar, så besökare kan titta på äldre innehåll utan att använda arkivet.

I nästa artikel skriver vi upp single.php, Detta skulle vara det som visas om en besökare klickar på titeln på ett inlägg. Det kommer att inkludera kommentarsystemet, till skillnad från index.php.

Granskning - Fungerar det?

Så vi har nu fyra filer utan tema, förutsatt att du inte glömde att uppdatera dig index.php fil (hej!) det ska fungera som ett enkelt men funktionellt tema.

Testa det ut i det nya temat förhandsgranskningsverktyget som sätts i den senaste WordPressen, efter att ha tittat runt där verkar det bara vara ett problem med långa titlar som enkelt kan lösas genom att lägga till följande till #content h2 i stilarket.

linjehöjd: 30px;

Fortsätt till del 2.

Koda