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

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

Der er tre standarder, når man designer et hjemmesidetema. PSD (Photoshop-filer), WordPress (WP) og for nylig, i de sidste par år, Twitter Bootstrap - et framework til udvikling af responsive hjemmesider, som branchefolk bruger i disse dage.

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

Senere i denne artikel finder du skabeloner, der er klar til download, og som du kan bruge som grundlag for denne vejledning. Hvis du vil se andre artikler, kan du besøge andre dele af vores hjemmeside med dybdegående vejledninger og artikler.

Men hvorfor skulle 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 softwareprogram, der er mest populært blandt grafiske designere, og som bruges til at designe de fleste WordPress-websteder. Ved hjælp af Photoshop vil en designer skabe et unikt webdesign til dig. Dette vil blive gemt som en Photoshop-designfil eller en PSD-fil. Dette design kan derefter gives til WordPress-udviklere, som vil omdanne det 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 frameworks. Kort sagt leverer du et brugerdefineret design, og det konverteres til et fuldt funktionelt WordPress-tema!

De fleste, der har arbejdet i eller omkring design- og webdesignbranchen, kan nemt forstå denne terminologi - ligesom de ville forstå andre designudtryk, der ikke er velkendte for folk uden for nichen (kernering, CMYK, padding, typografi, leading, Serif osv.). 

Hvad er et WordPress-tema?

Der er normalt to primære aspekter ved at oprette en WordPress-hjemmeside. 

1. Hjemmesidens faktiske udseende, og
2. indholdet af webstedet.

I WP, det mest populære CMS til at oprette en hjemmeside, er hjemmesidens udseende uafhængigt af indholdet. Du kan ændre din WordPress' udseende fuldstændigt, mens du stadig beholder alt indholdet.

Dette skyldes, at hjemmesidens udseende faktisk er defineret af et WordPress-tema.

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

WordPress-temaer er en samling af PHP-filer, der indeholder "kommandoer" eller specifikationer, der definerer farver og mønstre, stilarter, ikoner, skrifttyper, størrelser på overskrifter og tekst, knapper og i bund og grund hele udseendet af alle elementerne på 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 lave dit eget brugerdefinerede design i stedet for at vælge et populært produkt, der allerede er blevet lavet (og brugt mange gange før). Dette er selve processen med at konvertere en PSD til et WordPress-tema (som din hjemmeside vil se ud i sidste ende).

Fremadrettet vil vi guide dig gennem den præcise procedure for at skabe dit eget design. 

Konvertering af PSD til WordPress-tema

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

1. Opdel PSD-filen

I vores PSD til Bootstrap-tutorial er "Slicing" det første og vigtigste i hele PSD til responsiv WordPress-konverteringsprocessen.

Udtrykket "udskæring" Det kan virke ret forvirrende i starten, men du behøver ikke bekymre dig for meget om det. Slicing refererer til at klippe og opdele en enkelt billedfil i flere billedfiler, der hver især indeholder forskellige designelementer fra hele designet. Nogle mennesker omtaler dette som splicing, fordi det skaber separate elementer fra en enkelt design"organisme", som 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 skal du, for at designe en webside, først opdele hovedbilledfilen i mange individuelle billedfiler og derefter sy dem problemfrit sammen.

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

Selvom det samme kan gøres med et tilsvarende billedredigeringsprogram som GIMP (GNU Image Manipulation Program) eller et andet billedbehandlingsprogram, anbefaler vi kraftigt, at du bruger Photoshop da det gør arbejdet lettere og hurtigere, med værktøjer som lag og lagmasker, udtrækning af metadata, blanding, manipulation og brug af PSD-filer og RAW-billeder.

Uanset hvilken software/applikation du bruger, er hovedpointen at lave pixelperfekte billedfiler i sidste ende - der repræsenterer de forskellige elementer i dit endelige design.

Derudover behøver du ikke at klippe designelementer – som f.eks. header-/fodtekstfarve og ensfarvet baggrund – helt ud, da disse kan oprettes dynamisk. I stedet skal du kun klippe designelementer – som f.eks. knapper og billeder – der ikke kan oprettes dynamisk.

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

https://www.youtube.com/watch?v=XgxEieLbloc

2. Bootstrap dit tema

Når du har udskåret din billeddesignfil, skal du gå til https://getbootstrap.com og Download denne version af Twitter Bootstrap derfra. Når du har gennemført download, skal du udpakke zip-filen i en mappe.

Hvis du nu åbner den udpakkede mappe, finder du tre mapper – css, skrifttyper og js - indeni den.

