Share
Klar för att lära dig hur du gör ditt första WordPress-tema? Denna handledningsserie kommer att ta ett steg för steg-tillvägagångssätt, med hjälp av ett "lärande tema" som är kärleksfullt känt som WordPress träningshjul, för att undervisa ämnet. Denna serie kommer att ta den absoluta WordPress nybörjaren genom de grundläggande stegen som krävs för att konvertera alla HTML-mallar till ett fullt fungerande WordPress-tema.
När jag började använda WordPress tillbaka 2006, fanns det inte så många tutorials runt då och då på var du ska börja med Theme Development.
Jag lärde mig det svåra sättet, genom försök och fel, att gruva WordPress codex, liksom från de få tuttar som hade funnits sedan dess. Under de senaste 2 - 3 åren har jag undervisat grundläggande WordPress-temat utveckling på och av och har märkt att för de som inte är mycket bekanta med Content Management Systems, är de flesta av de handledning som finns för att undervisa utveckling från början alltför komplicerade.
Så jag har utvecklat ett steg för steg-tillvägagångssätt, med hjälp av ett "lärande tema" som är kärleksfullt känt som WordPress träningshjul, som kommer att ta hela WordPress nybörjaren genom de grundläggande stegen som krävs för att konvertera någon HTML-mall till ett fullt fungerande WordPress-tema. Vi ska börja långsamt men speciellt för dem som inte har lyxen av tidigare erfarenheter som arbetar med CMS-kod eller PHP för den delen. Därför heter "Training Wheels". Hardcore kodare går åt sidan, vi håller på att rensa loppet!
Vårt fokus kommer främst på WordPress-koden, inte design. Så mallen är avsiktligt förenklad med lite ljus styling så att du inte cyklar bort från en klippa ur tristess.
För en riktigt bra intro för webbutveckling med HTML & CSS, kolla in Net Tuts-tutorialserien - Webbutveckling från början
WordPress-teman är huvudsakligen vanliga HTML-mallar, med små bitar av WordPress-specifika PHP-taggar kastade i områden där dynamiskt innehåll behöver laddas från databasen. Av denna anledning skulle en bra förståelse av HTML vara nödvändig för att följa igenom med denna serie.
WordPress-teman, men i första hand består av HTML, kan inte visa som standard i din webbläsare på grund av PHP som de innehåller, vilket ändrar hur de fungerar. De måste köras via en server som kan tolka PHP-kod, varför det är viktigt att arbeta på en PHP-kompatibel webbserver när man utvecklar WordPress-teman.
Vi hoppar över installationsprocessen för WordPress för nu eftersom vårt fokus kommer att vara rent på Theme Development. Jag har länkat till en Utmärkt Video Tutorial om att installera WordPress på en live-server. Ton mer kan hittas online för både levande och virtuella servrar.
"En virtuell server är i huvudsak en server som körs på din lokala skrivbordsmaskin och kan installeras med MAMP (mac), XAMPP (mac & windows) eller WAMP (windows)."
För att lära dig hur du installerar WordPress lokalt på en virtuell server kolla in följande video.
De kallar inte det den berömda 5 minuters installationen för ingenting. Faktum är att om du har gjort det tillräckligt många gånger tar det mindre än 5 minuter.
Kolla in www.freecss templates.org för massor av mallar som är perfekta för att komma igång och är redan inriktade på att användas som WordPress-teman.
När du har testinstallationen av WordPress körs behöver du en grundläggande HTML-mall (index.html) med ett stylesheet (style.css). Jag skulle uppmuntra någon att lära HTML-konverteringen till WordPress att träna genom att ladda ner enkla gratis HTML & CSS mallar och konvertera några för att träna.
Jag kommer att använda WordPress Training Wheels Theme under hela denna tutorial-serie och jag uppmanar dig att göra detsamma så att vi inte peddling i olika riktningar till att börja med. Träningshjulet temat är en blott benmall, inget racy eller prickigt, men innehåller alla kända komponenter i en typisk WordPress Theme, dvs? Rubrik, Meny, Sidfält, Innehållskolumn och Footer. Temaet kommer att namnges utbildning-hjul-0.0 i början, och namnet kommer att förändras stadigt när vi lägger till mer kod och framsteg är mot att vara ett fullt utvecklat tema. I slutet av den här lektionen ändras namnet till tränings-hjul-0.1
Ta en titt på den grundläggande HTML-strukturen nedan. Väldigt enkelt.
Om dina startfiler inte ska namnges enligt ovan angivna sätt måste du byta namn på dem. WordPress Kräver filer med dessa namn som det minsta möjliga för ett tema att vara funktionellt. Dessutom har vi en bildmapp för att hålla bilderna snyggt borta.
Filindex.html, som kommer att bli grundstrukturen för temat behöver ändras till index.php. Jag rekommenderar alltid att du håller en kopia av index.html på sidan men om allting går sönder som det kommer att hända. Tänk på det som ett extra däck om du upplever ett däckbrist. Bekännelse: Efter årens temautveckling gör jag fortfarande riktigt dumma saker, särskilt efter midnatt när min hjärna inte längre kan fungera, men kaffet håller mig på väg.
Vi slutar med följande. Mine är inrymda i mappen som kallas träningshjul-0.0
Om du någonsin har försökt lägga till en vanlig HTML-mall i WordPress-teman, så märker du att den inte visas i alternativen för att aktivera teman. Med äldre versioner av WordPress skulle du också finna att ett felmeddelande skulle visas om ditt stilark inte innehåller stilarket nedan. Detta beror på att WordPress använde CSS-kommentarsnitten nedan för att registrera ditt tema som ett giltigt WordPress-tema. För närvarande är det inte längre nödvändigt att få den här kommentaren för ditt tema att registrera, men ditt tema skulle visas utan några andra detaljer än mappnamnet enligt nedan.
Koden nedan bör ändras för att innehålla egna unika detaljer samt unik information om det tema du skapar.
/ * Tema Namn: Tema URI: Beskrivning: Version: Författare: Författare URI: * /
Med detaljer från mina träningshjulstema inkluderade skulle det se ut så här:
/ * Tema Namn: Träningshjul Tema URI: http://www.wpbedouine.com Beskrivning: Ett tema att lära sig WordPress Theme Development från Scratch Version: 0.1 Författare: Nur Ahmad Furlong Författare URI: http: //www.nomad-one .com * /
Det finns några ytterligare parametrar som kan läggas till, speciellt om du funderar på att släppa ditt tema till allmänheten, sälja det eller ladda det på den officiella wordpress.org-teman katalogen.
Ett exempel på en mer fleshed out stilark kommentar att ge så mycket detaljer som möjligt om temat kan hittas i tjugo elva standard tema. Som du kan se ytterligare information om ytterligare tagg för att hjälpa användare att söka efter specifika typer av teman via instrumentpanels temasökning eller i teman katalog finns. En detaljerad beskrivning samt en del uppgifter om tematillstånd ingår. Vi ignorerar dessa för denna övning.
/ * Tema Namn: Twenty Eleven Theme URI: http://wordpress.org/extend/themes/twentyeleven Författare: WordPress-teamet Författare URI: http://wordpress.org/ Beskrivning: 2011-temat för WordPress är sofistikerat, lätt , och anpassningsbar. Gör det ditt med en anpassad meny, header image och bakgrund - gå vidare med tillgängliga tematillval för ljus eller mörkt färgschema, anpassade länkfärger och tre layoutval. Tjugo elva är utrustade med en mall för presentationssidor som förvandlar din framsida till en showcase för att visa upp ditt bästa innehåll, widgetstöd i stor skala (sidofält, tre sidfält och ett widgetområde för Showcase-sida) och en anpassad "Ephemera" -m widget till visa dina sidor, länk, citat eller statusposter. Inkluderat är utformningar för utskrift och för adminredigeraren, stöd för utvalda bilder (som anpassade rubrikbilder på inlägg och sidor och så stora bilder på utvalda "klibbiga" inlägg) och speciella stilar för sex olika inläggsformat. Version: 1.2 Licens: GNU Allmän licens Licens URI: license.txt Taggar: mörk, ljus, vit, svart, grå, en kolumn, två kolumner, vänstra sidor, högra sidor, fast bredd, flexibel bredd , anpassad bakgrund, anpassade färger, anpassade rubriker, anpassade menyer, redigeringsstil, featured-bildhuvud, presenterade bilder, fullbreddsmall, mikroformat, postformat, rtl-språkstöd, klibbig -post, tema-alternativ, översättningsklar * /
När du har fått dina Stylesheet-kommentarer på plats är ditt tema nu klart att aktiveras via WordPress Administration Dashboard, under Utseende "Teman
För att hjälpa dig själv och andra användare av temat för att snabbt känna igen temat i teman installationsområdet på instrumentpanelen har det gjorts en skärmdump.png-bild som visas automatiskt om den finns i roten till tematmappen.
Helst skulle du vilja ha en skärmdump som ger en bra bild av hur temat ser ut. Jag tycker att många tematekniker inkluderar en logotyp här, vilket inte alltid hjälper slutanvändaren att identifiera det tema de letar efter, särskilt om användaren har många teman som redan installerats, ganska vanligt förekommande jag tror.
Screenhot.png ska vara 240px X 180px, vilket är storleken som används för miniatyrbilden i instrumentpanelen. Du kan infoga en annan storlek, men bilden ska ändras så att den passar in i de här dimensionerna. Bäst att hålla fast med rätt storlek för första gången för optimal visning och sidbelastning.
Innan vi går längre måste vi orientera oss lite med strukturen i PHP-utvecklingsspråket, och ännu viktigare strukturen i WordPress-specifika PHP. Den PHP som används i WordPress-teman i stort är anpassad speciellt för att endast fungera inom WordPress-miljön. Vi börjar med den innehållande strukturen för någon PHP-kod, som med HTML som bara har parentesar, är PHP-kod insvept i.
Inne i parenteserna finns all funktionalitet, med kod som vi brukar hänvisa till på PHP-funktioner. Se alltid till att det finns ett mellanslag mellan den innehålla taggen och den inre PHP-koden. Den enklaste av dessa funktioner vi ska hantera är bloginfo (); fungera. Observera att efter funktionens namn har vi 2 rundade parentes, öppnande och stängning, med en halv kolon i slutet, stänger av funktionen och är i många fall avgörande. De avrundade hakarna kommer ibland att innehålla några ytterligare parametrar, för att berätta bloginfo (); funktion, specifikt vad den behöver göra.
Vissa WordPress-funktioner behöver inte parametrar inom de avrundade parenteserna för att utföra en funktion, men de kan eventuellt få några att göra deras funktion mer specifika. Bloginfo (); parameter behöver dock en för att bara fungera. Vi kommer till några av de extra funktioner som fungerar utan parametrar när tiden går.
Lägg märke till hur ordnamnet är skrivet med enkla citattecken runt det inom de avrundade parenteserna.
är koden som vi använder istället för webbplatsens namn, vart vi vill att namnet ska visas i vår mall. Till exempel, varhelst jag har skrivit "WordPress Training Wheels" kunde jag helt enkelt ersätta den texten med den funktionen.
Var försiktig med strukturen i den här funktionen, eftersom resten av WordPress-koden följer en liknande struktur hela tiden. Att lämna ut en väsentlig del, som de avrundade hakarna, halvkolonet efter de avrundade hakarna, eller mellanrummet mellan php och ordet bloginfo, kommer att leda till att din kod inte fungerar korrekt. I vissa fall kan detta döda hela din sida. Jag vet, det är en smärta att vara så försiktig, men att utveckla goda vanor hjälper tidigt. Lyssna på vägens regler och din resa blir vägen mindre ojämn.
När WordPress-webbplatsen kör den här funktionen laddar WordPress databasen och hittar namnet som du har lagt in i fältet Blog Name under Inställningar "Allmänt.
Det är också namnet du lägger in i början när du kör installationen för att ställa in WordPress första gången. Om du ändrar det här namnet i de allmänna inställningarna kommer det att resultera i att din mall återspeglar den ändringen omedelbart. Detta är i huvudsak hur WordPress, eller något annat Content Management System fungerar för den delen. Dynamiska taggar ersätter statiskt innehåll så att innehållet kan hanteras via administrationsgränssnittet istället för att direkt redigera mallarna.
Ditt tema är fortfarande inte fullt redo att vara registrerat inom WordPress. Det saknas ett viktigt steg som tillåter WordPress att visa ditt tema korrekt.
Några steg tillbaka vårt index.html kunde enkelt länka till det medföljande formatmallet, eftersom de är placerade i samma mapp och det bara är tillräckligt med att ställa in namnet på stilarkfilen i stylesheet-länken. Detta är dock inte längre fallet. WordPress-teman bor inte på rotnivå på webbplatsen, eftersom de är installerade i wp-innehåll "teman mappen i WordPress-programvaran.
Som du kan se nedan när du aktiverar temat för närvarande, ser vi fortfarande inte hela bilden. Även om HTML-strukturen laddas, kopplas stilarket inte till, vilket resulterar i en ostylad sida.
Utan att förklara för mycket detaljer om hur WordPress handlar om att ringa mallarna från de här mapparna, måste vi vara medvetna nu att filer inte längre kan kopplas till lika enkelt som vi länkade till dem på enkla HTML-sidor. Vi behöver använda några extra WordPress-funktioner för att fylla i stegen mellan rotkatalogen och det aktuella aktiverade tematmappen. Vi gör det med hjälp av ett annat blogginfo (); funktion, den här gången upptäcker URL-adressen till det aktuellt aktiverade temat stilark. Oavsett vad temamappen heter, kommer WordPress nu att fylla i ämnena och infoga sökvägen till style.css-filen.
Den här funktionen läggs in i stilarket länk tagg
som nu blir
Om du inspekterar din källkod med hjälp av visningskälla eller med något som firebug ser du WordPress innehåller hela vägen från webbplatsens rotor hela vägen till stilarket. Rotsmappen på mitt exempelwebbplats finns på http://www.wpbedouine.com/training-wheels/. WordPress genererar därför:
Det samma stylesheet_url funktionen kommer automatiskt att infoga sökvägen till ett aktuellt aktiverat tema på samma sätt, utan att någon källkod redigeras. Du kommer att se ett mönster som kommer fram, med bitar av hårdkodat innehåll som ersätts av dynamiska funktioner som drar data från databasen i flygningen.
Känner du att luften rusar genom ditt hår nu? Oroa dig inte, träningshjulen kommer snart! Jag lovar.
Placera dina index.php- och style.css-filer i sin egen mapp med namnet baserat på vad du vill att temat ska namnges och sedan laddas upp till din wp-innehåll "teman mapp i din levande eller virtuella värdversion av din WordPress-installation enligt nedan.
Och utan vidare, gå till Utseende "Teman och klicka på aktivera under ditt nyskapade tema. För de övriga läsarna på denna sida kan dessa steg vara irriterande enkelt, men jag känner personligen känslan av att äntligen klicka med den här processen och att ha mitt allra första tema aktiverat inom WordPress. Det är ovärderligt för nybörjaren.
Innan vi slutar, låt oss använda några extra, mycket enkla bloginfo (); funktioner för att fylla i dynamiskt innehåll. Vi har redan introducerat bloginfo ( 'name'); och bloginfo ( 'stylesheet_url');. Nedan har vi den ursprungliga HTML-filen för huvudrubriken av vårt tema.
WordPress träningshjul
En liten hjälp för att få dig fri wheeling med WordPress
Vi ersätter innehållet i H1-länkhref-attributet, som för närvarande bara har en hash-symbol och brukar se ut som href = "home.html", med bloginfo ( 'webbadress'); fungera.
">
Dessutom ska vi ersätta h2-taggen nedanför webbplatsnamnet med:
så vårt kodfragment ser nu mycket mer wordpressish ut.
">
En sista fråga som löser problemet är länken till innehållsbilden i mittenkolumnen i mallen. Liknande problemet med att länka stilarket måste vi använda ett annat bloginfo (); funktion för att fylla i bildvägen då bilder / imagename.jpg inte längre fungerar.
Träningshjul Lektion 1
För att lösa detta problem använder vi följande kod innan du ringer till bildkatalogen
Så vi kommer att sluta med följande.
Träningshjul Lektion 1
Var försiktig med framåtslipet strax efter stängningsfästet och före namnet på bildmappen!
bloginfo ( 'name');
bloginfo ( 'webbadress');
bloginfo ( 'beskrivning');
bloginfo ( 'template_directory');
Bloginfo (); funktionen har massor av användningsområden för att skapa olika innehållsdelar från din webbplats.
För en mer omfattande lista över parametrar för bloginfo (); kolla in WordPress Codex-dokumentationen på den här funktionen - http://codex.wordpress.org/Function_Reference/bloginfo.
En annan utmärkt resurs för de många WordPress-funktionerna är DBS Interactive WordPress Tag Reference, som i huvudsak är en snyggare och mer ordnad presentation av koden som anges i WordPress Codex.
Jag har lagt till utdrag av koden som omfattas av denna lektion till mitt snipplr-konto.
Gratis wheeling med WordPress snart att följa. Jag hör de träningshjälmarna som rasar för att komma undan :)
Accentsconagua
; ?>/images_26/wordpress-theme-development-training-wheels-day-one_4.jpg )