den här artikeln har bidragit med PSDtoWP.net

kanske är det bäst att börja här med varför. Ungefär en fjärdedel av alla webbplatser körs på WordPress, onlinebloggplattformen. Detta gör det överlägset ett av de mest populära innehållshanteringssystemen med öppen källkod på planeten.

de allra flesta webbdesigners använder fortfarande Photoshop för att designa en webbplats, även om det finns alternativ. Det betyder att många webbdesigners behöver hitta sätt att konvertera PSD-filer till ett responsivt WordPress-tema!

nu kan det tyckas ganska enkelt. Att konvertera en PSD-fil till en WordPress-webbplats är dock inte exakt lätt. Det kräver mycket mer än bara Photoshop-färdigheter! För att göra din PSD-fil till ett responsivt tema som kan användas på WordPress behöver du kunskap om frontend-webbutvecklingsspråk som HTML, CSS och JavaScript, samt backend-programmeringsspråket PHP.

nu när varför är ur vägen är det dags att gå vidare till hur! Även om hur verkligen inte är lätt, det kan fortfarande åstadkommas i fem ganska enkla att förstå steg!

steg Ett: skapa webbdesignen

Hoppa till steg två om du redan har designat din webbplats.

det finns mycket mer att skapa en webbplats än att bara skapa en logotyp och sätta in en meny, en sidofält, en sidfot och innehållet tillsammans. Bitarna i detta pussel måste skapas i första hand, och processen med denna skapelse är något som inte alla kan göra så enkelt.

webbdesignen du skapar måste vara den perfekta balansen mellan form och funktion, en webbdesign som tillgodoser en bra användarupplevelse.

forskning

för att skapa en webbdesign som framgångsrikt uppfyller kriterierna för utseende och funktionalitet, måste du göra några allvarliga forskning. Först och främst, vem är din målgrupp och vad vill din målgrupp ha? Dessa är uppenbarligen viktiga aspekter av din forskning.

lär dig av andra

en annan aspekt av webbdesign som du behöver undersöka är de tekniker dina konkurrenter har tillämpat. Dessa konkurrenter är troligen bättre etablerade än du är, så du skulle säkert kunna lära dig mycket av den design som de använder! När du har gjort din forskning och du har en bra uppfattning om hur din webbplats ska se ut, bör du börja tänka på funktionalitet. Vilka funktioner vill du att din webbdesign ska ha?

Wireframe

när du har ordnat allt, hämta det på papper. Rita & skissa hur du föreställer dig att din webbplats ska se ut för att få ett visuellt hjälpmedel när du går framåt!

Design

när du är klar med att göra de fysiska skisserna / wireframesna är du redo att hoppa in i kaptenens stol och skjuta upp Photoshop. Det första du behöver göra innan du börjar på allvar är att se till att du använder ett kolumnbaserat rutnät som XXgrid. Detta gör att din design ser riktigt snygg och anpassad ut! Detta är inte bara för estetik. Med hjälp av en kolumn baserat rutnät för att skapa en anpassad design kommer att göra det lättare för dig eller din front end utvecklare som kommer att utveckla HTML och CSS för att skapa en optimerad, lyhörd layout för tabletter och smartphones!

innan du går vidare till nästa steg, kom ihåg att du måste hålla dina PSD-designfiler organiserade i lager, dvs varje avsnitt ska ha sin egen mapp med motsvarande titlar!

Steg Två: Skiva PSD

när du har skapat en webbdesign som du är helt nöjd med är det crunch time. I grund och botten vad du behöver göra nu är PSD till WordPress-processen.

webbplatser dessa dagar är alla byggda med HTML5 och CSS3. Dessa är mycket bättre än XHTML och CSS2, för i stället för alla knappar, gränser, lutningar, rundade kanter och alla andra funktioner som skapas med bilder skapas de som funktionella delar av CSS3-kodningen. Därför kommer skivning av PSD-filen i princip nu bara att skära bakgrundsbilder från PSD!

för att göra detta måste du öppna filen i antingen Photoshop eller Illustrator, beroende på vilken programvara du använde för att skapa designen. Om designern hade gjort sitt jobb rätt skulle han ha skapat en välstrukturerad designfil med mappar och lager, vilket gör det enkelt för dig att hitta det du behöver. Studera webbdesignen och leta efter bilder som du tror skulle behöva skivas. Dessa är i princip alla bilder som inte kan skapas med CSS3, vanligtvis logotypen och bakgrundsbilder. Läs hur man skär bilder här.

när du byter ut dessa bakgrundsbilder med CSS ser du en enorm minskning av laddningstiderna. Detta skulle locka många användare till din webbplats, eftersom den genomsnittliga internetanvändaren inte tål långa laddningstider!

steg tre: skapa HTML, CSS3 och JavaScript (jQuery)

när du har skivat bilderna från din PSD-fil är det dags att skapa HTML5 och CSS3. Det första du behöver göra är att skapa en ny mapp där du skapar index.html och stil.css. Skapa också en undermapp som heter bilder eller img (beroende på vad du föredrar) och placera bilderna du har extraherat i den här mappen. Skapa en annan mapp som heter JavaScript eller js. Detta är för senare, så du kan lagra alla JavaScript-och jQuery-filer på en väl markerad plats. När du är klar med att skapa alla mappar, filer och undermappar är det dags att börja bygga HTML5 och CSS3.

HTML5

HTML5 är ett relativt nytt språk som har både XHTML och HTML-funktioner. Detta språk används i huvudsak för att skapa dokumentets grundläggande struktur, samt utse alla element på sidan. HTML5 har separata element för de olika sektionerna på din webbplats, till exempel <header>, <nav>, <åt sidan>, liksom <footer> element (och mycket mer), som gör att du kan skapa ett snyggt, välstrukturerat dokument som är universellt läsbart. Här är några utmärkta resurser som du kan använda för att lära dig eller uppdatera ditt minne om HTML5.

HTML-resurser

W3Schools är antalet topp webbplats för att lära sig grunderna i HTML5. Varje element och attribut i detta språk förklaras och lärs ut med hjälp av demos, vilket ger en enkel inlärningsupplevelse.

Mozilla Developer ’ s Section-folket bakom den populära webbläsaren Mozilla Firefox har en utvecklarsektion på sin webbplats. Du kan använda det här avsnittet för att lära dig mycket om HTML5 genom de handledning de har där, oavsett om du är nybörjare eller avancerad kodare.

Web Design Tuts – den här webbplatsen har många olika HTML5-handledning, varav några är gratis och varav några betalas för.

W3-denna webbplats ansvarar för utvecklingen av alla öppna webbstandarder som har skapats för att säkerställa webbens livslängd. Här kan du hitta djupgående information om HTML5 samt alla dess senaste utvecklingen.

W3 Validator – när du har slutfört din HTML5, sätt den genom denna validator. Det kommer att berätta om din HTML5 uppfyller W3 open web-standarderna!

CSS3

CSS hänvisar till Cascading Style Sheets, och CSS3 är den senaste versionen av detta front-end-språk. CSS3 används för att ta de nakna benen av de element som skapats med HTML5 och form, position och stil dem. Detta gör att du kan skapa en konsekvent webbdesign där alla element bekräftar med webbplatsens övergripande design. När du har använt CSS3 kommer du att upptäcka att din HTML5 kommer att bli mycket renare och mer välstrukturerad, vilket i sin tur gör det möjligt att ladda mycket snabbare och låta det indexeras snabbare av sökmotorer. Nedan finns några resurser som hjälper dig att lära eller uppdatera ditt minne om CSS3:

CSS resurser

W3 CSS – W3 är på de mest kända och kända resurser för CSS3 tutorials och exempel på de olika CSS3 väljare, egenskaper och värden. Det bästa med detta är att varje handledning har en ’prova själv’ sida, som låter dig tillämpa det du har lärt dig.

lär dig CSS3-Mozilla är inte bara skaparen av Firefox-webbläsaren. Det är också ett utmärkt ställe att bekanta dig med CSS3, samt uppdatera dina kunskaper om språket.

CSS Web Design Tuts-denna webbplats innehåller en hel ymnighetshorn av tutorials som du kan gå igenom. Några av dessa handledning måste betalas för, men andra är fortfarande helt gratis och kan lära dig mycket om CSS3-väljare, egenskaper och värden.

W3 CSS – denna webbplats är ett bra ställe att hålla dig uppdaterad med de senaste CSS3 nyheter, eftersom detta är mycket gemenskap som utvecklar CSS3 webbstandarder. Det är också ett bra ställe att ta reda på teknisk information om språket.

CSS Validator-detta är valideraren genom vilken du ska köra alla dina CSS3 innan du gör webbplatsen Offentlig. Detta är för att se till att din CSS3 uppfyller de webbstandarder som fastställts av W3!

responsiv Design

