Denne artikkelen har blitt bidratt av PSDtoWP.net

Kanskje det ville være best å starte her med hvorfor. Omtrent en fjerdedel av alle nettsteder kjører På WordPress, online blogging plattform. Dette gjør det til et av de mest populære open source content management-systemene på planeten.

de aller fleste webdesignere bruker Fortsatt Photoshop til å designe et nettsted, selv om det finnes alternativer. Dette betyr at mange webdesignere må finne måter å konvertere PSD-filer til et responsivt WordPress-tema!

nå kan dette virke ganske greit. Det er imidlertid ikke akkurat lett å konvertere EN PSD-fil til Et WordPress-nettsted. Det krever mye Mer enn Bare Photoshop ferdigheter! FOR å gjøre PSD-filen til et responsivt tema som Kan brukes På WordPress, trenger du kunnskap om frontend webutviklingsspråk som HTML, CSS og JavaScript, samt backend programmeringsspråket PHP.

Nå som hvorfor er ute av veien, er det på tide å gå videre til hvordan! Selv om hvordan absolutt ikke er lett, kan det fortsatt oppnås i fem ganske enkle å forstå trinn!

Trinn Ett: Opprett webdesign

Hopp Til trinn to hvis du allerede har designet nettstedet ditt.

det er mye mer å lage et nettsted enn bare å lage en logo og sette inn en meny, et sidebar, en bunntekst og innholdet sammen. Brikkene i dette puslespillet må opprettes i første omgang, og prosessen med denne etableringen er noe som ikke alle kan gjøre så lett.

webdesign du oppretter må være den perfekte balansen mellom form og funksjon, en webdesign som henvender til en god brukeropplevelse.

Forskning

for å skape et webdesign som oppfyller kriteriene for utseende og funksjonalitet, må du gjøre noen seriøs forskning. Først av alt, hvem er målgruppen din og hva ønsker målgruppen din? Dette er åpenbart viktige aspekter ved din forskning.

Lære Av Andre

Et annet aspekt av webdesign som du trenger å forskning er teknikker konkurrentene har brukt. Disse konkurrentene er mest sannsynlig bedre etablert enn du er, så du vil sikkert kunne lære mye av designet de bruker! Når du har gjort din forskning og du har en god ide om hvordan nettstedet ditt skal se ut, bør du begynne å tenke på funksjonalitet. Hvilke funksjoner vil du at ditt webdesign skal ha?

Wireframe

når du har alt sortert ut, få det ned på papir. Tegn & skisse hva du ser for deg at nettstedet ditt skal se ut for å få et visuelt hjelpemiddel når du beveger deg fremover!

Design

Når du er ferdig med å lage de fysiske skissene / wireframes, er du klar til å hoppe inn i kapteinens stol og brenne Opp Photoshop. Det første du må gjøre før du begynner for alvor er å sørge for at du bruker en kolonne basert rutenett Som XXgrid. Dette vil gjøre ditt design ser veldig ryddig og justert! Dette er ikke bare for estetikk. Ved hjelp av en kolonne basert rutenett for å lage en justert design vil gjøre det enklere for deg eller din front end utvikler som skal utvikle HTML og CSS for å lage en optimalisert, responsive layout for tabletter og smarttelefoner!

før du går videre til neste trinn, husk at DU må holde PSD-designfilene dine organisert i lag, dvs. hver seksjon skal ha sin egen mappe med tilhørende titler!

Trinn To: Skjær PSD

Når du har opprettet et webdesign som du er helt fornøyd med, er det knase tid. I utgangspunktet hva du trenger å gjøre nå ER PSD Til WordPress prosessen.

Nettsteder i disse dager er alle bygget MED HTML5 OG CSS3. Disse er langt bedre ENN XHTML OG CSS2, fordi i stedet for alle knapper, grenser, gradienter, avrundede kanter og alle de andre funksjonene som opprettes ved hjelp av bilder, blir de opprettet som funksjonelle deler AV CSS3-kodingen. Derfor vil kutting AV PSD-filen i utgangspunktet bare innebære å kutte bakgrunnsbildene fra PSD!

FOR å gjøre dette må du åpne filen i Enten Photoshop eller Illustrator, avhengig av hvilken programvare du brukte til å lage designet. Hvis designeren hadde gjort jobben sin riktig, ville han ha laget en velstrukturert designfil med mapper og lag, noe som gjør det enkelt for deg å finne det du trenger. Studere webdesign og se etter bilder som du tror vil trenge slicing. Dette er i utgangspunktet noen bilder som ikke kan opprettes VED HJELP AV CSS3, vanligvis logoen og bakgrunnsbilder. Les hvordan du lager bilder her.

