acest articol a fost contribuit de PSDtoWP.net

poate ar fi mai bine să începem de aici cu de ce. Aproximativ un sfert din toate site-urile web rulează pe WordPress, platforma de blogging online. Acest lucru îl face de departe unul dintre cele mai populare sisteme de gestionare a conținutului open source de pe planetă.

marea majoritate a designerilor web încă folosesc Photoshop pentru a proiecta un site web, deși există alternative. Aceasta înseamnă că o mulțime de designeri de site-uri web trebuie să găsească modalități de a converti fișierele PSD într-o temă WordPress receptivă!

acum, acest lucru ar putea părea destul de simplu. Cu toate acestea, conversia unui fișier PSD într-un site web WordPress nu este tocmai ușoară. Este nevoie de mult mai mult decât abilitățile Photoshop! Pentru a transforma fișierul PSD într-o temă sensibilă care poate fi utilizată pe WordPress, veți avea nevoie de cunoștințe despre limbajele de dezvoltare web front-end, cum ar fi HTML, CSS și JavaScript, precum și limbajul de programare backend PHP.

acum că motivul este în afara drumului, este timpul să procedăm la cum! Deși cum cu siguranță nu este ușor, se poate realiza în continuare în cinci destul de simplu de înțeles pași!

pasul unu: creați designul web

treceți la Pasul doi dacă v-ați proiectat deja site-ul.

este mult mai mult pentru a face un site web decât pur și simplu crearea unui logo și punerea într-un meniu, o bară laterală, un subsol și conținutul împreună. Piesele din acest puzzle trebuie create în primul rând, iar procesul acestei creații este ceva ce nu toată lumea poate face atât de ușor.

designul web pe care îl creați trebuie să fie acel echilibru perfect între formă și funcție, un design web care să satisfacă o experiență excelentă a utilizatorului.

cercetare

pentru a crea un design web care îndeplinește cu succes criteriile de aspect și funcționalitate, va trebui să faceți unele cercetări serioase. În primul rând, cine este publicul țintă și ce își dorește publicul țintă? Acestea sunt, evident, aspecte cheie ale cercetării dvs.

aflați de la alții

un alt aspect al designului web pe care trebuie să îl cercetați este tehnicile pe care le-au aplicat concurenții dvs. Acești concurenți sunt cel mai probabil mai bine stabiliți decât tine, așa că cu siguranță vei putea învăța multe din designul pe care îl folosesc! Odată ce ați făcut cercetarea și aveți o idee bună despre cum ar trebui să arate site-ul dvs. web, ar trebui să începeți să vă gândiți la funcționalitate. Ce funcții doriți să posede designul dvs. web?

Wireframe

odată ce ați totul sortate, să-l jos pe hârtie. Desenați & schițați cum vă imaginați să arate site-ul dvs. pentru a avea un ajutor vizual pe măsură ce mergeți mai departe!

Design

odată ce ați terminat de a face schițe fizice / wireframes, sunteți gata să hop în scaunul căpitanului și foc Photoshop. Primul lucru pe care trebuie să-l faceți înainte de a începe cu seriozitate este să vă asigurați că utilizați o grilă bazată pe coloane, cum ar fi XXgrid. Acest lucru va face ca designul dvs. să arate cu adevărat ordonat și aliniat! Acest lucru nu este doar pentru estetică. Folosind o grilă pe bază de coloană pentru a crea un design aliniat va face mai ușor pentru tine sau Dezvoltator front-end, care va fi în curs de dezvoltare HTML și CSS pentru a crea un aspect optimizat, receptiv pentru tablete și smartphone-uri!

înainte de a trece la pasul următor, amintiți-vă că trebuie să păstrați fișierele de design PSD organizate în straturi, adică fiecare secțiune ar trebui să aibă propriul dosar cu titluri corespunzătoare!

Pasul Doi: Taie PSD-ul

odată ce ați creat un design web cu care sunteți complet mulțumit, este timpul de criză. Practic, ceea ce trebuie să faceți acum este PSD la procesul WordPress.