internet har kommit långt sedan starten. Detta beror delvis på tillkomsten av smartphones och surfplattor och spridningen av dessa typer av teknik i vår vardag. Som ett resultat av dessa enheters enorma popularitet ser en betydande del av de totala användarna av internet på webbplatser på betydligt mindre skärmar än den genomsnittliga bärbara datorn. Dessutom interagerar de med dessa webbplatser inte genom att använda markörer, genom att använda fingrarna. Därför måste den moderna webbplatsen kunna anpassa sig till de olika typerna av enheter som finns där ute. Det är här responsiv design kommer in. Med hjälp av responsiv design kan designers skapa en webbplats som kan justera hela layouten baserat på vilken typ av enhet den visas på.

det är bra att i förväg bestämma om du vill att din nya webbplats ska ha responsiv design eller inte innan du börjar bygga HTML5 och CSS3. Detta beror på att när du kodar den responsiva delen av webbplatsens design måste du arbeta med CSS3-mediefrågor. Med hjälp av dessa mediefrågor kan du definiera olika texturer och stilar för olika skärmupplösningar.

kom ihåg att aldrig använda fasta bredder, använd procentsatser istället. Detta kallas flytande eller flytande layoutdesign, vilket gör att du kan optimera din webbplats inte bara för de resolutioner som definieras i dina mediefrågor, men för alla resolutioner mellan dem också. Detta är en stor fördel för din webbplats eftersom smartphones, surfplattor och datorer som kommer ut idag har så många olika storlekar, och därför resolutioner, och du måste ta emot dem alla.

responsiva resurser

här är några bra resurser du kan använda för att uppdatera ditt minne eller lära dig om responsiv design och all relaterad kodning:

Google Responsive – det här är en bra resurs för dig som är ny på responsiv design med CSS3-mediefrågor.

principer för responsiv webbdesign-läs den här artikeln för att förstå skillnaden mellan responsiv webbdesign och adaptiv webbdesign. Det har några bra exempel som hjälper dig att förstå saker i detalj!

Fluid Grids-du kan använda denna utmärkta artikel av Ethan Marcotte att lära sig om fluid grids och hur man använder dem. Försök använda exemplen i artikeln själv!

Responsive front-end framework

om du inte vill lära dig repen när det gäller CSS3-mediefrågor, eller kanske du helt enkelt inte har tillräckligt med tid för det, försök använda ett responsivt front-end-ramverk istället. Om du bestämmer dig för att använda ett rutnät, kom ihåg att du måste tillämpa samma ramverk på CSS såväl som HTML, eftersom du kommer att arbeta med fördefinierade klasser och ID för att ansluta ramverket som skapats med HTML5 till CSS3. Med hjälp av en lyhörd front-end ram kommer säkert att du kan utveckla din webbplats mycket snabbare, men på nackdelen det kommer också att sakta ner din webbplats laddningstider på grund av den stora mängden kod som du inte kommer att använda.

några av de mest populära front-end-ramarna är:

Bootstrap-detta responsiva ramverk är ganska enkelt att implementera, och en extra bonus är att den använder en CDN för att minska effekten av din webbplats laddningshastigheter också.

mindre-Detta är en adaptiv CSS grid framework snarare än en lyhörd en som låter dig skapa en adaptiv layout.

Foundation-Detta är en front-end rutnät ram med en Filstorlek som är helt liten för att minimera den inverkan det kommer att ha på din webbplats laddningshastighet.

JavaScript (vs CSS3)

JavaScript är ett av de mest populära programmeringsspråken i världen för närvarande. Detta beror på att det stöds av ett brett utbud av webbläsare och också på grund av att det innehåller bibliotek som jQuery och backend-system som Node.js samt ramar som AngularJS. Det är inte konstigt att så många utvecklare svär vid detta programmeringsspråk! Men på senare tid har JavaScript börjat bli föråldrat, eftersom många av dess funktioner har börjat tas över av CSS3-animationer, vilket gör att du kan animera övergångar mellan stilar.

Javascript resurser

W3 – Detta är ett utmärkt ställe att börja om du är ny på JavaScript, tack vare den utmärkta handledning som finns på denna webbplats.

jQuery – när du har erfarenhet av JavaScript kan du börja använda bibliotek som den här för att programmera mycket lättare. jQuery är det mest populära JavaScript-biblioteket med en mil.

NodeJS-om du föredrar backend-system men samtidigt älskar JavaScript, kolla in den här webbplatsen.