når du erstatter disse bakgrunnsbildene ved HJELP AV CSS, vil du se en enorm nedgang i lastetider. Dette vil tiltrekke mange brukere til nettstedet ditt, fordi den gjennomsnittlige internettbrukeren ikke kan stå lenge lastetider!

Trinn Tre: Lag HTML, CSS3 og JavaScript (jQuery)

Når du har skåret bildene fra PSD-filen, er DET på tide å lage HTML5 OG CSS3. Det første du må gjøre er å opprette en ny mappe der du oppretter indeks.html og stil.css. Lag også en undermappe kalt bilder eller img (avhengig av hva du foretrekker) og plasser bildene du har hentet ut i denne mappen. Opprett en annen mappe som heter JavaScript eller js. Dette er for senere, slik at du kan lagre Alle JavaScript og jQuery filer i et godt merket sted. Når du er ferdig med å lage alle mappene, filene og undermappene, er det på tide å begynne å bygge HTML5 OG CSS3.

HTML5

HTML5 er et relativt nytt språk som besitter BÅDE XHTML samt HTML-funksjonalitet. Dette språket brukes i hovedsak til å lage dokumentets grunnleggende struktur, samt utnevne alle elementene på siden. HTML5 har separate elementer for de ulike delene av nettstedet ditt, for eksempel < header >,< nav >, < side > , samt < bunntekst> elementer (og mye mer), som gjør at du kan lage et pent, godt strukturert dokument som er universelt lesbart. Her er noen gode ressurser som du kan bruke til å lære ELLER oppdatere minnet OM HTML5.

HTML Resources

W3Schools er nummer topp nettsted for å lære grunnleggende HTML5. Hvert element og egenskap av dette språket er forklart og undervist ved hjelp av demoer, noe som gjør for en enkel erfaring.

Mozilla Developer ‘ S Section-folkene bak Den populære nettleseren Mozilla Firefox har en utviklerseksjon på deres nettside. Du kan bruke denne delen til å lære mye OM HTML5 gjennom veiledningene de har der, enten du er nybegynner eller en avansert koder.

Web Design Tuts – dette nettstedet har mange FORSKJELLIGE HTML5 tutorials, hvorav noen er gratis og noen som er betalt for.

W3 – dette nettstedet er ansvarlig for utviklingen av alle de åpne webstandardene som er opprettet for å sikre levetiden til nettet. HER finner du detaljert INFORMASJON OM HTML5, samt alle de siste utviklingene.

W3 Validator – når DU har fullført HTML5, sette den gjennom denne validator. DET vil fortelle deg OM HTML5 oppfyller w3 open web-standarder!

CSS3

CSS refererer Til Cascading Style Sheets, OG CSS3 er den nyeste versjonen av dette front-end-språket. CSS3 brukes til å ta bare bein av elementene som er opprettet VED HJELP AV HTML5 og form, posisjon og stil dem. Dette lar deg lage en konsekvent webdesign der alle elementene bekrefter med nettstedets overordnede design. Når DU har brukt CSS3, vil DU finne AT HTML5 vil være mye renere og mer godt strukturert, som igjen vil tillate det å laste mye raskere, så vel som tillater det å bli indeksert raskere av søkemotorer. Nedenfor er noen ressurser for å hjelpe deg å lære ELLER friske opp minnet OM CSS3:

CSS Resources

W3 CSS-W3 er på de mest kjente og kjente ressurser FOR css3 tutorials og eksempler PÅ de ulike CSS3 velgere, egenskaper og verdier. Den beste delen om dette er at hver tutorial har en’ prøv det selv ‘ side, som lar deg bruke det du har lært.

Lær CSS3-Mozilla er ikke bare skaperen Av Firefox-nettleseren. Det er også et utmerket sted å bli kjent MED CSS3, samt oppdatere din kunnskap om språket.

CSS Web Design Tuts – dette nettstedet inneholder et helt overflødighetshorn av tutorials som du kan gå gjennom. Noen av disse veiledningene må betales for, men andre er fortsatt helt gratis, og kan lære DEG mye OM css3-velgere, egenskaper og verdier.

W3 CSS – dette nettstedet er et flott sted å holde deg oppdatert med de nyeste css3 nyheter, fordi dette er svært samfunnet som utvikler CSS3 web standarder. Det er også et flott sted å finne ut teknisk informasjon om språket.

CSS Validator – DETTE er validator som du bør kjøre ALLE DINE CSS3 før du gjør nettstedet offentlig. Dette er for å sikre AT CSS3 oppfyller webstandardene satt Av W3!

Responsiv Design

