WordPress belülről

Egy alap WordPress sablon elkészítése 1. Rész – A style.css fájl

Eljött az idő, hogy több éves tipp írás után, ne csak azt mutassam meg, hogy hogyan kell átalakítani, kiegészíteni egy WordPress sablont, hanem, hogy 0-ról, hogyan tudunk készíteni egyet. Mivel ez egy hosszabb lélegzetvételű cikk így több részben fogjátok fellelni az oldalon. Így mondhatni, nem lesz olyan száraz és lesz idő megemészteni. Egy alap WordPress sablont fogunk tehát készíteni, amely nem fog rendelkezni különösebb design elemekkel. Ezen cikksorozattal csak szemléltetni szeretném, hogyan készül el egy WordPress sablon. Aki megpróbálkozik vele és sikerélménye lesz, minden bizonnyal tovább tovább szeretne majd lépni egy szintet. Azt leszögezném, hogy HTML tudásra mindenképpen szükségünk lesz. Fogjunk is bele első körben egy rövid sablon struktúrát fogok felvázolni, hogy lássátok, hogy épül majd fel alap, saját készítésű WordPress sablonunk.

Sablon felépítés

Ahhoz hogy egy teljesen alap sablont hozzunk létre a WordPress rendszernek, kettő darab fájlra van szüksége:

  • index.php
  • style.css

Minden WordPress sablon a wp-content/themes mappában található ide fogjuk a sajátunkat is létrehozni melynek a neve efrud-minimal lesz. A mi minimal sablonunkat már több részre fogjuk bontani, hogy megismerkedjetek a fájlokkal. Így ezek alapján a mi sablonunk struktúrája az alábbi lesz:

  • style.css
  • header.php
  • index.php
  • sidebar.php

Ahhoz, hogy szemléltessem melyik fájl tartalma tulajdonképpen mit jelenít meg, legegyszerűbb, ha egy képet mutatok:

Egy fájl ugyebár nem található meg a képen, ez pedig nem más, mint style.css. Azért, mert mindegyik stílusát ez fogja adni. Sorozatunk első részében ezzel a fájllal fogunk megismerkedni.

A style.css fájl bemutatása

A neve szinte mindent elmond róla, de azért leírom. Ez weboldalunk CSS fájlja, amely tartalmazni fogja azon CSS utasításokat, amelyek meghatározzák weboldalunk külsejét. WordPress esetében is ugyanúgy járunk el, mint más CSS fájlnál, azonban WordPress-nél a fájl elejében különböző kommenteket helyezünk el, amellyel megadjuk a rendszernek, hogy milyen sablont használunk éppen. Nézzük is a példát, hogy egyértelmű legyen.

/*
Theme Name: Efrud minimal
Theme URI: http://efrud.hu/
Description: Ez egy alap WordPress sablon.
Author: Efrud.hu
Author URI: http://efrud.hu/
Version: 1.0
Tags: alap, minimal, fehér, egyszerű

License:
License URI:

Egyéb komment.
*/

Ezt a komment sorozatot, mindig a style.css fájl legelejére kell tennünk. Minden adat amit ide írunk, a Megjelenés/Sablonok menüpontban lesz látható sablonunknál. Nézzünk sorban mi mit jelent:

  • Theme Name – Sablonunk neve
  • Theme URI – Sablonunk URL-je, ahol esetleg fellelhető, letölthető pontosan a sablon.
  • Description – Sablonunk leírása. Ez tartalmazza, hogy milyen sablon ez. Például: Efrud.hu sablonja.
  • Author – A szerző neve, aki készítette a sablont.
  • Author URI – A szerző weboldalának elérhetősége.
  • Version – A sablon verziószáma.
  • Tags – A sablont meghatározó stílusjegy címkék, például: alap, minimal, fehér, egyszerű
  • License – Milyen licenc alatt van kiadva a sablon.
  • License URI – Ez a licenc, hol található meg a weben.

Jogosan merül fel a kérdés, hogy ilyen sok adatra, miért van szükség, valamint, hogy mi ebből a kötelező adat?
Azért van szükség ennyi adatra, mert ha commercial sablont adunk ki, vagy olyat amelyet többen is használnak, lehetőséget kell adni arra, hogy kövessék a sablon fejlődését, valamint reklám értékként is tekinthetünk rá.
Az adatok közül, egyik sem kötelező adat. Ha nem szeretnénk semmit megadni, mert saját készítésű a sablon és úgy érezzük feleslegesek az adatok, akkor nem adjuk meg. Azonban én javasolni szoktam, hogy Legalább a sablon címét és a szerzőt adjuk meg még akkor is, ha saját felhasználásra van a sablon, hogy a Megjelenés/Sablonok menüpontban, esztétikusan jelenjen meg a sablon. Ha nem adunk meg semmit, akkor is érzékeli a rendszer, hogy ott egy sablon, de szerzőként Anonymust fogja feltüntetni.

Plusz tipp: Sablon előkép

Amikor feltelepítünk egy sablon, annak a Megjelenések/Sablonok menüpontban van egy előképe. Ha mi is szeretnénk ilyen előképet a sablonhoz, akkor készítsük el képünket, amit meg szeretnénk jeleníteni 300x225px-es formátumba és mentsük screenshot.png néven készülő sablonunk könyvtárába. Fontos, hogy fájlunk neve screenshot legyen és PNG kiterjesztésű!

Következő részben a header.php fájllal fogunk megismerkedni és egy lépéssel közelebb kerülni első saját készítésű WordPress sablonunkhoz.