Hogyan készül egy WordPress sablon? Megmutatom!

Amikor eldöntöd, hogy szeretnél egy honlapot, és úgy gondolod egyedül is létre tudod hozni, nem tévedsz nagyot! 😀 ÁMDE!!

A WordPress tartalomkezelő rendszerben több mint 1600 féle ingyenes sablonból választhatod ki a neked megfelelőt. Lelkesen feltelepíted és elkezded tartalommal feltölteni … és ekkor alábbhagyhat az a bizonyos lelkesedés. Ugyanis a saját tartalmaiddal (képekkel, szövegekkel) már nem néz ki olyan jól az a WordPress sablon. Ilyenkor megpróbálod a felkínált lehetőségekkel kicsit átformálni. Színeket, betűtípusokat változtatsz, menü helyét máshova teszed … stb. Igenám! De a sablonokat időközönként frissíteni kell. Maga a fejlesztő frissíti, és ahhoz hogy nálad is megfelelően működjön, neked is frissítened kell. És ekkor elvesznek a saját beállításaid! Kezdheted elölről az egészet.

Ilyenkor 4 verzió lehetséges:

• 1. elfogadod a kiválasztott sablont úgy, ahogy van, nem változtatsz semmit – nem lesz egyedi a weboldalad, mert esetleg más is használja ugyanazt a sablont
• 2. a kiválasztott sablont újra és újra módosítod frissítéskor – valljuk be, ez eléggé lelombozó
• 3. child sablont (hogymit?) készítesz a fő sablonhoz, és abban mented el a módosításaidat – ehhez már szükség van egy kis kódolós tudásra
• 4. keresel egy webdesignert, és készíttetsz vele egy saját sablont – the best! 🙂

Most a 4. verziót mutatom be neked, de ígérem, a child sablonról is beszélek majd a bejegyzés végén.

Hogyan készül a sablon?

Design kialakítása

Egy korábbi bejegyzésemben már bemutattam neked, hogyan dolgozik egy webdesigner. Általában először arculatot, logót készítünk, Utána drótvázakat tervezünk, amelyek a weboldal funkcióinak kialakításában segítenek. Végül a design rész jön, ahol már képeket, színeket használunk, kialakítjuk a weboldal végső kinézetét. Ennél a munkafolyamatnál készíthetünk kattintható prototípust. 🙂

Amikor mindezzel elkészültünk, jöhet a honlap programozható verziójának létrehozása, a WordPress sablon elkészítése. Ehhez szükségünk van egy FTP-kliensre, amin keresztül csatlakozni tudunk a tárhelyünkhöz. Nagy mélységekbe nem megyek bele, elég, ha a felszínt ismered. 😀

Sablonfájlok létrehozása

Egy weboldal több aloldalból áll, ezen aloldalak megjelenése eltérő lehet a tartalomtól függően: oldal, bejegyzés, cimkék, webshop termék. Ezek külön fájlok. Sőt a fejléc és lábléc tartalmára is külön fájlok vannak. A teljesség igénye nélkül az alábbi WordPress sablon fájlokat használja: header.php, footer.php, index.php, sidebar.php, functions.php, page.php, archive.php, single.php, 404.php, search.php.

PHP? Gesundheit (egészségedre) … mondanád. A PHP egy szerver oldali szkriptnyelv, ami azt jelenti, hogy nem a felhasználó, vagy az ügyfél gépén fut, hanem a web kiszolgálón, azaz a szerveren. A PHP hivatalos jelentése „Hypertext Preprocessor”, ami szabadfordításban annyit jelent, hogy HTML-t csinál. Feladata, hogy a böngésző számára értelmezhető, HTML kimenetet hozzon létre. Egy weboldal PHP forrását nem tudjuk a böngésző segítségével megnézni, mert az már egy lefordított változat, ott mindig csak a PHP által előállított HTML kimenet látható.

Ezekben a PHP fájlokban kódok, parancsok segítségével alakítjuk ki a weboldal tartalmát. Azt azonban, hogy milyen színek legyenek az oldalon, milyen betűtípus, milyen legyen az elrendezés, azt egy CSS fájlban külön rögzítjük.

A CSS az angol „cascading style sheets” kifejezés rövidítése, ami magyarul „egymásba ágyazott stíluslapokat” jelent. A hangsúly a „stíluson” van – míg a HTML a weblap szerkezetét határozza meg (főcímek, bekezdések, stb.), és lehetővé teszi, hogy különböző elemeket (képek, videók) ágyazz webes dokumentumodba, addig a CSS a weblap vizuális stílusáért felel – az oldal elrendezéséért, a színekért, a betűkészletekért, azok méretéért, és így tovább. Ezzel a fájllal tudjuk megvalósítani az oldalunkon történő animációt, árnyékolást és egyéb egyedi trükköket.

Ezeket a css és php fájlokat az FTP-kliensen keresztül töltjük fel az oldalra.

Child sablon

A child sablon esetében általában csak egy új css stílus fájlt hozunk létre, amiben rögzítjük a módosításokat: más szín, más betűtípus, más elrendezés … stb. De ehhez is szükség van FTP-kliensre.

VISZONT! Miután ezek elkészültek, a WordPress admin felületén keresztül is elérjük: Megjelenés menü – Sablonszerkesztő menüpont. Itt fel van sorolva az összes fájl, ami a honlap működéséért, stílusáért felelős. De hozzáértés híján nem ajánlatos ezeket piszkálni!! 🙂

Na, mire vársz még? 😉

Jobban nincsen értelme belemenni a weboldal készítés ezen részébe, hiszen egy laikusnak már ez is sok(k) volt 😀 De legalább röviden beleláthattál, hogy amikor kifizeted a webdesignernek a „sok” pénzt, akkor valójában miért is fizetsz. Hát a TUDÁSÁÉRT!

Azért, hogy egy olyan honlapod legyen, ami a te és célközönséged igényeire van szabva. Amiben nincsenek felesleges kódrészek, amelyek esetleg lassíthatják az oldalad betöltődési sebességét. Ami csak és kizárólag azokat a funkciókat tartalmazza, amelyek neked szükségesek.

Ha segítségre van szükséged, keress nyugodtan, megoldjuk!