5 pași simpli pentru a converti o temă PSD în WordPress (Bootstrap)

Știați că în fiecare zi, 50,000 de site-uri WordPress noi vin online? Cum vei ieși din mulțime într-un ocean cu atât de multe locuri diferite? O metodă sigură de a atrage imediat atenția poate fi să vă creați propria temă unică, personalizată, convertită din PSD în WordPress. Acest lucru ar fi conceput special pentru propriul dvs. site - iar site-ul dvs. nu va fi unul dintre miile de site-uri de tăiat cookie-uri de acolo!

Există trei standarde atunci când proiectați o temă de site. PSD (fișiere Photoshop), WordPress (WP) și destul de recent în ultimii câțiva ani, Twitter Bootstrap - un cadru pentru dezvoltarea site-urilor responsive pe care profesioniștii din industrie le folosesc în prezent.

În această postare, vă vom oferi un ghid complet și ușor despre cum să le combinați pe toate trei: cum să convertiți un PSD într-o temă WordPress (Bootstrap), în 5 pași simpli. 

Mai târziu, în acest articol, veți găsi șabloane, gata pentru descărcare, pe care să le utilizați ca bază pentru acest tutorial. În cazul în care doriți să vedeți alte articole, vă rugăm să vizitați alte părți ale site-ului nostru, cu tutoriale și articole aprofundate.

Dar de ce ați dori să convertiți un fișier PSD într-o temă Bootstrap WordPress?

Ce este un PSD?

PSD este prescurtarea pentru PFierbinteShop Design. 

Acest lucru se datorează faptului că Photoshop este singurul software care este cel mai popular printre designerii grafici și modul în care sunt create majoritatea designurilor de site-uri WordPress. Folosind Photoshop, un designer va crea un design unic pentru site-ul web. Acesta va fi salvat ca fișier de design Photoshop sau fișier PSD. Acest design poate fi apoi dat dezvoltatorilor WordPress care îl vor transforma într-o temă.

Ce este PSD pentru WordPress?

PSD în WordPress este procesul de conversie a unui fișier de design Photoshop într-o temă WordPress funcțională folosind Bootstrap sau alte metodologii și cadre. Mai simplu spus, oferiți un design personalizat și este convertit într-o temă WordPress complet funcțională!

Majoritatea oamenilor care au fost în sau în jurul industriei de design și web design pot înțelege cu ușurință această terminologie - la fel cum ar înțelege orice alți termeni de design care nu sunt familiari oamenilor din afara nișei (kerning, CMYK, padding, tipografie, conducere, Serif etc.) 

Ce este o temă WordPress?

Există două aspecte principale în crearea unui site web WordPress de obicei. 

1. Aspectul real al site-ului web și
2. continutul site-ului.

În WP, cel mai popular CMS pentru crearea unui site, cum arată site-ul web este independent de conținut. Puteți schimba complet modul în care WordPress arată, păstrând tot conținutul.

Acest lucru se datorează faptului că ceea ce arată site-ul web este de fapt definit de o temă WordPress.

Gândiți-vă la teme precum ați face-o pentru smartphone-uri, pentru computerul desktop sau laptopul sau orice altceva care poate fi „skinned” după preferințele dvs. Șablonul sau tema pe care o utilizați poate fi folosită pentru a „împodobi” conținutul sau pentru a-i oferi aspectul pentru care optați.

Temele WordPress sunt o colecție de fișiere PHP care conțin „comenzi” sau specificații care definesc culorile și modelele, stilurile, pictogramele, fonturile, dimensiunile antetelor și textului, butoanele și, în esență, întregul aspect al tuturor elementelor. a site-ului web pe care îl proiectați.

Există o întreagă industrie în jurul acestor modele, unde puteți fie să obțineți șablonul gratuit, fie să cumpărați unul care este deja realizat (denumit în mod obișnuit premium), pentru orice de la 25 USD la câteva sute de dolari.

Există, de asemenea, opțiunea de a vă crea propriul design personalizat, în loc să optați pentru un produs popular care a fost deja creat (și folosit de multe ori înainte). Acesta este procesul real de conversie a unui PSD într-o temă WordPress (cum va arăta site-ul dvs. în final).

În continuare, vă vom ghida către procedura exactă de creare a propriului design. 

Conversia unei teme PSD în WordPress

Am împărțit procesul de conversie a unui PSD în WordPress în 5 pași importanți:

1. Tăiați fișierul PSD

