Kimi zaman yazılarımızı çeşitli videolar veya resimlerle süsleriz. Ama bazı günlükler vardır ki her yazısınının belli bir yerinde (örneğin sol üst köşede) mutlaka bir resim bulunur. İşte böyle zamanlarda yazınızı yazarken resmi yazının içinde kullanmak yerine özel alan kullanmak daha mantıklı bir çözüm olabilir. Gelin önce birkaç örnek inceleyelim ve ardından bunu nasıl yapabileceğimizi ve nerelerde kullanabileceğimizi görelim.

İlk örneğimiz kısa bir süre önce tasarımını değiştiren Hasan Yalçın’dan. Tasarımcı’nın El Çantası başlıklı günlüğünde kendine özgü bir resim düzeniyle yazılarını yazımakta. Her yazısında mutlaka içerik genişliğinde ve yazının en üstünde konumlanan bir resim bulunuyor.

Yaklaşık bir ay önce günlük dünyasında 2. yılını dolduran adaşım Erhan Burhan‘ın (eburhan) da her yazısında bir resim mevcut. Tabiî bu sefer Hasan Yalçın’dan farklı olarak Erhan Burhan’ın resimleri her yazının sol üst köşesinde.

Aslında yazılarımıza resmi normal bir şekilde yani yazının içine doğrudan ekleyebiliriz fakat bazen yazı ile resmi birbirinden ayırmamız gerekir. Aynı Tasarımcı’nın El Çantası‘nda olduğu gibi 5. yazıdan sonra resimlerin görünmesini engelleyip, sadece yazının görünmesini isteyebiliriz. İşte böyle bir durum için bu yöntem biçilmiş kaftan. Temadaki kodlarımıza mantık olarak 5. yazıdan sonra resmi gösterme deriz ve sadece yazıyı görüntüleriz. Eğer resim yazının içinde olsaydı bu o kadar da kolay olmazdı.

Bu yöntemin diğer bir avantajı ise bence daha kullanışlı olması ve yazımı yazarken beni zaman kaybından kurtarması. Aksi takdirde yazı içine resmi ekleyip konumlandırmakla uğraşacaktım. Bu yöntemde ise zaten temada kod olarak resmi dilediğimiz konuma getirmiş durumdayız. Tek yapmamız gereken özel alana resmin adresini belirtmek o kadar. Artık tüm ilgimizi makaleye verebiliriz.

Bir de şu sebep var tabiî. Sitemiz bir fotoğraf günlüğü veya sinema günlüğü olabilir. Bizde sitemizin anasayfasında yazılarımızın metin kısmını değil, sadece resimlerini göstermek isteyebiliriz. Çünkü böyle günlüklerde yazıdan çok resim önemlidir: sinema afişi, fotoğraf vs. İşte böyle durumlarda da resmi yazıdan kolayca ayırabileceğimiz için yine bahsettiğim yöntemin faydasını görebiliyoruz.

Şimdi yapacağımız olayın mantığı aslında gayet basit. Bildiğimiz üzere Wordpress’te her yazının bazı özellikleri vardır; başlık, metin, kategori ve etiket gibi. Bizim yapacağımız olay yazıya yeni bir özellik kazandırmak; resim özelliği. Bu özellik sayesinde her yazıya bir resim belirleyebileceğiz. Elbette ki bunu belirttik diye yazılarda resim bulunmak zorunda değil, etiket özelliği gibi bu da isteğe bağlı.

İcraata geçmeden önce burada öğreneceğimiz şeyin Wordpress’in özel alanlarını (custom fields) resimli yazılar için kullanmak olduğunu bilmenizi istiyorum. Aslında daha önce Hakkı Ceylan bu konuyu oldukça güzel anlatmıştı ama ben eklenti gerektirmeden temaya yazılması gereken kodları da içeren farklı bir anlatımda bulunmak istiyorum. Umarım faydalı olur.

İlk olarak yönetim panelinden yeni yazı yazma alanına giriyoruz ve yazımızı yazarken yaptığımız normal işlemlerden sonra (başlık ve metin yazımı, kategori seçimi vs.) sayfayı aşağı kaydırıp Özel Alanlar kısmına geliyoruz. Burada Anahtar kutusuna yazi_resmi, Değer kutusuna da yazıda kullanacağımız resmin tam adresini yazıyoruz ve Özel Alan Ekle‘ye tıklıyoruz.

Ayrıca şunu belirtmek istiyorum. Bu işlemi bir yazı için yapıp yayımla dedikten sonra kullanmış olduğumuz Anahtar (yazi_resmi) kaydedilir ve ikinci bir defa bir yazıya resim eklemek istediğinizde Anahtar değerini girmeyiz ve bunun yerine yerine önceki yaratılanlardan seçeriz, aynı aşağıdaki resimde göstermeye çalıştığım gibi.

Özel alan ekleme işlemimiz bittikten sonra yazımızı normal bir şekilde Yayımlıyoruz.

Not: Yazılarımızda kullanacağımız resimlerin adresleri konusunda ne yapmalıyım diyosanız yazı yazarken Görsel Ekle düğmesinden resminizi yükleyip resmin tam adresini alabilirsiniz.

Temamızda resmi göstermek için yazı döngüsünün içinde yazının başlığının hemen altına şu kodları yazıyoruz.

<?php
$values = get_post_custom_values("yazi_resmi");
if ($values[0]!='') { ?>
	<img src="<?php echo $values[0]; ?>" alt="<?php the_title(); ?>" />
<?php } ?>

Kodu biraz daha geniş göstermek istiyorum. Böylece verdiğim kodları tam olarak nereye yazmanız gerektiğini daha iyi görebilirsiniz.

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

	<div class="post">
		<h1><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>

		<?php
		$values = get_post_custom_values("yazi_resmi");
		if ($values[0]!='') { ?>
			<img src="<?php echo $values[0]; ?>" alt="<?php the_title(); ?>" />
		<?php } ?>

		<?php the_content(''); ?>
	</div>

<?php endwhile; ?>
<?php endif; ?>

Bu koda göre eğer yazımızda yazı_resmi özelliğinde bir resim bulunuyorsa, temada bu resim görüntülenecek, bulunmuyorsa görüntülenmeyecektir. Tabiî bu söylediğim metod yukarıdaki örneklerden Hasan Yalçın‘ın tasarımına uygun bir değildir. Eğer yazılarımıza resimleri Erhan Burhan gibi yerleştirmek istiyorsak kodumuzu şu şekilde değiştirmemiz gerekir.

<?php
$values = get_post_custom_values("yazi_resmi");
if ( $values[0]!='') { ?>
	<img style="float:left;margin-right:5px;" src="<?php echo $values[0]; ?>" alt="<?php the_title(); ?>" />
<?php } ?>

Artık her yazımızın bir de resim özelliği var ve yazılara eklediğimiz bu resimleri dilediğimizi gibi konumlandırabiliriz.

Bu işlemi yapıp sitesindeki yazılarında resim kullanan arkadaşlar yorumlarında sitelerini belirtirlerse girip bakmaktan zevk duyarım.

Hoşçakalın, sağlıcakla kalın…