WordPress kívülről

Bélyegkép bejegyzésekhez egyedi mezővel

Ha valaki angolul használja a wordpresst, annak egyszerűbb, ha azt mondom custom fileds illetve bélyegkép, helyett Thumbnail. De miről van is szó valójában?
Bejegyzéseink színesítéséhez kis bélyegképeket készíthetünk az egyedi mezők segítségével. Miért? Csak mert esztétikus és izgalmasabbá teheti a weboldalunkat. Egy találó kép felhívja a böngésző figyelmét és lehet tovább olvassa bejegyzésünk. Íme egy példa, hogy mit is fogunk csinálni most:
screenshot-1
Vágjunk is bele a munkába. Szerkeszthetjük csak az index.php-ét vagy éppen a single.php-ét, ez attól függ hol is szeretnénk megjeleníteni képünket. Jelen esetben én az index.php-ét szerkesztem, de a módszer ugyanaz a többi esetében is. Mivel loop mindkettőben.(általában) Első lépésként a loop után, ami így néz ki:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

Helyezzük el az alábbi kódot:

<?php
// Thumbnail meghatarozasa
$thumb = get_post_meta($post->ID, 'Thumbnail', $single = true);
// Thumbnail stilusa
$thumb_class = get_post_meta($post->ID, 'Thumbnail Class', $single = true);
// Thumbnail alt szoveg
$thumb_alt = get_post_meta($post->ID, 'Thumbnail Alt', $single = true);
?>

A kommentekhez írtam mi mit jelent nagyvonalakban,de nem árt tisztában lenni mi mire van ezért részletesebben is leírom. Az első kóddal megmondjuk tulajdonképpen a wordpress-nek, hogy lesz nekünk egy egyedi mezőnk aminek a Thumbnail nevet fogjuk adni. Ha ezt nem adnánk meg akkor hiába irkálnák, úgyse jelenítene meg semmit.
A második kódunkban, amelyet Thumbnail Class néven adhatunk meg (nem kötelező) egyedi mezőként a szerepe az, hogy egyéni stílust adjunk egyes képeknek. Például más keretet.
A harmadik kódunk pedig azért kell és illik használni, hogy valid legyen oldalunk. Ezzel nem más mint egy alt tagot adunk a képnek. Thumbnail Alt lesz az egyedi mező neve, amikor használni szeretnénk. Ha nem adjuk meg ezt az egyedi mezőt, akkor a kép alt szövege az aktuális bejegyzés címe lesz.
Miután megvagyunk a kód beillesztésével a

<?php the_content();  ?>

vagy

<?php the_excerpt();  ?>

Elé helyezzük el ezt a kódot.

<?php // ha van thumbnail
if($thumb !== '') { ?>
	<p>
	<img src="<?php echo $thumb; ?>"
	class="<?php if($thumb_class !== '') { echo $thumb_class; } else { echo "left"; } ?>"
	alt="<?php if($thumb_alt !== '') { echo $thumb_alt; } else { echo the_title(); } ?>"
	/>
	</p>
<?php }

// ha nincs thumbnail
else { echo ''; } ?>

Ez egy egyszerű feltétel tulajdonképpen amivel megjelenítjük vagy éppen nem jelenítjük meg a bélyegképünk.
Már csak egyetlen kis lépés maradt hátra, méghozzá az, hogy adunk egy kis stílust a képünknek. Style.css fájlunkba beillesztjük ezt a kódot:

.thumbnail-class {
	float: left;
	width: 100px;
	height: 100px;
	margin: 0 15px 0 0;
	}
.left {
	float: left;
	margin: 0 15px 0 0;
	}

Ezután töltsünk fel egy képet bejegyzés írásakor másoljuk ki az url-nek ezen részét: wp-content/uploads/kepneve.gif és használjuk ezt értékként A Thumbnail nevű egyedi mezőnknél. Kalandra fel!