AngularJS-kombinera de formidabla krafter HTML och Java genom att använda detta ramverk och få några dynamiska vyer.

var noga med att kolla in följande resurser innan du börjar använda JavaScript för att animera element på din webbplats medan du förmodligen också kan använda CSS3:

CSS3 – animationer-än en gång vänder vi oss till w3schools för våra CSS3-handledning. Läs demos som finns på denna webbplats för att förstå alla de olika CSS3-animationerna.

Mozilla Animations-ytterligare dina kunskaper om CSS3 animationer med de nio prover och exempel som Mozilla har gett.

Steg fyra: Bygg WordPress-temafilerna

nu när du framgångsrikt har konverterat dina PSD-mönster till HTML5, CSS3 och JavaScript är det dags för den stora konverteringen: förvandla din HTML till ett fullständigt responsivt WordPress-tema. Kom ihåg att följa WordPress-mallhierarkin för att se till att dina teman faktiskt fungerar. Den allmänna ordningen är att börja med header.php, följt av index.php, sidfot.php och stil.css. Du kommer att använda dessa fyra mallar på alla sidor på din webbplats.

när du har en fullständig förståelse för hur mallhierarkin fungerar måste du börja bryta HTML-filerna i bitar. Du kan börja med att skapa en mapp i mappen teman som du hittar i din WordPress-installation, vars adress är /wp-content/themes/. Skapa filhuvudet.php i den här mappen. Den här filen är vad du ska använda för att deklarera dokumenttypen samt alla objekt som hör hemma i sidhuvudet, till exempel metas, Titel, formatmallar, JavaScript och så vidare. När du är klar med detta, skapa sidfot.php och klistra in alla sidfotelement i ditt HTML-dokument. Om designen på din webbplats innehåller ett sidofält, skapa en fil med namnet sidofält.php också och inkludera all relevant kodning i den här filen.

när du har slutfört skapandet av alla delar av din webbplats i dessa filer måste du börja skapa din hemsida. Det finns flera sätt att göra detta. Till exempel kan du helt enkelt skapa index.php, förstasidan.php eller sida-Hem.php, någon av dessa filer kommer att vara lämpliga för vad du försöker göra så det slutliga valet är helt upp till dig. Nu när du är klar med att skapa en av de tre mallarna för din hemsida, inkludera alla .php-filer du just har gjort. Nu när du har din topp, botten och sida redo, klistra in HTML5 på din hemsida däremellan och du har framgångsrikt skapat hemsidan för din webbplats. Följ bara samma process för alla sidor på din webbplats och du kan gå vidare till nästa och sista steg.

Steg fem: använd WordPress inbyggda taggar och funktioner

när du väl har skapat temat för din WordPress måste du nu se till att du kan redigera din webbplats inifrån adminpanelen istället för att behöva ändra temafilen varje gång du vill ändra något. Kanske är de mest populära WordPress-funktionerna för att göra allt ditt innehåll redigerbart via adminpanelen genom att lägga till funktionen add_meta_box. Helt enkelt ställa in meta lådor för innehållet på varje sida och du är bra att gå!

att skapa kärnfunktionerna på din webbplats är ganska enkelt med WordPress. Till exempel kan visning av information som länkar på dina webbplatser enkelt göras med WordPress-funktioner. Kontrollera bara funktionsreferenssidan för WordPress för att se alla tillgängliga funktioner.

på samma sätt erbjuder WordPress också malltaggar. Dessa är i huvudsak funktioner själva, med den enda skillnaden att de skapades specifikt för specifika teman som gör dem mer effektiva.

WordPress-menyn

när du loggar in på adminpanelen på din webbplats vill du förmodligen ändra menyalternativen i menyer och utseende så att du inte behöver redigera den med adminpanelen. Det här är ganska enkelt tack vare det faktum att du använder WordPress, allt du behöver göra är att ersätta menylistan för mallfilen med en rad PHP, varefter du helt enkelt kan börja lägga till menyalternativ.

det kan finnas situationer där en inre sida har en annan sidhuvud eller sidfot. För att lägga till den här funktionen på din webbplats behöver du bara lägga till villkorliga taggar. Dessa låter dig använda annan kod för valda sidor eller inlägg.

när din WordPress-webbplats är igång på din utvecklingsserver är allt du behöver göra att få den på din live-server. Här är en artikel där det förklaras i detalj hur du flyttar en WordPress-webbplats steg för steg. Följ bara alla de sex stegen som tillhandahålls och du kommer att ha din webbplats igång på en live-server på nolltid.