5 enkle trinn for å konvertere et PSD til WordPress-tema (Bootstrap)

Visste du at 50,000 XNUMX nye WordPress-nettsteder kommer online hver dag? Hvordan skal du skille deg ut fra mengden i et hav av så mange forskjellige nettsteder? En sikker metode for å umiddelbart tiltrekke oppmerksomhet kan være å lage ditt eget, unike, tilpassede tema konvertert fra PSD til WordPress. Dette ville være designet spesielt for ditt eget nettsted - og nettstedet ditt vil ikke være en av de tusenvis av cookie-cutter-nettstedene der ute!

Det er tre standarder når du designer et nettstedstema. PSD (Photoshop-filer), WordPress (WP) og ganske nylig de siste årene, Twitter Bootstrap - et rammeverk for å utvikle responsive nettsteder som bransjepersonell bruker i disse dager.

I dette innlegget skal vi gi deg en komplett og enkel guide til hvordan du kombinerer alle tre: hvordan du konverterer en PSD til et WordPress (Bootstrap) -tema, i 5 enkle trinn. 

Senere i denne artikkelen finner du maler, klare for nedlasting, som du kan bruke som grunnlag for denne opplæringen. Hvis du vil se andre artikler, kan du gå til andre deler av nettstedet vårt, med grundige veiledninger og artikler.

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

Hva er en PSD?

PSD er en forkortelse for PotoShop Design. 

Dette er fordi Photoshop er den eneste programvaren som er mest populær blant grafiske designere, og hvordan de fleste WordPress-nettsteddesignene blir opprettet. Ved hjelp av Photoshop vil en designer lage et unikt nettsteddesign for deg. Dette lagres som en Photoshop-designfil eller en PSD-fil. Dette designet kan deretter gis til WordPress-utviklere som vil gjøre dette til et tema.

Hva er PSD til WordPress?

PSD til WordPress er prosessen med å konvertere en Photoshop-designfil til et fungerende WordPress-tema ved hjelp av Bootstrap eller andre metoder og rammer. Enkelt sagt, du gir en tilpasset design, og den blir konvertert til et fullt funksjonelt WordPress-tema!

De fleste som har vært i eller rundt design- og webdesignindustrien, kan lett forstå denne terminologien - akkurat som de ville forstå andre designtermer som ikke er kjent for folk utenfor nisje (kerning, CMYK, polstring, typografi, ledende, Serif, etc.) 

Hva er et WordPress-tema?

Det er to hovedaspekter ved å opprette et WordPress-nettsted vanligvis. 

1. Nettstedets faktiske utseende, og
2. innholdet på nettstedet.

I WP, det mest populære CMS for å lage et nettsted, er nettstedet uavhengig av innholdet. Du kan endre måten WordPress ser helt ut mens du fortsatt beholder alt innholdet.

Dette er fordi det nettstedet ser ut, faktisk er definert av et WordPress-tema.

Tenk på temaer som du ville gjort for smarttelefoner, for din stasjonære eller bærbare datamaskin eller noe annet som kan "skinnes" etter dine preferanser. Malen eller temaet du bruker kan brukes til å "pusse" innholdet, eller gi det et utseende og følelse som du velger.

WordPress-temaer er en samling av PHP-filer som inneholder "kommandoer" eller spesifikasjoner som definerer farger og mønstre, stilene, ikonene, skriftene, størrelsen på overskrifter og tekst, knappene og i hovedsak hele utseendet til alle elementene av nettstedet du designer.

Det er en hel bransje rundt disse designene, hvor du enten kan få malen gratis eller kjøpe en som allerede er laget (vanligvis kalt premium), for alt fra $ 25 til noen få hundre dollar.

Det er også muligheten til å lage din egen tilpassede design, i stedet for å velge et populært produkt som allerede er opprettet (og brukt mange ganger før). Dette er den faktiske prosessen med å konvertere en PSD til et WordPress-tema (hvordan nettstedet ditt vil se ut til slutt).

Fremover vil vi lede deg til den nøyaktige prosedyren for å lage ditt eget design. 

