İçeriğe Atla
POPÜLER ARAMALAR: reklam, pazarlama, ,
kod, wordpress, eklenti, web, teknoloji,
programlama, tasarım, ajax, linux, Pardus, blog
Feedburner RSS
Şemsiye


31 Ağustos 2008

Her Yazım Resimli Olsun Diyorsanız!

Etiketler: , , , ,
Kategori Genel, Tema, Web, Wordpress | Toplam 1,898 kez okunmuş | 27 Yorum

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.

Tasarımcı'nın El Çantası

İ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.
Tasarımcı'nın El Çantası

eburhan.com

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.
eburhan.com

Neden Bu Yöntemi Anlatıyorum?

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 Ne Yapacağız?

Ş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.

Birinci Adım, Özel Alan Oluşturma

İ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.
Özel Alan
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

Ö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.

İkinci Adım, Temamızda Resmi Gösterme

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 } ?>
Sonuç

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...






Yorumlar

“Her Yazım Resimli Olsun Diyorsanız!” için 27 Yorum

Sayfalar: [3] 2 1 » Hepsini Göster

  • 27 yakuter

    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

    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

    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

    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

    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

    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

    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…

Sayfalar: [3] 2 1 » Hepsini Göster


Yorum Yapın

yakuter.com © 2006-2008 Erhan Yakut. Site tasarım fallendesign.
Site içerisindeki içerikler izinsiz kopyalanamaz, alıntı yapılamaz.

WordPress Generator Valid XHTML 1.0 Transitional Valid CSS! Clicky Web Analytics

tracker