Meniul
AcasăTelefon

Este posibil să încărcați un aspect PSD pe WordPress. Crearea unei teme simple pentru WordPress. Selectarea funcționalității șablonului

Nu este un secret că există o mulțime de șabloane gata făcute pentru WordPress pe internet. Pornind de la șabloane premium gratuite până la scumpe, cu propriile cadre.

Care este diferența? Ce design să alegi pentru site-ul tău?

Acest articol este destinat celor care își planifică site-ul web bazat pe WordPress și se confruntă cu alegerea unui șablon.

Să începem cu cele gratuite. Avantajul este evident - prețul, sau mai degrabă lipsa acestuia. Principalul dezavantaj al șabloanelor publice este că, dacă șablonul este relativ decent, cu siguranță va exista deja un număr mare de site-uri pe el. Și probabilitatea ca dvs. sau clienții dvs. să vă întâlniți cu un site care este complet identic în ceea ce privește designul este foarte, foarte mare. Prin urmare, ar trebui să optezi pentru șabloane publice doar dacă bugetul tău este într-adevăr limitat și nu ești deosebit de preocupat de funcțiile de imagine ale site-ului. Da, desigur, cu o mică investiție de efort sau bani, puteți (adapta) în mod unic un șablon public dincolo de recunoaștere. Și va fi în continuare una dintre cele mai ieftine soluții.

Abonează-te la telegrama mea și fii primul care primește materiale noi, inclusiv cele care nu se află pe site.

Dacă citiți acest articol, sunt șanse să aveți un design de site foarte frumos realizat, probabil în Adobe Photoshop și salvat în format PSD, JPG, PDF, AI sau PNG. Acum doriți să convertiți acest fișier imagine într-o temă WordPress, astfel încât să îl puteți aplica pe site-ul sau blogul dvs. nou creat. S-ar putea să-ți dorești și tu Convertor PSD în WordPress -Dar dacă ai putea face singur această transformare și asta gratuit!

Mulți oameni care se pricep la design grafic ajung în acest punct de a converti PSD în teme WordPress. Și se simt blocați! Dar nu e vina lor. Crearea unui site web nu necesită doar capacitatea de a produce un design grozav, dar are nevoie și de anumite abilități de programare. Trebuie să fiți un expert în cel puțin HTML, CSS, JavaScript, JQuery și programare PHP pentru a vă transforma fișierul PSD într-o pagină web. Problema este că majoritatea oamenilor sunt fie un bun designer, fie un bun programator!

Cu toate acestea, nu vă faceți griji. Nu este chiar atât de dificil să convertiți PSD în tema WordPress. Tot ce trebuie să știi sunt pașii potriviți de urmat. În acest articol vă voi spune același lucru! Să începem să învățăm.

Ce este un fișier PSD?

Cei care nu stiu PSD înseamnă Document Photoshop. Acesta este formatul de fișier în care Adobe Photoshop salvează fișierele executabile. Puteți deschide fișiere PSD în Photoshop și puteți face modificări suplimentare în design după cum doriți. Astfel, fișierele PSD sunt uneori numite deschide fișiere(referindu-se la faptul că aceste fișiere pot fi editate).

Dacă doriți să faceți designul site-ului web de vis, atunci probabil că veți alege Photoshop pentru a-l materializa. Photoshop este, fără îndoială, cel mai bun și mai popular instrument de design grafic.

Ce este WordPress?

WordPress este în esență o platformă de blogging gratuită. Acest program cu sursă deschisă a făcut ușor chiar și pentru cei care nu sunt programatori să își creeze propriile site-uri web sau bloguri. WordPress este fiabil și scalabil și este scris în limbaj PHP.

Designul site-ului web bazat pe WordPress se numește subiect(si cateodata, probă).

Convertiți PSD în temă WordPress

Pasul 1: Tăiați fișierul PSD

Odată ce fișierul PSD este gata, primul lucru pe care trebuie să-l faceți este să îl împărțiți în bucăți. Pentru ce? Ei bine, pentru că o imagine va avea dimensiuni mari și va dura mai mult pentru încărcare. În plus, va trebui să asociați diferite comportamente cu diferite segmente ale imaginii. Așa că trebuie să o tăiați.

Dar asta nu înseamnă că poți decupa o imagine la întâmplare. Trebuie să faci lucrurile într-un mod logic. De exemplu, antetul poate deveni dintr-o singură bucată, subsolul ar trebui să fie separat... apoi puteți tăia fundalul, butonul și meniul etc.

Adobe Photoshop vă permite să utilizați straturi. Are o facilitate încorporată pentru a tăia PSD și a salva segmentele rezultate ca fișiere imagine separate. Puteți salva aceste imagini în formate JPG sau PNG. Dacă aveți nevoie de transparență pentru a funcționa în oricare dintre aceste segmente, atunci trebuie să o salvați în format PNG deoarece JPG nu acceptă transparență.

Când tăiați o imagine, trebuie să fiți precis. Chiar și o singură eroare de pixel poate face două părți inutilizabile pentru o replică.

În timp ce tăiați un PSD cu scopul de a-l transforma într-o temă WordPress, trebuie să înțelegeți că CSS este destul de puternic în zilele noastre și poate crea o serie de elemente cu doar câteva linii de cod. De exemplu, puteți crea fundaluri de culoare solidă, fundaluri gradiente, diferite tipuri de butoane, linii, săgeți și caractere speciale, doar folosind CSS. În acest fel, nu trebuie să salvați aceste lucruri ca imagini. Mai puține imagini înseamnă că site-ul dvs. se va încărca mai repede.

Următorul videoclip YouTube arată exact cum să tăiați un fișier PSD și să-l salvați în diferite imagini:

Bine, acum că aveți diferitele elemente vizuale ale designului site-ului dvs., este timpul să treceți la pasul următor.

Pasul 2: Creați fișiere HTML și CSS

Acum începe partea principală de codificare a procesului de conversie a PSD într-un site web. Practic, trebuie să creați o pagină web și să asamblați toate imaginile tăiate astfel încât să arate exact ca PSD-ul dvs.

Mai întâi trebuie să creați un fișier HTML. Îi poți numi cum vrei, dar prin convenție să-i spunem index.htm.În acest fișier, va trebui să scrieți cod HTML sau XHTML pentru a afișa diferitele părți ale imaginii din PSD. Pentru a crea un aspect de fundație, puteți utiliza elemente DIV. Elementele DIV sunt foarte versatile. Puteți plasa elementele DIV una lângă alta, suprapuse, una peste alta. Puteți alinia centrul elementului DIV la stânga și la dreapta și, de asemenea, le puteți poziționa foarte specific la anumite coordonate de pe pagina web.

În aceste elemente DIV puteți apela imaginile salvate și le puteți afișa ca atare sau ca fundal în DIV.

După ce ați finalizat acest aspect de bază al paginii dvs. web, ar trebui stilizează-l pentru a-l face la fel ca PSD-ul tău. Pentru stil, trebuie să utilizați regulile pentru foile de stil în cascadă (CSS). Cu aceste reguli puteți utiliza diferite stiluri de font, dimensiuni, culori, umbră text, scalare de gri a imaginii, chenare etc.

Pentru a scrie reguli de stil CSS, trebuie să creați un alt fișier numit stiluri.cssși apoi apelați acest fișier CSS la fișier index.htm. Stiluri prezente în stiluri.css se va aplica diferitelor elemente din fișierele dvs. HTML.

Bine, așteaptă! Dacă nu știți nimic despre codarea HTML sau CSS, nu vă faceți griji! Acestea sunt limbaje de scripting foarte simple și le puteți învăța cu ușurință online. Mai jos sunt câteva dintre resursele online în care puteți învăța CSS și HTML:

Tutoriale HTML

  1. Tutorial HTML W3Schools
  2. TutorialsPoint HTML Tutorial
  3. HTML.net
  4. Câine HTML

Tutoriale CSS

  1. Tutorial CSS
  2. Tutorial CSS W3Schools
  3. TutsPlus
  4. Bazele CSS

Pasul 3: Spargeți fișierul HTML în fișierele cu teme WordPress

În acest moment al procesului de conversie a PSD în tema WordPress, veți avea un fișier HTML (index.htm)și un fișier CSS (stiluri.css).În al treilea pas, va trebui să împărțiți fișierul HTML în funcție de Tema structurii WordPress. Confuz? Ei bine, WordPress are un set predefinit de fișiere care sunt chemate împreună pentru a crea o pagină web. De exemplu, atunci când afișează o postare, WordPress necesită conținutul unui fișier antet, un fișier post, un fișier cu bară laterală și un fișier subsol, printre altele. Dar aveți tot codul într-un singur fișier - index.htm. Deci va trebui să distribuiți codul index.htmîn diferite fișiere WP. Practic este o treabă de tăiere și lipire! Iată o listă cu câteva dintre fișierele de teme importante pentru WordPress:

  • arhiva.php
  • categorie.php
  • comentarii.php
  • footer.php
  • header.php
  • index.php
  • pagina.php
  • căutare.php
  • sidebar.php
  • singur.php
  • stil.css
  • 404.php

Pentru a crea o temă de bază WordPress, ați dori să creați cel puțin header.php, footer.php, sidebar.php, singur.phpȘi index.php.

Pur și simplu creați aceste fișiere PHP în orice editor de text pentru notepad și copiați codul corespunzător din index.htm la aceste fișiere. Va intra în codul pentru a crea partea antet header.php, nota de subsol la care va merge codul footer.php... si asa mai departe.

Dacă nu sunteți foarte familiarizat cu PHP, este posibil să aveți dificultăți la crearea corectă a acestor fișiere. Există câteva lecții online foarte bune și gratuite pentru a învăța PHP. W3Schools și PHP.net oferă ajutor PHP ușor de înțeles. Puteți parcurge aceste tutoriale pentru a vă face o idee despre PHP.

Următorul videoclip de pe YouTube vă va ajuta să înțelegeți cum să configurați o „temă simplă WordPress” (aceasta înseamnă practic o temă WodPress goală.

Pasul 4: Adăugați funcții și etichete WordPress

Acum este timpul să convertiți fișiere PHP simple în fișiere cu teme WordPress. Pentru a face acest lucru, va trebui să adăugați etichete WordPress în fișiere. Dar poți să întrebi Ce sunt mai exact etichetele WordPress?

După cum am spus mai devreme, WordPress este o platformă excelentă și de încredere. Vă oferă o cantitate imensă de funcții încorporate pe care le puteți apela cu ușurință și finaliza lucrurile.

Să ne uităm la un exemplu pentru a înțelege mai bine. Pe pagina de start (index.php), puteți afișa o listă de mesaje recente. Această listă ar trebui să schimbe automat modul și când faci o nouă postare. Puteți scrie propriile funcții PHP pentru a prelua date de e-mail din baza de date și pentru a le afișa pe pagina principală. Dar creatorii WordPress ți-au făcut viața mai ușoară! Nu va trebui să scrieți propriile funcții detaliate. Doar folosiți wp_get_recent_posts($args, $output) de la WordPress și vedeți afișată o listă de postări recente!

WordPress are o documentație online cuprinzătoare care vă oferă informații despre toate funcțiile și alte obiecte disponibile în WordPress. Documentația conține, de asemenea, multe exemple și, prin urmare, este foarte ușor de înțeles. Urmați linkurile de mai jos pentru a accesa această documentație:

  • Etichete de șabloane WordPress
  • Link cu funcțiile WordPress

Odată ce aceste fișiere cu teme sunt gata, ar trebui să le plasați într-un folder care ar trebui să fie același cu numele noii teme. Acest folder poate avea și alte foldere pentru a stoca fișiere CSS, fișiere JavaScript și fișiere imagine.

De asemenea, puteți include imagini în fișierul numit screenshot.jpg sau screenshot.png. Acest fișier va fi afișat ca o imagine în miniatură a temei dvs. Este ușor să înveți cum să faci o captură de ecran.

O listă de fișiere dintr-o temă tipică WordPress ar putea arăta astfel:

Trebuie să descărcați folderul cu tema din folder / conținut WP / teme Instalări WordPress. De exemplu, dacă numiți tema Minerva - Atunci fișierele cu tema ar trebui să fie în / Conținut WP / teme / Minerva

După ce ați încărcat folderul cu tema, accesați tabloul de bord WordPress și apoi accesați Aspect > Teme. Aici, veți fi bucuroși să vedeți propria dvs. temă nouă dezvoltată printre temele disponibile pentru activare. Doar selectați o temă și activați-o.

Aruncă o privire la următorul videoclip pentru a vedea procesul ulterioar:

Pasul 5: adăugați mai multe funcționalități, cum ar fi funcțiile de căutare și de utilizator

Tema dvs. WordPress este deja finalizată și funcționează. Călătoria de la tema PSD la WordPress s-a încheiat. Dar puteți adăuga mai multe funcționalități temei dvs.

De exemplu, puteți crea căutare.php un fișier cu cod care afișează rezultatele căutării de pe site-ul dvs.

De asemenea, vă puteți crea propriile funcții PHP și le puteți utiliza în diferite alte fișiere PHP. Trebuie să creați un fișier funcții.php pentru a păstra funcțiile personalizate într-un singur loc.

Pentru a face față erorilor 404 (pagina nu a fost găsită), puteți crea un fișier 404.php. WordPress va afișa conținutul acestui fișier ori de câte ori cineva încearcă să acceseze adresa URL a site-ului dvs. care nu există.

Puteți adăuga, de asemenea, unele funcționalități JavaScript. JavaScript este cel mai utilizat limbaj de scripting la nivelul clientului. Puteți scrie funcții JavaScript în fișiere .jsși apelați aceste funcții în fișierele dvs. PHP. De exemplu, validarea formularelor este ceva care se face de obicei folosind JavaScript. Dacă un utilizator încearcă să găsească ceva pe site-ul ei fără a introduce cuvinte cheie în câmpul de căutare, atunci JavaScript îi spune utilizatorului că trebuie să introducă criteriile de căutare.

După acești pași, vă puteți crea cu ușurință propria temă WordPress. Acești pași vor converti fișierul PSD într-o temă funcțională WordPress. Cu toate acestea, unii oameni caută PSD gratuit pentru convertoare WordPress. Există multe companii care pretind că iau un fișier PSD și îl transformă într-o temă exactă. Dacă nu vrei să intri în bătaia de cap de a învăța programarea, poți pur și simplu să dai PSD-ul tău acestor companii. Dar desigur că ei taxează pentru asta!

PSD gratuit pentru convertoare WordPress

Am dat peste software-ul Elemente de la DivineProjects. Puteți descărca acest program gratuit și vă va converti PSD într-o temă WordPress gata de utilizat, complet funcțională. Acest software funcționează ca un plugin Photoshop.

Sper că acest articol v-a fost de ajutor. Dacă aveți întrebări despre acest subiect, vă rugăm să nu ezitați să întrebați. Voi încerca tot posibilul să vă ajut. Vă mulțumim pentru utilizarea TechWelkin.

Cu doar câțiva ani în urmă, a apărut o nouă linie de servicii care oferă convertirea automată a designului site-ului dvs. dintr-un fișier Photoshop. .PSDîn cod HTML + CSS gratuit. Aceasta se simțea ca o încercare greoaie de automatizare care nu era de cea mai bună calitate, dar aceste servicii au evoluat acum pentru a oferi o integrare completă cu sistemele de gestionare a conținutului (cum ar fi WordPress).

În acest articol vă voi prezenta câteva servicii destul de bune care vă vor ajuta să economisiți timp și bani.

1.DevPress

Autorul acestui serviciu este Tung Do, un excelent designer și dezvoltator WordPress care ne-a mulțumit cu noul său produs. Serviciul pe care îl oferă este capabil de următoarele: proiectare teme, codare XHTML/CSS, dezvoltare teme XHTML-to-WordPress și gestionarea site-ului.

2.WP de la PSD


O echipă de programatori profesioniști vă va ajuta să vă migrați design-ul către o temă standard WordPress pentru mai multe browsere. Toate lucrările sunt promise a fi finalizate la cele mai mici prețuri și în cel mai scurt timp posibil. Putem avea încredere doar în băieți :)

3. Codificarea oamenilor


Serviciul oferă lucru cu XHTML static, HTML5 și oferă, de asemenea, un set gata făcut de șabloane pentru un magazin online. Codingpeople este considerată autoritatea din Germania în ceea ce privește calitatea codului.

4.WP Canvas


Acest serviciu asigură că vă va transforma cu ușurință designul într-un aspect de înaltă calitate pentru cross-browser, care este compatibil cu standardele W3C Valid WordPress Theme.

5. PSD la WP


Dacă ați creat un design excelent pentru site-ul web și aveți nevoie de un aspect rapid și de înaltă calitate, serviciul PSDtoWordPress vă va ajuta în acest sens. Transformă-ți designul într-o temă WordPress gata făcută cu PSDtowordpress.

6. Pixel WP


PixelWP.com oferă clienților săi un convertor excelent de șabloane PSD în Wordpress pe care vă puteți baza. Poți fi sigur că designul tău va fi implementat eficient și la timp.

7. PSD la Oricare


Serviciul poate genera o temă WordPress gata făcută dintr-o machetă de design atașată. Dacă nu aveți abilități în programare și lucru cu fișiere tematice, acest serviciu vă va veni cu siguranță la îndemână!

8. PSD 2 HTML


Serviciul a fost lansat pentru prima dată în 2005. P2H.com / PSD2HTML.com a fost primul de acest gen și datorită acestui fapt a reușit să atragă peste 50.000 de clienți.

9. HTML Cut


HTMLcut este un serviciu pas cu pas pentru implementarea codului gata făcut din designul dvs. Încărcați aspectul PSD, restul depinde de HTMLcut.

10. XHTML rapid


Dacă doriți să vă transformați designul într-un blog gata făcut sau într-un site web CMS, RapidxHTML este doar pentru dvs. Serviciul acceptă platforme populare precum wordpress, Blogger, Drupal, Joomla și Magento.

