ez a cikk már hozzájárult PSDtoWP.net

talán a legjobb lenne itt kezdeni a miért. Az összes webhely körülbelül egynegyede a WordPress-en fut, az online blogolási platform. Ez messze az egyik legnépszerűbb nyílt forráskódú tartalomkezelő rendszer a bolygón.

a webes tervezők túlnyomó többsége még mindig használja a Photoshopot egy weboldal tervezéséhez, bár vannak alternatívák. Ez azt jelenti, hogy sok weboldal-tervezőnek meg kell találnia a PSD fájlok reszponzív WordPress témává konvertálásának módját!

ez elég egyszerűnek tűnhet. A PSD fájl konvertálása WordPress weboldalra azonban nem éppen egyszerű. Ez sokkal többet igényel, mint a Photoshop készségek! Annak érdekében, hogy a PSD fájlt egy reszponzív témává alakítsa, amelyet a WordPress-en lehet használni, ismernie kell a front end webfejlesztési nyelveket, mint például a HTML, a CSS és a JavaScript, valamint a PHP háttérprogramozási nyelvet.

most, hogy a miért van az útból, itt az ideje, hogy folytassa a Hogyan! Bár a mennyire biztosan nem könnyű, mégis öt meglehetősen egyszerűen érthető lépésben valósítható meg!

első lépés: a webdesign létrehozása

ugrás a második lépésre, ha már megtervezte webhelyét.

sokkal többről van szó, mint egy logó létrehozásáról és egy menü, egy oldalsáv, egy lábléc és a tartalom együttes elhelyezéséről. A darab ebben a puzzle kell létrehozni az első helyen, és a folyamat ez a teremtés valami, hogy nem mindenki képes olyan könnyen.

az Ön által létrehozott webdesignnak tökéletes egyensúlynak kell lennie a forma és a funkció között, egy olyan webdesignnak, amely nagyszerű felhasználói élményt nyújt.

kutatás

annak érdekében, hogy olyan webdesignot hozzon létre, amely sikeresen megfelel a megjelenés és a funkcionalitás kritériumainak, komoly kutatást kell végeznie. Először is, ki a célközönség és mit akar a célközönség? Ezek nyilvánvalóan a kutatás kulcsfontosságú szempontjai.

Tanuljon másoktól

a webdesign másik aspektusa, amelyet kutatnia kell, a versenytársak által alkalmazott technikák. Ezek a versenytársak valószínűleg jobban megalapozottak, mint te, így minden bizonnyal sokat tanulhat az általuk használt dizájnból! Miután elvégezte a kutatást, és van egy jó ötlete arról, hogyan kell kinéznie a webhelyének, el kell kezdenie gondolkodni a funkcionalitáson. Milyen funkciókat szeretne, hogy a web design rendelkezzen?

drótváz

miután mindent elrendezett, vegye le papírra. Draw & vázlat, amit elképzelni a helyszínen, hogy néz ki annak érdekében, hogy a vizuális támogatás, ahogy halad előre!

tervezés

miután befejezted a fizikai vázlatok / drótvázak készítését, készen állsz arra, hogy beugorj a kapitány székébe és beindítsd a Photoshopot. Az első dolog, amit meg kell tennie, mielőtt komolyan elkezdené, győződjön meg arról, hogy oszlop alapú rácsot használ, mint például az XXgrid. Ez teszi a design meg igazán rendezett és igazított! Ez nem csak esztétika. Egy oszlop alapú rács, hogy hozzon létre egy igazított design megkönnyíti az Ön vagy a front end fejlesztő, aki fejleszti a HTML és CSS, hogy hozzon létre egy optimalizált, érzékeny elrendezés tabletta és okostelefonok!

mielőtt továbblépne a következő lépésre, ne feledje, hogy a PSD tervezési fájljait rétegekben kell rendeznie, azaz minden szakasznak saját mappával kell rendelkeznie a megfelelő címekkel!

Második Lépés: Szeletelje a PSD-t

Miután létrehozott egy web design, hogy teljesen elégedett, ez crunch idő. Alapvetően most meg kell tennie a PSD-WordPress folyamatot.

