5 nemme trin til at konvertere et PSD til WordPress-tema (Bootstrap)

psd til wordpress

Vidste du, at 50,000 nye WordPress-sider hver dag kommer online? Hvordan vil du skille dig ud fra mængden i et hav af så mange forskellige steder? En sikker metode til straks at tiltrække opmærksomhed kan være at oprette dit eget, unikke, tilpassede tema konverteret fra PSD til WordPress. Dette ville være designet specielt til dit eget websted - og dit websted vil ikke være et af de tusindvis af cookie-cutter-sider derude!

Der er tre standarder, når du designer et webstedstema. PSD (Photoshop-filer), WordPress (WP) og temmelig for nylig de sidste par år, Twitter Bootstrap - en ramme til udvikling af lydhøre sider, som branchefolk bruger i disse dage.

I dette indlæg vil vi give dig en komplet og nem guide til, hvordan du kombinerer alle tre: hvordan man konverterer en PSD til et WordPress (Bootstrap) -tema i 5 nemme trin. 

Senere i denne artikel finder du skabeloner, der er klar til download, som du kan bruge som grundlag for denne vejledning. Hvis du vil se andre artikler, skal du besøge andre dele af vores websted med detaljerede tutorials og artikler.

Men hvorfor vil du konvertere en PSD-fil til et Bootstrap WordPress-tema?

Hvad er en PSD?

PSD er en forkortelse for PhedSHop DEsign. 

Dette skyldes, at Photoshop er det eneste stykke software, der er mest populært blandt grafiske designere, og hvordan de fleste WordPress-websidesign oprettes. Ved hjælp af Photoshop opretter en designer et unikt webstedsdesign til dig. Dette gemmes som en Photoshop-designfil eller en PSD-fil. Dette design kan derefter gives til WordPress-udviklere, der vil gøre dette til et tema.

Hvad er PSD til WordPress?

PSD til WordPress er processen med at konvertere en Photoshop-designfil til et fungerende WordPress-tema ved hjælp af Bootstrap eller andre metoder og rammer. Kort sagt giver du et brugerdefineret design, og det konverteres til et fuldt funktionelt WordPress-tema!

De fleste mennesker, der har været i eller omkring design- og webdesignindustrien, kan let forstå denne terminologi - ligesom de ville forstå andre designudtryk, der ikke er kendt for folk uden for niche (kerning, CMYK, polstring, typografi, førende, Serif osv.) 

Hvad er et WordPress-tema?

Der er normalt to primære aspekter ved oprettelse af et WordPress-websted. 

  1. Webstedets faktiske udseende og
  2. indholdet af webstedet.

I WP er det mest populære CMS til oprettelse af et websted, hvordan webstedet ser ud, uafhængigt af indholdet. Du kan ændre den måde, din WordPress ser helt ud, mens du stadig beholder alt indholdet.

Dette skyldes, hvordan webstedet ser ud, faktisk er defineret af et WordPress-tema.

Tænk på temaer, som du ville gøre for smartphones, til din stationære computer eller bærbare computer eller andet, der kan "skinnes" efter dine præferencer. Den skabelon eller det tema, du bruger, kan bruges til at "pudse" indholdet eller give det et look og føle, som du vælger.

WordPress-temaer er en samling af PHP-filer, der indeholder "kommandoer" eller specifikationer, der definerer farver og mønstre, typografier, ikoner, skrifttyper, størrelsen på overskrifter og tekst, knapperne og i det væsentlige hele udseendet på alle elementerne af det websted, du designer.

Der er en hel industri omkring disse designs, hvor du enten kan få din skabelon gratis eller købe en, der allerede er lavet (typisk kaldet premium), for alt fra $ 25 til et par hundrede dollars.

Der er også mulighed for at oprette dit eget brugerdefinerede design i stedet for at vælge et populært produkt, der allerede er oprettet (og brugt mange gange før). Dette er den egentlige proces med at konvertere en PSD til et WordPress-tema (hvordan dit websted i sidste ende vil se ud).

Fremadrettet vil vi guide dig til den nøjagtige procedure til oprettelse af dit eget design. 

Konvertering af et PSD til WordPress-tema

Vi har opdelt processen med at konvertere en PSD til WordPress i 5 vigtige trin:

1. Skær PSD-filen i skiver

