5 auðveld skref til að umbreyta PSD í WordPress þema (Bootstrap)

Vissir þú að á hverjum degi koma 50,000 nýjar WordPress vefsíður á netið? Hvernig ætlar þú að skera þig úr hópnum í hafinu á svo mörgum mismunandi stöðum? Ein örugg aðferð til að vekja strax athygli getur verið að búa til þitt eigið, einstaka, sérsniðna þema breytt úr PSD í WordPress. Þetta væri hannað sérstaklega fyrir þína eigin síðu - og vefsíðan þín verður ekki ein af þúsundum smákökusíðna sem til eru!

Það eru þrír staðlar þegar hanna vefsíðuþema. PSD (Photoshop skrár), WordPress (WP) og nokkuð nýlega þessi síðustu ár, Twitter Bootstrap - rammi til að þróa móttækilegar síður sem fagfólk iðnaðarins notar þessa dagana.

Í þessari færslu ætlum við að gefa þér fullkomna og auðvelda leiðbeiningar um hvernig á að sameina alla þrjá: hvernig á að umbreyta PSD í WordPress (Bootstrap) þema, í 5 einföldum skrefum. 

Síðar í þessari grein finnur þú sniðmát, tilbúin til niðurhals, sem þú getur notað sem grunn fyrir þessa kennslu. Ef þú vilt sjá aðrar greinar, vinsamlegast farðu á aðra hluta vefsíðu okkar með ítarlegum námskeiðum og greinum.

En af hverju viltu breyta PSD skrá í Bootstrap WordPress þema?

Hvað er PSD?

PSD er stutt í PhotoSstep Design. 

Þetta er vegna þess að Photoshop er sá eini hugbúnaður sem er vinsælastur hjá grafískum hönnuðum og hvernig flestar WordPress vefsíðugerðir eru búnar til. Með því að nota Photoshop mun hönnuður búa til einstaka vefsíðuhönnun fyrir þig. Þetta verður vistað sem hönnunarskrá Photoshop eða PSD skrá. Þessa hönnun er síðan hægt að veita WordPress forriturum sem munu breyta þessu í þema.

Hvað er PSD við WordPress?

PSD til WordPress er að umbreyta Photoshop hönnunarskrá í starfandi WordPress þema með því að nota Bootstrap eða aðra aðferðafræði og ramma. Einfaldlega sagt, þú býður upp á sérsniðna hönnun og það er breytt í fullkomlega hagnýtt WordPress þema!

Flestir sem hafa verið innan eða í kringum hönnunar- og vefhönnunariðnaðinn geta auðveldlega skilið þessa hugtökafræði - rétt eins og þeir myndu skilja önnur hönnunarhugtök sem ekki þekkja fólk utan sessins (kerning, CMYK, bólstrun, leturfræði, leiðandi, Serif osfrv.) 

Hér er stutt, tveggja mínútna yfirlit yfir hvað PSD skrá er:

Hvað er WordPress þema?

Það eru venjulega tveir meginþættir við að búa til WordPress vefsíðu. 

1. Raunverulegt útlit vefsíðunnar og
2. innihald síðunnar.

Í WP, vinsælasta CMS til að búa til vefsíðu, hvernig vefsíðan lítur út er óháð innihaldi. Þú gætir breytt því hvernig WordPress lítur út alveg á meðan þú geymir allt innihaldið.

Þetta er vegna þess að það sem vefsíðan lítur út er í raun skilgreint með WordPress þema.

Hugsaðu um þemu eins og þú myndir gera fyrir snjallsíma, fyrir skjáborðstölvuna þína eða fartölvu eða annað sem hægt er að „skinna“ að vild. Sniðmátið eða þemað sem þú notar er hægt að nota til að „húðra“ innihaldið eða gefa því útlit og tilfinningu sem þú velur.

WordPress þemu eru safn af PHP skrám sem innihalda "skipanir" eða forskriftir sem skilgreina liti og mynstur, stíl, tákn, leturgerðir, stærðir hausa og texta, hnappa og í raun allt útlit allra þátta vefsíðunnar sem þú ert að hanna.

Það er heil atvinnugrein í kringum þessa hönnun, þar sem þú getur annað hvort fengið sniðmát ókeypis eða keypt eitt sem þegar er búið til (venjulega kallað aukagjald), fyrir allt frá $ 25 til nokkur hundruð dollara.

Það er einnig möguleiki að búa til eigin sérsniðna hönnun, frekar en að velja vinsæla vöru sem þegar hefur verið búin til (og oft áður notuð). Þetta er raunverulega ferlið við að breyta PSD í WordPress þema (hvernig vefsíðan þín mun líta út á endanum).

Framvegis munum við leiðbeina þér um nákvæma aðferð við að búa til þína eigin hönnun. 

Umbreyta PSD í WordPress þema

Við höfum sundurliðað ferlið við að breyta PSD í WordPress í 5 mikilvæg skref:

1. Skerið PSD skrána

Hvað varðar PSD til Bootstrap námskeiðið okkar, þá er „sneiðun“ fyrst og fremst í öllu PSD til að svara WordPress umbreytingarferli.

Hugtakið „Sneiða“ gæti virst alveg ruglingslegt fyrir þig í fyrstu, en ekki hafa miklar áhyggjur af því. Með sneiðar er átt við að klippa og deila einni myndaskrá í margar myndskrár, sem hver um sig inniheldur mismunandi hönnunarþætti allrar hönnunarinnar. Sumir vísa til þeirra sem splicing vegna þess að það er að búa til aðskilda þætti úr einni "lífveru" sem verður að lokum endurraðað eða nýmyndað og breytt í heila hönnun. 

Þetta er mikilvægt þar sem þú getur ekki kóðað sniðmát / þema úr einni myndhönnunarskrá.

Þess vegna, til að hanna vefsíðu, þarftu fyrst að sneiða aðalmyndaskrána í margar einstakar myndaskrár og sauma þær síðan saman saumlessly.

Venjulega kjósa flestir vef- og grafískir hönnuðir að nota Adobe Photoshop til að sneiða.

Þó að það sama sé hægt að gera með samsvarandi myndvinnsluhugbúnaði eins og GIMP (GNU Image Manipulation Program) eða öðrum hugsanlegum hugbúnaðarpakka, mælum við með því að þú notir Photoshop þar sem það gerir verkið auðveldara og fljótlegra, með verkfærum eins og Lögum og Lagsgrímum, sem draga út lýsigögn, blanda saman, nota og nota PSD skrár og RAW myndir.

Hvaða hugbúnaður / forrit sem þú notar er aðalatriðið að koma með punktalitaðar myndaskrár í lokin - tákna mismunandi þætti endanlegrar hönnunar þinnar.

Að auki þarftu ekki að klippa hönnunarþætti - eins og haus / fót lit og solid lit bakgrunn - að fullu, sem hægt er að búa til á virkan hátt. Í staðinn skaltu aðeins klippa hönnunarþætti - eins og hnappa og myndir - sem ekki er hægt að búa til á virkan hátt.

Finndu hér að neðan YouTube myndband sem útskýrir grunnatriði PSD skráarskurðar:

2. Bootstrap þema þitt

Þegar þú hefur skorið myndhönnunarskrána þína skaltu fara í https://getbootstrap.com og halaðu niður þessari útgáfu af Twitter Bootstrap þaðan. Eftir að niðurhalinu er lokið, taktu zip-skrána út í möppu.

Nú ef þú opnar útdregna möppuna finnur þú þrjár möppur - css, leturgerðir og js - inni í því.

Athugaðu að ein aðal notkun þessa ramma er vegna þess að hún notar mikið fyrirspurnir í fjölmiðlum til að geta búið til hönnun sem virkar í hvers konar tæki, leyfa hönnun þinni að flæða saumlessá milli einnar stærðar tækis í aðra (xs - Extra Small, fyrir farsíma, sm - Small, fyrir spjaldtölvur, md - Medium, fyrir fartölvur og skjáborð og lg - Large, fyrir stórt borðtölvur).

Þetta er kallað móttækileg vefhönnun.

Viðbótarupplýsingar: CSS Framework eða CSS Grid: Hvað ætti ég að nota fyrir verkefnið mitt? (Snilldar tímarit)

3. Búðu til Index.html og Style.css skrár

Næsta skref er að kóða sneiða þætti í HTML / XHTML snið og stíla þá með CSS. Fyrir þetta þarftu að búa til index.html og a style.css skrá, sem krefst þess að þú hafir nægan leikni í HTML CSS. Í meginatriðum erum við að breyta PSD í HTML áður en við getum haldið áfram í næstu skref.

Innskot: HTML eða XHTML táknar (EXspennuþrunginn) HyperTEXT Markup Language, whiles CSS táknar Cstigandi StyleShælar.

Þar sem þú vilt þróa þemað með því að nota Bootstrap þarftu að frumstilla Bootstrap í höfuðhlutanum og því tengdu JavaScript í líkamshlutanum í þínum index.html síðu sem hér segir: 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/is/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>

Nú geturðu nýtt þér Bootstrap hluti í HTML sniðmátinu þínu. Til dæmis, hér erum við að byggja upp einfalda vefsíðu með siglingavalmynd og smáhlutum.

.Min.js hluti bootstrap bókasafnanna þýðir að skráin hefur verið minnkað af frammistöðuástæðum:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/is/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>

Ef þú opnar þessa skrá í vafranum þínum ætti hún að líta svona út:

Eins og þú sérð er engin sérsniðin CSS að vinna á þessari síðu eins og er. Svo að stíla innihald html síðunnar í samræmi við kröfur okkar, munum við búa til sérsniðin style.css skjal. Fyrir dæmi okkar höfum við bætt eftirfarandi kóða við sérsniðnu CSS skrána mína:

.navbar {
bakgrunnur: # 222222;
framlegð-botn: 0px;
jaðar-radíus: 0px;
}
.navbar-vörumerki {
litur: #FFFFFF;
línuhæð: 50px;
padding-vinstri: 10px;
}
a.navbar-brand: sveima {
litur: # FFEB3B;
}
.navbar ul {
padding-hægri: 4%;
}
.navbar ul li a {
litur: #FFFFFF;
framlegð til hægri: 10%;
}
.navbar ul li a: sveima {
lit: #222222;
bakgrunnslitur: gulur;
}
a.btn-aðal {
bakgrunnslitur: # E91E63;
litur: #FFFFFF;
}

Til að fá nýstofnaða sérsniðna CSS skjalavinnu verðum við að láta hana fylgja með á HTML síðunni okkar (alveg eins og við gerðum bootstrap.min.css). Svo fela í sér tilvísunartengil á style.css skrá í þinn index.html skrá, rétt fyrir ofan línuna þar sem þú vísaðir til bootstrap.min.css.

...
...

Opna nú index.html skrá í vafranum þínum aftur og þú munt sjá breytinguna - sérsniðna CSS okkar er að virka núna, þú getur séð hausstikuna efst og hnappana með öðrum lit en sjálfgefnu ræsihnapparnir.

Allar breytingarnar hafa verið skilgreindar með CSS skránni hér að ofan.

Þetta var bara einfalt dæmi.

Sömuleiðis, með því að nota Bootstrap, geturðu kóðað alla PSD skrána þína (auðvitað, eftir að hafa skorið hana niður) í HTML. Í lok þessa skrefs muntu hafa tvær skrár í hendi:

1. index.html og annað er
2. style.css.

Hingað til vorum við aðallega í PSD til Bootstrap kennslu. Nú kemur breytingin á Bootstrap WordPress þema.

ER ofangreint aðeins of mikil vinna fyrir þig? Viltu frekar byrja ekki frá grunni? Við höfum lausn á því!

Þessi búnt af WordPress byrjunarsniðmátum mun hjálpa þér að byrja með fjölda byrjendaþemu sem þú getur notað til að lokum framleiða eigin sérsniðna hönnun.

Sæktu 20 WordPress Starter þema búnt núna

Eins og þú sérð er umbreyting úr PSD í HTML nokkuð mikilvægur hluti af öllu ferlinu, en þegar þetta er komið úr vegi, þá verða hlutirnir aðeins auðveldari. 

