5 helppoa vaihetta muuntaa PSD WordPress-teemaksi (Bootstrap)

psd WordPressiin

Tiesitkö, että joka päivä 50,000 uutta WordPress-sivustoa tulee verkkoon? Kuinka aiot erottua joukosta niin monien eri kohteiden valtameressä? Yksi varma tapa herättää välittömästi huomiota voi olla luoda oma, ainutlaatuinen, mukautettu teema, joka on muunnettu PSD: stä WordPressiksi. Tämä on suunniteltu erityisesti omaa sivustoasi varten - eikä sivustosi ole yksi tuhansista evästeiden leikkaussivustoista!

Verkkosivuston teeman suunnittelussa on kolme standardia. PSD (Photoshop-tiedostot), WordPress (WP) ja melko viime vuosina viime vuosina, Twitter Bootstrap - kehys reagoivien sivustojen kehittämiseksi, joita alan ammattilaiset käyttävät nykyään.

Tässä viestissä annamme sinulle täydellisen ja helpon oppaan kaikkien kolmen yhdistämisestä: kuinka muuntaa PSD WordPress (Bootstrap) -teemaksi viidessä helpossa vaiheessa. 

Myöhemmin tästä artikkelista löydät valmiina ladattavat mallit, joita voit käyttää tämän opetusohjelman perustana. Jos haluat nähdä muita artikkeleita, käy sivustomme muissa osissa perusteellisten opetusohjelmien ja artikkeleiden avulla.

Mutta miksi haluat muuntaa PSD-tiedoston Bootstrap WordPress -teemaksi?

Mikä on PSD?

PSD on lyhenne sanoista PuvShumala Design. 

Tämä johtuu siitä, että Photoshop on yksittäinen ohjelmisto, joka on suosituin graafisten suunnittelijoiden keskuudessa ja kuinka suurin osa WordPress-verkkosivustosuunnitelmista luodaan. Photoshopin avulla suunnittelija luo sinulle ainutlaatuisen verkkosuunnittelun. Tämä tallennetaan Photoshop-suunnittelutiedostona tai PSD-tiedostona. Tämä malli voidaan sitten antaa WordPress-kehittäjille, jotka tekevät siitä teeman.

Mikä on PSD to WordPress?

PSD WordPressiksi on prosessi, jolla Photoshop-suunnittelutiedosto muunnetaan toimivaksi WordPress-teemaksi Bootstrapilla tai muilla menetelmillä ja kehyksillä. Yksinkertaisesti sanottuna annat mukautetun suunnittelun, ja se muunnetaan täysin toimivaksi WordPress-teemaksi!

Suurin osa suunnittelu- ja verkkosuunnittelualalla tai sen ympäristössä olleista ihmisistä voi helposti ymmärtää tämän terminologian - aivan kuten he ymmärtäisivät kaikki muut suunnittelutermit, jotka eivät ole tuttuja kapealla oleville ihmisille (kerning, CMYK, pehmuste, typografia, johtava, Serif jne.) 

Tässä on lyhyt, 2 minuutin yleiskatsaus PSD-tiedostosta:

JIP7F37CUT4

Mikä on WordPress-teema?

WordPress-verkkosivuston luomisessa on yleensä kaksi ensisijaista näkökohtaa. 

  1. Sivuston todellinen ulkoasu ja
  2. sivuston sisältö.

WP: ssä, joka on sivuston luomisen suosituin sisällönhallintajärjestelmä, verkkosivusto näyttää riippumatta sisällöstä. Voit muuttaa WordPressin ulkonäköä säilyttäen silti kaiken sisällön.

Tämä johtuu siitä, miten verkkosivusto näyttää, on itse asiassa määritelty WordPress-teemalla.

Ajattele teemoja, kuten älypuhelimille, pöytätietokoneellesi tai kannettavalle tietokoneellesi tai muulle, mikä voidaan "nylkeä" mieltymystesi mukaan. Käyttämääsi mallia tai teemaa voidaan käyttää "kuorimaan" sisältöä tai antamaan sille ulkoasu, jonka valitset.

WordPress-teemat ovat kokoelma PHP-tiedostoja, jotka sisältävät "komentoja" tai spesifikaatioita, jotka määrittelevät värit ja kuviot, tyylit, kuvakkeet, fontit, otsikkojen ja tekstin koot, painikkeet ja olennaisesti kaikkien elementtien kokonaisuuden. suunnittelemaasi verkkosivustoon.