internett har kommet langt siden starten. Dette skyldes delvis adventen av smarttelefoner og tabletter, og spredning av disse typer teknologi i hverdagen. Som et resultat av den enorme populariteten til disse enhetene, ser en betydelig del av de totale brukerne av internett på nettsteder på betydelig mindre skjermer enn den gjennomsnittlige bærbare datamaskinen. Dess, de samhandler med disse nettstedene ikke ved hjelp av pekere, ved hjelp av fingrene. Derfor må det moderne nettstedet kunne tilpasse seg de ulike typer enheter som er der ute. Det er her responsiv design kommer inn. Ved hjelp av responsiv design kan designere lage et nettsted som kan justere hele oppsettet basert på typen enhet den blir sett på.

Det er en god ide å bestemme på forhånd om du vil at ditt nye nettsted skal ha responsiv design eller ikke før DU begynner å bygge HTML5 og CSS3. Dette skyldes at når du koder den responsive delen av nettstedets design, må du jobbe MED css3 media queries. Ved hjelp av disse mediespørringene kan du definere forskjellige teksturer og stiler for forskjellige skjermoppløsninger.

Husk aldri å bruke faste bredder, bruk prosenter i stedet. Dette kalles flytende eller flytende layoutdesign, som lar deg optimalisere nettstedet ditt, ikke bare for oppløsningene som er definert i medieforespørslene dine, men for alle oppløsningene mellom dem også. Dette er en stor fordel for nettstedet ditt siden smarttelefonene, nettbrettene og datamaskinene som kommer ut i dag, har så mange forskjellige størrelser, og derfor oppløsninger, og du må imøtekomme dem alle.

Responsive Resources

Her er noen gode ressurser du kan bruke for å oppdatere minnet ditt eller lære om responsiv design og all relatert koding:

Google Responsive – Dette er En flott ressurs for de av dere som er nye til responsiv design ved HJELP AV css3 media spørringer.

Prinsipper For Responsivt Webdesign-Les denne artikkelen for å forstå forskjellen mellom responsivt webdesign og adaptivt webdesign. Den har noen gode eksempler for å hjelpe deg å forstå ting i detalj!

Fluid Grids – Du kan bruke Denne utmerkede artikkelen Av Ethan Marcotte for å lære om fluid grids og hvordan du bruker dem. Prøv å bruke eksemplene som er gitt i artikkelen selv!

Responsive front-end framework

hvis DU ikke er villig til å lære tauene så langt SOM css3 media spørringer er bekymret, eller kanskje du rett og slett ikke har nok tid til det, prøv å bruke en responsiv front-end rammeverk i stedet. Hvis du bestemmer deg for å bruke et rutenett rammeverk, husk at du må bruke det samme rammeverket TIL CSS samt HTML, siden du skal jobbe med forhåndsdefinerte klasser og Ider for å koble rammeverket opprettet VED HJELP AV HTML5 TIL CSS3. Ved hjelp av en responsiv front-end rammeverk vil sikkert tillate deg å utvikle ditt nettsted mye raskere, men på nedsiden vil det også tregere nettstedets lastetider på grunn av den store mengden kode som du ikke skal bruke.

Noen av de mest populære front-end rammer er:

Bootstrap – Dette responsive rammeverket er ganske enkelt å implementere, og en ekstra bonus er at DEN bruker EN CDN for å redusere virkningen av nettstedets lastehastigheter også.

LESS – DETTE er en adapttive CSS grid framework snarere enn en responsiv en som lar deg lage en adaptiv layout.

Foundation-Dette Er en front-end grid rammeverk med en filstørrelse som er helt liten for å minimere virkningen det vil ha på nettstedets lasting hastighet.

JavaScript (vs CSS3)

JavaScript Er et av de mest populære programmeringsspråkene i verden for tiden. Dette skyldes at det støttes av et bredt spekter av nettlesere, og også på grunn av at det inneholder biblioteker som jQuery og backend-systemer som Node.js samt rammer som AngularJS. Det er ikke rart at så mange utviklere sverger til dette programmeringsspråket! Men I nyere Tid Har JavaScript begynt å bli foreldet, da MANGE av funksjonene har begynt Å bli overtatt AV CSS3 animasjoner, som lar deg animere overganger mellom stiler.

Javascript Resources

W3 – Dette er et utmerket sted å starte Hvis Du er ny På JavaScript, takket være den utmerkede opplæringen som er tilgjengelig på denne nettsiden.

jQuery – når du har litt erfaring Med JavaScript, kan du begynne å bruke biblioteker som dette for å programmere mye lettere. jQuery er Det mest populære JavaScript-biblioteket med en kilometer.

NodeJS – hvis du foretrekker backend-systemer, men samtidig elsker JavaScript, sjekk ut denne nettsiden.

AngularJS-Kombiner de formidable kreftene I HTML og Java ved å bruke dette rammeverket og få noen dynamiske visninger.