Med hensyn til vores PSD til Bootstrap-tutorial er "Slicing" den første og fremmeste ting i hele PSD til responsiv WordPress-konverteringsproces.

Udtrykket “Udskæring” kan virke ret forvirrende for dig i starten, men bekymre dig ikke for meget om det. Udskæring refererer til at klippe og opdele en enkelt billedfil i flere billedfiler, som hver indeholder forskellige designelementer i hele designet. Nogle mennesker henviser til dem som splejsning, fordi det skaber separate elementer fra en enkelt "organisme", der til sidst vil blive omarrangeret eller syntetiseret og omdannet til et komplet design. 

Dette er afgørende, da du ikke kan kode en skabelon / et tema fra en enkelt billeddesignfil.

Derfor, for at designe en webside, skal du først skære hovedbilledfilen i mange individuelle billedfiler og derefter sy dem sammenlessly.

PSD-udskæring for at konvertere til HTML og CSS og til sidst til Bootstrap

Normalt foretrækker de fleste web- og grafiske designere at bruge Adobe Photoshop til udskæring.

Selvom det samme kan gøres ved hjælp af en tilsvarende billedredigeringssoftware som GIMP (GNU Image Manipulation Program) eller en hvilken som helst anden billedbehandlingssoftwarepakke, anbefaler vi stærkt, at du bruger Photoshop da det gør jobbet lettere og hurtigere med værktøjer som lag og lagmasker, der udpakker metadata, blandes, manipuleres og bruger PSD-filer og RAW-billeder.

Uanset hvilken software / applikation du bruger, er det vigtigste at komme med pixel-perfekte billedfiler til sidst - repræsenterer de forskellige elementer i dit eventuelle design.

Derudover behøver du ikke skære designelementer - som sidehoved / sidefodsfarve og baggrund i fuld farve - som kan oprettes dynamisk. I stedet skal du kun klippe designelementer - som knapper og billeder - der ikke kan oprettes dynamisk.

Find nedenfor en YouTube-video, der forklarer det grundlæggende i PSD-filskæring:

2. Bootstrap dit tema

Når du har skåret din billeddesignfil, skal du gå til https://getbootstrap.com , download denne version af Twitter Bootstrap derfra. Efter afslutningen af ​​overførslen skal du udpakke zip-filen i en mappe.

Hvis du nu åbner den udpakkede mappe, finder du tre mapper - css, skrifttyper , js - inde i det.

Bemærk, at en af ​​de primære anvendelser af denne ramme er, fordi den gør omfattende brug af medieforespørgsler for at kunne oprette designs, der fungerer i enhver form for enhed, så dit design kan flyde sømlessmellem en enhedsstørrelse til en anden (xs - ekstra lille, til mobiler, sm - lille, til tablets, md - medium, til bærbare computere og stationære computere og lg - store, til store desktops).

Dette kaldes lydhør webdesign.

Yderligere læsningCSS Frameworks eller CSS Grid: Hvad skal jeg bruge til mit projekt? (Smashing Magazine)

3. Opret Index.html og Style.css filer

Det næste trin er at kode de opskårne elementer i HTML / XHTML-format og style dem ved hjælp af CSS. Til dette skal du oprette en index.html og en style.css fil, som kræver, at du behersker HTML CSS nok. I det væsentlige konverterer vi PSD til HTML, inden vi kan gå videre til de næste trin.

Bortset fra: HTML eller XHTML repræsenterer (EXstrækbar) HyperText Markup Language, mens CSS repræsenterer Cstigende Sså megetShæve.

Da du vil udvikle dit tema ved hjælp af Bootstrap, skal du initialisere Bootstrap i hovedafsnittet og det tilknyttede JavaScript i din kropsdel index.html side som følger: 

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

Nu kan du gøre brug af Bootstrap-komponenter i din HTML-skabelon. For eksempel bygger vi her en simpel webside med en navigationsmenu og miniaturekomponenter.

.Min.js-delen af ​​bootstrap-bibliotekerne betyder, at filen har været minificeret af præstationsårsager:

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

Hvis du åbner denne fil i din browser, skal den se sådan ud:

BootStrap Wordpress Theme - 1. kladde