On koko teollisuus näiden mallien ympärillä, josta voit joko hankkia mallisi ilmaiseksi tai ostaa jo valmistetun mallin (tyypillisesti nimeltään premium), hintaan 25 dollaria - muutama sata dollaria.

On myös mahdollisuus luoda oma mukautettu muotoilu sen sijaan, että valitsisit jo luodun (ja monta kertaa aiemmin käytetyn) suositun tuotteen. Tämä on varsinainen prosessi, jolla PSD muunnetaan WordPress-teemaksi (miltä verkkosivustosi näyttää lopulta).

Jatkossa opastamme sinut tarkkaan menettelyyn oman suunnittelun luomisessa. 

PSD: n muuntaminen WordPress-teemaan

Olemme hajottaneet prosessin, jolla PSD muunnetaan WordPressiksi, viideksi tärkeäksi vaiheeksi:

1. Viipaloi PSD-tiedosto

Mitä tulee PSD: stä Bootstrap-opetusohjelmaamme, "viipalointi" on ensimmäinen ja tärkein asia koko PSD: ssä reagoivaan WordPress-muunnosprosessiin.

Termi "Viipalointi" saattaa tuntua aluksi melko hämmentävältä, mutta älä huoli siitä liikaa. Viipalointi tarkoittaa yksittäisen kuvatiedoston leikkaamista ja jakamista useiksi kuvatiedostoiksi, joista jokainen sisältää eri muotoiluelementit koko kuviosta. Jotkut ihmiset viittaavat niihin liitoksina, koska se luo erillisiä elementtejä yhdestä suunnitteluorganismista, joka lopulta järjestetään uudelleen tai syntetisoidaan ja morfoidaan täydelliseksi malliksi. 

Tämä on ratkaisevan tärkeää, koska et voi koodata mallia / teemaa yhdestä kuvansuunnittelutiedostosta.

Siksi Web -sivun suunnittelussa sinun on ensin leikattava pääkuvatiedosto useiksi yksittäisiksi kuvatiedostoiksi ja ommeltava ne sitten yhteenlessly.

PSD Slicing muuntaa HTML- ja CSS-tiedostoiksi ja lopulta Bootstrapiksi

Yleensä useimmat verkko- ja graafiset suunnittelijat haluavat käyttää Adobe Photoshopia viipalointiin.

Vaikka sama asia voidaan tehdä vastaavalla kuvankäsittelyohjelmalla, kuten GIMP (GNU Image Manipulation Program) tai millä tahansa muulla kuvankäsittelyohjelmistopaketilla, suosittelemme, että käytät Photoshop koska se tekee työstä helpompaa ja nopeampaa työkaluilla, kuten Tasot ja Tasomaskit, poimimalla metatiedot, sekoittamalla, käsittelemällä ja käyttämällä PSD-tiedostoja ja RAW-kuvia.

Riippumatta siitä, mitä ohjelmistoa tai sovellusta käytät, tärkein asia on lopulta luoda pikselillä täydelliset kuvatiedostot, jotka edustavat lopullisen suunnittelun eri elementtejä.

Sen lisäksi sinun ei tarvitse leikata suunnitteluelementtejä - kuten otsikon / alatunnisteen väriä ja yksiväristä taustaa - kokonaisuudessaan, jotka voidaan luoda dynaamisesti. Sen sijaan leikkaa vain muotoiluelementtejä - kuten painikkeita ja kuvia - joita ei voida luoda dynaamisesti.

Alla on YouTube-video, joka selittää PSD-tiedostojen viipaloinnin perusteet:

XgxEieLbloc

2. Käynnistä teema

Kun olet leikannut kuvan suunnittelutiedoston, siirry kohtaan https://getbootstrap.com että lataa tämä Twitter Bootstrap -versio sieltä. Kun olet suorittanut latauksen, pura zip-tiedosto kansioon.

Nyt kun avaat puretun kansion, löydät kolme kansiota - css, fontit että js - sen sisällä.

Huomaa, että yksi tämän kehyksen ensisijaisista käyttötarkoituksista johtuu siitä, että se käyttää laajasti mediakyselyjä voidakseen luoda malleja, jotka toimivat millä tahansa laitteella, jolloin mallisi voi kulkea saumattomastilessLaitteen koon välillä (xs - Erittäin pieni, matkapuhelimille, sm - Pieni, tableteille, md - Keskikokoinen, kannettaville ja pöytätietokoneille ja lg - Suuri, suurille pöytäkoneille).

Tätä kutsutaan reagoiva web-suunnittelu.

LisälukeminenCSS-kehykset tai CSS-ruudukko: Mitä minun pitäisi käyttää projektissani? (Smashing-lehti)