Vom vedea cum este creat un șablon WordPress gata făcut, gata de instalare pe găzduire. Pentru a face acest lucru, fișierele php sunt create pe baza fișierului index.htm, fiecare dintre acestea fiind responsabil pentru partea corespunzătoare a șablonului WordPress. În special, acestea sunt fișiere care controlează antetul site-ului, aspectul paginii principale, bara laterală, arhivele, pagina de căutare, o singură postare, o singură pagină și comentariile. Vreau să spun imediat că în această etapă ar fi bine să aveți niște cunoștințe de bază, în special, pentru a înțelege ce sunt etichetele șablon.

Înainte de a începe să studiezi această lecție, vreau să te avertizez despre un... hmm... truc al autorului lecției. Când am început să traduc această serie de lecții, eram sigur că la final vom avea un șablon gata făcut de noi înșine. Dar totul este puțin mai complicat. În ultima lecție, autorul a dat coduri WordPress nu sub formă de text, ca în lecțiile anterioare, ci sub formă de imagini cu explicații. Și întreg șablonul gata făcut este oferit pentru a fi descărcat ca arhivă gata făcută pentru o taxă nominală. Aș putea să cumpăr această arhivă și să o postez aici, dar nu sunt sigur dacă este legală. În general, aceasta este situația. Deci, probabil, va trebui să vă familiarizați cu această lecție doar în scopuri informative și educaționale.

Aspect proiectat site-ul web
Deci, în primele două lecții vom folosi mai întâi și apoi instrumentele HTML și CSS. Faceți clic pe imaginea de mai jos pentru a vedea cum arată aspectul completat al site-ului.

Toate fișierele șablon WordPress
Acum tot ce rămâne este să creezi un șablon WordPress bazat pe aspectul site-ului. Imaginea de mai jos arată un set standard de fișiere șablon WordPress. În lecția anterioară am creat un folder imaginiși dosar stil.css. Avem și un dosar index.htm, din care fragmente de cod vor fi preluate și copiate în fișierele corespunzătoare php. Și abia apoi în php fișierele sunt inserate de comenzi WordPress și astfel formate php Fișiere șablon WordPress.

Editarea fișierului style.css
Mai întâi ar trebui să-l introduceți la începutul fișierului stil.css informații despre șablon. Acesta este un cod standard care poate fi editat pentru a se potrivi cu datele dvs. (nume șablon, URL, descriere, informații despre autor).

Header.php
Acest fișier este responsabil pentru afișarea antetului site-ului. Esența este aceasta: o bucată de cod este luată din fișier index.htm(mai sus și inclusiv

), este introdus în fișier header.php iar după aceea sunt integrate în codul de comandă WordPress. Sunt marcate cu roșu în imagine. Click pe imagine pentru a o vizualiza la dimensiune mare.

Index.php
Acest fișier este responsabil pentru afișarea a ceea ce vede utilizatorul pe pagina principală a site-ului. Fișierul este generat într-un mod similar index.php. O bucată de cod este copiată index.htmși plin cu comenzi WordPress. Click pe imagine pentru a o vizualiza la dimensiune mare.

Bara laterală.php
Acest fișier este responsabil pentru afișarea elementelor în bara laterală. De asemenea, decupăm codul din index.htm(toate div id=”partea”) și lipiți-l în fișier sidebar.php. Apoi, ca și înainte, introduceți comenzile WordPress. Click pe imagine pentru a o vizualiza la dimensiune mare.

Archive.php
Responsabil cu emiterea înregistrărilor arhivate ale site-ului. Pentru a crea acest fișier, copiați întregul conținut al fișierului index.phpși lipiți în arhiva.php, apoi introduceți o bucată de cod (7 linii) între linii Și

Căutare.php
Acest fișier este responsabil pentru rezultatele căutării. Pentru a crea acest fișier, copiați întregul conținut al fișierului index.phpși lipiți în căutare.php, apoi introduceți o bucată de cod (1 linie) între linii Și . Să vedem cum se face acest lucru în imaginea de mai jos. Click pe imagine pentru a o vizualiza la dimensiune mare.

Single.php
Acest fișier produce o singură postare. Click pe imagine pentru a o vizualiza la dimensiune mare.

În această etapă, tema poate fi instalată și testată. Puteți crea mai multe postări pentru a testa modul în care funcționează navigarea, butoanele și linkurile.

Demo live a șablonului
Dacă dați clic pe imagine, puteți vedea șablonul WordPress gata făcut online.

PS. gardian. Și știi, pentru a începe să faci modele, trebuie să stăpânești instrumentele și funcțiile Photoshop. În acest caz, vă vor ajuta cursurile Photoshop, ceea ce vă va oferi nivelul de bază necesar de cunoștințe.