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.
Kodu biraz daha geniş göstermek istiyorum. Böylece verdiğim kodları tam olarak nereye yazmanız gerektiğini daha iyi görebilirsiniz.
<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.
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...
Sayfalar: [3] 2 1 » Hepsini Göster
Sayfalar: [3] 2 1 » Hepsini Göster

yakuter.com © 2006-2008 Erhan Yakut. Site tasarım fallendesign.
Site içerisindeki içerikler izinsiz kopyalanamaz, alıntı yapılamaz.
27 yakuter
16 Kasım 2008, 17:06
Metin aslında şuradaki yazıyı okuyarak istediğini yapabilirsin. Hakkı Adsense kodu yerleştirmeyi anlatmış ama önemli olan işin mantığı ;)
26 Metin METE
16 Kasım 2008, 13:31
Merhaba Yakuter, Çok Güzel Bir Yazı… Porföy Sitem İçin Kullandım Süper Oldu :) Yanlız Olduda :D Tasarımımda Tablolar Kaydı :D Şimdi Belki Yazdıyla Alakası Yokta (Yeni Bir Yazı Süper Olur Herkes İçin) Yakuter, Bişi Sorcam Ben… Anasayfada, Arama Sonuçlarında yada Kategorisinde Yazılar Listelenirken İlk Yazı İçin “margin-right:25px;” Olsa, İkinci Yazı İçinde Bu Stil Kullanılmasa 3. Yazı İçin Yine Bu Stil Kullanılsa vs.vs.vs. Nasıl Yapabilirim?
Şimdiden Çok Teşekkür Ederim…
25 slm
05 Kasım 2008, 16:23
sorum olacak bunu index.php de ve page.php de denedim ikisindede resim çıkmadı ayreten yazıya tıkladığın zaman resim görünüyor ama resmin yoluna tıkladığında
resim yolu yok ama resim var sitede bunu nasıl çözerim
resimde görünüyor.
diğer temalarda sorun yok sadece bu temada var
DeepBlue Premium Theme da sorun çıkarmıyor.
index.php yıde vereyim
http://tc.securityline.googlepages.com/index.txt
24 Malibay
19 Ekim 2008, 04:50
Selamlar,
Ben bu özelliği, güzel bir plugin olan d13 Slide Show’da kullanıyorum. Biraz karışıkta olsa kullanışlı bir eklenti. Ve de sitenizdeki, seçtiğiniz 10 yazıyı kullanıcılarınıza resimli ve de slayt olarak gösterebilmenize yarayan muhteşem bi eklenti. Örneğini http://www.morcivert.com‘dan görebilirsiniz. Erhan beyden bu eklentiyi daha net anlatmasını rica ediyorum. 10′dan fazla ekleyebilirmiyiz, bunu başka ne şekilde kullanabiliriz. Eklenti adresi : http://wordpress.org/extend/plugins/d13slideshow . kolay gelsin
23 Bilal
18 Ekim 2008, 18:55
abi bişi sormak istiyorum.
emamı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.
demişsin yazı döngüsü nerede? kodu tam olarak nereye ekleyeceğim ?
22 Onur
08 Ekim 2008, 23:30
Erhan abi çok akıcı anlatmışsın Hakkı abimin yazısından senin yazıya geçtim daha yeni anlayabildim teşekkür ederim.
21 erol
01 Ekim 2008, 12:40
yönetim paneli > tasarım > tema editörü > home.php dosyasına geliyoruz. aşağıdaki kodu habersağ, habersol, habersağsol ile başlayan , ve ‘den sonra yapıştırıyoruz. o kadar…