3. Luo Index.html- ja Style.css-tiedostot

Seuraava vaihe on koodata leikatut elementit HTML / XHTML-muotoon ja muotoilla ne CSS: n avulla. Tätä varten sinun on luotava index.html ja style.css tiedosto, joka vaatii HTML CSS: n hallintaa. Pohjimmiltaan muunnamme PSD: n HTML-muotoon, ennen kuin voimme siirtyä seuraaviin vaiheisiin.

Lisäksi: HTML tai XHTML edustaa (EXkestävä) HyperText Markup Ltuska, vaikka CSS edustaa Cnouseva StyleSheets.

Koska haluat kehittää teemaa Bootstrapilla, sinun on alustettava Bootstrap pääosassa ja siihen liittyvässä JavaScript kehosi osassa index.html sivu seuraavasti: 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<script GARBAGE></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Nyt voit hyödyntää Bootstrap-komponentit HTML-mallissasi. Esimerkiksi tässä rakennamme yksinkertaisen verkkosivun, jossa on navigointivalikko ja pikkukuvaosat.

Bootstrap-kirjastojen .min.js-osa tarkoittaa, että tiedosto on ollut minimoidaan suorituskyvyn vuoksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="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 GARBAGE></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Jos avaat tämän tiedoston selaimessasi, sen pitäisi näyttää tältä:

BootStrap Wordpress -teema - 1. luonnos

Kuten näette, mikään mukautettu CSS ei tällä hetkellä toimi tällä sivulla. Joten tyylitaksemme html-sivun sisällön tarpeidemme mukaan, luomme mukautetun style.css tiedosto. Esimerkkinä olemme lisänneet seuraavan koodin mukautettuun CSS-tiedostooni:

.navbar {
tausta: # 222222;
margin-bottom: 0px;
reunan säde: 0 kuvapistettä;
}
.navbar-brand {
väri: #FFFFFF;
linjan korkeus: 50px;
pehmuste vasen: 10 kuvapistettä;
}
a.navbar-brand: vie hiiri {
väri: # FFEB3B;
}
.navbar ul {
pehmuste oikea: 4%;
}
.navbar ul li a {
väri: #FFFFFF;
oikea marginaali: 10%;
}
.navbar ul li a: hover {
väri: # 222222;
taustaväri: keltainen;
}
a.btn-ensisijainen {
taustaväri: # E91E63;
väri: #FFFFFF;
}

Saadaksesi vasta luodun mukautetun CSS-tiedostomme toimimaan, meidän on sisällytettävä se HTML-sivullemme (aivan kuten teimme bootstrap.min.css). Joten sisälly viittauslinkki style.css tiedosto index.html tiedosto viivan viivan yläpuolelle bootstrap.min.css.






...
...

Nyt avoinna index.html tiedosto selaimessasi uudelleen ja näet muutoksen - mukautettu CSS-palvelimemme toimii nyt, näet yläosassa olevan otsikkopalkin ja painikkeet, joiden väri on erilainen kuin oletusarvoisissa käynnistyspainikkeissa.

Kaikki muutokset on määritelty yllä olevan CSS-tiedoston kautta.

Muunna PSD Wordpress BootStrap -teemaksi - Luonnos 2

Tämä oli vain yksinkertainen esimerkki.

Samoin Bootstrapia käyttämällä voit koodata koko PSD-tiedostosi (tietysti viipaloinnin jälkeen) HTML-muotoon. Tämän vaiheen lopussa sinulla on kaksi tiedostoa kädessä:

  1. index.html ja toinen on
  2. style.css.

Toistaiseksi olimme enimmäkseen PSD to Bootstrap -opetusohjelmassa. Nyt tulee muunnos Bootstrap WordPress -teemaan.

ONKO yllä mainittu liikaa työtä sinulle? Etkö halua aloittaa tyhjästä? Meillä on ratkaisu siihen!

Tämä paketti WordPress-aloitusmalleja auttaa sinua pääsemään alkuun useiden käynnistysaiheiden kanssa, joiden avulla voit lopulta tuottaa oman mukautetun mallisi.

Lataa 20 WordPress Starter Theme -paketti nyt

Kuten näette, muuntaminen PSD: stä HTML: ksi on melko tärkeä osa koko prosessia, mutta kun sinulla on tämä pois tieltä, asiat helpottuvat hieman. 

4. Luo WordPress-teeman rakenne index.html-tiedostoon

Tärkein syy Photoshop-suunnittelutiedoston muuntamiseen WordPressiksi on luoda täysin toimiva verkkosivustomalli, joka voidaan ladata verkkosivuston hallintapaneeliin. 