4. Búðu til WordPress þema uppbyggingu í index.html

Helsta ástæðan fyrir því að breyta Photoshop hönnunarskránni í WordPress er að búa til fullkomlega hagnýtt vefsíðusniðmát sem hægt væri að hlaða upp á mælaborðið á vefsíðunni. 

Slík þemu sem Divi og Avada og önnur vinsæl þemu hafa venjulegt safn af skrám sem þarf að útfæra til að geta talist gilt WP þema. Það er það sem við munum gera í næsta skrefi okkar. 

Lestu meira: Elementor Pro vs Divi - hver er bestur?

Raunverulega og sannarlega eru næstu áfangar þessarar umbreytingar í kringum WordPress kóðunaruppbyggingu fyrir þemu og sniðmát því nú erum við að taka þemað okkar í átt að WP.

Nú þegar þú ert með index.html skrá af PSD þínum, þú þarft að brjóta hana í margar PHP skrár samkvæmt WordPress þemaskránni. Með því að gera það myndirðu ekki aðeins geta umbreytt kyrrstöðu index.html skrá í kraftmikið WP þema en einnig hægt að bæta ýmsum eiginleikum og aðgerðum sem tengjast WordPress við það.

(Að auki er PHP forritunarmál miðlara sem er þekkt sem forvinnsluaðili hátexta.)

Til að gera forritun WordPress þema auðveldari og fyrir góða kóðunarvenjur er dæmigert sniðmát samanstendur af nokkrum PHP skrám eins og header.php, footer.php, index.php, sidebar.php, search.php og svo framvegis.

Hins vegar þarftu aðeins index.php og style.css skrár til að búa til fullkomlega hagnýtt WordPress þema.

Sem gróft dæmi, hér erum við að brjóta okkar ofangreindu index.html skrá í þrjár skrár: header.php, index.php og footer.php.

Við skulum byrja á header.php. Allur HTML kóðinn sem fylgir efst á index.html síðan mun fara í header.php skrá.

WPBootstrap.com

Heim
Um það bil
Þjónusta
Panta
Hafðu samband

Þó að miðhluti index.html skráarinnar fari í index.php skrána:

Um það bil
...
Kannaðu







Verkefni
...
Kannaðu







Þjónusta
...
Kannaðu

Og footer.php skráin okkar myndi líta svona út:

© WPBootstrap 2015

Þetta skref felur í sér að brjóta upp index.html skrána í haus.php, index.php, footer.php og aðrar nauðsynlegar aðgerðarskrár samkvæmt WordPress þemaskránni.

Heill listi yfir skrár sem hvert sniðmát ætti að hafa er að finna hér að neðan. Þú getur líka séð mynd sem sýnir hvernig þessi tengjast hvort öðru:

• style.css
• header.php
• index.php
• sidebar.php
• footer.php
• single.php
• síðu.php
• comments.php
• 404.php
• functions.php
• archive.php
• searchform.php
• leit.php

Ef þú fylgir einhverjum leiðbeiningum um að breyta Photoshop hönnuninni þinni í WordPress, munt þú alltaf komast að því að þær leiða til uppbyggingar sem svipar til eftirfarandi. Hér að neðan er ítarlegri mynd af því hvernig lokaþema WordPress ætti að líta út:

5. Bættu WordPress merkjum við sniðmát

Þetta er lokaskref námskeiðsins okkar.

Það besta við WordPress er að það býður upp á heilan helling af innbyggðum aðgerðum í kóðunaruppbyggingu þess sem hægt er að nota til að bæta sérsniðnum aðgerðum og eiginleikum við vefsíðuþema.

Til að fela einhverjar af þessum aðgerðum í WordPress þema þitt, þá þarftu ekki annað en að nota rétta safnið af innbyggðum aðgerðamerkjum í skjölunum þínum. WordPress ramminn mun sjá um allt. Þetta er það sem gerir vettvanginn svo öflugan!

Í fyrra skrefi slitum við saman index.html skrá á grundvelli nauðsynlegrar skráaruppbyggingar.