site-uri Aceste zile sunt toate construite folosind HTML5 și CSS3. Acestea sunt mult mai bune decât XHTML și CSS2, deoarece în loc de toate butoanele, marginile, gradienții, marginile rotunjite și toate celelalte caracteristici create folosind imagini, acestea sunt create ca părți funcționale ale codării CSS3. Prin urmare, felierea fișierului PSD va implica practic acum doar felierea imaginilor de fundal din PSD!

pentru a face acest lucru, va trebui să deschideți fișierul fie în Photoshop, fie în Illustrator, în funcție de software-ul pe care l-ați utilizat pentru a crea designul. Dacă designerul și-ar fi făcut treaba corect, ar fi creat un fișier de design bine structurat, cu foldere și straturi, făcându-vă ușor să găsiți ceea ce aveți nevoie. Studiați designul web și căutați imagini care credeți că ar avea nevoie de feliere. Acestea sunt practic orice imagini care nu pot fi create folosind CSS3, de obicei logo-ul și imaginile de fundal. Citiți Cum să tăiați imaginile aici.

odată ce înlocuiți aceste imagini de fundal folosind CSS, veți vedea o scădere enormă a timpilor de încărcare. Acest lucru ar atrage o mulțime de utilizatori pe site-ul dvs., deoarece utilizatorul mediu de internet nu poate suporta timpi lungi de încărcare!

Pasul trei: creați HTML, CSS3 și JavaScript (jQuery)

după ce ați tăiat imaginile din fișierul PSD, este timpul să creați HTML5 și CSS3. Primul lucru pe care trebuie să-l faceți este să creați un nou folder în care să creați index.html și stil.css. De asemenea, creați un sub folder numit imagini sau img (oricare preferați) și plasați imaginile pe care le-ați extras în acest folder. Creați un alt folder numit JavaScript sau js. Aceasta este pentru mai târziu, astfel încât să puteți stoca toate fișierele JavaScript și jQuery într-o locație bine marcată. După ce ați terminat de creat toate folderele, fișierele și subfolderele, este timpul să începeți să construiți HTML5 și CSS3.

HTML5

HTML5 este un limbaj relativ nou care posedă atât XHTML, cât și funcționalități HTML. Această limbă este utilizată în esență pentru a crea structura de bază a documentului, precum și pentru a numi toate elementele paginii. HTML5 are elemente separate pentru diferitele secțiuni ale site-ului dvs. web, cum ar fi <antet>, <nav>, <deoparte>, precum și <subsol> elemente (și multe altele), care vă permit să creați un document îngrijit, bine structurat, care poate fi citit universal. Iată câteva resurse excelente pe care le puteți utiliza pentru a afla sau reîmprospăta memoria despre HTML5.

resurse HTML

W3Schools este numărul site-ul de top pentru a învăța elementele de bază ale HTML5. Fiecare element și atribut al acestei limbi este explicat și predat folosind demo-uri, ceea ce face pentru o experiență de învățare ușoară.

Mozilla Developer ‘ s Section – cei din spatele browser-ul Populare Mozilla Firefox au o Secțiune dezvoltator pe site-ul lor. Puteți utiliza această secțiune pentru a afla multe despre HTML5 prin tutorialele pe care le au acolo, indiferent dacă sunteți începător sau codificator avansat.

Web Design Tuts – acest site are o mulțime de diferite tutoriale HTML5, dintre care unele sunt gratuite și dintre care unele sunt plătite.

W3 – acest site web este responsabil pentru dezvoltarea tuturor standardelor Web deschise care au fost create pentru a asigura longevitatea web-ului. Aici puteți găsi informații detaliate despre HTML5, precum și despre toate cele mai recente evoluții ale acestuia.

Validator W3 – după ce ați finalizat HTML5, puneți-l prin acest validator. Acesta vă va spune dacă HTML5 dvs. îndeplinește standardele W3 open web!

CSS3