husk å sjekke ut følgende ressurser før du begynner å bruke JavaScript for å animere elementer på nettstedet ditt, mens du sannsynligvis også kan bruke CSS3:

CSS3 Animasjoner-igjen vender vi oss til w3schools for VÅRE css3-opplæringsprogrammer. Lese demoer tilgjengelig på denne nettsiden for å forstå alle DE forskjellige CSS3 animasjoner.

Mozilla Animasjoner-Videreutvikle din kunnskap OM CSS3 animasjoner med ni eksempler Og eksempler Som Mozilla har gitt.

Trinn Fire: Bygg WordPress tema filer

Nå som du har konvertert PSD design I HTML5, CSS3 OG JavaScript, er det tid for den store konvertering: snu HTML til en full responsive WordPress tema. Husk å følge WordPress-malhierarkiet for å sikre at temaene dine faktisk fungerer. Den generelle rekkefølgen er å starte med header.php, etterfulgt av indeks.php, footer.php og stil.css. Du skal bruke disse fire maler på alle sidene på nettstedet ditt.

Når du har en full forståelse av hvordan malhierarkiet fungerer, må du begynne å bryte HTML-filene i stykker. Du kan starte med å lage en mappe i themes-mappen som du finner i WordPress-installasjonen, adressen som er / wp-content / themes/. Opprett filhodet.php i denne mappen. Denne filen er hva du vil bruke til å erklære dokumenttype, samt alle elementene som hører hjemme i overskriften på siden din, for eksempel metas, tittel, stilark, javascripts og så videre. Når du er ferdig med dette, opprett bunntekst.php og lim inn alle bunntekstelementene i HTML-dokumentet ditt. Hvis utformingen av nettstedet ditt inneholder et sidepanel, oppretter du en fil med navnet sidepanel.php også, og inkluderer alle relevante koding i denne filen.

Når du har fullført opprettelsen av alle elementene på nettstedet ditt i disse filene, må du begynne å lage hjemmesiden din. Det er flere måter du kan gjøre dette på. For eksempel kan du bare lage indeks.php, forsiden.php eller side-hjem.php, noen av disse filene vil være egnet for det du prøver å gjøre, så det endelige valget er helt opp til deg. Nå som du er ferdig med å lage en av de tre malene for hjemmesiden din, inkluderer alle .php-filer du nettopp har laget. Nå som du har din topp, bunn og side klar, lim INN HTML5 på hjemmesiden din i mellom, og du vil ha opprettet hjemmesiden til nettstedet ditt. Bare følg den samme prosessen for alle sidene på nettstedet ditt, og du kan gå videre til neste og siste trinn.

Trinn Fem: Bruk WordPress innebygde koder og funksjoner

Når du har opprettet temaet for WordPress, må du nå sørge for at du kan redigere nettstedet ditt fra administrasjonspanelet i stedet for å måtte endre temafilen hver gang du vil endre noe. Muligens De mest populære WordPress-funksjonene for å gjøre alt innholdet ditt redigerbart via administrasjonspanelet, er ved å legge til add_meta_box-funksjonen. Bare sett opp meta bokser for innholdet på hver side, og du er god til å gå!

Å Lage kjernefunksjonene på nettstedet ditt er ganske enkelt å bruke WordPress. For eksempel kan visning av informasjon som lenker på nettstedene dine gjøres enkelt ved Hjelp Av WordPress-funksjoner. Bare sjekk funksjonsreferansesiden For WordPress for å se alle tilgjengelige funksjoner.

På Samme Måte Tilbyr WordPress også malkoder. Disse er i hovedsak funksjoner selv, med den eneste forskjellen er at de ble opprettet spesielt for bestemte temaer som gjør dem mer effektive.

WordPress-menyen

når du logger deg på administrasjonspanelet på nettstedet ditt, vil du sannsynligvis endre menyelementene i Menyer og Utseende slik at du ikke trenger å redigere den ved hjelp av administrasjonspanelet. Dette er ganske enkelt takket være Det Faktum at Du bruker WordPress, alt du trenger å gjøre er å erstatte menylisten over malfilen med EN LINJE MED PHP, hvoretter du bare kan begynne å legge til menyelementer.

det kan være situasjoner der en indre side har en annen topptekst eller bunntekst. For å legge til denne funksjonaliteten på nettstedet ditt, trenger du bare å legge til betingede koder. Disse lar deg bruke annen kode for utvalgte sider eller innlegg.

Når WordPress-nettstedet ditt er oppe og kjører på utviklingsserveren din, er alt du trenger å gjøre, å få det på din live-server. Her er en artikkel der det forklares i detalj hvordan du flytter Et WordPress-nettsted, trinnvis. Bare følg alle de seks trinnene og du vil ha ditt nettsted oppe og går på en live server på et blunk.