ha ezt a cikket olvassa, akkor valószínű, hogy van egy nagyon szép weboldala, amelyet valószínűleg az Adobe Photoshop alkalmazásban készített, és PSD, JPG, PDF, AI vagy PNG formátumban mentett el. Most ezt a képfájlt WordPress témává szeretné konvertálni, hogy alkalmazhassa az újonnan létrehozott webhelyén vagy blogján. Lehet, hogy szeretne egy PSD-t a WordPress átalakítóhoz —de mi van, ha ezt a konverziót egyedül is megteheti, és ez is ingyenes!
sokan, akik jók a grafikai tervezésben, eljutnak arra a pontra, hogy a PSD-t WordPress témává konvertálják. És úgy érzik, beragadtak! De ez nem az ő hibájuk. A weboldal létrehozása nem csak egy nagyszerű design készítésének képességét igényli, hanem bizonyos programozási készségeket is igényel. Szakértőnek kell lennie legalább HTML, CSS, JavaScript, jQuery és PHP programozásban, hogy a PSD fájlját weboldalgá alakítsa. A baj az, hogy a legtöbb ember vagy jó tervező, vagy jó programozó!
azonban nem aggódsz. Nem olyan nehéz átalakítani a PSD-t WordPress témává. Csak annyit kell tudnia, hogy a megfelelő lépéseket kell tennie. Ebben a cikkben ugyanezt fogom mondani neked! Kezdjük tanulni.
azok, akik nem tudják, a PSD a Photoshop dokumentumot jelenti. Ez egy fájlformátum,amelyben az Adobe Photoshop működőképes fájlokat ment. Megnyithatja a PSD fájlokat a Photoshopban, és további változtatásokat hajthat végre a tervezésben, ahogy szeretné. A PSD fájlokat ezért néha a nyitott fájlok (utalva arra, hogy ezek a fájlok szerkeszthetők).
ha meg szeretné tervezni álmai webhelyét, akkor valószínűleg a Photoshopot választja a megvalósításhoz. A Photoshop kétségtelenül a legjobb és legnépszerűbb grafikai eszköz.
a WordPress lényegében egy ingyenes blogolási platform. Ez a nyílt forráskódú program lehetővé tette még a nem programozók számára is, hogy könnyen létrehozhassák webhelyeiket vagy blogjaikat. A WordPress robusztus és skálázható, PHP nyelven íródott.
a WordPress alapú weboldal tervezését témának (és néha sablonnak) nevezik.
1.lépés: szeletelje fel a PSD fájlt
miután elkészült a PSD fájl, először darabokra kell bontania. Miért? Nos, mert az egyetlen kép nagy méretű lesz, és több időt vesz igénybe a betöltés. Ezenkívül különböző viselkedéseket kell társítania a kép különböző szegmenseihez. Szóval fel kell szeletelnie.
de nem az, hogy csak véletlenszerűen vághatja le a képet. Logikus módon kell darabokat készíteni. Például a fejléc egy darabból válhat, a láblécnek külön kell lennie… akkor kivághatja a hátteret, a gombokat és a menüket stb.
az Adobe Photoshop lehetővé teszi a rétegek használatát. Ez a beépített lehetőség, hogy szelet a PSD és mentse a kapott szegmensek külön képfájlokat. Dönthet úgy, hogy ezeket a képeket JPG vagy PNG formátumban menti. Ha átláthatóságra van szüksége ahhoz, hogy ezen szegmensek bármelyikében működjön, akkor PNG-ként kell mentenie, mert a JPG nem támogatja az átláthatóságot.
a Kép vágása közben pontosnak kell lennie. Egyetlen pixel hibája két darabot alkalmatlanná tehet a viszonválaszra.
miközben egy PSD-t szeletelt azzal a céllal, hogy WordPress témává alakítsa, meg kell értenie, hogy most a CSS elég erős, és számos elemet képes létrehozni csak néhány sornyi kóddal. Például létrehozhat egyszínű háttereket, színátmenet háttereket, különböző stílusú gombokat, vonalakat, nyilakat és speciális szimbólumokat csak a CSS segítségével. Tehát nem kell ezeket a dolgokat képként mentenie. Kevesebb a képek száma, gyorsabban töltődik be webhelye.
következő YouTube videó megmutatja, hogy pontosan hogyan szelet-up a PSD fájlt, és mentse el a különböző képek:
Rendben, most, hogy a különböző képi elemei a honlap design, itt az ideje, hogy lépni a következő szakaszba.
2. lépés: Hozzon létre HTML és CSS fájlokat
most kezdődik az alapvető kódolási része a folyamat átalakítására PSD egy honlap. Alapvetően létre kell hoznia egy weboldalt, és össze kell állítania az összes szeletelt képet úgy, hogy pontosan úgy nézzen ki, mint a PSD.
először hozzon létre egy HTML fájlt. Akkor nevezd meg semmit, de mint egy konvenció nevezzük index.htm. Ebben a fájlban HTML vagy XHTML kódot kell írni a PSD különböző képdarabjainak megjelenítéséhez. Az alapítvány elrendezésének létrehozásához DIV elemeket használhat. A DIV elemek nagyon sokoldalúak. A DIV elemeket egymás mellé, átfedésben, egymásra helyezheti. A DIV elemet balra és jobbra igazíthatja, és nagyon pontosan elhelyezheti őket a weboldal bizonyos koordinátáin.
ezekben a DIV elemekben meghívhatja a mentett képeket, és megjelenítheti őket a DIV háttereként.
miután befejezte a weboldal alapvető elrendezését, stilizálnia kell, hogy pontosan olyan legyen, mint a PSD. A stílushoz a Cascading Style Sheet (CSS) szabályokat kell használnia. Ezekkel a szabályokkal különféle betűstílusokat, méreteket, színeket, szövegárnyékokat, képek szürkeárnyalatosítását, szegélyeket stb.
a CSS stílusszabályok írásához létre kell hoznia egy másik styles nevű fájlt.css, majd hívja ezt a CSS fájlt az indexbe.htm fájl. Stílusok jelen vannak a stílusokban.a css-t a HTML-fájlok különböző elemeire alkalmazzák.
OK, várj! Ha nem tudsz semmit a HTML vagy CSS kódolásról, ne aggódj! Ezek nagyon egyszerű szkriptnyelvek, és könnyen megtanulhatja őket online. Az alábbiakban néhány online források, ahol meg lehet tanulni CSS és HTML:
oktatóanyagok HTML
- W3Schools HTML Tutorial
- TutorialsPoint HTML Tutorial
- HTML.net
- HTML kutya
oktatóanyagok CSS
- CSS bemutató
- W3Schools CSS bemutató
- TutsPlus
- CSS alapjai
3.lépés: Break HTML fájlt WordPress téma fájlok
a PSD WordPress témává történő átalakításának ezen a pontján egy HTML fájl (Index.htm) és egy CSS fájl (stílusok.css). A harmadik lépésben meg kell szakítania a HTML fájlt a WordPress témaszerkezete szerint. Zavartnak érzi magát? Nos, a WordPress rendelkezik egy előre meghatározott fájlkészlettel, amelyeket össze kell hívni egy weboldal előállításához. Például, miközben egy bejegyzést jelenít meg, a WordPress többek között a fejlécfájl, a post fájl, az oldalsáv fájl és a lábléc fájl tartalmát kéri. De az összes kód csak egy fájlban van-index.htm. Tehát el kell terjesztenie az index kódját.htm a különböző WP fájlokat. Ez elsősorban vágott paszta munka! Itt található a WordPress néhány fontos témafájljának listája:
- archívum.php
- kategória.php
- megjegyzések.php
- lábléc.php
- fejléc.php
- index.php
- oldal.php
- keresés.php
- oldalsáv.php
- egyetlen.php
- stílus.css
- 404.php
egy alap WordPress téma létrehozásához legalább fejlécet szeretne létrehozni.php, lábléc.php, oldalsáv.php, egyetlen.php és index.php.
csak hozza létre ezeket a PHP fájlokat bármilyen szöveges jegyzettömb szerkesztőben, és másolja a megfelelő kódot az indexből.htm ezekbe a fájlokba. A fejléc részét létrehozó kód a fejlécbe kerül.php, a lábléc kódja a láblécbe kerül.php … és így tovább.
ha nem vagy jártas a PHP-ben, nehézségekbe ütközhet ezeknek a fájloknak a megfelelő létrehozása. Van néhány igazán jó és ingyenes online oktatóanyag a PHP tanulásához. W3Schools és PHP.net könnyen érthető PHP segítséget nyújt. Akkor menj át ezeket a tutorials, hogy megértsék a PHP.
a következő YouTube videó segít megérteni, hogyan kell beállítani a “meztelen WordPress téma” (ez alapvetően azt jelenti —egy üres wodpress téma.
4.lépés: WordPress funkciók és címkék hozzáadása
itt az ideje, hogy az egyszerű PHP fájlokat WordPress témafájlokká konvertálja. Ehhez hozzá kell adnia a WordPress címkéket a fájljaihoz. De megkérdezheted, hogy mi is pontosan a WordPress címkék?
mint mondtam, a WordPress kiváló és robusztus platform. Számos beépített funkciót biztosít Önnek, amelyeket könnyen felhívhat és elvégezhet.
Vegyünk egy példát, hogy jobban megértsük. A honlapon (index.php) lehet, hogy meg szeretné jeleníteni a legfrissebb bejegyzések listáját. Ez a lista automatikusan megváltozik, amikor új bejegyzést készít. Írhatsz saját PHP függvényeket, hogy lekérd a post adatokat az adatbázisból, és mutasd meg a kezdőlapon. De a WordPress készítői megkönnyítették az életét! Nem kell saját részletes funkciókat írni. Csak használja a WordPress wp_get_recent_posts ($args, $output) funkcióját, és nézze meg a legutóbbi bejegyzések listáját!
a WordPress átfogó online dokumentációval rendelkezik, amely információt nyújt a WordPress összes funkciójáról és egyéb lehetőségeiről. A dokumentáció rengeteg példát is tartalmaz, ezért nagyon könnyen érthető. A dokumentáció eléréséhez kövesse az alábbi linkeket:
- WordPress sablon címkék
- WordPress Functions Reference
miután ezek a témafájlok készen állnak, tegye őket egy mappába, amelyet meg kell nevezni ugyanaz, mint a vadonatúj téma neve. Ez a mappa más mappákat is tartalmazhat a CSS fájlok, a JavaScript fájlok és a képfájlok tárolására.
felvehet egy screenshot nevű képfájlt is.jpg vagy képernyőkép.png. Ez a fájl a téma indexképeként jelenik meg. Könnyű megtanulni, hogyan kell képernyőképet készíteni.
fájlok listája egy tipikus WordPress téma nézhet ki, mint az alábbi:
fel kell töltenie a téma mappát a WordPress telepítésének /wp-content/themes mappájába. Például, ha a témát Minerva —nak hívja-akkor a témafájloknak a /wp-content/themes/minerva
a témamappa feltöltése után lépjen a WordPress irányítópultjára, majd lépjen a megjelenés > témák elemre. Itt örömmel látja, hogy saját tervezésű új témája szerepel az aktiválásra rendelkezésre álló témák között. Csak válassza ki a témát, és aktiválja azt.
nézze meg a következő videót a további folyamat megtekintéséhez:
5.lépés: Adjon hozzá további funkciókat, például keresési és egyéni funkciókat
a WordPress témája már elkészült, fut. A PSD-től a WordPress témáig tartó út befejeződött. De lehet, hogy még több funkciót szeretne hozzáadni a témához.
például létrehozhat egy keresést.php fájl a kóddal, amely a webhely keresési eredményeit mutatja.
egyedi PHP függvényeket is létrehozhat, és felhasználhatja őket más PHP fájlokban. Létre kell hoznia egy funkciót.php fájlt, hogy az egyéni funkciók egy helyen.
a 404 (Az oldal nem található) hibák kezeléséhez létrehozhat egy 404-et.php fájl. A WordPress megmutatja a fájl tartalmát, Amikor valaki megpróbál hozzáférni az Ön webhelyének nem létező URL-jéhez.
esetleg Javascriptfunkciókat is szeretne hozzáadni. A JavaScript a legszélesebb körben használt kliens oldali szkriptnyelv. Írhat JavaScript funkciókat .JS fájlokat, és hívja ezeket a funkciókat a PHP fájlokat. Például az űrlap érvényesítése általában a JavaScript segítségével történik. Ha egy felhasználó megpróbál keresni valamit az Ön webhelyén anélkül, hogy kulcsszavakat írna be a keresőmezőbe, akkor a JavaScript mondja meg a felhasználónak, hogy meg kell adnia a keresési feltételeket.
ezeket a lépéseket követve könnyedén létrehozhat egy saját WordPress témát. Ezek a lépések konvertálják a PSD fájlt egy funkcionális WordPress témába. Néhány ember azonban ingyenes PSD-t keres a WordPress konverterekhez. Sok olyan vállalat létezik, akik azt állítják, hogy a PSD fájlt pontos témává alakítják. Ha nem akarja belemenni a programozás megtanulásának nehézségeibe, egyszerűen odaadhatja PSD-jét ezeknek a vállalatoknak. De természetesen díjat számítanak fel ezért!
találkoztam a DivineProjects Elemente szoftverével. Ingyenesen letöltheti ezt a szoftvert, és átalakítja a PSD-t egy használatra kész, teljesen működőképes WordPress témává. Ez a szoftver Photoshop pluginként működik.
remélem, hogy ez a cikk hasznos volt az Ön számára. Ha bármilyen kérdése van ebben a témában, kérjük, kérdezze meg. Minden tőlem telhetőt megteszek, hogy segítsek. Köszönjük, hogy a TechWelkin.