Som du kan se, fungerer ingen tilpasset CSS på denne side i øjeblikket. Så for at style indholdet af html-siden i henhold til vores krav opretter vi en brugerdefineret style.css fil. For vores eksempel har vi tilføjet følgende kode til min brugerdefinerede CSS-fil:

.navbar {
baggrund: # 222222;
margin-bottom: 0px;
border-radius: 0px;
}
.navbar-brand {
farve: #FFFFFF;
linjehøjde: 50px;
polstring til venstre: 10px;
}
a.navbar-brand: svæver {
farve: # FFEB3B;
}
.navbar ul {
polstring-højre: 4%;
}
.navbar ul li a {
farve: #FFFFFF;
margen-højre: 10%;
}
.navbar ul li a: svæver {
farve: #222222;
baggrundsfarve: gul;
}
a.btn-primær {
baggrundsfarve: # E91E63;
farve: #FFFFFF;
}

For at få vores nyoprettede tilpassede CSS-fil til at fungere, skal vi medtage den på vores HTML-side (ligesom vi gjorde bootstrap.min.css). Så inkluder et referencelink til style.css fil i din index.html fil, lige over linjen, hvor du henviste bootstrap.min.css.






...
...

Nu åben index.html fil i din browser igen, og du kan se ændringen - vores brugerdefinerede CSS fungerer nu, du kan se headerbjælken øverst og knapperne med en anden farve end standard bootstrap-knapperne.

Alle ændringer er defineret via CSS-filen ovenfor.

Konverter PSD til Wordpress BootStrap Theme - Draft 2

Dette var bare et simpelt eksempel.

På samme måde kan du bruge Bootstrap til at kode hele din PSD-fil (selvfølgelig efter udskæring) til HTML. I slutningen af ​​dette trin har du to filer i hånden:

  1. index.html og en anden er
  2. style.css.

Indtil videre var vi mest på en PSD til Bootstrap tutorial. Nu kommer konverteringen til et Bootstrap WordPress-tema.

ER ovenstående lidt for meget arbejde for dig? Vil du hellere ikke starte fra bunden? Vi har en løsning på det!

Denne pakke WordPress-startskabeloner hjælper dig med at komme i gang med et antal starttemaer, som du kan bruge til i sidste ende at producere dit eget brugerdefinerede design.

Download 20 WordPress Starter Theme-pakken nu

Som du kan se, er konvertering fra PSD til HTML en ganske vigtig del af hele processen, men når du har fået dette ud af vejen, bliver tingene lidt lettere. 

4. Opret WordPress-temastruktur i index.html

Hovedårsagen til at konvertere en Photoshop-designfil til WordPress er at oprette en fuldt funktionel webstedsskabelon, der kan uploades til webstedets dashboard. 

Sådanne temaer som Divi , Avada og andre populære temaer har et standardsæt af filer, der skal implementeres for at blive betragtet som et gyldigt WP-tema. Det er hvad vi skal gøre i vores næste trin. 

Læs mere: Elementor Pro vs Divi - hvilken er bedst?

Virkelig og virkelig er de næste faser af denne konvertering omkring WordPress-kodningsstrukturen til temaer og skabeloner, for nu tager vi vores tema mod WP.

Nu hvor du har index.html fil af din PSD, skal du opdele den i flere php filer i henhold til WordPress-temaer filstruktur. Hvis du gør det, vil du ikke kun kunne konvertere det statiske index.html fil til et dynamisk WP-tema, men også være i stand til at tilføje forskellige funktioner og funktioner tilknyttet WordPress til det.

(Bortset fra er PHP et scriptsprog på serversiden kendt som hypertext preprocessor.)

For at gøre programmeringen af ​​WordPress-temaer lettere og for god kodningspraksis består en typisk skabelon af flere PHP-filer som f.eks header.php, footer.php, index.php, sidebar.php, search.php og så videre.

Du behøver dog kun index.php , style.css filer for at oprette et fuldt funktionelt WordPress-tema.

Som et groft eksempel bryder vi her ovenstående oprettet index.html fil i tre filer: header.php, index.php og footer.php.

Grundlæggende Wordpress-skabelonstruktur

Lad os starte med header.php. Hele HTML-koden, der er inkluderet øverst på index.html siden går ind i header.php fil.













WPBootstrap.com

Hjem
Om
Tjenester
Bestille
Kontakt

