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!


Szerzőről
Fridrik Bélának hívnak internetes körökben Efrud becenéven vagyok ismert. 8 Éve foglalkozok honlapok fejlesztésével. Az efrud.hu szakmai tapasztalataim olvashatóak, illetve vállalkozásom fő profilját is képezi.

6 hozzászólás időpont: "Bélyegkép bejegyzésekhez egyedi mezővel"

  1. “Style.css fájlunkba beillesztjük ezt a kódot:”

    pontosan melyik részbe, a post-hoz?

  2. Sablonodnak van egy style.css fájlja. Abba kell bemásolni.

  3. Azt értem, de a .css file-on belül akárhova lehet?

  4. Igen akárhová lehet.

  5. Sajnos nekem egy ki problémám van vele. Megcsináltam a leírás alapján ezen a weblapon: 1lakas3terv.hu csak az a gond, hogy firefox-al nézve jelennek csak meg a képek, chrome, és ie nem képes kezelni őket, egyszerűen nem érzékeli, és nem jeleníti meg, viszont firefox alatt tökéletesen megy.

  6. Helló!
    Lenne egy kis gondom, megcsináltam mindent a leírásod alapján, viszont, csak firefox böngéésző alatt látszik a kép, hiába nézem chrome-al, vagy ie-vel, nem látszik. Tudsz segíteni?
    köszönettel: weart

Szólj hozzá

XHTML: Engedélyezett tagek: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>