Bemærk, at en af ​​de primære anvendelser af dette framework er, at det gør omfattende brug af medieforespørgsler for at kunne skabe designs, der fungerer på alle typer enheder, så dit design kan flyde problemfrit mellem en enhedsstørrelser (xs - Ekstra lille til mobiltelefoner, sm - Lille til tablets, md - Medium til bærbare og stationære computere, og lg - Stor til store stationære computere).

Dette kaldes lydhør webdesign.

Yderligere læsning: CSS 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 slicede 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, hvilket kræver, at du har tilstrækkeligt kendskab til HTML og CSS. Vi konverterer i bund og grund PSD'en til HTML, før vi kan fortsætte til de næste trin.

Sidebemærkning: HTML eller XHTML repræsenterer (EXspændbar) HyperText Markup Lsprog, mens CSS repræsenterer Cascading Sså megetShede.

Da du vil udvikle dit tema ved hjælp af Bootstrap, skal du initialisere Bootstrap i head-sektionen og den tilhørende 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 benytte dig af Bootstrap-komponenter i din HTML-skabelon. For eksempel, her bygger vi en simpel webside med en navigationsmenu og miniaturekomponenter.

.min.js-delen af ​​bootstrap-bibliotekerne betyder, at filen er blevet minimeret af ydeevneå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, burde den se nogenlunde sådan ud:

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

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

For at vores nyoprettede brugerdefinerede CSS-fil skal virke, skal vi inkludere den på vores HTML-side (ligesom vi gjorde bootstrap.min.css). Så inkluder et referencelink til style.css fil i din index.html filen, lige over den linje, hvor du refererede til bootstrap.min.css.

...
...

Nu åben index.html filen i din browser igen, så vil du se ændringen – vores brugerdefinerede CSS virker nu, du kan se headerlinjen øverst og knapperne med en anden farve end standard bootstrap-knapperne.

Alle ændringerne er blevet defineret via CSS-filen ovenfor.

Dette var bare et simpelt eksempel.

Ligeledes kan du ved hjælp af Bootstrap kode hele din PSD-fil (selvfølgelig efter slicing) til HTML. Ved afslutningen af ​​dette trin har du to filer i hånden:

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

Indtil videre har vi mest arbejdet 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 helt forfra? Det har vi en løsning på!

Denne samling af WordPress-skabeloner til begyndere hjælper dig med at komme i gang med en række starttemaer, som du kan bruge til i sidste ende at producere dit eget brugerdefinerede design.

Download pakken med 20 WordPress-starttemaer nu

Som du kan se, er konvertering fra PSD til HTML en ret vigtig del af hele processen, men når du har fået det overstået, bliver tingene lidt nemmere. 

4. Opret WordPress-temastruktur i index.html

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

Sådanne temaer som Divi og 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 det, vi vil gøre i vores næste trin. 

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

De næste faser af denne konvertering handler i sandhed om WordPress-kodningsstrukturen for temaer og skabeloner, fordi vi nu tager vores tema mod WP.

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

(Derudover er PHP et server-side scripting-sprog kendt som hypertext preprocessor.)

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

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

Som et groft eksempel bryder vi her vores ovenfor oprettede index.html fil i tre filer: header.php, index.php og footer.php.

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

WPBootstrap.com

Hjem
Om
Tjenester
Bestille
Kontakte

Mens den midterste del af index.html-filen vil blive placeret i index.php-filen:

Om
...
Udforske







Projekter
...
Udforske







Tjenester
...
Udforske

Og vores footer.php-fil ville se nogenlunde 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-temaernes filstruktur.

Den komplette liste over filer, som hver skabelon bør have, kan findes nedenfor. Du kan også se et billede, der viser, hvordan disse relaterer sig 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 vejledning til at konvertere dit Photoshop-design til WordPress, vil du altid opdage, at de resulterer i en struktur, der ligner den følgende. Nedenfor er en mere detaljeret visning af, hvordan et endeligt WordPress-tema skal se ud:

5. Tilføj WordPress-tags til skabelonen

Dette er det sidste trin i vores vejledning.

Det bedste ved WordPress er, at det tilbyder en hel masse indbyggede funktioner i sin kodningsstruktur, der kan bruges til at tilføje brugerdefinerede funktioner og egenskaber til et hjemmesidetema.

For at inkludere en af ​​disse funktioner i dit WordPress-tema, skal du blot bruge det rigtige sæt indbyggede funktionstags i dine filer. WordPress-frameworket tager sig af alt. Det er det, der gør platformen så kraftfuld!