CSS se referă la foi de stil în cascadă, iar CSS3 este cea mai recentă versiune a acestui limbaj front-end. CSS3 este folosit pentru a lua oasele goale ale elementelor create folosind HTML5 și forma, poziția și stilul lor. Acest lucru vă permite să creați un design web consistent în care toate elementele confirmă designul general al site-ului. Odată ce ați folosit CSS3, veți găsi că HTML5 dvs. va fi mult mai curat și mai bine structurat, care, la rândul său, va permite să se încarce mult mai repede, precum și permițându-i să fie indexate mai repede de motoarele de căutare. Mai jos sunt câteva resurse pentru a vă ajuta să învețe sau reîmprospăta memoria despre CSS3:

resurse CSS

W3 CSS – W3 este pe resursele cele mai cunoscute și renumite pentru tutoriale CSS3 și exemple de diferite selectori CSS3, proprietăți și valori. Cea mai bună parte despre acest lucru este că fiecare tutorial are o pagină ‘încercați-l singur’, care vă permite să aplicați ceea ce ați învățat.

aflați CSS3 – Mozilla nu este doar creatorul browserului Firefox. Este, de asemenea, un loc excelent pentru a vă familiariza cu CSS3, precum și pentru a vă actualiza cunoștințele despre limbă.

CSS Web Design Tuts – acest site conține o întreagă corn al abundenței de tutoriale pe care le puteți trece prin. Unele dintre aceste tutoriale trebuie plătite, dar altele sunt încă complet gratuite și vă pot învăța multe despre selectorii, proprietățile și valorile CSS3.

W3 CSS – acest site este un loc minunat pentru a rămâne la curent cu cele mai recente știri CSS3, deoarece aceasta este chiar comunitatea care dezvoltă standardele WEB CSS3. Este, de asemenea, un loc minunat pentru a afla informații tehnice despre limbă.

CSS Validator – acesta este validatorul prin care ar trebui să rulați toate CSS3 înainte de a face site-ul public. Acest lucru este pentru a vă asigura că CSS3 dvs. îndeplinește standardele web stabilite de W3!

Responsive Design

Internetul a parcurs un drum lung de la începuturile sale. Acest lucru se datorează în parte apariției smartphone-urilor și tabletelor și proliferării acestor tipuri de tehnologie în viața noastră de zi cu zi. Ca urmare a popularității imense a acestor dispozitive, o parte semnificativă din totalul utilizatorilor de internet se uită la site-uri web pe ecrane semnificativ mai mici decât laptopul mediu. În plus, interacționează cu aceste site-uri web nu folosind cursoare, folosind degetele. Prin urmare, site-ul modern trebuie să fie capabil să se adapteze la diferitele tipuri de dispozitive care sunt acolo. Aici intervine designul responsive. Folosind un design receptiv, designerii sunt capabili să facă un site web care să-și poată ajusta întregul aspect în funcție de tipul de dispozitiv pe care este vizualizat.

este o idee bună să decideți în prealabil dacă doriți ca noul dvs. site web să aibă un design receptiv sau nu înainte de a începe să construiți HTML5 și CSS3. Acest lucru se datorează faptului că atunci când codificați partea receptivă a designului site-ului dvs. web, va trebui să lucrați cu interogări media CSS3. Folosind aceste interogări media, puteți defini diferite texturi și stiluri pentru diferite rezoluții de ecran.

nu uitați să nu folosiți niciodată lățimi fixe, folosiți procente în schimb. Acest lucru este denumit fluid sau design de Aspect lichid, care vă permite să optimizați site-ul dvs. web nu doar pentru rezoluțiile definite în interogările dvs. media, ci și pentru toate rezoluțiile dintre ele. Acesta este un avantaj imens pentru site-ul dvs. web, deoarece smartphone-urile, tabletele și computerele care apar astăzi au atât de multe dimensiuni diferite și, prin urmare, rezoluții și trebuie să le găzduiți pe toate.

Responsive Resources

iată câteva resurse excelente pe care le puteți utiliza pentru a vă reîmprospăta memoria sau pentru a afla despre designul receptiv și toate codările conexe:

Google Responsive – aceasta este o resursă excelentă pentru cei dintre voi care sunt noi în proiectarea receptivă folosind interogări media CSS3.

