dit artikel is bijgedragen door PSDtoWP.net

misschien is het het beste om hier te beginnen met het waarom. Ongeveer een kwart van alle websites draait op WordPress, het online blogging platform. Dit maakt het veruit een van de meest populaire open source content management systemen op de planeet.De overgrote meerderheid van de webdesigners gebruikt nog steeds Photoshop om een website te ontwerpen, hoewel er alternatieven zijn. Dit betekent dat veel website ontwerpers nodig hebben om manieren te vinden over hoe je PSD-bestanden te converteren naar een responsieve WordPress thema!

nu lijkt dit vrij eenvoudig. Echter, het omzetten van een PSD naar een WordPress website is niet bepaald eenvoudig. Het vereist veel meer dan alleen Photoshop vaardigheden! Om uw PSD te zetten in een responsieve thema dat kan worden gebruikt op WordPress, moet u kennis over front-end web development talen zoals HTML, CSS en JavaScript, evenals de backend programmeertaal PHP.

nu het waarom uit de weg is, is het tijd om verder te gaan met het hoe! Hoewel het hoe zeker is niet gemakkelijk, het kan nog steeds worden bereikt in vijf vrij eenvoudig te begrijpen stappen!

stap één: Maak het webdesign

Ga naar stap twee Als u uw site al hebt ontworpen.

er is veel meer aan het maken van een website dan alleen het creëren van een logo en het plaatsen van een menu, een zijbalk, een voettekst en de inhoud samen. De stukjes in deze puzzel MOETEN in de eerste plaats worden gemaakt, en het proces van deze creatie is iets dat niet iedereen zo gemakkelijk kan doen.

het webdesign dat u maakt moet die perfecte balans tussen vorm en functie zijn, een webdesign dat geschikt is voor een geweldige gebruikerservaring.

Research

om een webdesign te maken dat voldoet aan de criteria van uiterlijk en functionaliteit, moet u serieus onderzoek doen. Allereerst, wie is je doelgroep en wat wil je doelgroep? Dit zijn uiteraard belangrijke aspecten van uw onderzoek.

leer van anderen

een ander aspect van webdesign dat u moet onderzoeken zijn de technieken die uw concurrenten hebben toegepast. Deze concurrenten zijn waarschijnlijk beter gevestigd dan u bent, dus je zou zeker in staat zijn om veel te leren van het ontwerp dat ze gebruiken! Zodra je je onderzoek hebt gedaan en je hebt een goed idee over hoe uw website eruit moet zien, moet je beginnen na te denken over functionaliteit. Welke functies wilt u uw web design te bezitten?

Wireframe

zodra u alles hebt uitgezocht, haal het op papier. Teken & schets hoe u uw site ziet om een visueel hulpmiddel te hebben als u vooruit gaat!

ontwerp

zodra u klaar bent met het maken van de fysieke schetsen / wireframes, bent u klaar om in de stoel van de kapitein te springen en Photoshop te starten. Het eerste wat je moet doen voordat je serieus begint, is ervoor zorgen dat je een kolomgebaseerd raster gebruikt zoals XXgrid. Hierdoor ziet uw ontwerp er echt netjes en uitgelijnd uit! Dit is niet alleen voor esthetiek. Met behulp van een kolom gebaseerd raster om een uitgelijnde ontwerp te maken zal het gemakkelijker maken voor u of uw front-end ontwikkelaar die de HTML en CSS zal ontwikkelen om een geoptimaliseerde, responsieve lay-out voor tablets en smartphones te creëren!

voordat u verder gaat met de volgende stap, onthoud dan dat u uw PSD-ontwerpbestanden georganiseerd moet houden in lagen, dat wil zeggen dat elke sectie zijn eigen map met bijbehorende titels moet hebben!

Stap Twee: Snijd de PSD

zodra u een webdesign dat u volledig tevreden bent met hebt gemaakt, het is crunch tijd. Eigenlijk wat je nu moet doen is de PSD naar WordPress proces.