I det forrige trin opdelte vi index.html fil på baggrund af den nødvendige filstruktur.

Nu er det tid til at tilføje WordPress PHP-tags til forskellige temafiler - som f.eks. header.php, index.php, footer.php og sidebar.php osv. – som vi fik i det forrige trin. Til sidst kombinerer vi dem sammen for at skabe et yderst funktionelt WordPress-tema.

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

" title="<?php bloginfo('navn'); ?>" class="navbar-brand">

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

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

Nu vil vores header.php-fil se nogenlunde sådan ud:

?>
klasse="ingen-js">

">



>


" title="<?php bloginfo('navn'); ?>" class="navbar-brand">
'Project Nav', 'menu_class','nav navbar-nav pull-right')); ?>

Fodtekstkoden for vores footer.php vil forblive det samme bortset fra at tilføje fungere.

© WPBootstrap 2015

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

get_header(); ?>

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

funktion wpbootstrap_widgets_init() {
register_sidebar( array(
'navn' => __( 'Widget-område', 'wpbootstrap' ),
'id' => 'sidebjælke-1',
'beskrivelse' => __( 'Tilføj widgets her, der skal vises i din sidebjælke.', 'wpbootstrap' ),
'før_widget' => ' ',
'efter_widget' => ' ',
'før_titel' => ' ',
'efter_titel' => ' ',
)
register_sidebar( array(
'navn' => __( 'Widget-område', 'wpbootstrap' ),
'id' => 'sidebjælke-2',
'beskrivelse' => __( 'Tilføj widgets her, der skal vises i din sidebjælke.', 'wpbootstrap' ),
'før_widget' => ' ',
'efter_widget' => ' ',
'før_titel' => ' ',
'efter_titel' => ' ',
)
register_sidebar( array(
'navn' => __( 'Widget-område', 'wpbootstrap' ),
'id' => 'sidebjælke-3',
'beskrivelse' => __( 'Tilføj widgets her, der skal vises i din sidebjælke.', 'wpbootstrap' ),
'før_widget' => ' ',
'efter_widget' => ' ',
'før_titel' => ' ',
'efter_titel' => ' ',
)
);
}
add_action( 'widgets_init', 'wpbootstrap_widgets_init' );

Dette vil registrere tre widget-områder i WordPress-dashboardet, hvor vi skal placere "HTML-kode" for hver miniaturekomponent i sidebjælke-1, sidebjælke-2 og sidebjælke-3 widgets. For eksempel bruger vi nedenstående kode i sidebjælke-1 widget.

Om
...
Udforske

Og så videre!

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

// Indlæs hovedstylarket
wp_enqueue_style( ''wpbootstrap-style', get_stylesheet_uri() );

// Indlæs Bootstrap-stylark
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:

• SkabelontagsDenne side giver dig en komplet liste over WordPress-tags, som hver især har en dedikeret side, hvor du kan finde flere oplysninger om et bestemt tag.
• FunktionsreferenceDenne side er en referenceguide til alle PHP-funktioner, der bruges i WordPress-software. Ligesom skabelontags er hver PHP-funktion linket 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 som temanavnet. Du skal placere denne mappe i /wp-indhold/temaer/ mappe for din hjemmesideinstallation.

Og det er det sidste trin i tutorialen!

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

Klar til at sparke tingene i gang?

 

PSD til WordPress konverteringstjenester

Før du læser videre - leder du efter udviklere eller partnere, der kan hjælpe dig med dit hjemmesideprojekt? Leder du efter en pålidelig udbyder af PSD til WordPress konverteringstjenester? 

Du er i den uundgåelige situation, at du skal finde en god og pålidelig partner uden at blive snydt eller miste en masse tid (og penge) med en lavkvalitetsudbyder.

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

Vi har måttet håndtere en række store problemer: 

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

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

Da 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 ud outsourcede udbydere, der kan arbejde med dig på projektbasis. 

Vil du vide mere? Se på nedenstående muligheder for pålidelig PSD til WordPress-konvertering:

1. PSDtoWPService.com

Mirza og hans team har opbygget et fremragende ry for at arbejde med WordPress, bygge brugerdefinerede temaer og ville være en fremragende partner til den slags 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.

Placering til havs: Bangladesh

Timeløn: $ 25 / timen 

2. Kan kodes 

 

Codeable tilbyder et andet koncept.

I stedet for direkte offshoring er Codeable en markedsplads, der udelukkende består af WordPress-programmører, hvor freelancere skal gennemgå en streng godkendelsesproces for at komme ind på markedet.

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

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

Timeløn: 70 til 120 dollars i timen

3. WPKraken

WPKraken er et webudviklingsteam, der har en rating på 4.98 ud af 5 stjerner, og som har arbejdet med store virksomhedskunder som Lexus og Suzuki, og som kan udføre alle former for WordPress-baseret arbejde.

De har et erfarent internt team af udviklere, UI- og UX-designere, projektledere og kvalitetssikringsmedarbejdere. De kan arbejde på både små reparationer og små projekter, såvel som store, brugerdefinerede projekter.

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

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

Beliggenhed: Polen

Timeløn: $ 50 / timen 

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 at bygge fremtidssikrede hjemmesider.

Nu om dage er næsten alle hjemmesider drevet af denne fantastiske teknik, der giver brugerne en optimal visnings- og interaktionsoplevelse, uanset hvilken enhed de bruger, uanset om 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 et responsivt design for at få deres hjemmesider til at vises korrekt på alle slags enheder.

Derfor er det vigtigt at lære at oprette et WordPress-webstedstema ved hjælp af Twitter Bootstrap eller et andet responsivt framework til dit webdesign fra en PSD. Selvom der findes masser af gratis webstedstemaer, er det at oprette dit eget brugerdefinerede WordPress-tema ved hjælp af Bootstrap det ultimative udtryk for kreativitet inden for webdesign.

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

Ville det ikke være bedre, hvis du fik et prækodet responsivt stylesheet fyldt med alle de vigtigste funktioner?

Tak til Bootstrap, verdens mest populære responsive front-end framework, for at gøre udvikleres liv lettere, er dette nu en forholdsvis enklere opgave end det plejede at være. I denne artikel vil vi vise dig, hvordan du kan omdanne en PSD-skabelon til et responsivt WordPress-tema ved hjælp af Bootstrap som din udviklingsramme.

Endnu engang konverterede vi først vores PSD til Bootstrap, så i bund og grund er den første del virkelig en PSD til Bootstrap-vejledning.

Senere, i anden del, konverterer vi de filer, vi har udviklet, til et WordPress-tema, så det hele på det tidspunkt bliver 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 med at komme i gang. Når du har lært det grundlæggende i at oprette et WordPress-tema, hvorfor så ikke komme i gang med et af WordPress Starter-temaerne.

Download vores 20 WP Starter Theme-pakke

Vigtigste tip:

At skabe et godt hjemmesidedesign kræver ret avancerede færdigheder. Selvom det kan virke som den bedste løsning at skrive det selv, ansættelse af en dygtig WordPress-udvikler (for eksempel fra Toptal) er sandsynligvis meget mere omkostningseffektivt i det lange løb. I bund og grund får du et godt resultat på meget kort tid. 

Tjek udviklere ud 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 denne artikels kontekst indeholder PSD'en 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 til 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 opretter et tema til WordPress ud fra et designkoncept oprettet i Photoshop. Typisk hyres en designer til at skabe et webdesignkoncept baseret på, hvordan slutbrugeren ønsker, at webstedet skal se ud. Når designet er oprettet i Photoshop, skal det konverteres til WordPress-kompatibel kode. Det betyder, at en webudvikler bruger webdesignet oprettet i Photoshop og opretter et WordPress-tema, der genskaber designet.

Hvordan åbner jeg en PSD-fil i Photoshop?

PSD er Photoshops oprindelige filformat, så det burde være nemt at åbne en PSD-fil i Photoshop. Det eneste, du skal huske på, er, at visse nødvendige elementer, såsom de skrifttyper, der bruges til at oprette 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, som definerer og opretter farver og mønstre, stilarter, ikoner, skrifttyper, størrelser på overskrifter og tekst, knapper og i bund og grund hele udseendet af alle elementerne på det websted, der designes. Et WordPress-tema er dynamisk i den forstand, at designet kan fungere med enhver type indhold, uanset om det er en blog, en e-handelsbutik, et onlinekursus eller noget 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 over på et WordPress-skelettema. I virkeligheden konverteres de faktiske designs til et sprog, som WordPress-frameworket kan forstå og arbejde med. Du kan følge vores instruktioner ovenfor eller hyre en af ​​vores konverteringsudbydere, der er anført ovenfor.

Afsluttende tanker

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

Men hvis du støder på problemer i PSD til WordPress-konverteringsprocessen, er der to ting, du kan gøre. Ansæt en webudvikler på Toptal, hvor de har de 3% bedste talenter på verdensplan, så du behøver ikke bekymre dig om kvalitet. Alternativt kan du hyr en professionel WordPress-udvikler.

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