manapság a weboldalak mind HTML5 és CSS3 használatával készülnek. Ezek sokkal jobbak, mint az XHTML és a CSS2, mert a gombok, szegélyek, színátmenetek, lekerekített élek és az összes többi kép által létrehozott funkció helyett a CSS3 kódolás funkcionális részeként jönnek létre. Ezért a PSD fájl szeletelése alapvetően most csak a PSD háttérképeinek szeletelését jelenti!

ehhez meg kell nyitnia a fájlt a Photoshopban vagy az Illustratorban, attól függően, hogy melyik szoftvert használta a terv létrehozásához. Ha a tervező jól végezte volna a munkáját, létrehozott volna egy jól strukturált tervezési fájlt mappákkal és rétegekkel, így könnyen megtalálhatja, amire szüksége van. Tanulmányozza a webdesignot, és keressen olyan képeket, amelyekről úgy gondolja, hogy szeletelésre lenne szükség. Ezek alapvetően olyan képek,amelyeket nem lehet létrehozni a CSS3 használatával, általában a logó és a háttérképek. Olvassa el, hogyan kell szeletelni a képeket itt.

miután kicserélte ezeket a háttérképeket CSS használatával, hatalmas csökkenést fog látni a betöltési időkben. Ez sok felhasználót vonzana a webhelyére, mert az átlagos internethasználó nem bírja a hosszú betöltési időket!

harmadik lépés: hozza létre a HTML, CSS3 és JavaScript (jQuery)

miután kivágta a képeket a PSD fájlból, itt az ideje létrehozni a HTML5 és a CSS3. Az első dolog, amit meg kell tennie, hozzon létre egy új mappát, amelyben indexet hoz létre.html és stílus.css. Ezenkívül hozzon létre egy images vagy img nevű almappát (amelyik tetszik), és helyezze a kibontott képeket ebbe a mappába. Hozzon létre egy másik mappát JavaScript vagy js néven. Ez későbbre való, így az összes JavaScript és jQuery fájlt jól megjelölt helyen tárolhatja. Miután elkészült az összes mappa, fájl és almappa létrehozásával, itt az ideje elkezdeni a HTML5 és a CSS3 építését.

HTML5

a HTML5 egy viszonylag új nyelv, amely rendelkezik mind az XHTML, mind a HTML funkciókkal. Ezt a nyelvet alapvetően a dokumentum alapszerkezetének létrehozására, valamint az oldal összes elemének kijelölésére használják. A HTML5 különálló elemeket tartalmaz a webhely különböző szakaszaihoz, mint például a <fejléc>, a <nav>, a <félre>, valamint a <lábléc> elemek (és még sok más), amelyek lehetővé teszik egy tiszta, jól strukturált, általánosan olvasható dokumentum létrehozását. Íme néhány kiváló forrás, amellyel megtanulhatja vagy frissítheti a memóriát a HTML5-ről.

HTML források

a W3Schools a legnépszerűbb webhely a HTML5 alapjainak elsajátításához. Ennek a nyelvnek minden elemét és tulajdonságát demók segítségével magyarázzák és tanítják, így könnyű tanulási élményt nyújtanak.

Mozilla Developer ‘ s Section – az emberek mögött a népszerű böngésző Mozilla Firefox van egy fejlesztői rész a saját honlapján. Ebben a szakaszban sokat tanulhat a HTML5-ről az ott található oktatóanyagok segítségével, függetlenül attól, hogy kezdő vagy haladó kódoló.

Web Design Tuts-ez a weboldal sok különböző HTML5 oktatóanyagot tartalmaz, amelyek közül néhány ingyenes, néhány pedig fizetett.

W3-ez a weboldal felelős az összes nyílt webes szabvány fejlesztéséért, amelyet a web hosszú élettartamának biztosítása érdekében hoztak létre. Itt részletes információkat talál a HTML5-ről, valamint a legújabb fejlesztésekről.

W3 Validator-miután befejezte a HTML5, tedd át ezt a validator. Megmondja, hogy a HTML5 megfelel-e a w3 open web szabványoknak!

CSS3