Websites worden tegenwoordig allemaal gebouwd met HTML5 en CSS3. Deze zijn veel beter dan XHTML en CSS2, omdat in plaats van alle knoppen, randen, gradiënten, afgeronde randen en alle andere functies worden gemaakt met behulp van afbeeldingen, ze zijn gemaakt als functionele onderdelen van de CSS3-codering. Vandaar dat het snijden van het PSD-bestand zal in principe nu alleen betrekking hebben op het snijden van de achtergrondafbeeldingen van de PSD!

om dit te doen, moet u het bestand openen in Photoshop of Illustrator, afhankelijk van welke software u hebt gebruikt om het ontwerp te maken. Als de ontwerper zijn werk goed had gedaan, zou hij een goed gestructureerd ontwerpbestand met mappen en lagen hebben gemaakt, waardoor het gemakkelijk voor u is om te vinden wat u nodig hebt. Bestudeer het webdesign en zoek naar afbeeldingen waarvan je denkt dat ze gesneden moeten worden. Dit zijn in principe alle afbeeldingen die niet kunnen worden gemaakt met behulp van CSS3, meestal het logo en achtergrondafbeeldingen. Lees hier hoe je afbeeldingen kunt snijden.

zodra u deze achtergrondafbeeldingen met behulp van CSS vervangt, zult u een enorme daling in laadtijden zien. Dit zou veel gebruikers naar uw site trekken, omdat de gemiddelde internetgebruiker geen lange laadtijden kan verdragen!

Stap drie: Maak de HTML, CSS3 en JavaScript (jQuery)

zodra u de afbeeldingen van uw PSD hebt gesneden, is het tijd om de HTML5 en CSS3 te maken. Het eerste wat je moet doen is een nieuwe map maken waarin je index maakt.html en stijl.css. Maak ook een submap met de naam images of img (welke u wilt) en plaats de afbeeldingen die u hebt uitgepakt in deze map. Maak een andere map genaamd JavaScript of js. Dit is voor later, dus u kunt alle JavaScript en jQuery bestanden op te slaan in een goed gemarkeerde locatie. Zodra u klaar bent met het maken van alle mappen, bestanden en submappen, is het tijd om te beginnen met het bouwen van de HTML5 en CSS3.

HTML5

HTML5 is een relatief nieuwe taal die zowel XHTML als HTML-functionaliteiten bezit. Deze taal wordt hoofdzakelijk gebruikt om de basisstructuur van het document te creëren, evenals alle elementen van de pagina aan te wijzen. HTML5 heeft afzonderlijke elementen voor de verschillende secties van uw website, zoals de <header>, de <nav>, de <terzijde>, evenals de <voettekst> elementen (en nog veel meer), die u in staat stellen om een nette, goed gestructureerde document te maken dat universeel leesbaar is. Hier zijn een aantal uitstekende middelen die u kunt gebruiken om te leren of uw geheugen op te frissen over HTML5.

HTML Resources

W3Schools is de nummer top website voor het leren van de basis van HTML5. Elk element en attribuut van deze taal wordt uitgelegd en onderwezen met behulp van demo ‘ s, waardoor een eenvoudige leerervaring.

Mozilla Ontwikkelaarssectie-de mensen achter de populaire browser Mozilla Firefox hebben een ontwikkelaarssectie op hun website. U kunt deze sectie gebruiken om veel over HTML5 te leren door middel van de tutorials die ze daar hebben, of u nu een beginner of een gevorderde coder bent.

Web Design Tuts-deze website heeft veel verschillende HTML5 tutorials, waarvan sommige gratis zijn en waarvan sommige worden betaald.

W3-deze website is verantwoordelijk voor de ontwikkeling van alle open webstandaarden die zijn gemaakt om de levensduur van het web te garanderen. Hier vindt u uitgebreide informatie over HTML5 en al zijn nieuwste ontwikkelingen.

W3 Validator – zodra u uw HTML5 hebt voltooid, zet het door deze validator. Het zal u vertellen of uw HTML5 voldoet aan de W3 open web standaarden!

CSS3

CSS verwijst naar Cascading Style Sheets, en CSS3 is de nieuwste versie van deze front-end taal. CSS3 wordt gebruikt om de kale botten van de elementen gemaakt met behulp van HTML5 en vorm, positie en stijl te nemen. Dit stelt u in staat om een consistent webdesign te creëren waarin alle elementen bevestigen met het algemene ontwerp van de site. Zodra u CSS3 hebt gebruikt, zult u merken dat uw HTML5 een stuk schoner en meer goed gestructureerd zal zijn, die op zijn beurt zal het mogelijk maken om een stuk sneller te laden, evenals waardoor het sneller worden geïndexeerd door zoekmachines. Hieronder vindt u enkele bronnen om u te helpen uw geheugen over CSS3 te leren of te vernieuwen:

CSS – Bronnen

W3 CSS-W3 is op de meest bekende en gerenommeerde bronnen voor CSS3-tutorials en voorbeelden van de verschillende CSS3-selectors, eigenschappen en waarden. Het beste deel over dit is dat elke tutorial heeft een ‘probeer het zelf’ pagina, waarmee u toepassen wat je hebt geleerd.

leer CSS3-Mozilla is niet alleen de maker van de Firefox-browser. Het is ook een uitstekende plek om jezelf vertrouwd te maken met CSS3, evenals uw kennis over de taal bij te werken.

CSS Web Design Tuts-deze website bevat een hele overvloed aan tutorials die u kunt doorlopen. Sommige van deze tutorials moeten worden betaald voor, maar anderen zijn nog steeds volledig gratis, en kan je veel leren over CSS3 selectors, eigenschappen en waarden.

W3 CSS-deze website is een geweldige plek om op de hoogte te blijven van het laatste CSS3 nieuws, omdat dit de Gemeenschap is die de CSS3 webstandaarden ontwikkelt. Het is ook een geweldige plek om technische informatie over de taal te vinden.

CSS Validator-Dit is de validator waarmee u al uw CSS3 moet uitvoeren voordat u de website openbaar maakt. Dit is om ervoor te zorgen dat uw CSS3 voldoet aan de webstandaarden van W3!

Responsive Design

het internet heeft een lange weg afgelegd sinds zijn oprichting. Dit is deels te wijten aan de komst van smartphones en tablets, en de proliferatie van dit soort technologie in ons dagelijks leven. Als gevolg van de immense populariteit van deze apparaten, een aanzienlijk deel van de totale gebruikers van het internet kijken naar websites op aanzienlijk kleinere schermen dan de gemiddelde laptop. Bovendien, ze communiceren met deze websites niet met behulp van cursors, met behulp van hun vingers. Vandaar, de moderne website moet in staat zijn om zich aan te passen aan de verschillende soorten apparaten die er zijn. Dit is waar responsive design komt in. Met behulp van responsive design, ontwerpers zijn in staat om een website die de gehele lay-out kan aanpassen op basis van het type apparaat wordt bekeken op te maken.

het is een goed idee om vooraf te beslissen of u wilt dat uw nieuwe website te voorzien van responsive design of niet voordat u begint met het bouwen van de HTML5 en CSS3. Dit komt omdat wanneer u het responsieve deel van het ontwerp van uw website code, je nodig hebt om te werken met CSS3 media queries. Met behulp van deze media queries, kunt u verschillende texturen en stijlen definiëren voor verschillende schermresoluties.

vergeet niet om nooit vaste breedtes te gebruiken, gebruik in plaats daarvan percentages. Dit wordt aangeduid als fluid of liquid lay-out design, waarmee u uw website te optimaliseren, niet alleen voor de resoluties gedefinieerd binnen uw media queries, maar voor alle van de resoluties tussen hen ook. Dit is een enorm voordeel voor uw website, omdat de smartphones, tablets en computers die vandaag de dag uitkomen zo veel verschillende maten hebben, en daarom resoluties, en je moet ze allemaal tegemoet komen.

Responsive Resources

hier zijn enkele geweldige resources die u kunt gebruiken om uw geheugen op te frissen of om meer te weten te komen over responsive design en alle gerelateerde codering:

Google Responsive – Dit is een geweldige resource voor degenen onder u die nieuw zijn in responsive design met behulp van CSS3 media queries.