Konvertering av et PSD til WordPress-tema

Vi har brutt ned prosessen med å konvertere en PSD til WordPress i fem viktige trinn:

1. Skjær PSD-filen i skiver

Når det gjelder PSD til Bootstrap-opplæringen, er "Slicing" den første og viktigste tingen i hele PSD for responsiv WordPress-konverteringsprosess.

Begrepet “Skjæring” kan virke ganske forvirrende for deg først, men ikke bekymre deg for mye om det. Slicing refererer til å kutte og dele en enkelt bildefil i flere bildefiler, som hver inneholder forskjellige designelementer i hele designet. Noen omtaler de som spleising fordi det skaper separate elementer fra en enkelt "organisme" som til slutt vil bli omorganisert eller syntetisert og omformet til et komplett design. 

Dette er avgjørende siden du ikke kan kode en mal / tema fra en enkelt bildedesignfil.

Derfor, for å designe en webside, må du først kutte hovedbildefilen i mange individuelle bildefiler og deretter sy dem sammenlessly.

Vanligvis foretrekker de fleste nett- og grafiske designere å bruke Adobe Photoshop til kutting.

Selv om det samme kan gjøres med en tilsvarende bildedigeringsprogramvare som GIMP (GNU Image Manipulation Program) eller en hvilken som helst annen bildeprogramvare, anbefaler vi på det sterkeste at du bruker Photoshop siden det gjør jobben enklere og raskere, med verktøy som Lag og Lagmasker, som trekker ut metadata, blander, manipulerer og bruker PSD-filer og RAW-bilder.

Uansett hvilken programvare / applikasjon du bruker, er hovedpoenget å komme med piksel-perfekte bildefiler til slutt - som representerer de forskjellige elementene i ditt endelige design.

I tillegg trenger du ikke å kutte designelementer - som topptekst / bunntekstfarge og ensfarget bakgrunn - i sin helhet, noe som kan opprettes dynamisk. I stedet skal du bare klippe designelementer - som knapper og bilder - som ikke kan opprettes dynamisk.

Finn under en YouTube-video som forklarer det grunnleggende om PSD-filsnitting:

2. Bootstrap temaet ditt

Når du har skåret bildedesignfilen din, går du til https://getbootstrap.com og last ned denne versjonen av Twitter Bootstrap derfra. Etter å ha fullført nedlastingen, pakk ut zip-filen i en mappe.

Nå hvis du åpner den ekstraherte mappen, finner du tre mapper - css, skrifttyper og js - inni det.

Vær oppmerksom på at en av de primære bruksområdene til dette rammeverket er fordi det gjør omfattende bruk av mediespørsmål for å kunne lage design som fungerer i alle typer enheter, slik at designet ditt kan flyte sømlessmellom en enhetsstørrelse til en annen (xs - Extra Small, for mobiler, sm - Small, for tablets, md - Medium, for bærbare datamaskiner og stasjonære datamaskiner og lg - Large, for Large desktop).

Dette kalles Responsivt webdesign.

Ytterligere lesing: CSS Frameworks eller CSS Grid: Hva skal jeg bruke til prosjektet mitt? (Smashing Magazine)

3. Lag Index.html og Style.css filer

Neste trinn er å kode de oppskårne elementene i HTML / XHTML-format og style dem ved hjelp av CSS. For dette må du opprette en index.html og en style.css fil, noe som krever at du behersker nok HTML CSS. I hovedsak konverterer vi PSD til HTML, før vi kan gå videre til neste trinn.

Bortsett fra: HTML eller XHTML representerer (EXstrekkbar) HyperText Markup Language, mens CSS representerer Cstigende StyleShæler.

Siden du vil utvikle temaet ditt ved hjelp av Bootstrap, må du initialisere Bootstrap i head-delen og tilhørende Javascript i kroppsseksjonen til din index.html siden 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="/no/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å kan du bruke Bootstrap-komponenter i HTML-malen din. For eksempel bygger vi her en enkel webside med en navigasjonsmeny og miniatyrkomponenter.

