Från Photoshop till WordPress
Skrivet i Design, Wordpress - Kommentera
Det var bara ett år sen som WordPress kom in i mitt liv. Allt positivt som jag läste på forum och diverse nätverk fick mig att beställa boken WordPress Complete och börja lära mig att skapa teman till ett av marknadens mest flexibla verktyg. WordPress är utmärkt för dig som är designer eller utvecklare och vill ha möjligheten till flexibilitet vad gäller din hemsida.
När man skapar ett tema till WordPress så ser stegen ut som följande:
Photoshop –> XHTML/CSS –> WordPress.
Hur ser då varje delmoment ut? Eller ännu viktigare, hur ser självaste överlappningen från Photoshop till kod till WordPress ut?
Photoshop
Hur hemsidan ska se ut designas fram i Photoshop. Här bestäms hur stor hemsidans sidhuvud ska vara, var menyn ska ligga och var innehållet ska finnas. Lämpliga stödlinjer placeras ut för att marginaler ska stämma överallt. Stödlinjer är även bra när jag i nästa steg ska börja skära ut mina bilder.
Photoshop till XHTML/CSS
När hemsidans design är färdig så är det dags att skära ut bilderna så att jag kan koda de i xhtml/css. Tack vare mina stödlinjer så kan jag snabbt och enkelt ta mitt beskärningsverktyg och börja klippa. Processen går rätt så snabbt och jag sparar alla mina bilder med lämpliga namn under en genomtänkt mappstruktur.
XHTML/CSS
Med alla bilder utskurna är det dags att börja koda i xhtml/css. Mitt primära verktyg är xHTML-Kit. Jag kodar allt från grunden med hjälp av min preset.css. Kodningen i html och css går hand i hand, alltså att jag hoppar från html till css fram och tillbaka.
Som en förberedande åtgärd kodar jag precis allt som ska finnas med på min WordPress sida innan jag går till nästa steg. Det finns de som enbart kodar grunden i html och css för att sedan gå över till WordPress och implementera alla funktioner och därfter återgå till CSS för att styla elementen som WordPress skriver ut.
Så gör inte jag. Istället så stylar jag även all html-kod som WordPress skriver ut innan jag implementerar funktionerna som gör sidan till en faktisk WordPress-sajt. Om jag inte vet exakt hur en viss funktion skriver ut html-koden så tar jag reda på det för att sedan styla det.
Att arbeta på det viset tycker jag är mycket smidigare och betydligt mer avlastande för hjärnan. Man hoppar inte fram och tillbaka utan sköter ett steg i taget.
XHTML/CSS till WordPress
Då har jag fram tills nu designat mitt wordpresstema, klippt ut alla bilder och kodat allt i xhtml/css. Nu är det dags att göra sidan till en hemsida gjord på WordPress.
Eftersom jag redan har stylat precis allting precis som det ska se ut, även funktionerna som skrivs ut dynamiskt så är det bara att dela upp sidan i header.php, footer.php, sidebar.php och index.php. Med detta gjort så börjar jag klistra in alla funktioner.
Exakt vilka funktioner som klistras in beror på hur mitt tema ser ut. De mest primära är ju loopen för inläggen och funktionerna för kategorier, datum och kommentarer. Det är vad mina wordpressteman brukar visa.
Inte mycket mer därefter, det är bara att ladda upp temat och börja använda det!
Fler inlägg om Design och WordPress
Vill du veta hur jag jobbar?
Denna hemsida är självklart gjort i Wordpress!
Pingback: Designprinciper - Linjering | Grafix Studio - webbdesign och grafik
Pingback: 5 frågor en webbdesigner ska ställa | Grafix Studio - webbdesign och grafik
Pingback: Ultimata Wordpress-plugins för ny blogg | Grafix Studio - webbdesign och grafik
Pingback: Framtidsvisioner – vart är webben påväg? | Grafix Studio - webbdesign och grafik
Pingback: IE6 – Du är snart bortglömd | Grafix Studio - webbdesign och grafik
Pingback: 10px ovanför, 10px undertill…eller? | Grafix Studio - webbdesign och grafik
Pingback: Wordpress blir allt populärare | Grafix Studio - webbdesign och grafik
Pingback: Fakturera med Wordpress | Grafix Studio - webbdesigner och grafiker
Pingback: Att förstå Wordpress som ett CMS | Grafix Studio - webbdesigner och grafiker