Principles of Responsive Webdesign-lees dit artikel om het verschil te begrijpen tussen responsive webdesign en adaptive webdesign. Het heeft een aantal grote voorbeelden om u te helpen dingen in detail te begrijpen!

Fluid Grids-u kunt dit uitstekende artikel van Ethan Marcotte gebruiken om meer te leren over fluid grids en hoe ze te gebruiken. Probeer zelf de voorbeelden in het artikel te gebruiken!

Responsive front-end framework

als je niet bereid bent om de touwen te leren voor zover het CSS3 media queries betreft, of misschien heb je er gewoon niet genoeg tijd voor, probeer dan een responsive front-end framework te gebruiken. Als u besluit om een raster framework te gebruiken, houd er dan rekening mee dat u hetzelfde framework moet toepassen op CSS en de HTML, omdat u met vooraf gedefinieerde klassen en ID ‘ s werkt om het framework dat is gemaakt met HTML5 te verbinden met CSS3. Met behulp van een responsieve front-end framework zal zeker kunt u uw website te ontwikkelen een stuk sneller, maar aan de keerzijde zal het ook vertragen laadtijden van uw website als gevolg van de grote hoeveelheid code die u niet zult gebruiken.

enkele van de meest populaire front-end frameworks zijn:

Bootstrap-dit responsieve framework is vrij eenvoudig te implementeren, en een toegevoegde bonus is dat het een CDN gebruikt om de impact van de laadsnelheden van uw website te verminderen.

minder-Dit is een adaptief CSS-rasterframework in plaats van een responsief framework waarmee u een adaptieve lay-out kunt maken.

Foundation-dit is een front-end raster framework met een Bestandsgrootte die absoluut klein is om de impact die het zal hebben op de laadsnelheid van uw website te minimaliseren.

JavaScript (vs CSS3)

JavaScript is momenteel een van de populairste programmeertalen ter wereld. Dit is te wijten aan het feit dat het wordt ondersteund door een breed scala van browsers en ook te wijten aan het feit dat het bibliotheken zoals jQuery, en backend systemen zoals Node bevat.js evenals frameworks zoals AngularJS. Het is geen wonder dat zoveel ontwikkelaars zweren bij deze programmeertaal! Echter, in de afgelopen tijd JavaScript is begonnen te verouderen, omdat veel van zijn functies zijn begonnen te worden overgenomen door CSS3 animaties, die u toelaten om overgangen tussen stijlen animeren.

Javascript Resources

W3-Dit is een uitstekende plek om te beginnen als u nieuw bent in JavaScript, dankzij de uitstekende tutorial die beschikbaar is op deze website.

jQuery-zodra u enige ervaring met JavaScript hebt, kunt u beginnen met het gebruik van bibliotheken zoals deze om een stuk gemakkelijker te programmeren. jQuery is de meest populaire JavaScript-bibliotheek door een mijl.

NodeJS – als u de voorkeur geeft aan backend-systemen, maar tegelijkertijd van JavaScript houdt, kijk dan op deze website.

AngularJS-Combineer de formidabele krachten van HTML en Java met behulp van dit framework en krijg een aantal dynamische weergaven.

controleer de volgende bronnen voordat u JavaScript gaat gebruiken om elementen op uw website te animeren, terwijl u waarschijnlijk ook CSS3 kunt gebruiken:

CSS3 animaties – nogmaals wenden we ons tot w3schools voor onze CSS3 tutorials. Bekijk de demo ‘ s die beschikbaar zijn op deze website om alle verschillende CSS3 animaties te begrijpen.

Mozilla-animaties-vergroot uw kennis van CSS3-animaties met de negen voorbeelden en voorbeelden die Mozilla heeft gegeven.

Stap vier: bouw de WordPress theme-bestanden

Nu u uw PSD-ontwerpen succesvol hebt geconverteerd naar HTML5, CSS3 en JavaScript, is het tijd voor de Grote conversie: uw HTML omzetten in een volledig responsief WordPress thema. Vergeet niet om de WordPress template hiërarchie te volgen om ervoor te zorgen dat uw thema ‘ s daadwerkelijk zal werken. De algemene volgorde is om te beginnen met header.php, gevolgd door index.php, footer.php en stijl.css. U gebruikt deze vier sjablonen op alle pagina ‘ s van uw website.