.Min.js-delen av bootstrap-bibliotekene betyr at filen har vært minifisert av ytelsesgrunner:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/no/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 åpner denne filen i nettleseren din, bør den se ut slik:

Som du ser, fungerer ingen tilpasset CSS for øyeblikket på denne siden. Så for å utforme innholdet på html-siden i henhold til våre krav, lager vi en tilpasset style.css fil. For vårt eksempel har vi lagt til følgende kode i min egendefinerte CSS-fil:

.navbar {
bakgrunn: # 222222;
margin-bottom: 0px;
border-radius: 0px;
}
.navbar-merke {
color: #FFFFFF;
linjehøyde: 50px;
polstring-venstre: 10px;
}
a.navbar-brand: hover {
farge: # FFEB3B;
}
.navbar ul {
polstring-høyre: 4%;
}
.navbar ul li a {
color: #FFFFFF;
margin-høyre: 10%;
}
.navbar ul li a: sveve {
farge: #222222;
bakgrunnsfarge: gul;
}
a.btn-primær {
bakgrunnsfarge: # E91E63;
color: #FFFFFF;
}

For å få vårt nyopprettede tilpassede CSS-filarbeid, må vi inkludere det på HTML-siden vår (akkurat som vi gjorde bootstrap.min.css). Så inkluder en referanselink til style.css filen i din index.html filen, rett over linjen der du refererte bootstrap.min.css.

...
...

Nå åpen index.html filen i nettleseren din igjen, og du vil se endringen - vår tilpassede CSS fungerer nå, du kan se topptekstlinjen øverst og knappene med en annen farge enn standard bootstrap-knappene.

Alle endringene er definert via CSS-filen ovenfor.

Dette var bare et enkelt eksempel.

På samme måte, ved å bruke Bootstrap, kan du kode hele PSD-filen din (selvfølgelig etter kutting) til HTML. På slutten av dette trinnet har du to filer i hånden:

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

Så langt var vi mest på en PSD til Bootstrap-opplæring. Nå kommer konverteringen til et Bootstrap WordPress-tema.

ER det ovennevnte litt for mye arbeid for deg? Vil du helst ikke starte fra bunnen av? Vi har en løsning på det!

Denne pakken med WordPress startmaler hjelper deg med å komme i gang med en rekke starttemaer som du kan bruke til å produsere din egen design.

Last ned 20 WordPress Starter Theme-pakken nå

Som du kan se, er konvertering fra PSD til HTML en ganske viktig del av hele prosessen, men når du har fått dette ut av veien, blir ting litt lettere. 

4. Lag WordPress-temastruktur i index.html

Hovedårsaken til å konvertere en Photoshop-designfil til WordPress er å lage en fullt funksjonell nettsidemal som kan lastes opp til nettstedets dashbord. 

Slike temaer som Divi og Avada og andre populære temaer har et standard sett med filer som må implementeres for å bli ansett som et gyldig WP-tema. Det er det vi skal gjøre i vårt neste trinn. 

Les mer: Elementor Pro vs Divi - hvilken er best?

Virkelig og virkelig er de neste fasene av denne konverteringen rundt WordPress-kodingsstrukturen for temaer og maler, for nå tar vi temaet vårt mot WP.

Nå som du har index.html fil av PSD-en din, må du dele den i flere php filer i henhold til WordPress-temaer filstruktur. Hvis du gjør det, vil du ikke bare kunne konvertere det statiske index.html fil til et dynamisk WP-tema, men også kunne legge til forskjellige funksjoner og funksjoner knyttet til WordPress til det.

(Bortsett fra er PHP et skriptspråk på serversiden, kjent som hypertext preprocessor.)

For å gjøre programmeringen av WordPress-temaer enklere og for god kodingspraksis, består en typisk mal av flere PHP-filer som f.eks header.php, footer.php, index.php, sidefelt.php, search.php og så videre.

Imidlertid trenger du bare index.php og style.css filer for å lage et fullt funksjonelt WordPress-tema.

Som et grovt eksempel, her bryter vi vårt ovenfor opprettet index.html fil i tre filer: header.php, index.php og footer.php.