Mens den midterste del af index.html-filen går ind i index.php-filen:






Om
...
Udforske







Projekter
...
Udforske







Tjenester
...
Udforske


Og vores footer.php-fil ville se sådan ud:



© WPBootstrap 2015





Dette trin inkluderer opdeling af index.html-filen i header.php, index.php, footer.php og andre nødvendige funktionsfiler i henhold til WordPress-temaets filstruktur.

Den komplette liste over filer, som hver skabelon skal have, kan findes nedenfor. Du kan også se et billede, der viser, hvordan disse relaterer til hinanden:

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

Hvis du følger en guide til at konvertere dit Photoshop Design til WordPress, finder du altid, at de resulterer i en struktur, der ligner den følgende. Nedenfor er en mere detaljeret oversigt over, hvordan et sidste WordPress-tema skal se ud:

WP Theme - detaljeret struktur efter at have fulgt en PSD til WordPress tutorial

5. Føj WordPress-tags til skabelonen

Dette er det sidste trin i vores tutorial.

Det bedste ved WordPress er, at det tilbyder en hel række indbyggede funktioner i sin kodningsstruktur, der kan bruges til at tilføje brugerdefinerede funktioner og funktioner til et websteds tema.

For at inkludere nogen af ​​disse funktioner i dit WordPress-tema er alt hvad du skal gøre, at bruge det rigtige sæt indbyggede funktionstags i dine filer. WordPress-rammen tager sig af alt. Det er dette, der gør platformen så stærk!

I det foregående trin brød vi op index.html fil på basis af den krævede filstruktur.

Nu er det tid til at tilføje WordPress PHP-tags til forskellige temafiler - ligesom header.php, index.php, footer.php , sidebar.php osv. - som vi har i det foregående trin. Endelig kombinerer vi dem sammen for at producere et meget funktionelt WordPress-tema.

Til vores ovenstående eksempel har vi her brugt funktion i header.php for at vise vores sides titel i et link:

Og til menuen har vi brugt fungerer som følger:

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

Nu ser vores header.php-fil sådan ud:


?>
class = "no-js">

">



>



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

Sidefodskoden til vores footer.php forbliver den samme undtagen tilføjelse fungere.



© WPBootstrap 2015




Lad os nu gå videre til index.php. For at vise vores miniaturekomponenter har vi brugt fungere.


get_header (); ?>





Mens vi gør fremskridt, er det stadig ikke alt! For at vise vores miniaturekomponenter korrekt skal vi definere sidebjælke-1, sidebjælke-2 , sidebjælke-3 i vores functions.php arkiver som følger:

funktion wpbootstrap_widgets_init () {
register_sidebar (array (
'name' => __ ('Widget Area', 'wpbootstrap'),
'id' => 'sidebjælke-1',
'beskrivelse' => __ ('Tilføj widgets her for at blive vist i din sidebjælke.', 'wpbootstrap'),
'before_widget' => ' ',
'after_widget' => ' ',
'before_title' => ' ',
'after_title' => ' ',
)
register_sidebar (array (
'name' => __ ('Widget Area', 'wpbootstrap'),
'id' => 'sidebjælke-2',
'beskrivelse' => __ ('Tilføj widgets her for at blive vist i din sidebjælke.', 'wpbootstrap'),
'before_widget' => ' ',
'after_widget' => ' ',
'before_title' => ' ',
'after_title' => ' ',
)
register_sidebar (array (
'name' => __ ('Widget Area', 'wpbootstrap'),
'id' => 'sidebjælke-3',
'beskrivelse' => __ ('Tilføj widgets her for at blive vist i din sidebjælke.', 'wpbootstrap'),
'before_widget' => ' ',
'after_widget' => ' ',
'before_title' => ' ',
'after_title' => ' ',
)
);
}
add_action ('widgets_init', 'wpbootstrap_widgets_init');

Dette registrerer tre widgetområder i WordPress-dashboardet, hvor vi bliver nødt til at placere "HTML-kode”For hver miniaturekomponent i sidebjælke-1, sidebjælke-2 , sidebjælke-3 widgets henholdsvis. For eksempel bruger vi nedenstående kode i sidebjælke-1 widget.





Om
...
Udforske


Og så videre!

Den sidste ting, vi skal gøre, er at indlæse vores stilark. Dette kan gøres ved at bruge wp enqueue style () i function.php fil som følger.

// Indlæs hovedformatet
wp_enqueue_style ('' wpbootstrap-style ', get_styleheet_uri ());

// Indlæs Bootstrap-stilark
wp_enqueue_style ('wpbootstrap', get_template_directory_uri (). '/css/bootstrap.css');

For en komplet liste over alle tilgængelige tags og funktioner anbefaler vi, at du gennemgår disse officielle Codex-sider:

  • Skabelontags: Denne side giver dig en komplet liste over WordPress-tags, som hver har en dedikeret side, hvor du kan finde mere information om et bestemt tag.
  • Funktionsreference: Denne side er en referencevejledning til alle PHP-funktioner, der bruges i WordPress-software. Ligesom skabelontags er hver PHP-funktion knyttet til en dedikeret side, hvor den forklares detaljeret med passende eksempler.

Efter tilføjelse af vigtige WordPress-tags og -funktioner placeres alle disse filer i en enkelt mappe med et lignende navn til temanavnet. Du skal placere denne mappe i / Wp-content / temaer / katalog over installationen af ​​dit websted.

Og det er det sidste trin i vejledningen!

Når du har gjort det, skal du have et fuldt fungerende lydhørt WordPress-tema ved hjælp af Bootstrap, som du kan aktivere via WordPress-dashboardet. 

Klar til at sætte ting i gang?

 

PSD til WordPress-konverteringstjenester

Inden du fortsætter med at læse - leder du efter udviklere eller partnere, der kan hjælpe dig med dit webstedsprojekt? Leder du efter en pålidelig udbyder af PSD til WordPress-konverteringstjenester? 

Du er i den misundelsesværdige position, at du skal finde en god pålidelig partner uden at blive snydt eller miste en masse tid (og penge) hos en tjenesteudbyder af lav kvalitet.

Vores erfaring med at finde pålidelige udviklere har ikke været behagelig. 

Vi har haft at gøre med en række større problemer: 

  • Udviklere, der returnerer kode af ekstremt lav kvalitet
  • Mennesker, der kommunikerede meget sporadisk og skabte betydelige kommunikationsproblemer
  • Kode, der blev 100% plagieret, hvilket skabte juridiske problemer for os
  • Dyre priser med kvalitet, der i bedste fald var middelmådig
  • Udviklere, der forsvandt (eller vi har aldrig hørt tilbage fra følgende indskud)

Men lad ikke dette skræmme dig fra outsourcing, du skal bare finde en betroet firma - og vi er her for at hjælpe! 

I betragtning af at vi har været i branchen i over 15 år, har vi opbygget et netværk af udbydere, som vi kender og stoler på, når det kommer til WordPress og webudviklingstjenester. Disse er fuldt outsourcede udbydere, der kan arbejde sammen med dig på projektbasis. 

Vil du vide mere? Se på nedenstående muligheder, når det kommer til pålidelig PSD til WordPress-konvertering:

1. PSDtoWPService.com

psdtowpservice.com

Mirza og hans team har opbygget et fremragende ry for at arbejde med WordPress, opbygge brugerdefinerede temaer og ville være et fremragende partnervalg til sådant arbejde. Vi kan lide denne PSD til WordPress-tjeneste, fordi den er både billig og pålidelig. De kan konvertere PSD-filer til WordPress-temaer eller alle andre former for WordPress-udvikling.

Offshore placering: Bangladesh

Timeløn: $ 25 / timen 

2. Kan kodes 

 kodbar

Codeable tilbyder et andet koncept.

I stedet for direkte offshoring er Codeable en markedsplads, der udelukkende består af WordPress-programmør, hvor freelancere har brug for at gennemgå en streng kontrolproces for at komme til markedet.

Deres prisalgoritme giver dig en rimelig pris for at eliminere både underbud og overpris. Tjek dem, hvis du gerne vil have forskellige muligheder, inden du beslutter dig for, hvilken PSD til WordPress-konverteringstjeneste du skal vælge.

Beliggenhed: På verdensplan beslutter du, hvem du foretrækker at arbejde med 

Timeløn: $ 70 til $ 120 / time

3. WPKraken

wp kraken

WPKraken er et webudviklingsteam, der har en 4.98 ud af 5 stjerner, og har arbejdet med store erhvervskunder til deres navn som Lexus og Suzuki og kan udføre enhver form for WordPress-baseret arbejde.

De har et erfarent internt team af udviklere, UI- og UX-designere, PM'er og QA'er. De kan arbejde både på små rettelser og små projekter såvel som store, tilpassede projekter.

Uanset hvilken slags opgave du har, kan de håndtere det som det skal gøres!

WP Kraken tilbyder en rimelig pris for tjenester af høj kvalitet. Du kan kontakte dem via deres portal wpkraken.io 

Beliggenhed: Polen

Timeløn: $ 50 / timen 

Er du ikke interesseret i at ansætte udviklere endnu? Læs videre!

 

Et par yderligere tanker 

Langsomt men sikkert er responsivt webdesign blevet en dominerende standard for opbygning af fremtidsklare websteder.

I disse dage er næsten alle websteder drevet af denne fantastiske teknik til at give brugerne en optimal visnings- og interaktionsoplevelse, uanset hvilken enhed de bruger, hvad enten det er en telefon, tablet eller bærbar / stationær enhed.

Ifølge en nylig undersøgelse foretaget af Google Webmaster-teamet på Google+ foretrækker over 81% af befolkningen at bruge en responsiv designtilgang til at få deres websteder til at blive gengivet korrekt på alle slags enheder.

Derfor er det vigtigt at lære at oprette et WordPress-webstedstema ved hjælp af Twitter Bootstrap eller en anden lydhør ramme til dit webdesign fra en PSD. Mens der er masser af gratis websitetemaer, er det ultimative udtryk for kreativitet i webdesign at oprette dit eget brugerdefinerede WordPress-tema ved hjælp af Bootstrap.

Selvom WordPress dominerer over 24% af alle websteder, at konvertere en Photoshop-fil (PSD) til et velfungerende responsivt tema er ikke så let som du tror. Dette kræver, at du har et godt greb om at skrive CSS-medieforespørgsler, der i sidste ende dikterer, om en skabelon er lydhør eller ej.

Ville det ikke være bedre, hvis du får et forkodet responsivt typografiark fyldt med alle vigtige funktioner?

Konverter PSD til WordPress Bootstrap-tema - en tutorial

Tak til Bootstrap, verdens mest populære responsive front-end-ramme, for at gøre det lettere for udviklere at liv, er dette nu en ret enklere opgave, end den plejede at være. I denne artikel vil vi vise dig, hvordan du omdanner en PSD-skabelon til et lydhørt WordPress-tema ved hjælp af Bootstrap som din udviklingsramme.

Endnu en gang konverterede vi først vores PSD til Bootstrap, så i det væsentlige er den første del virkelig og virkelig en PSD til Bootstrap-tutorial.

Senere, i anden del, konverterer de filer, vi udviklede til et WordPress-tema, så på det tidspunkt bliver det hele en PSD til Bootstrap-tutorial.

Ligesom altid vil vi gerne gøre dit liv lettere ved at give dig en masse ting, der kan hjælpe dig i gang. Når du har lært det grundlæggende i at oprette et WordPress-tema, hvorfor ikke komme i gang med et af WordPress Starter-temaerne.

Download vores 20 WP Starter Theme-pakke

Vigtigste tip:

Oprettelse af et fantastisk webstedsdesign kræver et ganske avanceret sæt færdigheder. Selvom det at skrive det selv kan virke som den bedste løsning, ansætte en stor WordPress-udvikler (for eksempel fra Toptal) er sandsynligvis meget mere omkostningseffektiv i det lange løb. I det væsentlige får du et godt resultat på meget kort tid. 

Tjek udviklere på Toptal nu

Ofte stillede spørgsmål

Hvad er en PSD-fil?

En PSD-fil er en Photoshop Design-fil, der indeholder et design oprettet af designsoftwaren fra Adobe: Photoshop. I forbindelse med denne artikel vil PSD indeholde designet af et websted. Denne PSD-fil kan derefter sendes til udviklere for at blive oprettet som et WordPress-tema. Designfilen indeholder alle de nødvendige oplysninger for at skabe det endelige design af et websted i HTML, herunder ting som farver, gitre, hvordan det vil se ud på desktop / mobil og andre nødvendige designelementer.

Hvad betyder PSD til WordPress?

PSD til WordPress er den proces, der skaber et tema til WordPress fra et designkoncept oprettet i Photoshop. Typisk hyres en designer til at oprette et webstedsdesignkoncept baseret på, hvordan slutbrugeren ønsker, at webstedet skal se ud. Når designet er oprettet i Photoshop, skal det konverteres til WordPress-kompatibel kode. Dette betyder, at en webudvikler bruger det webstedsdesign, der er oprettet i Photoshop og opretter et WordPress-tema, der genskaber designet.

Hvordan åbner jeg en PSD-fil i Photoshop?

PSD er det oprindelige filformat for Photoshop, så det skal være trivielt at åbne en PSD-fil i Photoshop. Det eneste du skal huske på, at visse nødvendige elementer, såsom skrifttyper, der bruges til at skabe designet, skal være tilgængelige på den computer, hvor filen åbnes, ellers indeholder designet ikke de korrekte skrifttyper.

Hvad er et WordPress-tema?

Et WordPress-tema er en samling af PHP-filer, der indeholder "kommandoer" eller specifikationer, der definerer og opretter farver og mønstre, typografierne, ikonerne, skrifttyperne, størrelsen på overskrifter og tekst, knapperne og i det væsentlige hele udseendet af de elementer på webstedet, der er ved at blive designet. Et WordPress-tema er dynamisk i den forstand, at designet kan arbejde med enhver form for indhold, hvad enten det er en blog, en e-handelsbutik, et onlinekursus eller andet, som det specifikke WordPress-websted bruges til.

Hvordan konverterer jeg en Bootstrap-skabelon til WordPress?

For at konvertere en Bootstrap-skabelon til WordPress skal en webudvikler tage Bootstrap-skabelonen og kopiere designet til et WordPress-skeletema. I virkeligheden er det, der gøres, at de faktiske designs konverteres til et sprog, som WordPress-rammen kan forstå og arbejde med. Du kan følge vores instruktioner ovenfor eller ansætte en af ​​vores konverteringstjenesteudbydere, der er anført ovenfor.

Afsluttende tanker

Det er alt for nu om, hvordan man opretter et responsivt Bootstrap WordPress-tema fra en PSD-fil. Uanset om du er en nybegynder eller en professionel, skal denne PSD til Bootstrap-tutorial og derefter til WP helt sikkert give dig den mest forenklede måde at opnå dit ønskede resultat på.

Men hvis du står over for nogen form for problemer i PSD til WordPress-konverteringsprocessen, er der to ting, du kan gøre. Du kan ansæt en webudvikler på Toptal, hvor de har de øverste 3% af talent verden over, så du behøver ikke bekymre dig om kvalitet. Alternativt kan du ansæt en professionel WordPress-udvikler.

Fortæl os hvad du tænker? Har du brug for nogle flere detaljer i specifikke dele af denne vejledning / vejledning? Vi vil meget gerne have, at denne guide er nyttig for dig, så hjælp os venligst til at hjælpe dig!

Om forfatteren
Ajeet Yadav
Ajeet er senior webudvikler hos WordpressIntegration - PSD til WordPress-tjenesteudbyder, hvor han er ansvarlig for at skrive tilpasset JavaScript-kode under konverteringsprocessen. I sin fritid skriver han om forskellige emner relateret til JavaScript, WordPress og webdesign for at dele sin arbejdsoplevelse med andre.

En ting mere... Vidste du, at folk, der deler nyttige ting som dette indlæg, også ser FANTASTISKE ud? ;-)
Vær venlig at forlade a nyttigt kommenter med dine tanker, så del dette på din Facebook-gruppe (r), der ville finde det nyttigt, og lad os høste fordelene sammen. Tak fordi du delte og var god!

Afsløring: Denne side kan indeholde links til eksterne websteder for produkter, som vi elsker og helhjertet anbefaler. Hvis du køber produkter, vi foreslår, tjener vi muligvis et henvisningsgebyr. Sådanne gebyrer påvirker ikke vores anbefalinger, og vi accepterer ikke betalinger for positive anmeldelser.

Forfatter (e) Fremhævet den:  Inc Magazine-logo   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot logo   WPMU DEV-logo   og mange flere ...