Nú er kominn tími til að bæta WordPress PHP merkjum við ýmsar þemaskrár - eins og haus.php, index.php, footer.php og sidebar.php etc - sem við höfum fengið í fyrra skrefi. Að lokum sameinum við þau saman til að framleiða mjög hagnýtt WordPress þema.

Fyrir dæmið hér að ofan, hér höfum við notað virka í header.php til að sýna titilinn á síðunni okkar í krækju:

Og fyrir matseðil höfum við notað virka sem hér segir:

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

Nú, header.php skráin okkar mun líta svona út:

<?php
?>
class = "no-js">

">



>



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

Fótarkóðinn fyrir okkar footer.php verður það sama nema bæta við virka.

© WPBootstrap 2015

Nú skulum við halda áfram að index.php. Til að sýna smáhlutina okkar höfum við notað virka.

<?php
get_header (); ?>

Á meðan við erum að ná framförum er þetta samt ekki allt! Til að sýna smáhluta okkar almennilega verðum við að skilgreina hliðarstiku-1, hliðarstiku-2 og hliðarstiku-3 í okkar functions.php skjal sem hér segir:

virka wpbootstrap_widgets_init () {
register_sidebar (array (
'name' => __ ('Búnaðarsvæði', 'wpbootstrap'),
'id' => 'skenkur-1',
'lýsing' => __ ('Bæta við græjum hér til að birtast í hliðarstikunni þinni.', 'wpbootstrap'),
'before_widget' => ' ',
'after_widget' => ' ',
'before_title' => ' ',
'after_title' => ' ',
)
register_sidebar (array (
'name' => __ ('Búnaðarsvæði', 'wpbootstrap'),
'id' => 'skenkur-2',
'lýsing' => __ ('Bæta við græjum hér til að birtast í hliðarstikunni þinni.', 'wpbootstrap'),
'before_widget' => ' ',
'after_widget' => ' ',
'before_title' => ' ',
'after_title' => ' ',
)
register_sidebar (array (
'name' => __ ('Búnaðarsvæði', 'wpbootstrap'),
'id' => 'skenkur-3',
'lýsing' => __ ('Bæta við græjum hér til að birtast í hliðarstikunni þinni.', 'wpbootstrap'),
'before_widget' => ' ',
'after_widget' => ' ',
'before_title' => ' ',
'after_title' => ' ',
)
);
}
add_action ('widgets_init', 'wpbootstrap_widgets_init');

Þetta mun skrá þrjú búnaðarsvæði í WordPress mælaborðinu, þar sem við þyrftum að setja „HTML kóða“Fyrir hvern smáhlut í hliðarstiku-1, hliðarstiku-2 og hliðarstiku-3 búnaður hver um sig. Til dæmis notum við kóðann hér að neðan í hliðarstiku-1 búnaður.

Um það bil
...
Kannaðu

Og svo framvegis!

Það síðasta sem við þurfum að gera er að hlaða stílblöðin okkar. Þetta er hægt að gera með því að nota wp enqueue stíl () í function.php skjal, sem hér segir.

// Hlaðið upp aðalstílsnið
wp_enqueue_style ('' wpbootstrap-style ', get_stylesheet_uri ());

// Hlaða Bootstrap stílblað
wp_enqueue_style ('wpbootstrap', get_template_directory_uri (). '/css/bootstrap.css');

Fyrir fullan lista yfir öll merki og aðgerðir sem til eru, mælum við með að þú farir í gegnum þessar opinberu Codex síður:

• Sniðmátamerki: Þessi síða veitir þér fullan lista af WordPress merkjum sem hvert um sig hefur sérstaka síðu þar sem þú getur fundið frekari upplýsingar um tiltekið merki.
• Virkni Tilvísun: Þessi síða er tilvísun í allar PHP aðgerðir sem notaðar eru í WordPress hugbúnaði. Eins og sniðmátamerki, er hver PHP aðgerð tengd við sérstaka síðu þar sem henni er útskýrt ítarlega með viðeigandi dæmum.

Eftir að hafa bætt við mikilvægum WordPress merkjum og aðgerðum verða allar þessar skrár settar í eina möppu með svipuðu nafni og þemaheitið. Þú verður að setja þessa möppu í / Wp-content / themes / skrá yfir vefsíðu þína.

Og það er lokaskref námskeiðsins!

Þegar þú hefur gert það ættirðu að hafa fullvirkt móttækilegt WordPress þema með því að nota Bootstrap sem þú getur virkjað í gegnum WordPress mælaborðið. 

Tilbúinn til að koma hlutunum af stað?

PSD til WordPress viðskiptaþjónusta

Áður en þú heldur áfram að lesa - ertu að leita að verktaki eða samstarfsaðilum til að hjálpa þér við vefsíðuverkefnið þitt? Ertu að leita að áreiðanlegum þjónustuaðila PSD til WordPress viðskiptaþjónustu? 

Þú ert í þeirri öfundsverðu stöðu að þurfa að finna góðan áreiðanlegan félaga, án þess að verða svikinn, eða tapa miklum tíma (og peningum) hjá lággæða þjónustuaðila.

Reynsla okkar af því að finna trausta verktaki hefur ekki verið ánægjuleg. 

Við höfum þurft að takast á við nokkur helstu mál: 

• Hönnuðir skila mjög lágum gæðakóða
• Fólk sem hafði mikil samskipti og skapaði veruleg samskiptavandamál
• Kóði sem var 100% ritstuldur og skapaði lögfræðileg mál fyrir okkur
• Dýrir taxtar, með gæði sem voru í besta falli miðlungs
• Hönnuðir sem hurfu (eða við heyrðum aldrei eftir innlán)

En ekki láta þetta fæla þig frá útvistun, þú þarft bara að finna a treyst fyrirtæki - og við erum hér til að hjálpa! 

Í ljósi þess að við höfum verið í bransanum í yfir 15 ár höfum við byggt upp net veitenda sem við þekkjum og treystum þegar kemur að WordPress og vefþróunarþjónustu. Þetta eru að fullu útvistaðir veitendur sem geta unnið með þér á verkefnagrundvelli. 

Viltu vita meira? Líttu á eftirfarandi valkosti þegar kemur að áreiðanlegri PSD til WordPress umbreytingu:

1. PSDtoWPService.com

Mirza og teymi hans hafa byggt upp frábært orðspor fyrir að vinna með WordPress, byggja sérsniðin þemu og væri frábært val samstarfsaðila fyrir slíka vinnu. Okkur líkar þessi PSD við WordPress þjónustu vegna þess að hún er bæði ódýr og áreiðanleg. Þeir geta umbreytt PSD skrám í WordPress þemu eða alls konar WordPress þróun.

Staðsetning utan strandar: Bangladess

Tímaverð: $ 25 / klst 

2. Kóðanlegt 

Codeable býður upp á annað hugtak.

Frekar en að offshora beint, er Codeable markaður sem eingöngu er skipaður WordPress forritara, þar sem sjálfstæðismenn þurfa að fara í gegnum strangt aðferðir til að komast á markaðinn.

Verð reiknirit þeirra gefur þér sanngjarnt verð til að útrýma bæði undirverðlagningu og of miklu verði. Athugaðu þá hvort þú vilt fá ýmsa möguleika áður en þú ákveður hvaða PSD til WordPress viðskiptaþjónusta þú vilt fara í.

Staðsetning: Á heimsvísu ákveður þú með hverjum þú vilt frekar vinna 

Tímaverð: $ 70 til $ 120 / klukkustund

3. WPKraken

WPKraken er vefsíðuþróunarteymi sem hefur 4.98 stjörnur í 5 stjörnur og hefur unnið með stórum viðskiptavinum að þeirra nafni eins og Lexus og Suzuki og getur unnið hvers konar WordPress starf.

Þeir eru með reynslumikið teymi hönnuða, Hönnuða og UX hönnuða, PM og QA. Þeir geta unnið bæði í litlum lagfæringum og litlum verkefnum sem og í stórum stíl, sérsniðin verkefni.

Sama hvers konar verkefni þú hefur, þeir geta höndlað það eins og það á að gera!

WP Kraken býður upp á sanngjarnt verð fyrir hágæða þjónustu. Þú getur haft samband við þá í gegnum gáttina þeirra wpkraken.io 

Staðsetning: poland

Tímaverð: $ 50 / klst 

Hefur þú ekki áhuga á að ráða verktaki ennþá? Lestu áfram!

Nokkrar hugsanir til viðbótar 

Hægt en örugglega er móttækileg vefhönnun orðin ríkjandi staðall til að byggja upp framtíðarbúnar vefsíður.

Þessa dagana eru næstum allar vefsíður knúnar áfram af þessari ótrúlegu tækni til að skila notendum ákjósanlegri áhorfs- og samskiptaupplifun, óháð tækinu sem þeir nota, hvort sem það er sími, spjaldtölva eða fartölvu / skjáborðs tæki.

Samkvæmt nýlegri könnun sem gerð var af vefstjóra Google á Google+, kjósa yfir 81% fólks að nota móttækilega hönnunaraðferð til að láta vefsíður sínar birtast almennilega á alls kyns tækjum.

Þess vegna er nauðsynlegt að læra hvernig á að búa til WordPress vefsíðuþema með því að nota Twitter Bootstrap eða annan móttækilegan ramma fyrir vefhönnun þína frá PSD. Þó að það séu fullt af ókeypis vefsíðuþemum, þá er að búa til þitt eigið sérsniðna WordPress þema með Bootstrap fullkominn tjáning sköpunar í vefhönnun.

Jafnvel þó WordPress drottnar yfir 24% allra vefsíðna, að breyta Photoshop skrá (PSD) í vel virkt móttækilegt þema er ekki eins auðvelt og þú heldur. Þetta krefst þess að þú hafir góð tök á að skrifa CSS fjölmiðlafyrirspurnir sem að lokum segja til um hvort sniðmát sé móttækilegt eða ekki.

Væri ekki betra ef þú færð forkóðað móttækileg stílblað pakkað með öllum nauðsynlegum eiginleikum?

Þökk sé Ræsi, vinsælasti móttækilegi framhliðarammi heims, til að gera líf forritara auðveldara, þetta er nú nokkuð einfaldara verkefni en það var. Í þessari grein ætlum við að sýna þér hvernig á að breyta PSD sniðmát í móttækilegt WordPress þema með því að nota Ræsi sem þroskaramma þinn.

Enn og aftur breyttum við fyrst PSD okkar í Bootstrap, svo í meginatriðum er fyrri hlutinn í raun og veru PSD í Bootstrap námskeið.

Seinna í seinni hlutanum breytir skrárnar sem við þróuðum í WordPress þema, svo á þeim tímapunkti verður þetta allt PSD í Bootstrap námskeið.

Rétt eins og alltaf, viljum við gera líf þitt auðveldara með því að gefa þér fullt af hlutum til að koma þér af stað. Eftir að þú hefur lært grunnatriðin í því að búa til WordPress þema, af hverju ekki að byrja með eitt af WordPress Starter þemunum.

Sæktu 20 WP Starter þema búntinn okkar

Helsta nauðsynleg ráð:

Að búa til frábæra vefsíðuhönnun krefst nokkuð háþróaðs kunnáttusetts. Þó að skrifa það sjálfur gæti virst besti kosturinn, ráða frábæran WordPress forritara (til dæmis frá Toptal) er líklega miklu hagkvæmari til lengri tíma litið. Í raun muntu ná frábærum árangri á mjög stuttum tíma. 

Skoðaðu verktaki á Toptal núna

Algengar spurningar

Hvað er PSD skrá?

PSD skrá er Photoshop hönnunarskrá sem inniheldur hönnun búin til af hönnunarhugbúnaðinum frá Adobe: Photoshop. Í samhengi þessarar greinar mun PSD innihalda hönnun vefsíðu. Síðan er hægt að senda þessa PSD skrá til forritara til að búa til sem WordPress þema. Hönnunarskráin mun innihalda allar nauðsynlegar upplýsingar til að búa til endanlega hönnun vefsíðu í HTML, þar á meðal efni eins og liti, rist, hvernig það mun líta út á skjáborði / farsíma og öðrum nauðsynlegum hönnunarþáttum.

Hvað þýðir PSD fyrir WordPress?

PSD til WordPress er ferlið sem býr til þema fyrir WordPress út frá hönnunarhugtaki búið til í Photoshop. Venjulega er hönnuður ráðinn til að búa til vefsíðuhönnunarhugtak, byggt á því hvernig notandi vill að vefsíðan líti út. Þegar hönnunin hefur verið búin til í Photoshop þarf að breyta henni í WordPress samhæfan kóða. Þetta þýðir að vefhönnuður mun nota vefsíðuhönnunina sem búin var til í Photoshop og býr til WordPress þema sem mun endurskapa hönnunina.

Hvernig opna ég PSD skrá í Photoshop?

PSD er innfæddur skráarsnið Photoshop, svo að opna PSD skrá í Photoshop ætti að vera léttvæg. Það eina sem þú þarft að hafa í huga að ákveðnir nauðsynlegir þættir eins og leturgerðir sem notaðar eru til að búa til hönnunina þurfa að vera tiltækar á tölvunni þar sem verið er að opna skrána, annars inniheldur hönnunin ekki rétt letur.

Hvað er WordPress þema?

WordPress þema er safn af PHP skrám sem innihalda "skipanir" eða forskriftir sem skilgreina og búa til liti og mynstur, stíl, tákn, leturgerðir, stærðir hausa og texta, hnappa og í raun allt útlit allra af þeim þáttum vefsíðunnar sem verið er að hanna. WordPress þema er öflugt í þeim skilningi að hönnunin getur unnið með hvers konar efni, hvort sem þetta er blogg, netverslun, netnámskeið eða annað sem sérstök WordPress síða er notuð til.

Hvernig breyti ég Bootstrap sniðmát í WordPress?

Til að breyta Bootstrap sniðmát í WordPress þarf vefhönnuður að taka Bootstrap sniðmátið og afrita hönnunina á WordPress beinagrindarþema. Í raun og veru er það sem gert er að raunverulegri hönnun er breytt í tungumál sem WordPress ramminn getur skilið og unnið með. Þú getur fylgst með leiðbeiningum okkar hér að ofan eða ráðið einhvern af viðskiptaþjónustuaðilum okkar sem taldir eru upp hér að ofan.

Final hugsanir

Þetta er allt í bili um hvernig á að búa til móttækilegt Bootstrap WordPress þema úr PSD skrá. Hvort sem þú ert nýliði eða atvinnumaður, þetta PSD til Bootstrap námskeið og síðan WP ætti örugglega að veita þér einfaldasta leiðina til að ná tilætluðum árangri.

Hins vegar, ef þú stendur frammi fyrir hvers konar vandamálum í PSD til WordPress umbreytingarferlinu, þá er tvennt sem þú getur gert. Þú getur ráðið vefforritara á Toptal, þar sem þeir eru með 3% hæstu hæfileikana um allan heim, svo þú þarft ekki að hafa áhyggjur af gæðum. Þú getur líka gert það ráðið faglega WordPress verktaki.

Segðu okkur hvað þér finnst? Þarftu nokkrar frekari upplýsingar í einhverjum sérstökum hlutum þessarar kennslu / leiðbeiningar? Við viljum gjarnan að þessi handbók nýtist þér, svo vinsamlegast hjálpaðu okkur að hjálpa þér!

Um höfundinn

Höfundur: Ajeet YadavVefsíða: https://www.wordpressintegration.com/Tölvupóstur: ajeet.yadav@ipraxa.com

Ajeet er háttsettur vefhönnuður hjá WordpressIntegration - PSD til WordPress þjónustuaðila, þar sem hann sér um að skrifa sérsniðinn JavaScript kóða meðan á umbreytingarferlinu stendur. Í frítíma sínum skrifar hann um mismunandi efni sem tengjast JavaScript, WordPress og vefhönnun til að deila starfsreynslu sinni með öðrum.