În ceea ce privește tutorialul nostru PSD la Bootstrap, „Tăierea” este primul și cel mai important lucru din întregul proces de conversie PSD la WordPress receptiv.

Termenul „tăiere” s-ar putea să vi se pară destul de confuz la început, dar nu vă faceți griji prea mult pentru asta. Tăierea se referă la tăierea și împărțirea unui singur fișier imagine în mai multe fișiere imagine, fiecare dintre acestea conținând diferite elemente de design ale întregului design. Unii oameni se referă la acestea ca splicing deoarece creează elemente separate dintr-un singur „organism” de design, care în cele din urmă va fi rearanjat sau sintetizat și transformat într-un design complet. 

Acest lucru este crucial, deoarece nu puteți codifica un șablon/temă dintr-un singur fișier de design de imagine.

Prin urmare, pentru a proiecta o pagină web, trebuie mai întâi să tăiați fișierul imagine principal în mai multe fișiere imagine individuale și apoi să le coaseți împreună.lesste iubesc.

De obicei, majoritatea designerilor web și grafici preferă să folosească Adobe Photoshop pentru tăiere.

Deși același lucru se poate face utilizând un software de editare a imaginilor echivalent, cum ar fi GIMP (GNU Image Manipulation Program) sau orice alt pachet de software pentru imagini, vă recomandăm cu căldură să utilizați Photoshop deoarece face munca mai ușoară și mai rapidă, cu instrumente precum Straturi și Măști de straturi, extragerea metadatelor, amestecarea, manipularea și utilizarea fișierelor PSD și a imaginilor RAW.

Indiferent de software-ul/aplicația pe care îl utilizați, principalul lucru este să veniți cu fișiere de imagine perfecte în cele din urmă - reprezentând diferitele elemente ale eventualului dvs. design.

În plus, nu trebuie să tăiați elementele de design – cum ar fi culoarea antetului/subsolului și fundalul de culoare solidă – în întregime, care pot fi create dinamic. În schimb, tăiați doar elemente de design - cum ar fi butoanele și imaginile - care nu pot fi create dinamic.

Găsiți mai jos un videoclip YouTube care explică elementele de bază ale tăierii fișierelor PSD:

2. Bootstrap tema

După ce ați tăiat fișierul de proiectare a imaginii, accesați https://getbootstrap.com și descărcați această versiune de Twitter Bootstrap de acolo. După finalizarea descărcării, extrageți fișierul zip într-un folder.

Acum, dacă deschideți folderul extras, veți găsi trei foldere - css, fonturi și js - inauntru.

Rețineți că una dintre utilizările principale ale acestui cadru este că folosește pe scară largă interogările media pentru a putea crea modele care funcționează pe orice tip de dispozitiv, permițând designului dvs. să curgă.lessîntre o dimensiune de dispozitiv la alta (xs - Extra Small, pentru mobile, sm - Small, pentru tablete, md - Medium, pentru laptopuri și desktop-uri și lg - Large, pentru desktop-uri mari).

Aceasta se numește design web sensibil.

Citirea suplimentară: Cadre CSS sau grilă CSS: ce ar trebui să folosesc pentru proiectul meu? (Revista Smashing)

3. Creați fișiere Index.html și Style.css

Următorul pas este să codificați elementele tăiate în format HTML/XHTML și să le stilați folosind CSS. Pentru aceasta, trebuie să creați un index.html și style.css fișier, care vă cere să aveți suficientă stăpânire peste HTML CSS. În esență, convertim PSD în HTML, înainte de a putea trece la următorii pași.

Deoparte: HTML sau XHTML reprezintă (EXtensionabil) HyperText Markup Llimba, în timp ce CSS reprezintă Cascading SatâtScălci.

Deoarece doriți să vă dezvoltați tema folosind Bootstrap, va trebui să inițializați Bootstrap în secțiunea de cap și în secțiunea asociată. JavaScript în secțiunea corpului dvs index.html pagina după cum urmează: 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/ro/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
</html>

Acum poți folosi Componentele bootstrap în șablonul dvs. HTML. De exemplu, aici construim o pagină web simplă cu un meniu de navigare și componente pentru miniaturi.