principiile Responsive Webdesign – citiți acest articol pentru a înțelege diferența dintre responsive web design și adaptive web design. Ea are câteva exemple de mare pentru a vă ajuta să înțelegeți lucrurile în detaliu!

grile fluide – puteți utiliza acest articol excelent de Ethan Marcotte pentru a afla despre grilele fluide și cum să le utilizați. Încercați folosiți singur exemplele furnizate în articol!

Responsive front-end framework

dacă nu sunteți dispus să învețe corzi în ceea ce privește interogările mass-media CSS3 sunt în cauză, sau poate pur și simplu nu au suficient timp pentru ea, încercați să utilizați un cadru front-end receptiv în schimb. Dacă decideți să utilizați un cadru grilă, rețineți că trebuie să aplicați același cadru CSS, precum și HTML, deoarece veți lucra cu clase și ID-uri predefinite pentru a conecta cadrul creat folosind HTML5 la CSS3. Utilizarea unui cadru front-end receptiv vă va permite cu siguranță să vă dezvoltați site-ul mult mai rapid, dar, în dezavantaj, va încetini și timpul de încărcare al site-ului dvs. datorită cantității mari de cod pe care nu îl veți folosi.

unele dintre cele mai populare cadre front-end sunt:

Bootstrap – acest cadru receptiv este destul de ușor de implementat, iar un bonus suplimentar este că folosește un CDN pentru a reduce impactul vitezei de încărcare a site-ului dvs. web.

LESS – acesta este un cadru de grilă CSS adaptiv, mai degrabă decât unul receptiv, care vă permite să creați un aspect adaptiv.

Foundation-acesta este un cadru de grilă front-end cu o dimensiune de fișier care este absolut mică pentru a minimiza impactul pe care îl va avea asupra vitezei de încărcare a site-ului dvs. web.

JavaScript (vs CSS3)

JavaScript este unul dintre cele mai populare limbaje de programare din lume în prezent. Acest lucru se datorează faptului că este susținut de o gamă largă de browsere și, de asemenea, datorită faptului că conține biblioteci precum jQuery și sisteme backend precum Node.js, precum și cadre precum AngularJS. Nu e de mirare că atât de mulți dezvoltatori jură pe acest limbaj de programare! Cu toate acestea, în ultima vreme JavaScript a început să devină învechit, deoarece multe dintre funcțiile sale au început să fie preluate de animațiile CSS3, care vă permit să animați tranzițiile între stiluri.

resurse Javascript

W3 – acesta este un loc excelent pentru a începe dacă sunteți nou la JavaScript, datorită tutorial excelent, care este disponibil pe acest site.

jQuery – odată ce aveți ceva experiență cu JavaScript, puteți începe să utilizați biblioteci ca aceasta pentru a programa mult mai ușor. jQuery este cea mai populară bibliotecă JavaScript de o milă.

NodeJS – dacă preferați sistemele backend, dar în același timp iubiți JavaScript, consultați acest site web.

AngularJS – combinați forțele formidabile ale HTML și Java folosind acest cadru și obțineți câteva vizualizări dinamice.

asigurați – vă că verificați resursele de urmărire înainte de a începe să utilizați JavaScript pentru a anima elemente pe site-ul dvs. web, în timp ce probabil puteți utiliza și CSS3:

animații CSS3-încă o dată apelăm la w3schools pentru tutorialele noastre CSS3. Citiți demo-urile disponibile pe acest site web pentru a înțelege toate animațiile CSS3 diferite.

Mozilla Animations – în continuare cunoștințele de animații CSS3 cu cele nouă probe și exemple care Mozilla a furnizat.

Pasul patru: construiți fișierele tematice WordPress

acum că ați convertit cu succes desenele PSD în HTML5, CSS3 și JavaScript, este timpul pentru Conversia majoră: transformarea HTML-ului într-o temă WordPress receptivă completă. Nu uitați să urmați ierarhia șabloanelor WordPress pentru a vă asigura că temele dvs. vor funcționa efectiv. Ordinea generală este de a începe cu antet.php, urmat de index.php, subsol.php și stil.css. Veți folosi aceste patru șabloane pe toate paginile site-ului dvs. web.