a CSS a lépcsőzetes stíluslapokra utal, a CSS3 pedig a front-end nyelv legújabb verziója. A CSS3-at arra használják, hogy a HTML5 segítségével létrehozott elemek csupasz csontjait formázza, pozícionálja és formázza. Ez lehetővé teszi egy következetes webdesign létrehozását, amelyben az összes elem megerősíti a webhely általános kialakítását. Miután használta a CSS3-at, azt fogja találni, hogy a HTML5 sokkal tisztább és jobban strukturált lesz, ami lehetővé teszi, hogy sokkal gyorsabban töltsön be, valamint lehetővé teszi, hogy a keresőmotorok gyorsabban indexeljék. Az alábbiakban néhány forrás segít megtanulni vagy frissíteni a memóriát a CSS3-ról:

CSS források

W3 CSS – W3 a legismertebb és legismertebb források a CSS3 oktatóanyagok és példák a különböző CSS3 szelektorok, tulajdonságok és értékek. A legjobb az egészben, hogy minden oktatóanyagnak van egy ‘próbáld ki magad’ oldala, amely lehetővé teszi a tanultak alkalmazását.

Ismerje meg a CSS3 – t-a Mozilla nem csak a Firefox böngésző készítője. Kiváló hely a CSS3 megismerésére is, valamint frissítse a nyelvvel kapcsolatos ismereteit.

CSS Web Design Tuts – ez a weboldal tartalmaz egy egész bőségszaru oktatóanyagok, hogy megy keresztül. Ezen oktatóanyagok némelyikéért fizetni kell, de mások még mindig teljesen ingyenesek, és sokat taníthatnak a CSS3 kiválasztókról, tulajdonságokról és értékekről.

W3 CSS – ez a weboldal remek hely a legfrissebb CSS3 hírek frissítésére, mert ez az a közösség, amely fejleszti a CSS3 webes szabványokat. Ez egy remek hely a nyelv technikai információinak megismerésére is.

CSS Validator – ez az érvényesítő, amelyen keresztül kell futtatni az összes CSS3 mielőtt a honlapon nyilvános. Ennek célja annak biztosítása, hogy a CSS3 megfeleljen a W3 által meghatározott webes szabványoknak!

reszponzív tervezés

az internet hosszú utat tett meg a kezdetektől fogva. Ennek oka részben az okostelefonok és táblagépek megjelenése, valamint az ilyen típusú technológiák elterjedése a mindennapi életünkben. Ezen eszközök óriási népszerűségének eredményeként az internet összes felhasználójának jelentős része az átlagos laptopnál lényegesen kisebb képernyőkön nézi a weboldalakat. Továbbá, nem kurzorok használatával lépnek kapcsolatba ezekkel a webhelyekkel, az ujjaik használatával. Ezért a modern weboldalnak képesnek kell lennie arra, hogy alkalmazkodjon a különféle típusú eszközökhöz. Itt jön be a reszponzív tervezés. A responsive design használatával a tervezők képesek olyan weboldalt készíteni, amely a teljes elrendezést a megtekintett eszköz típusa alapján módosíthatja.

a HTML5 és a CSS3 felépítése előtt érdemes előre eldönteni, hogy az új weboldala reszponzív dizájnt tartalmaz-e vagy sem. Ez azért van, mert amikor a webhely tervezésének érzékeny részét kódolja, akkor a CSS3 média lekérdezésekkel kell dolgoznia. Ezekkel a Média lekérdezésekkel különböző textúrákat és stílusokat határozhat meg a különböző képernyőfelbontásokhoz.

ne feledje, hogy soha ne használjon rögzített szélességet, inkább százalékokat használjon. Ezt folyékony vagy folyékony elrendezésnek nevezik, amely lehetővé teszi, hogy optimalizálja webhelyét nemcsak a Média lekérdezéseiben meghatározott felbontásokra, hanem a köztük lévő összes felbontásra is. Ez hatalmas előnyt jelent a webhelye számára, mivel a ma megjelenő okostelefonok, táblagépek és számítógépek annyi különböző méretűek, ezért felbontásúak, és mindegyiket el kell fogadnia.

Responsive Resources

Íme néhány nagyszerű erőforrás, amellyel frissítheti memóriáját, vagy megismerheti a reszponzív tervezést és az összes kapcsolódó kódolást:

Google Responsive – ez egy nagyszerű forrás azok számára, akik újak a reszponzív tervezésben a CSS3 média lekérdezések használatával.

