WordPress belülről

Egy alap WordPress sablon elkészítése 2.rész – a header.php fájl

Folytassuk a munkát és lépjünk tovább egyet az úton, amelynek végén egy saját alap WordPress sablont fogunk látni. Az előző részben a style.css fájlal ismerkedtünk meg. A mai napon a header.php fájl lesz a porondon.


A WordPress-nek létezik egy sablon hierarchiája, amely megmondja tulajdonképpen, hogy melyik fájlban lévő adatok mit jelenítenek meg és melyik az elsődleges, másodlagos, harmadlagos. Valamint léteznek különböző funkciók, amelyekkel bizonyos fájlokat meg tudunk hívni. Ahogyan azt neve is mutatja a header.php fájlunk fogja tartalmazni weboldalunk fejlécét. Tehát a weboldal tetejét, amely minden betöltődéskor ugyanaz. Ezen adatok például a főmenü, logo stb. Sablonunk header.php fájlja az alábbit tartalmazza:

<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="utf-8" />
<title><?php if (is_home () ) {
    bloginfo('name');
} elseif ( is_category() ) {
    single_cat_title(); echo ' - ' ; bloginfo('name');
} elseif (is_single() ) {
    single_post_title();
} elseif (is_page() ) {
    bloginfo('name'); echo ': '; single_post_title();
} else {
    wp_title('',true);
} ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body>
 <header id="site_header">
  <h1>Efrud minimal - weboldalunk fejléce</h1>
 </header>

A title tagok között

A kódban láthatjuk, hogy egy szabványos HTML5 weboldal fejlécét láthatjuk. Nézzük a WordPress specifikus kódokat. Első kód, amelyet én minden weboldal esetén alkalmazok a title tagek között található. A kód segítségével akkor is keresőbarát title tagot kapunk, ha nem használunk erre semmilyen bővítményt. Itt több feltétel található meg. Meghatároztam, hogy abban az esetben, ha a kezdőlapon vagyunk mi legyen a title, kategóriáknál stb. A különböző feltételek jelentésébe most nem mennék bele, hiszen egy alap sablonról beszélünk, de szerettem volna tisztázni mire jó title tagok között látható kód.

Stílusfájlunk meghívása

Utána azt láthatjuk, hogy egy CSS fájl kerül meghívásra, de fájlnevet nem látunk sehol. Azért nem látunk fájlnevet, mert egy funkciót használunk, az előző részben említett style.css fájl meghívására. A funkció az alábbi:

<?php bloginfo('stylesheet_url'); ?>

A bloginfo funkciót használjuk a stylesheet_url paraméterrel. Ennek a funkciónak a HTML kimenete a style.css fájlunk relative URL-je lesz. A bloginfo funkciót nagyon sokszor alkalmazzuk a WordPress sablonokban és bővítményekben egyaránt. Szerencsére sok paraméterünk is van, amelyekről részletesen a codexben olvashattok.

A wp_head

A következő WordPress specifikus kódunk a wp_head lesz. Elsőre ugyan sokan nem tulajdonítanának neki nagy jelentőséget, azonban ezen kódnak elhagyása nagy bosszúságot is tud okozni.

<?php wp_head(); ?>

A wp_head függvényünknek nincsenek paraméterei mégis minden WordPress sablonnak mondhatni tartalmaznia kell. A wp_head megjeleníti a különböző RSS url-eket, de rel=cannonical attribútumot is ő helyezi el a head szakaszban. Ezen kívül azon bővítmények, amelyeknek tegyük fel valamilyen JavaScript szükséges a működésükhöz a wp_head-be teszik be ezen JavaScript-eket. Tehát, ha ez akód nincs benne, akkor képgaléria bővítményünk se működne rendesen, vagy éppen egy lightbox plugin nem működne.

Alap WordPress sablonunk header.php fájljának bemutatásának végéhez érkeztünk. Az alábbi olvasnivalókat ajánlom nektek tehát a fájlal kapcsolatban:

A következő részben az index.php valamint a footer.php lesz terítéken. Akkor már egy működő alap WordPress sablonotok lesz.