odată ce ați înțeles complet cum funcționează ierarhia șabloanelor, trebuie să începeți să rupeți fișierele HTML în bucăți. Puteți începe prin crearea unui folder în folderul teme pe care îl puteți găsi în instalarea WordPress, adresa pentru care este /wp-content/themes/. Creați antetul fișierului.php în acest dosar. Acest fișier este ceea ce veți folosi pentru a declara tipul de document, precum și toate elementele care aparțin în antetul paginii dvs., cum ar fi metas, titlu, foi de stil, javascripts și așa mai departe. Odată ce ați terminat cu acest lucru, creați subsol.php și lipiți toate elementele de subsol în documentul HTML. Dacă designul site-ului dvs. web include o bară laterală, creați un fișier numit bara laterală.php, precum și includ toate de codificare pertinente în acest fișier.

după ce ați finalizat crearea tuturor elementelor site-ului dvs. web în aceste fișiere, trebuie să începeți să vă creați pagina de pornire. Există mai multe moduri în care puteți face acest lucru. De exemplu, puteți crea pur și simplu index.php, prima pagină.php sau pagina-Acasă.php, oricare dintre aceste fișiere vor fi potrivite pentru ceea ce încercați să faceți, astfel încât alegerea finală depinde în întregime de dvs. Acum, că ați terminat de creat unul din cele trei șabloane pentru pagina dvs. de pornire, includeți toate .fișierele php pe care tocmai le-ați făcut. Acum că aveți gata partea de sus, de jos și laterală, lipiți HTML5 a paginii dvs. de pornire între ele și veți fi creat cu succes pagina de pornire a site-ului dvs. web. Pur și simplu urmați același proces pentru toate paginile site-ului dvs. web și puteți trece la pasul următor și final.

Pasul Cinci: utilizați WordPress încorporat tag-uri și funcții

după ce ați creat cu succes tema pentru WordPress dvs., acum trebuie să vă asigurați că sunteți în stare să editați site-ul dvs. din panoul de administrare, mai degrabă decât să modifice fișierul temă de fiecare dată când doriți să schimbați ceva. Probabil cele mai populare funcții WordPress pentru a face tot conținutul dvs. editabil prin panoul de administrare este prin adăugarea funcției add_meta_box. Pur și simplu configurați cutii meta pentru conținutul de pe fiecare pagină și sunteți bine să mergeți!

crearea funcționalităților de bază ale site-ului dvs. web este destul de ușoară folosind WordPress. De exemplu, afișarea informațiilor precum linkurile pe site-urile dvs. web se poate face cu ușurință folosind funcțiile WordPress. Pur și simplu verificați pagina de referință a funcției pentru WordPress pentru a vedea toate funcțiile disponibile.

în mod similar, WordPress oferă și etichete șablon. Acestea sunt în esență funcții în sine, singura diferență fiind că au fost create special pentru teme specifice care le fac mai eficiente.

WordPress menu

când vă conectați la panoul de administrare al site-ului dvs. web, probabil că doriți să modificați elementele de meniu din meniuri și aspect, astfel încât să nu trebuiască să îl editați folosind panoul de administrare. Acest lucru este destul de ușor datorită faptului că utilizați WordPress, tot ce trebuie să faceți este să înlocuiți lista de meniu a fișierului șablon cu o singură linie de PHP, după care puteți începe pur și simplu să adăugați elemente de meniu.

pot exista situații în care o pagină interioară are un antet sau un subsol diferit. Pentru a adăuga această funcționalitate pe site-ul dvs. web, tot ce trebuie să faceți este să adăugați etichete condiționale. Acestea vă permit să aplicați un cod diferit pentru paginile sau postările selectate.

odată ce site-ul dvs. WordPress este în funcțiune pe serverul dvs. de dezvoltare, tot ce trebuie să faceți este să îl obțineți pe serverul dvs. live. Iată un articol în care este explicat în detaliu cum mutați un site WordPress, pas cu pas. Pur și simplu urmați toți cei șase pași furnizați și veți avea site-ul dvs. web în funcțiune pe un server live în cel mai scurt timp.