zodra u volledig begrijpt hoe de sjabloonhiërarchie werkt, moet u beginnen met het breken van de HTML-bestanden in stukjes. U kunt beginnen met het creëren van een map in de thema ‘ s map die u kunt vinden in uw WordPress installatie, het adres voor die is /wp-content/themes/. Maak de bestandsheader aan.php in deze map. Dit bestand is wat u zult gebruiken om het documenttype te declareren, evenals alle items die in de koptekst van uw pagina horen, zoals de meta ‘ s, titel, stylesheets, javascripts en ga zo maar door. Zodra u klaar bent met dit, maak voettekst.php en plak alle van de voettekst elementen in uw HTML-document. Als het ontwerp van uw website bevat een sidebar, Maak een bestand met de naam sidebar.php ook en omvatten alle relevante codering in dit bestand.

zodra u alle elementen van uw website in deze bestanden hebt aangemaakt, moet u beginnen met het aanmaken van uw homepage. Er zijn verschillende manieren om dit te doen. U kunt bijvoorbeeld gewoon index maken.php, frontpage.php of page-home.php, elk van deze bestanden zal geschikt zijn voor wat je probeert te doen dus de uiteindelijke keuze is geheel aan jou. Nu dat je klaar bent met het maken van een van de drie sjablonen voor uw homepage, omvatten alle van de .php bestanden die je net hebt gemaakt. Nu dat u uw boven -, onder-en zijkant klaar, plak de HTML5 van uw homepage in tussen en u zult met succes de homepage van uw website hebben gemaakt. Volg gewoon hetzelfde proces voor alle pagina ‘ s van uw website en u kunt doorgaan naar de volgende en laatste stap.

Stap vijf: Gebruik ingebouwde WordPress-tags en-functies

zodra u het thema voor uw WordPress hebt aangemaakt, moet u er nu voor zorgen dat u uw website kunt bewerken vanuit het adminpaneel in plaats van het themabestand elke keer dat u iets wilt wijzigen te moeten wijzigen. Misschien wel de meest populaire WordPress functies om al uw inhoud bewerkbaar via de admin panel is door het toevoegen van de add_meta_box functie. Stel gewoon meta boxes voor de inhoud op elke pagina en je bent klaar om te gaan!

het maken van de Kernfuncties van uw website is vrij eenvoudig met behulp van WordPress. Bijvoorbeeld, het weergeven van informatie zoals links op uw websites kan gemakkelijk worden gedaan met behulp van WordPress functies. Controleer gewoon de functie referentiepagina voor WordPress om alle beschikbare functies te zien.

op dezelfde manier biedt WordPress ook template tags aan. Dit zijn in wezen functies zelf, met het enige verschil is dat ze speciaal zijn gemaakt voor specifieke thema ‘ s die ze efficiënter te maken.

WordPress menu

wanneer u inlogt op het beheerpaneel van uw website, wilt u waarschijnlijk de menu-items in menu ‘ s en uiterlijk wijzigen, zodat u het niet hoeft te bewerken met behulp van het beheerpaneel. Dit is vrij eenvoudig dankzij het feit dat u gebruik maakt van WordPress, alles wat je hoeft te doen is het vervangen van de menu-lijst van de template bestand met een regel van PHP, waarna u kunt gewoon beginnen met het toevoegen van menu-items.

er kunnen situaties zijn waarin een binnenpagina een andere kop-of voettekst heeft. Om deze functionaliteit aan uw website toe te voegen, hoeft u alleen maar voorwaardelijke tags toe te voegen. Hiermee kunt u verschillende code toepassen voor geselecteerde pagina ‘ s of berichten.

zodra uw WordPress-website operationeel is op uw ontwikkelserver, hoeft u deze alleen maar op uw live-server te krijgen. Hier is een artikel waar het wordt uitgelegd in groot detail hoe je een WordPress site te verplaatsen, stap voor stap. Volg gewoon alle zes stappen en u zult uw website up and running op een live server in een mum van tijd.