Sellaisia ​​teemoja kuin divi että Avada ja muissa suosituissa teemoissa on vakiosarja tiedostoja, jotka on toteutettava, jotta niitä voidaan pitää kelvollisina WP-aiheina. Sitä teemme seuraavassa vaiheessa. 

Lue lisää: Elementor Pro vs Divi - mikä on paras?

Tämän muunnoksen seuraavat vaiheet ovat todella ja aidosti WordPress-koodausrakenteen ympärillä teemoille ja malleille, koska nyt siirrymme teemallemme kohti WP: tä.

Nyt kun sinulla on index.html PSD-tiedosto, sinun on jaettava se useaan php tiedostot WordPress-teemojen tiedostorakenteen mukaan. Näin tekemällä et vain pysty muuttamaan staattista index.html tiedosto dynaamiseen WP-teemaan, mutta voit myös lisätä siihen useita WordPressiin liittyviä ominaisuuksia ja toimintoja.

(PHP on lisäksi palvelinpuolen komentosarjakieli, joka tunnetaan nimellä hypertekstin esikäsittelijä.)

WordPress-teemojen ohjelmoinnin helpottamiseksi ja hyvien koodauskäytäntöjen saavuttamiseksi tyypillinen malli koostuu useista PHP-tiedostoista, kuten otsikko.php, alatunniste.php, hakemisto.php, sivupalkki.php, haku.php ja niin edelleen.

Tarvitset kuitenkin vain index.php että style.css tiedostoja luoda täysin toimiva WordPress-teema.

Karkeana esimerkkinä tässä rikkomme yllä luotuja index.html tiedosto kolmeen tiedostoon: header.php, index.php ja footer.php.

Wordpress-mallin perusrakenne

Aloitetaan otsikosta header.php. Koko HTML-koodi, joka on yläosassa index.html sivu siirtyy header.php tiedosto.













WPBootstrap.com

Koti
Noin
Palvelut
Tilaus
Ottaa yhteyttä

Vaikka index.html-tiedoston keskiosa menee index.php-tiedostoon:






Noin
...
Tutkia







Projektit
...
Tutkia







Palvelut
...
Tutkia


Ja footer.php-tiedosto näyttäisi tältä:



© WPBootstrap 2015





Tähän vaiheeseen sisältyy index.html-tiedoston hajottaminen header.php, index.php, footer.php ja muut tarvittavat ominaisuustiedostot WordPress-teematiedostorakenteen mukaan.

Täydellinen luettelo tiedostoista, jotka jokaisella mallilla pitäisi olla, on alla. Näet myös kuvan, joka osoittaa, kuinka nämä liittyvät toisiinsa:

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

Jos seuraat mitä tahansa ohjetta Photoshop Designin muuntamiseksi WordPressiksi, huomaat aina, että niiden tuloksena on seuraavanlainen rakenne. Alla on yksityiskohtaisempi näkymä siitä, miltä lopullisen WordPress-teeman tulisi näyttää:

WP-teema - yksityiskohtainen rakenne PSD to WordPress -opetusohjelman jälkeen

5. Lisää WordPress-tunnisteet malliin

Tämä on opetusohjelmamme viimeinen vaihe.

Parasta WordPressissä on, että se tarjoaa koodirakenteessaan kokonaisen joukon sisäänrakennettuja toimintoja, joita voidaan käyttää mukautettujen toimintojen ja ominaisuuksien lisäämiseen verkkosivuston teemaan.

Jos haluat sisällyttää minkä tahansa näistä toiminnoista WordPress-teemaan, sinun tarvitsee vain käyttää oikeita sisäänrakennettuja toimintotunnisteita tiedostoissasi. WordPress-kehys huolehtii kaikesta. Tämä tekee alustasta niin tehokkaan!

Edellisessä vaiheessa hajotimme index.html tiedosto vaaditun tiedostorakenteen perusteella.

Nyt on aika lisätä WordPress PHP -tunnisteita erilaisiin teematiedostoihin - kuten header.php, index.php, footer.php että sidebar.php jne. - joka meillä on edellisessä vaiheessa. Lopuksi yhdistämme ne yhdessä tuottamaan erittäin toimivan WordPress-teeman.

Yllä olevassa esimerkissämme tässä olemme käyttäneet toiminto header.php näyttääksesi sivustomme otsikon linkissä:

Ja valikossa olemme käyttäneet toimi seuraavasti:

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

Nyt header.php-tiedosto näyttää tältä:

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