Partea .min.js a bibliotecilor de bootstrap înseamnă că fișierul a fost minimizate din motive de performanță:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/ro/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container-fluid">
<div class="navbar">
<a class="navbar-brand" href="#">WPBootstrap.com</a>
<ul class="nav navbar-nav pull-right">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Order</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="/image1.png">
<div class="caption">
<h3>About</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Explore</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="/image2.png">
<div class="caption">
<h3>Projects</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Explore</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="/image3.png">
<div class="caption">
<h3>Services</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Explore</a></p>
</div>
</div>
</div>
<hr>
<footer>
<p>&copy; WPBootstrap 2015</p>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
</html>

Dacă deschideți acest fișier în browser, ar trebui să arate cam așa:

După cum puteți vedea, în acest moment nu funcționează niciun CSS personalizat pe această pagină. Deci, pentru a stila conținutul paginii html în funcție de cerințele noastre, vom crea un personalizat style.css fişier. Pentru exemplul nostru, am adăugat următorul cod la fișierul meu CSS personalizat:

.navbar {
fundal:#222222;
margin-bottom: 0px;
raza-chenar:0px;
}
.navbar-brand {
culoare: #FFFFFF;
înălțimea liniei: 50 px;
căptușire-stânga: 10px;
}
a.navbar-brand:hover {
culoare:#FFEB3B;
}
.navbar ul {
umplutura-dreapta:4%;
}
.navbar ul li a {
culoare: #FFFFFF;
marja-dreapta:10%;
}
.navbar ul li a:hover {
Culoare: #222222;
culoare de fundal: galben;
}
a.btn-primary{
culoare de fundal: #E91E63;
culoare: #FFFFFF;
}

Pentru a lucra cu fișierul CSS personalizat nou creat, trebuie să îl includem în pagina noastră HTML (la fel cum am făcut bootstrap.min.css). Deci includeți un link de referință către style.css fișier în index.html fișier, chiar deasupra liniei la care ați făcut referire bootstrap.min.css.

...
...

Acum deschis index.html fișier în browser din nou și veți vedea schimbarea – CSS-ul nostru personalizat funcționează acum, puteți vedea bara de antet în partea de sus și butoanele cu o culoare diferită de butoanele implicite de bootstrap.

Toate modificările au fost definite prin fișierul CSS de mai sus.

Acesta a fost doar un exemplu simplu.

De asemenea, folosind Bootstrap, puteți codifica întregul fișier PSD (desigur, după tăiere) în HTML. La sfârșitul acestui pas, veți avea două fișiere în mână:

1. index.html iar altul este
2. style.css.

Până acum am fost în mare parte pe un tutorial PSD to Bootstrap. Acum vine conversia la o temă Bootstrap WordPress.

Este un pic prea mult de lucru pentru tine? Ai prefera să nu începi de la zero? Avem o soluție pentru asta!

Acest pachet de șabloane de pornire WordPress vă va ajuta să începeți cu o serie de teme de pornire pe care le puteți utiliza pentru a vă crea în cele din urmă propriul design personalizat.

Descărcați acum pachetul de 20 de teme WordPress Starter

După cum puteți vedea, conversia de la PSD în HTML este o parte destul de importantă a întregului proces, dar când ați îndepărtat acest lucru, lucrurile devin puțin mai ușoare. 

4. Creați o structură a temei WordPress în index.html

Motivul principal pentru conversia unui fișier de design Photoshop în WordPress este crearea unui șablon de site complet funcțional care ar putea fi încărcat în tabloul de bord al site-ului. 

Asemenea teme precum Divi și Avada și alte teme populare au un set standard de fișiere care trebuie implementate pentru a fi considerate o temă WP validă. Asta vom face în următorul pas. 

Citeste mai mult: Elementor Pro vs Divi - care este cel mai bun?

Cu adevărat și cu adevărat, următoarele faze ale acestei conversii sunt în jurul structurii de codare WordPress pentru teme și șabloane, deoarece acum ne ducem tema către WP.

Acum că ai index.html fișierul PSD, trebuie să îl împărțiți în mai multe php fișiere conform structurii fișierelor cu teme WordPress. Procedând astfel, nu veți putea doar să convertiți static index.html fișier la o temă dinamică WP, dar și posibilitatea de a adăuga diverse caracteristici și funcții asociate cu WordPress.

(În afară de asta, PHP este un limbaj de scripting pe partea de server cunoscut sub numele de preprocesor de hipertext.)

Pentru a ușura programarea temelor WordPress și pentru bune practici de codare, un șablon tipic este format din mai multe fișiere PHP, cum ar fi header.php, footer.php, index.php, sidebar.php, search.php şi aşa mai departe.