a reszponzív Webdesign alapelvei – olvassa el ezt a cikket, hogy megértse a reszponzív webdesign és az adaptív webdesign közötti különbséget. Van néhány nagyszerű példa, amely segít megérteni a dolgokat részletesen!

Fluid Grids – akkor használja ezt a kiváló cikket Ethan Marcotte tanulni fluid grids és hogyan kell használni őket. Próbálja ki használja a cikkben szereplő példákat!

Responsive front-end framework

ha nem vagy hajlandó megtanulni a CSS3 média lekérdezéseit, vagy talán egyszerűen nincs elég ideje rá, próbáljon inkább egy responsive front-end framework-et használni. Ha úgy dönt, hogy rácskeretet használ, ne feledje, hogy ugyanazt a keretrendszert kell alkalmaznia a CSS-re és a HTML-re is, mivel előre meghatározott osztályokkal és azonosítókkal fog dolgozni a HTML5 segítségével létrehozott keretrendszer CSS3-hoz történő csatlakoztatásához. Az érzékeny front-end keretrendszer használata minden bizonnyal lehetővé teszi, hogy sokkal gyorsabban fejlessze webhelyét, de hátránya, hogy lelassítja webhelyének betöltési idejét is a nem használt nagy mennyiségű kód miatt.

néhány a legnépszerűbb front-end keretek közül:

Bootstrap – ez a reszponzív keretrendszer meglehetősen könnyen megvalósítható, és további bónusz, hogy CDN-t használ a webhely betöltési sebességének hatásának csökkentésére is.

kevesebb-ez egy adaptív CSS rács keretrendszer, nem pedig adaptív, amely lehetővé teszi adaptív elrendezés létrehozását.

Foundation – ez egy front-end rács keret egy fájl mérete, amely teljesen apró annak érdekében, hogy minimalizálja a hatása lesz a webhely betöltési sebesség.

JavaScript (vs CSS3)

a JavaScript jelenleg a világ egyik legnépszerűbb programozási nyelve. Ez annak köszönhető, hogy a böngészők széles köre támogatja, valamint annak a ténynek is köszönhető, hogy olyan könyvtárakat tartalmaz, mint a jQuery, valamint a háttérrendszerek, például a Node.js, valamint olyan keretek, mint az AngularJS. Nem csoda, hogy oly sok fejlesztő esküszik erre a programozási nyelvre! Az utóbbi időben azonban a JavaScript elavulttá vált, mivel számos funkcióját a CSS3 animációk kezdték átvenni, amelyek lehetővé teszik a stílusok közötti átmenetek animálását.

Javascript Resources

W3 – ez egy kiváló kiindulópont, ha új JavaScript, köszönhetően a kiváló bemutató, hogy elérhető ezen a honlapon.

jQuery – ha van némi tapasztalata a JavaScript, akkor elkezdheti használni a könyvtárak, mint ez annak érdekében, hogy a program sokkal könnyebben. jQuery a legnépszerűbb JavaScript könyvtár egy mérföld.

NodeJS – ha inkább háttérrendszereket szeretne, de ugyanakkor szereti a Javascriptet, nézze meg ezt a weboldalt.

AngularJS – kombinálja a HTML és a Java félelmetes erőit a keretrendszer használatával, és dinamikus nézeteket kapjon.

győződjön meg róla, hogy nézze meg a következő forrásokat, mielőtt elkezdené használni a JavaScript – et a webhely elemeinek animálásához, miközben valószínűleg használhatja a CSS3:

CSS3 animációkat is-ismét a w3schools-hoz fordulunk a CSS3 oktatóanyagokhoz. Olvassa el a demók elérhető ezen a honlapon annak érdekében, hogy megértsék az összes különböző CSS3 animációk.

Mozilla Animations – további ismereteket CSS3 animációk a kilenc minták és példák, hogy a Mozilla nyújtott.

negyedik lépés: Építsd meg a WordPress témafájlokat

most, hogy sikeresen átalakítottad a PSD-terveidet HTML5, CSS3 és JavaScript formátumba, itt az ideje a nagy átalakításnak: a HTML-t teljes reszponzív WordPress-témává alakítva. Ne felejtse el követni a WordPress sablon hierarchiáját, hogy megbizonyosodjon arról, hogy a témák valóban működni fognak-e. Az Általános sorrend a fejléccel kezdődik.php, majd index.php, lábléc.php és stílus.css. Ezt a négy sablont fogja használni a webhely összes oldalán.