">



>



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

Meidän alatunnuskoodi footer.php pysyy samana paitsi lisäämällä toiminto.



© WPBootstrap 2015




Mennään nyt index.php. Pikkukuvaosien näyttämiseksi olemme käyttäneet toiminto.

<?php
get_header (); ?>





Vaikka edistymme, tämä ei ole vielä kaikki! Meidän on määriteltävä, jotta pikkukomponenttimme näkyvät oikein sivupalkki-1, sivupalkki-2 että sivupalkki-3 meidän functions.php arkistoi seuraavasti:

function wpbootstrap_widgets_init () {
register_sidebar (taulukko (
'nimi' => __ ('Widget-alue', 'wpbootstrap'),
'id' => 'sivupalkki-1',
'description' => __ ('Lisää widgetit tänne, jotta ne näkyvät sivupalkissa.', 'wpbootstrap'),
'before_widget' => ' ",
'after_widget' => ' ",
'before_title' => ' ",
'after_title' => ' ",
)
register_sidebar (taulukko (
'nimi' => __ ('Widget-alue', 'wpbootstrap'),
'id' => 'sivupalkki-2',
'description' => __ ('Lisää widgetit tänne, jotta ne näkyvät sivupalkissa.', 'wpbootstrap'),
'before_widget' => ' ",
'after_widget' => ' ",
'before_title' => ' ",
'after_title' => ' ",
)
register_sidebar (taulukko (
'nimi' => __ ('Widget-alue', 'wpbootstrap'),
'id' => 'sivupalkki-3',
'description' => __ ('Lisää widgetit tänne, jotta ne näkyvät sivupalkissa.', 'wpbootstrap'),
'before_widget' => ' ",
'after_widget' => ' ",
'before_title' => ' ",
'after_title' => ' ",
)
);
}
add_action ('widget_init', 'wpbootstrap_widgets_init');

Tämä rekisteröi kolme widget-aluetta WordPress-hallintapaneeliin, johon meidän pitäisi laittaaHTML-koodi”Jokaiselle pienoiskuvan komponentille sivupalkki-1, sivupalkki-2 että sivupalkki-3 widgetit. Käytämme esimerkiksi alla olevaa koodia sivupalkki-1 vekotin.





Noin
...
Tutkia


Ja niin edelleen!

Viimeinen asia, joka meidän on tehtävä, on ladata tyylitaulukot. Tämä voidaan tehdä käyttämällä wp enqueue -tyyliä () toiminto. php tiedosto seuraavasti.

// Lataa päätyylitaulukko
wp_enqueue_style ('' wpbootstrap-tyyli ', get_stylesheet_uri ());

// Lataa Bootstrap-tyylitaulukko
wp_enqueue_style ('wpbootstrap', get_template_directory_uri (). '/css/bootstrap.css');

Täydellisen luettelon kaikista käytettävissä olevista tunnisteista ja toiminnoista suosittelemme käymään läpi nämä viralliset Codex-sivut:

  • Mallitunnisteet: Tämä sivu tarjoaa täydellisen luettelon WordPress-tunnisteista, joista jokaisella on oma sivu, josta löydät lisätietoja tietystä tagista.
  • Toiminnon viite: Tämä sivu on viiteopas kaikkiin WordPress-ohjelmistossa käytettäviin PHP-toimintoihin. Kuten mallipohjat, jokainen PHP-toiminto on linkitetty omistetulle sivulle, jossa se selitetään yksityiskohtaisesti sopivilla esimerkeillä.

Kun olet lisännyt välttämättömät WordPress-tunnisteet ja toiminnot, kaikki nämä tiedostot sijoitetaan yhteen kansioon, jolla on samanlainen nimi kuin teeman nimellä. Sinun on sijoitettava tämä kansio / wp-content / themes / hakemisto verkkosivustosi asennuksesta.

Ja se on opetusohjelman viimeinen vaihe!

Kun olet tehnyt sen, sinulla pitäisi olla täysin toimiva reagoiva WordPress-teema Bootstrap-ohjelmalla, jonka voit aktivoida WordPress-hallintapaneelin kautta. 

Oletko valmis aloittamaan asiat?

 

PSD WordPress -muunnospalveluihin

Ennen kuin jatkat lukemista - etsitkö kehittäjiä tai yhteistyökumppaneita auttamaan sinua verkkosivustoprojektissasi? Etsitkö luotettavaa PSD - WordPress-muunnospalvelujen tarjoajaa? 

Olet kadehtimattomassa tilanteessa, kun sinun on löydettävä hyvä luotettava kumppani ilman huijausta tai menetät paljon aikaa (ja rahaa) heikkolaatuisten palveluntarjoajien kanssa.

Kokemuksemme luotettujen kehittäjien löytämisestä ei ole ollut miellyttävää. 

Olemme joutuneet käsittelemään useita tärkeitä asioita: 

  • Kehittäjät palauttavat erittäin huonolaatuisen koodin
  • Ihmiset, jotka kommunikoivat hyvin satunnaisesti, aiheuttaen merkittäviä viestintäongelmia
  • Koodi, joka oli 100% plagioitu luomalla oikeudellisia kysymyksiä meille
  • Kalliit hinnat, laadulla, joka oli parhaimmillaan keskinkertaista
  • Kehittäjät, jotka hävisivät (tai emme ole koskaan kuulleet takaisin talletusten seuraamisesta)

Mutta älä anna tämän pelotella ulkoistamista, sinun tarvitsee vain löytää luotettu yritys - ja olemme täällä auttamassa! 

Ottaen huomioon, että olemme olleet alalla yli 15 vuotta, olemme rakentaneet verkoston palveluntarjoajista, jotka tunnemme ja luotamme WordPressin ja verkkokehityspalveluiden suhteen. Nämä ovat täysin ulkoistettuja palveluntarjoajia, jotka voivat työskennellä kanssasi projektikohtaisesti. 

Haluatko tietää enemmän? Katso alla olevat vaihtoehdot luotettavan PSD: n ja WordPressin muuntamisen suhteen:

1. PSDtoWPService.com

psdtowpservice.com

Mirza ja hänen tiiminsä ovat rakentaneet erinomaisen maineen työskennellessään WordPressin kanssa, rakentamalla mukautettuja teemoja ja olisivat loistava kumppanivalinta tällaiseen työhön. Pidämme tästä PSD to WordPress -palvelusta, koska se on sekä halpaa että luotettavaa. He voivat muuntaa PSD-tiedostot WordPress-teemoiksi tai kaikenlaiseksi WordPress-kehitystyöksi.

Off-shore sijainti: Bangladesh

Tuntitaksa: $ 25 / tunti 

2. Koodattava 

 koodattava

Codeable tarjoaa toisenlaisen konseptin.

Suoraan ulkoistamisen sijaan Codeable on yksinomaan WordPress-ohjelmoijasta koostuva markkinapaikka, jossa freelancereiden on läpäistävä tiukka tarkistusprosessi päästäkseen markkinoille.

Niiden hinnoittelualgoritmi antaa sinulle kohtuullisen hinnan sekä hinnan alittavuuden että ylihinnoittelun poistamiseksi. Tarkista ne, jos haluat saada erilaisia ​​vaihtoehtoja, ennen kuin päätät, mistä PSD: stä WordPress-muunnospalveluun mennä.

Sijainti: Koko maailmassa päätät kenen kanssa haluat työskennellä 

Tuntitaksa: 70 - 120 dollaria / tunti

3. WPKraken

wp kraken

WPKraken on verkkokehitystiimi, jolla on 4.98 tähteä viidestä tähdestä ja joka on työskennellyt suuryritysten kanssa heidän nimensä, kuten Lexus ja Suzuki, kanssa ja voi tehdä kaikenlaista WordPress-pohjaista työtä.

Heillä on kokenut kehittäjien tiimi, käyttöliittymien ja käyttöliittymien suunnittelijat, pääministerit ja laadunvalvojat. He voivat työskennellä sekä pienissä korjauksissa ja pienissä projekteissa että laajamittaisissa räätälöityissä projekteissa.

Riippumatta siitä, millainen tehtävä sinulla on, he voivat hoitaa sen samalla tavalla kuin se pitäisi tehdä!

WP Kraken tarjoaa kohtuullisen hinnan korkealaatuisista palveluista. Voit ottaa heihin yhteyttä heidän portaalinsa kautta wpkraken.io 

Sijainti: Puola

Tuntitaksa: $ 50 / tunti 

Etkö ole vielä kiinnostunut kehittäjien palkkaamisesta? Jatka lukemista!

 

Muutama lisäidea 

Hitaasti, mutta reagoivasta verkkosuunnittelusta on tullut hallitseva standardi tulevaisuuden valmiiden verkkosivustojen rakentamisessa.

Nykyään lähes kaikilla verkkosivustoilla on tämä hämmästyttävä tekniikka, joka tarjoaa käyttäjille optimaalisen katselu- ja vuorovaikutuskokemuksen riippumatta siitä, mitä laitetta he käyttävät, olipa kyseessä sitten puhelin, tabletti tai kannettava tietokone / pöytälaite.

Google Webmaster -tiimin Google+: ssa äskettäin tekemän tutkimuksen mukaan yli 81% ihmisistä haluaa käyttää reagoivaa suunnittelua saadakseen verkkosivustonsa renderoitumaan oikein kaikilla laitteilla.

Siksi on välttämätöntä oppia luomaan WordPress-verkkosivustoteema Twitter Bootstrapilla tai muulla verkkosovelluksellesi sopivalla kehyksellä PSD: ltä. Vaikka on paljon ilmaisia ​​verkkosivustojen teemoja, oman mukautetun WordPress-teeman luominen Bootstrapilla on lopullinen luovuuden ilmaisu verkkosuunnittelussa.

Vaikka WordPress hallitsee yli 24% kaikista verkkosivustoista, Photoshop-tiedoston (PSD) muuntaminen hyvin toimivaksi responsiiviseksi teemaksi ei ole niin helppoa kuin luulet. Tämä edellyttää, että sinulla on hyvä tartunta CSS-mediakyselyjen kirjoittamiseen, jotka lopulta sanovat, onko malli reagoiva vai ei.

Eikö olisikaan parempi, jos saat valmiiksi koodatun reagoivan tyylitaulukon, joka sisältää kaikki olennaiset ominaisuudet?

Muunna Psd WordPress Bootstrap -teemaksi - opetusohjelma

Kiitokset Bootstrap, maailman suosituin reagoiva etupään kehys, joka helpottaa kehittäjien elämää, tämä on nyt melko yksinkertainen tehtävä kuin aiemmin. Tässä artikkelissa aiomme näyttää, kuinka voit muuttaa PSD-mallin reagoivaksi WordPress-teemaksi Bootstrap kehityskehyksesi.

Jälleen kerran muutimme ensin PSD: n Bootstrapiksi, joten ensimmäinen osa on todella ja todella PSD Bootstrap -opetusohjelmaan.

Myöhemmin toisessa osassa muunnetut tiedostot muunnetaan WordPress-teemaksi, joten siinä vaiheessa siitä tulee PSD: n Bootstrap-opetusohjelma.

Aivan kuten aina, haluamme tehdä elämästäsi helpompaa antamalla sinulle joukon asioita, joiden avulla pääset alkuun. Kun olet oppinut WordPress-teeman luomisen perusteet, voit aloittaa jonkin WordPress Starter -teeman kanssa.

Lataa 20 WP Starter Theme -paketti

Tärkein vinkki:

Hyvän verkkosivustosuunnittelun luominen vaatii melko edistyneen taitojoukon. Vaikka itse kirjoittaminen saattaa tuntua parhaalta vaihtoehdolta, palkkaamalla upea WordPress-kehittäjä (esimerkiksi Toptalista) on todennäköisesti paljon kustannustehokkaampaa pitkällä aikavälillä. Pohjimmiltaan saat erinomaisen tuloksen hyvin lyhyessä ajassa. 

Tutustu kehittäjiin Toptalissa nyt

Usein kysytyt kysymykset

Mikä on PSD-tiedosto?

PSD-tiedosto on Photoshop Design -tiedosto, joka sisältää suunnittelun, jonka Adobe-ohjelmisto on luonut: Photoshop. Tämän artikkelin yhteydessä PSD sisältää verkkosivuston suunnittelun. Tämä PSD-tiedosto voidaan sitten lähettää kehittäjille ja luoda WordPress-teema. Suunnittelutiedosto sisältää kaikki tarvittavat tiedot verkkosivuston lopullisen suunnittelun luomiseksi HTML-muodossa, mukaan lukien värit, ruudukot, miltä se näyttää työpöydällä / mobiililaitteella, sekä muut tarvittavat suunnitteluelementit.

Mitä PSD to WordPress tarkoittaa?

PSD to WordPress on prosessi, joka luo teeman WordPressille Photoshopissa luodusta suunnittelukonseptista. Tyypillisesti suunnittelija palkataan luomaan verkkosivujen suunnittelukonsepti sen perusteella, millainen loppukäyttäjä haluaa verkkosivuston näyttävän. Kun suunnittelu on luotu Photoshopissa, se on muunnettava WordPress-yhteensopivaksi koodiksi. Tämä tarkoittaa, että verkkokehittäjä käyttää Photoshopissa luotua verkkosivustosuunnittelua ja luo WordPress-teeman, joka luo suunnittelun uudelleen.

Kuinka avaan PSD-tiedoston Photoshopissa?

PSD on Photoshopin alkuperäinen tiedostomuoto, joten PSD-tiedoston avaamisen Photoshopissa pitäisi olla triviaali. Ainoa asia, joka sinun on pidettävä mielessä, että tiettyjen tarvittavien elementtien, kuten suunnittelun luomiseen käytettyjen fonttien, on oltava käytettävissä tietokoneessa, jossa tiedosto avataan, muuten suunnittelu ei sisällä oikeita fontteja.

Mikä on WordPress-teema?

WordPress-teema on kokoelma PHP-tiedostoja, jotka sisältävät "komentoja" tai spesifikaatioita, jotka määrittelevät ja luovat värit ja kuviot, tyylit, kuvakkeet, fontit, otsikkojen ja tekstin koot, painikkeet ja lähinnä kaiken ilmeen. suunnitellun verkkosivuston elementeistä. WordPress-teema on dynaaminen siinä mielessä, että muotoilu voi toimia minkä tahansa tyyppisen sisällön kanssa, olipa kyseessä sitten blogi, verkkokauppa, verkkokurssi tai mikä tahansa muu, johon tiettyä WordPress-sivustoa käytetään.

Kuinka voin muuntaa Bootstrap-mallin WordPressiksi?

Bootstrap-mallin muuntamiseksi WordPressiksi web-kehittäjän on otettava Bootstrap-malli ja kopioitava malli WordPress-luuranko-teemaan. Todellisuudessa mitä tehdään, todelliset mallit muunnetaan kieleksi, jonka WordPress-kehys voi ymmärtää ja jonka kanssa se voi toimia. Voit noudattaa yllä olevia ohjeita tai palkata jonkin yllä luetelluista muuntopalveluntarjoajistamme.

Lopullinen ajatuksia

Tässä on kaikki siitä, kuinka luoda reagoiva Bootstrap WordPress -teema PSD-tiedostosta. Olitpa aloittelija vai ammattilainen, tämän PSD: n Bootstrap-opetusohjelman ja sitten WP: n pitäisi varmasti tarjota sinulle yksinkertaisin tapa saavuttaa haluamasi tulos.

Jos kuitenkin kohtaat minkäänlaista ongelmaa PSD - WordPress -muunnosprosessissa, voit tehdä kaksi asiaa. Sinä pystyt vuokrata web-kehittäjä Toptalista, jossa heillä on 3% kyvykkyydestä maailmanlaajuisesti, joten sinun ei tarvitse huolehtia laadusta. Vaihtoehtoisesti voit palkata ammattimainen WordPress-kehittäjä.

Kerro meille mitä mieltä olet? Tarvitsetko lisätietoja tämän opetusohjelman tai oppaan tietyistä osista? Haluamme mielellämme, että tämä opas on sinulle hyödyllinen, joten auta meitä auttamaan sinua!

kirjailijasta
Ajeet Yadav
Kirjoittaja: Ajeet YadavVerkkosivu: https://www.wordpressintegration.com/
Ajeet on vanhempi web-kehittäjä WordpressIntegration - PSD to WordPress -palveluntarjoajalta, jossa hän on vastuussa mukautetun JavaScript-koodin kirjoittamisesta muuntamisprosessin aikana. Vapaa-ajallaan hän kirjoittaa eri aiheista, jotka liittyvät JavaScriptiin, WordPressiin ja verkkosuunnitteluun jakamaan työkokemuksensa muiden kanssa.

Yksi asia vielä... Tiesitkö, että ihmiset, jotka jakavat hyödyllisiä juttuja, kuten tämä viesti, näyttävät myös mahtavilta? ;-)
Ole hyvä Jätä hyödyllinen kommentoi ajatuksiasi ja jaa tämä sitten Facebook-ryhmissäsi (ryhmissä), jotka pitävät tätä hyödyllisenä, ja hyödynnetään yhdessä. Kiitos jakamisesta ja mukavuudesta!

Disclosure: Tämä sivu voi sisältää linkkejä ulkoisille sivustoille tuotteille, joita rakastamme ja kannatamme sydämestämme. Jos ostat suosittelemiamme tuotteita, saatamme ansaita viittausmaksun. Tällaiset maksut eivät vaikuta suosituksiimme, emmekä hyväksy maksuja positiivisista arvosteluista.

Kirjoittaja (t) esillä:  Inc-lehden logo   Sitepoint-logo   CSS Tricks -logo    webdesignerdepot-logo   WPMU DEV -logo   ja paljon muuta ...