Cu toate acestea, aveți nevoie doar index.php și style.css fișiere pentru a crea o temă WordPress complet funcțională.

Ca un exemplu brut, aici rupem creatul de mai sus index.html fișierul în trei fișiere: header.php, index.php și footer.php.

Să începem cu header.php. Întregul cod HTML care este inclus în partea de sus a index.html pagina va intra în header.php fișier.

WPBootstrap.com

Acasă
Despre
Servicii
Ordin
a lua legatura

În timp ce partea din mijloc a fișierului index.html va intra în fișierul index.php:

Despre
...
Explora







Proiecte
...
Explora







Servicii
...
Explora

Și fișierul nostru footer.php ar arăta cam așa:

© WPBootstrap 2015

Acest pas include împărțirea fișierului index.html în header.php, index.php, footer.php și alte fișiere de caracteristici necesare conform structurii fișierelor cu teme WordPress.

Lista completă a fișierelor pe care ar trebui să le aibă fiecare șablon poate fi găsită mai jos. De asemenea, puteți vedea o imagine care arată modul în care acestea se leagă între ele:

• style.css
• header.php
• index.php
• sidebar.php
• footer.php
• single.php
• page.php
• comments.php
• 404.php
• functions.php
• archive.php
• searchform.php
• search.php

Dacă urmați orice ghid pentru a vă converti designul Photoshop în WordPress, veți descoperi întotdeauna că acestea au ca rezultat o structură similară cu următoarea. Mai jos este o vedere mai detaliată a cum ar trebui să arate o temă WordPress finală:

5. Adăugați etichete WordPress la șablon

Acesta este pasul final al tutorialului nostru.

Cel mai bun lucru despre WordPress este că oferă o mulțime de funcții încorporate în structura sa de codare care pot fi folosite pentru a adăuga funcții și caracteristici personalizate la o temă de site.

Pentru a include oricare dintre aceste funcții în tema dvs. WordPress, tot ce trebuie să faceți este să utilizați setul potrivit de etichete de funcție încorporate în fișierele dvs. Cadrul WordPress se va ocupa de tot. Acesta este ceea ce face platforma atât de puternică!

În pasul anterior, am despărțit index.html fișier pe baza structurii de fișiere necesare.

Acum este timpul să adăugați etichete WordPress PHP la diferite fișiere de teme - cum ar fi header.php, index.php, footer.php și sidebar.php etc – pe care l-am primit în pasul anterior. În cele din urmă, le combinăm împreună pentru a produce o temă WordPress foarte funcțională.

Pentru exemplul nostru de mai sus, aici am folosit functioneaza in header.php pentru a afișa titlul site-ului nostru într-un link:

Și pentru meniu, am folosit functioneaza dupa cum urmeaza:

'Project Nav', 'menu_class','nav navbar-nav pull-right' )); ?>

Acum, fișierul nostru header.php va arăta cam așa:

?>
class="no-js">

">



>



'Project Nav', 'menu_class','nav navbar-nav pull-right' )); ?>

Codul de subsol al nostru footer.php va rămâne același, cu excepția adăugării funcţie.

© WPBootstrap 2015

Acum să trecem la index.php. Pentru a ne arăta componentele miniaturii, am folosit funcţie.

get_header (); ?>

În timp ce facem progrese, asta nu este tot! Pentru a ne arăta corect componentele miniaturii, trebuie să definim bara laterală-1, bara laterală-2 și bara laterală-3 în a noastră functions.php fișier după cum urmează:

funcția wpbootstrap_widgets_init() {
register_sidebar (array (
'name' => __( 'Zona widget', 'wpbootstrap'),
'id' => 'sidebar-1',
'description' => __( 'Adăugați widget-uri aici pentru a apărea în bara dvs. laterală.', 'wpbootstrap' ),
'before_widget' => ' ',
'after_widget' => ' ',
'before_title' => ' ',
'after_title' => ' ',
)
register_sidebar (array (
'name' => __( 'Zona widget', 'wpbootstrap'),
'id' => 'sidebar-2',
'description' => __( 'Adăugați widget-uri aici pentru a apărea în bara dvs. laterală.', 'wpbootstrap' ),
'before_widget' => ' ',
'after_widget' => ' ',
'before_title' => ' ',
'after_title' => ' ',
)
register_sidebar (array (
'name' => __( 'Zona widget', 'wpbootstrap'),
'id' => 'sidebar-3',
'description' => __( 'Adăugați widget-uri aici pentru a apărea în bara dvs. laterală.', 'wpbootstrap' ),
'before_widget' => ' ',
'after_widget' => ' ',
'before_title' => ' ',
'after_title' => ' ',
)
);
}
add_action('widgets_init', 'wpbootstrap_widgets_init');

Acest lucru va înregistra trei zone widget în tabloul de bord WordPress, unde ar trebui să punem „Cod HTML” pentru fiecare componentă de miniatură în bara laterală-1, bara laterală-2 și bara laterală-3 respectiv widget-uri. De exemplu, vom folosi codul de mai jos în bara laterală-1 widget.

Despre
...
Explora

Si asa mai departe!

Ultimul lucru pe care trebuie să-l facem este să ne încărcăm foile de stil. Acest lucru se poate face folosind stilul wp enqueue () în function.php dosar, după cum urmează.

// Încărcați foaia de stil principală
wp_enqueue_style(''wpbootstrap-style', get_stylesheet_uri());

// Încărcați foaia de stil Bootstrap
wp_enqueue_style( 'wpbootstrap', get_template_directory_uri() . '/css/bootstrap.css');

Pentru o listă completă a tuturor etichetelor și funcțiilor disponibile, vă recomandăm să parcurgeți aceste pagini oficiale Codex:

• Etichete șablon: Această pagină vă oferă o listă completă de etichete WordPress, fiecare având o pagină dedicată unde puteți găsi mai multe informații despre o anumită etichetă.
• Referință de funcție: Această pagină este un ghid de referință pentru toate funcțiile PHP utilizate în software-ul WordPress. La fel ca Etichetele șablon, fiecare funcție PHP este legată de o pagină dedicată unde este explicată în detaliu cu exemple adecvate.

După adăugarea etichetelor și funcțiilor esențiale WordPress, toate aceste fișiere vor fi plasate într-un singur folder având un nume similar cu numele temei. Trebuie să plasați acest folder în / Wp-content / teme / directorul de instalare a site-ului dvs. web.

Și acesta este pasul final al tutorialului!

Odată ce ați făcut asta, ar trebui să aveți o temă WordPress receptivă complet funcțională, folosind Bootstrap, pe care o puteți activa prin tabloul de bord WordPress. 

Sunteți gata să începeți lucrurile?

Servicii de conversie PSD în WordPress

Înainte de a continua să citiți - căutați dezvoltatori sau parteneri care să vă ajute cu proiectul site-ului dvs.? Căutați un furnizor de încredere de servicii de conversie PSD în WordPress? 

Te afli într-o poziție de neinvidiat de a fi nevoit să găsești un partener de încredere, fără a fi înșelat sau de a pierde mult timp (și bani) cu un furnizor de servicii de calitate scăzută.

Experiența noastră în găsirea dezvoltatorilor de încredere nu a fost plăcută. 

Am avut de a face cu o serie de probleme majore: 

• Dezvoltatorii returnează cod de calitate extrem de scăzută
• Persoane care au comunicat foarte sporadic, creând probleme semnificative de comunicare
• Cod care a fost 100% plagiat creând probleme legale pentru noi
• Tarife scumpe, cu o calitate care a fost în cel mai bun caz mediocră
• Dezvoltatori care au dispărut (sau nu am primit niciodată răspuns de la următoarele depozite)

Dar nu lăsați acest lucru să vă sperie de la externalizare, trebuie doar să găsiți un de încredere companie - și suntem aici pentru a vă ajuta! 

Având în vedere că suntem în afacere de peste 15 ani, am construit o rețea de furnizori pe care îi cunoaștem și în care avem încredere atunci când vine vorba de WordPress și de servicii de dezvoltare web. Aceștia sunt furnizori complet externalizați care pot lucra cu dvs. pe bază de proiect. 

Vrei să afli mai multe? Aruncă o privire la opțiunile de mai jos când vine vorba de conversia de încredere PSD în WordPress:

1. PSDtoWPService.com

Mirza și echipa sa și-au construit o reputație excelentă pentru lucrul cu WordPress, construind teme personalizate și ar fi o alegere excelentă de partener pentru o astfel de muncă. Ne place acest serviciu PSD to WordPress pentru că este atât ieftin, cât și fiabil. Pot converti fișierele PSD în teme WordPress sau în toate celelalte tipuri de dezvoltare WordPress.

Locație offshore: Bangladesh

Tarif pe oră: $ 25 / oră 

2. Codabil 

Codeable oferă un concept diferit.

Mai degrabă decât offshoring direct, Codeable este o piață formată exclusiv din programatori WordPress, unde freelancerii trebuie să treacă printr-un proces riguros de verificare pentru a ajunge pe piață.

Algoritmul lor de stabilire a prețurilor vă oferă un preț corect pentru a elimina atât subcotarea, cât și supraprețul. Verificați-le dacă doriți să obțineți diferite opțiuni înainte de a decide ce serviciu de conversie PSD în WordPress să alegeți.

Locație: La nivel mondial, tu decizi cu cine preferi să lucrezi 

Tarif pe oră: 70 $ până la 120 $ / oră

3. WPKraken

WPKraken este o echipă de dezvoltare web care are o evaluare de 4.98 din 5 stele și a lucrat cu clienți corporativi mari în numele lor, cum ar fi Lexus și Suzuki și poate face orice fel de muncă bazată pe WordPress.

Au o echipă internă cu experiență de dezvoltatori, designeri UI și UX, PM și QA. Aceștia pot lucra atât la reparații mici și la proiecte mici, cât și la proiecte la scară largă, personalizate.

Indiferent ce fel de sarcină ai, ei se pot descurca așa cum ar trebui făcută!

WP Kraken oferă un preț corect pentru servicii de înaltă calitate. Îi puteți contacta prin portalul lor wpkraken.io 

Locație: Polonia

Tarif pe oră: $ 50 / oră 

Nu sunteți încă interesat să angajați dezvoltatori? Citiți mai departe!

Câteva gânduri suplimentare 

Încet, dar sigur, responsive Web Design a devenit un standard dominant pentru construirea de site-uri web pregătite pentru viitor.

În zilele noastre, aproape toate site-urile web sunt alimentate de această tehnică uimitoare pentru a oferi utilizatorilor o experiență optimă de vizualizare și interacțiune, indiferent de dispozitivul pe care îl folosesc, fie că este un telefon, tabletă sau laptop/dispozitiv desktop.

Potrivit unui sondaj recent realizat de echipa Google Webmaster pe Google+, peste 81% dintre oameni preferă să folosească o abordare de design responsive pentru a face site-urile lor să fie randate corect pe toate tipurile de dispozitive.

De aceea, este esențial să înveți cum să creezi o temă de site web WordPress folosind Twitter Bootstrap sau un alt cadru receptiv pentru designul tău web dintr-un PSD. Deși există o mulțime de teme gratuite pentru site-uri web, crearea propriei teme WordPress personalizate folosind Bootstrap este expresia supremă a creativității în designul web.

Chiar dacă WordPress domină peste 24% din toate site-urile web, convertirea unui fișier Photoshop (PSD) într-o temă responsive care funcționează bine nu este atât de ușoară pe cât credeți. Acest lucru necesită să aveți o bună înțelegere a scrierii de interogări media CSS care în cele din urmă dictează dacă un șablon este sau nu receptiv.

Nu ar fi mai bine dacă primiți o foaie de stil receptivă precodificată, plină cu toate caracteristicile esențiale?

Datorită Bootstrap, cel mai popular cadru front-end responsive din lume, pentru a ușura viața dezvoltatorilor, aceasta este acum o sarcină destul de simplă decât înainte. În acest articol, vă vom arăta cum să transformați un șablon PSD într-o temă WordPress receptivă folosind Bootstrap ca cadru de dezvoltare.

Încă o dată, ne-am convertit mai întâi PSD-ul în Bootstrap, așa că, în esență, prima parte este într-adevăr un tutorial PSD la Bootstrap.

Mai târziu, în a doua parte, se transformă fișierele pe care le-am dezvoltat într-o temă WordPress, așa că în acel moment, totul devine un tutorial PSD to Bootstrap.

La fel ca întotdeauna, ne place să vă facem viața mai ușoară, oferindu-vă o grămadă de lucruri care să vă ajute să începeți. După ce ați învățat elementele de bază ale creării unei teme WordPress, de ce să nu începeți cu una dintre temele WordPress Starter.

Descărcați pachetul nostru de 20 de teme WP Starter

Sfat esențial de top:

Crearea unui design excelent pentru site-ul web necesită un set de abilități destul de avansate. Deși să o scrii singur ar putea părea cea mai bună opțiune, angajarea unui dezvoltator WordPress excelent (de exemplu de la Toptal) este probabil mult mai rentabil pe termen lung. În esență, vei obține un rezultat grozav, într-un timp foarte scurt. 

Consultați acum Dezvoltatorii de pe Toptal

Întrebări Frecvente

Ce este un fișier PSD?

Un fișier PSD este un fișier Photoshop Design care conține un design creat de software-ul de design de la Adobe: Photoshop. În contextul acestui articol, PSD-ul va conține designul unui site web. Acest fișier PSD poate fi apoi trimis dezvoltatorilor pentru a fi creat ca temă WordPress. Fișierul de design va conține toate informațiile necesare pentru a crea designul final al unui site web în HTML, inclusiv lucruri precum culorile, grilele, cum va arăta pe desktop/mobil și alte elemente de design necesare.

Ce înseamnă PSD la WordPress?

PSD to WordPress este procesul care creează o temă pentru WordPress dintr-un concept de design creat în Photoshop. În mod obișnuit, un designer este angajat pentru a crea un concept de design al site-ului web, bazat pe cum ar dori utilizatorul final să arate site-ul. Odată ce designul a fost creat în Photoshop, acesta trebuie convertit în cod compatibil WordPress. Aceasta înseamnă că un dezvoltator web va folosi designul site-ului creat în Photoshop și va crea o temă WordPress care va recrea designul.

Cum deschid un fișier PSD în Photoshop?

PSD este formatul de fișier nativ al Photoshop, așa că deschiderea unui fișier PSD în Photoshop ar trebui să fie banală. Singurul lucru de care trebuie să rețineți că anumite elemente necesare, cum ar fi fonturile folosite pentru a crea designul, trebuie să fie disponibile pe computerul pe care este deschis fișierul, altfel designul nu va conține fonturile corecte.

Ce este o temă WordPress?

O temă WordPress este o colecție de fișiere PHP care conțin „comenzi” sau specificații care definesc și creează culorile și modelele, stilurile, pictogramele, fonturile, dimensiunile antetelor și textului, butoanele și, în esență, întregul aspect al tuturor. a elementelor site-ului web care este proiectat. O temă WordPress este dinamică în sensul că designul poate funcționa cu orice tip de conținut, fie că acesta este un blog, un magazin de comerț electronic, un curs online sau orice altceva pentru care este utilizat site-ul WordPress specific.

Cum convertesc un șablon Bootstrap în WordPress?

Pentru a converti un șablon Bootstrap în WordPress, un dezvoltator web trebuie să ia șablonul Bootstrap și să copieze designul pe o temă schelet WordPress. În realitate, ceea ce se face este că modelele reale sunt convertite într-un limbaj pe care cadrul WordPress îl poate înțelege și cu care să lucreze. Puteți urma instrucțiunile noastre de mai sus sau puteți angaja unul dintre furnizorii noștri de servicii de conversie enumerați mai sus.

Gânduri finale

Asta e tot pentru moment despre cum să creezi o temă Bootstrap WordPress receptivă dintr-un fișier PSD. Indiferent dacă sunteți începător sau profesionist, acest tutorial PSD la Bootstrap și apoi la WP ar trebui să vă ofere cu siguranță cel mai simplificat mod de a obține rezultatul dorit.

Cu toate acestea, dacă vă confruntați cu orice fel de problemă în procesul de conversie PSD în WordPress, există două lucruri pe care le puteți face. Puteți angajează un dezvoltator web pe Toptal, unde au primele 3% din talent la nivel mondial, așa că nu trebuie să vă faceți griji cu privire la calitate. Alternativ, puteți angajează un dezvoltator WordPress profesionist.

Spune-ne ce crezi? Aveți nevoie de mai multe detalii în anumite părți ale acestui tutorial/ghid? Ne-ar plăcea ca acest ghid să vă fie util, așa că vă rugăm să ne ajutați să vă ajutăm!

Despre autor

Autor: Ajeet YadavSite-ul: https://www.wordpressintegration.com/E-mail: ajeet.yadav@ipraxa.com

Ajeet este un dezvoltator web senior la WordpressIntegration - furnizor de servicii PSD to WordPress, unde este responsabil pentru scrierea codului JavaScript personalizat în timpul procesului de conversie. În timpul liber, el scrie pe diferite subiecte legate de JavaScript, WordPress și Web Design pentru a împărtăși experiența sa de lucru cu alții.