miután teljesen megértette a sablonhierarchia működését, el kell kezdenie a HTML fájlok darabokra bontását. Először létrehozhat egy mappát a témák mappában, amelyet a WordPress telepítésében talál, amelynek címe /wp-content/themes/. Hozza létre a fájl fejlécét.php ebben a mappában. Ezt a fájlt fogja használni a dokumentum típusának, valamint az oldal fejlécébe tartozó összes elem deklarálásához, például a metákhoz, a címhez, a stíluslapokhoz, a javascriptekhez stb. Miután ezzel végzett, hozzon létre láblécet.php és illessze be az összes lábléc elemet a HTML dokumentumba. Ha webhelyének kialakítása tartalmaz oldalsávot, hozzon létre egy sidebar nevű fájlt.php-t is, és tartalmazza az összes vonatkozó kódolást ebben a fájlban.

miután befejezte a webhely összes elemének létrehozását ezekben a fájlokban, el kell kezdenie a Kezdőlap létrehozását. Számos módja van ennek. Például egyszerűen létrehozhat indexet.php, címlap.php vagy page-home.php, ezen fájlok bármelyike alkalmas lesz arra, amit megpróbál, így a végső választás teljesen rajtad múlik. Most, hogy elkészült a honlap három sablonjának egyikével, tartalmazza az összes .az imént készített php fájlok. Most, hogy a felső, alsó és oldalsó kész, illessze be a HTML5 a honlap között, és akkor sikeresen létrehozta a honlapját a honlapon. Egyszerűen kövesse ugyanazt a folyamatot a webhely összes oldalán, és továbbléphet a következő és utolsó lépésre.

ötödik lépés: használja a WordPress beépített címkéit és funkcióit

miután sikeresen létrehozta a WordPress témáját, most meg kell győződnie arról, hogy képes-e szerkeszteni webhelyét az adminisztrációs panelen belül, ahelyett, hogy minden alkalommal módosítania kellene a témafájlt, amikor valamit meg akar változtatni. Valószínűleg a legnépszerűbb WordPress funkciók az összes tartalom szerkeszthetővé tételéhez az admin panelen keresztül az add_meta_box funkció hozzáadásával. Egyszerűen állítson be meta dobozokat az egyes oldalak tartalmához,és jó lesz!

webhelyének alapvető funkcióinak létrehozása nagyon egyszerű a WordPress használatával. Például az információk, például a linkek megjelenítése a webhelyein könnyen elvégezhető a WordPress funkciók segítségével. Egyszerűen ellenőrizze a WordPress funkcióhivatkozási oldalát az összes elérhető funkció megtekintéséhez.

Hasonlóképpen, a WordPress sabloncímkéket is kínál. Ezek lényegében maguk a funkciók, azzal a különbséggel, hogy kifejezetten olyan témákhoz készültek, amelyek hatékonyabbá teszik őket.

WordPress menu

amikor bejelentkezik a webhely adminisztrációs paneljére, valószínűleg meg szeretné változtatni a menük és a megjelenés menüpontjait, hogy ne kelljen szerkesztenie az adminisztrációs panelen. Ez meglehetősen egyszerű annak köszönhetően, hogy WordPress-t használ, mindössze annyit kell tennie, hogy a sablonfájl menülistáját egy sor PHP-vel helyettesíti, majd egyszerűen elkezdheti hozzáadni a menüelemeket.

előfordulhatnak olyan helyzetek, amikor egy belső oldalnak más a fejléc vagy a lábléc. Ha hozzá szeretné adni ezt a funkciót a webhelyéhez, csak feltételes címkéket kell hozzáadnia. Ezek lehetővé teszik különböző kódok alkalmazását a kiválasztott oldalakhoz vagy bejegyzésekhez.

miután a WordPress webhelye működik és fut a fejlesztői szerveren, csak annyit kell tennie, hogy megkapja az élő szerveren. Itt van egy cikk, ahol nagyon részletesen elmagyarázzák, hogyan mozgatja a WordPress webhelyet lépésről lépésre. Egyszerűen kövesse a megadott hat lépést,és a webhelyét egy élő szerveren futtathatja.