La oss starte med header.php. Hele HTML-koden som er inkludert øverst på index.html siden vil gå inn i header.php filen.

WPBootstrap.com

Hjem
Om
Tjenester
Rekkefølge
Ta kontakt med

Mens den midterste delen av index.html-filen går inn i index.php-filen:

Om
...
Utforske







Prosjekter
...
Utforske







Tjenester
...
Utforske

Og vår footer.php-fil vil se ut slik:

© WPBootstrap 2015

Dette trinnet inkluderer oppdeling av index.html-filen i header.php, index.php, footer.php og andre nødvendige funksjonsfiler i henhold til WordPress-temaets filstruktur.

Den komplette listen over filer som hver mal burde ha, finner du nedenfor. Du kan også se et bilde som viser hvordan disse forholder seg til hverandre:

• 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øk.php

Hvis du følger en guide for å konvertere Photoshop Design til WordPress, vil du alltid oppdage at de resulterer i en struktur som ligner på følgende. Nedenfor er en mer detaljert oversikt over hvordan et endelig WordPress-tema skal se ut:

5. Legg til WordPress-koder i malen

Dette er det siste trinnet i opplæringen.

Det beste med WordPress er at den tilbyr en hel haug med innebygde funksjoner i kodestrukturen som kan brukes til å legge til egendefinerte funksjoner og funksjoner til et nettstedstema.

For å inkludere noen av disse funksjonene i WordPress-temaet, er alt du trenger å bruke riktig sett med innebygde funksjonskoder i filene dine. WordPress-rammeverket vil ta seg av alt. Dette er det som gjør plattformen så kraftig!

I forrige trinn brøt vi opp index.html fil på grunnlag av den nødvendige filstrukturen.

Nå er det på tide å legge til WordPress PHP-koder i forskjellige temafiler - som header.php, index.php, footer.php og sidebar.php etc - som vi har i forrige trinn. Til slutt kombinerer vi dem sammen for å produsere et svært funksjonelt WordPress-tema.

For eksempelet vårt ovenfor har vi brukt funksjon i header.php for å vise nettstedets tittel i en lenke:

Og for menyen har vi brukt fungerer som følger:

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

Nå vil header.php-filen se slik ut:

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

">



>



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

Bunnteksten for vår footer.php vil forbli den samme bortsett fra å legge til funksjon.

© WPBootstrap 2015

La oss nå gå videre til index.php. For å vise miniatyrbildekomponentene våre har vi brukt funksjon.

<?php
get_header (); ?>

Mens vi gjør fremskritt, er dette fortsatt ikke alt! For å vise miniatyrbildekomponentene våre riktig, må vi definere sidefelt-1, sidefelt-2 og sidefelt-3 i vår functions.php arkiver som følger:

funksjon wpbootstrap_widgets_init () {
register_sidebar (array (
'name' => __ ('Widget Area', 'wpbootstrap'),
'id' => 'sidefelt-1',
'description' => __ ('Legg til widgets her for å vises i sidefeltet.', 'wpbootstrap'),
'before_widget' => ' ',
'after_widget' => ' ',
'before_title' => ' ',
'after_title' => ' ',
)
register_sidebar (array (
'name' => __ ('Widget Area', 'wpbootstrap'),
'id' => 'sidefelt-2',
'description' => __ ('Legg til widgets her for å vises i sidefeltet.', 'wpbootstrap'),
'before_widget' => ' ',
'after_widget' => ' ',
'before_title' => ' ',
'after_title' => ' ',
)
register_sidebar (array (
'name' => __ ('Widget Area', 'wpbootstrap'),
'id' => 'sidefelt-3',
'description' => __ ('Legg til widgets her for å vises i sidefeltet.', 'wpbootstrap'),
'before_widget' => ' ',
'after_widget' => ' ',
'before_title' => ' ',
'after_title' => ' ',
)
);
}
add_action ('widgets_init', 'wpbootstrap_widgets_init');

Dette vil registrere tre widgetområder i WordPress-dashbordet, der vi trenger å sette "HTML-kode”For hver miniatyrkomponent i sidefelt-1, sidefelt-2 og sidefelt-3 widgets henholdsvis. For eksempel bruker vi koden nedenfor i sidefelt-1 widget.

Om
...
Utforske

Og så videre!

Det siste vi trenger å gjøre er å laste inn stilarkene våre. Dette kan gjøres ved å bruke wp enqueue style () i function.php filen, som følger.

// Last inn hovedformatet
wp_enqueue_style ('' wpbootstrap-style ', get_stylesheet_uri ());

// Last inn Bootstrap-stilark
wp_enqueue_style ('wpbootstrap', get_template_directory_uri (). '/css/bootstrap.css');

For en komplett liste over alle tilgjengelige koder og funksjoner, anbefaler vi at du går gjennom disse offisielle Codex-sidene:

• Maletiketter: Denne siden gir deg en komplett liste over WordPress-koder, som hver har en dedikert side der du kan finne mer informasjon om en bestemt tag.
• Funksjonsreferanse: Denne siden er en referansehåndbok for alle PHP-funksjoner som brukes i WordPress-programvare. I likhet med maletiketter er hver PHP-funksjon knyttet til en dedikert side der den blir forklart i detalj med passende eksempler.

Etter å ha lagt til viktige WordPress-koder og funksjoner, vil alle disse filene bli plassert i en enkelt mappe som har et lignende navn til temanavnet. Du må plassere denne mappen i / Wp-content / themes / katalog over installasjonen av nettstedet ditt.

Og det er det siste trinnet i opplæringen!

Når du har gjort det, bør du ha et fullt fungerende responsivt WordPress-tema ved hjelp av Bootstrap som du kan aktivere via WordPress-dashbordet. 

Klar til å sette i gang ting?

PSD til WordPress-konverteringstjenester

Før du fortsetter å lese - leter du etter utviklere eller partnere som kan hjelpe deg med nettsideprosjektet ditt? Leter du etter en pålitelig leverandør av PSD til WordPress-konverteringstjenester? 

Du er i den misunnelsesverdige posisjonen å måtte finne en god pålitelig partner uten å bli lurt, eller miste mye tid (og penger) hos en tjenesteleverandør av lav kvalitet.

Vår erfaring med å finne pålitelige utviklere har ikke vært hyggelig. 

Vi har måttet håndtere en rekke store problemer: 

• Utviklere som returnerer ekstremt lav kvalitetskode
• Folk som kommuniserte veldig sporadisk og skapte betydelige kommunikasjonsproblemer
• Kode som ble 100% plagiert og skapt juridiske problemer for oss
• Dyr priser, med kvalitet som i beste fall var middelmådig
• Utviklere som forsvant (eller vi har aldri hørt tilbake fra følgende innskudd)

Men ikke la dette skremme deg fra outsourcing, du trenger bare å finne en klarert selskap - og vi er her for å hjelpe! 

Gitt at vi har vært i bransjen i over 15 år, har vi bygget et nettverk av leverandører som vi kjenner og stoler på når det gjelder WordPress og webutviklingstjenester. Dette er outsourcede leverandører som kan samarbeide med deg på prosjektbasis. 

Vil du vite mer? Ta en titt på alternativene nedenfor når det gjelder pålitelig PSD til WordPress-konvertering:

1. PSDtoWPService.com

Mirza og teamet hans har bygget et utmerket rykte for å jobbe med WordPress, bygge tilpassede temaer og ville være et utmerket partnervalg for slikt arbeid. Vi liker denne PSD til WordPress-tjenesten fordi den er både billig og pålitelig. De kan konvertere PSD-filer til WordPress-temaer eller alle andre typer WordPress-utvikling.

Offshore beliggenhet: bangladesh

Timelønn: $ 25 / time 

2. Kodbar 

Codeable tilbyr et annet konsept.

I stedet for å offshoring direkte, er Codeable en markedsplass som utelukkende består av WordPress-programmerer, hvor frilansere trenger å gå gjennom en streng kontrollprosess for å komme til markedet.

Prisalgoritmen deres gir deg en rimelig pris for å eliminere både underbud og overpris. Sjekk dem hvis du vil ha forskjellige alternativer før du bestemmer deg for hvilken PSD til WordPress-konverteringstjeneste du skal velge.

Sted: Over hele verden bestemmer du hvem du foretrekker å jobbe med 

Timelønn: $ 70 til $ 120 / time

3. WPKraken

WPKraken er et webutviklingsteam som har en 4.98 ut av 5 stjerner og har jobbet med store bedriftskunder til deres navn, for eksempel Lexus og Suzuki, og kan gjøre noen form for WordPress-basert arbeid.

De har et erfaren internt team av utviklere, UI- og UX-designere, PM og QA. De kan jobbe både med små reparasjoner og små prosjekter, i tillegg til store, tilpassede prosjekter.

Uansett hva slags oppgave du har, kan de takle det slik det skal gjøres!

WP Kraken tilbyr en rimelig pris for tjenester av høy kvalitet. Du kan kontakte dem via portalen deres wpkraken.io 

Sted: Polen

Timelønn: $ 50 / time 

Ikke interessert i å ansette utviklere ennå? Les videre!

Noen flere tanker 

Sakte men sikkert har responsivt webdesign blitt en dominerende standard for å bygge fremtidsklare nettsteder.

I disse dager er nesten alle nettsteder drevet av denne fantastiske teknikken for å gi brukerne en optimal visnings- og interaksjonsopplevelse, uavhengig av enheten de bruker, enten det er en telefon, nettbrett eller bærbar / stasjonær enhet.

I følge en nylig undersøkelse utført av Google Webmaster-teamet på Google+, foretrekker over 81% av folk å bruke en responsiv designtilnærming for å få nettstedene sine til å gjengis ordentlig på alle slags enheter.

Derfor er det viktig å lære hvordan du lager et WordPress-nettstedstema ved hjelp av Twitter Bootstrap eller et annet responsivt rammeverk for webdesign fra en PSD. Selv om det er mange gratis nettstedstemaer, er det ultimate uttrykket for kreativitet i webdesign å lage ditt eget WordPress-tema ved hjelp av Bootstrap.

Selv om WordPress dominerer over 24% av alle nettsteder, å konvertere en Photoshop-fil (PSD) til et velfungerende responsivt tema er ikke så lett som du tror. Dette krever at du har et godt grep om å skrive CSS-mediespørsmål som til slutt dikterer om en mal er responsiv eller ikke.

Ville det ikke vært bedre hvis du får et forhåndskodet responsivt stilark fullpakket med alle viktige funksjoner?

Takket være Bootstrap, verdens mest populære responsive frontend-rammeverk, for å gjøre utviklernes liv enklere, er dette nå en ganske enklere oppgave enn det pleide å være. I denne artikkelen skal vi vise deg hvordan du gjør en PSD-mal til et responsivt WordPress-tema ved hjelp av Bootstrap som din utviklingsramme.

Nok en gang konverterte vi først PSD til Bootstrap, så i hovedsak er den første delen virkelig og virkelig en PSD til Bootstrap-opplæring.

Senere, i andre del, konverterer filene vi utviklet til et WordPress-tema, så på det tidspunktet blir det hele en PSD til Bootstrap-opplæring.

Akkurat som alltid liker vi å gjøre livet ditt lettere ved å gi deg en rekke ting som kan hjelpe deg i gang. Etter at du har lært det grunnleggende om å lage et WordPress-tema, hvorfor ikke komme i gang med et av WordPress Starter-temaene.

Last ned vår 20 WP Starter Theme-pakke

Topp essensielle tips:

Å lage et flott nettsteddesign krever ganske avanserte ferdighetssett. Selv om det å skrive det selv kan virke som det beste alternativet, ansette en flott WordPress-utvikler (for eksempel fra Toptal) er sannsynligvis mye mer kostnadseffektivt i det lange løp. I hovedsak vil du få et flott resultat på veldig kort tid. 

Ta en titt på utviklere på Toptal nå

Ofte Stilte Spørsmål

Hva er en PSD-fil?

En PSD-fil er en Photoshop Design-fil som inneholder et design laget av designprogramvaren fra Adobe: Photoshop. I sammenheng med denne artikkelen vil PSD inneholde utformingen av et nettsted. Denne PSD-filen kan deretter sendes til utviklere for å opprettes som et WordPress-tema. Designfilen vil inneholde all nødvendig informasjon for å lage den endelige utformingen av et nettsted i HTML, inkludert ting som farger, rutenett, hvordan det vil se ut på skrivebord / mobil og andre nødvendige designelementer.

Hva betyr PSD for WordPress?

PSD til WordPress er prosessen som lager et tema for WordPress fra et designkonsept opprettet i Photoshop. Vanligvis hyres en designer inn for å lage et nettsteddesignkonsept, basert på hvordan sluttbrukeren vil at nettstedet skal se ut. Når designen er opprettet i Photoshop, må den konverteres til WordPress-kompatibel kode. Dette betyr at en webutvikler vil bruke nettstedsdesignet opprettet i Photoshop og lage et WordPress-tema som vil gjenskape designet.

Hvordan åpner jeg en PSD-fil i Photoshop?

PSD er det opprinnelige filformatet til Photoshop, så det bør være trivielt å åpne en PSD-fil i Photoshop. Det eneste du trenger å huske på at visse nødvendige elementer, for eksempel skrifter som brukes til å lage designet, må være tilgjengelig på datamaskinen der filen åpnes, ellers inneholder designet ikke de riktige skriftene.

Hva er et WordPress-tema?

Et WordPress-tema er en samling av PHP-filer som inneholder "kommandoer" eller spesifikasjoner som definerer og lager farger og mønstre, stilene, ikonene, skriftene, størrelsen på overskrifter og tekst, knappene og egentlig hele utseendet til alle av elementene på nettstedet som er under utforming. Et WordPress-tema er dynamisk i den forstand at designet kan fungere med alle typer innhold, enten dette er en blogg, en e-handelsbutikk, et online kurs eller noe annet det spesifikke WordPress-nettstedet brukes til.

Hvordan konverterer jeg en Bootstrap-mal til WordPress?

For å konvertere en Bootstrap-mal til WordPress, må en webutvikler ta Bootstrap-malen og kopiere designet til et WordPress-skjelett-tema. I virkeligheten er det som gjøres at de faktiske designene blir konvertert til et språk som WordPress-rammeverket kan forstå og jobbe med. Du kan følge instruksjonene våre ovenfor, eller ansette en av våre leverandører av konverteringstjenester som er oppført ovenfor.

Avsluttende tanker

Det er alt for nå om hvordan du lager et responsivt Bootstrap WordPress-tema fra en PSD-fil. Enten du er en nybegynner eller en proff, bør denne PSD til Bootstrap-opplæringen og deretter til WP helt sikkert gi deg den mest forenklede måten å oppnå ønsket resultat på.

Imidlertid, hvis du møter noen form for problemer i PSD til WordPress-konverteringsprosessen, er det to ting du kan gjøre. Du kan ansett en webutvikler på Toptal, hvor de har de beste 3% talentene over hele verden, så du trenger ikke å bekymre deg for kvalitet. Alternativt kan du ansett en profesjonell WordPress-utvikler.

Fortell oss hva du tenker? Trenger du noen flere detaljer i noen spesifikke deler av denne veiledningen / veiledningen? Vi vil gjerne at denne guiden skal være nyttig for deg, så hjelp oss med å hjelpe deg!

om forfatteren

Forfatter: Ajeet Yadavnettside: https://www.wordpressintegration.com/E-post: ajeet.yadav@ipraxa.com

Ajeet er senior webutvikler hos WordpressIntegration - PSD til WordPress-tjenesteleverandør, hvor han er ansvarlig for å skrive tilpasset JavaScript-kode under konverteringsprosessen. På fritiden skriver han om forskjellige emner relatert til JavaScript, WordPress og webdesign for å dele arbeidserfaringen sin med andre.