A WordPress sablonkészítés alapjai

[Ezt a cikket 5 perc elolvasni.]

A WordPress sablonkezelő rendszerének alapjait rendkívül egyszerű megérteni. Gyakorlatilag alapvető webes fejlesztési tapasztalat birtokában bárki belekezdhet a saját témájának elkészítésébe. Ez a cikk az alapoknál kezdi, később azonban részletesebben is belemerülünk majd az egyes funkciók ismertetésébe és zárásként egy működő, összetettebb, egyedi sablont is létre fogunk hozni.

Minimum követelmények

A WordPress a sablonokat a következő helyről olvassa be: “\wp-content\themes\sablon-neve”

A sablonok minimumfeltétele a következő fájlok megléte a sablon könyvtárában:

  • index.php
  • style.css

Amennyiben ezek a helyükön vannak, még ha üresek is, a sablonkezelő már érzékelni fogja a téma meglétét, sőt már be is állíthatod azt. Igaz üres fájlok esetén megjeleníteni a sablonod még semmit nem fog.

A style.css fájl tartalmazza majd a sablonunkra vonatkozó stílusleíró szabályokat, azaz itt adjuk majd meg a kinézetére vonatkozó feltételeket, az index.php pedig az egész sablon “váza”, ez hívja majd meg a további funkciókat, a fejrészt (header), lábrészt (footer) és az oldalsávot is (sidebar).

A WordPress sablon felépítése

A WordPress sablon felépítése

Sablon részletei

A sablonkezelőben (Megjelenés > Sablonok) ha egy téma fölé viszed az egeret, megjelenik a Sablon részletei opció. Ide kerülnek azok az információk, melyek a sablonról és annak fejlesztőiről szólnak.

A Sablon részletei információit a stíluslap elejébe szúrhatod be a következő formátumban:

/*
Theme Name: Téma neve
Author: SablonFejlesztő
Author URI: http://elsowordpressablonom.hu
Version: 1.0
*/

A leírást tovább bővítheted további információkkal, a licenc-t (License) illetően, adhatsz a sablonodhoz téma címkéket (Tags), vagy egyszerű megjegyzést (Description).

Tartalom megjelenítése

A WordPress weboldalunk tartalmainak sablonba illesztését az úgynevezett hurkok vagy Loop-ok segítségével oldhatjuk meg. Ez az összetett függvényhívás tárolja az adatokat, melyek az adott oldallal kapcsolatosak.

Talán ennek a megértése legnehezebb rész a WordPress sablonkészítési eljárásának. A hurok tartalmaz minden információt arról, hogy éppen melyik tartalmat kell megjeleníteni az oldalon.

Az információkat, különböző függvényhívások segítségével könnyen lekérdezhetjük. Külön függvényhívás van például a bejegyzés címének megjelenítésére is (the_title();)

Ahhoz hogy az első sablonunk megfelelően működjön, elegendő a következő kódot az index.php fájlba beilleszteni:

<?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>    
    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </h2>
    <?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?>

A fenti kód egyesével meghívja a bejegyzéseket, kilistázza a linkesített címeket, majd a címek alatt megjeleníti a bejegyzések teljes tartalmát. Tehát egy megszokott bejegyzéslistát hozunk létre a főoldalon. A the_content(); helyett használhatjuk a the_excerpt(); függvényt is, ez a teljes tartalom helyett csak a poszt kivonatát (rövidített változatát) jeleníti meg a főoldalon, a bejegyzés címére kattintva olvashatjuk majd el a tartalmat a teljes hosszúságában.

Áttekinthetőség

A sablon könnyebb kezelhetősége érdekében a WordPress meghatároz bizonyos fájlokat, melyeket az adott oldalelemek meghatározására használhatunk. Külön fájlt használhatunk például a fejrész kialakítása során, ami a sablon könyvtárában elhelyezett header.php fájl. A fájlt meg is hívhatjuk a get_header() függvényhívás segítségével.

További elemei a sablonnak csak a példák kedvéért a

  • footer.php, ami a lábléc megjelenéséért felel
  • sidebar.php amiben az oldalsávot alakíthatjuk ki
  • comments.php a megjegyzések megjelenítésére

De érdemes még megemlíteni itt a single.php fájlt is. Fontos megegyezni hogy különböző fájlokban kell formáznunk a különböző tartalomtípusokat is. A single.php a bejegyzás típusú tartalmakra van hatással a page.php pedig az oldal típusú bejegyzésekre.

Egyedi formázások

Lehetőség van a bejegyzések és az oldalak esetén is a sablon egyedi verziójának elkészítésére is. Ehhez egyszerűen az egyedileg formázni kívánt oldal ID-jára lesz szükség. Ha egy oldalt szeretnék egyedi megjelenéssel ötvözni hozzuk létre a következő fájlt: page-ID.php (például page-13.php)

Összegzés

Jelen cikk célja elsősorban egy kis kedvcsináló volt azok számára akik még nem mertek belemélyedni a WordPress sablonkészítésének rejtelmeibe. A módszer viszonylag gyorsan elsajátítható, illetve rengeteg eszközt is találhatunk a saját sablonunk elkészítésére.

A következő cikk érkezéséig érdemes tanulmányozni a WordPress sablon hierarchiájának szövevényes felépítését:

template-hierarchy

(Kattintásra nagyobb méretben nyílik meg)

 

Ha tetszik, mutasd meg másoknak is: