WordPress Öne Çıkarılmış Görsel ve Timthumb

WordPress Öne Çıkarılmış Görsel ve Timthumb

WordPress Öne Çıkarılmış Görsel ve Timthumb

Nedir ?
Öne çıkarılmış görsel anasayfalarımızda sol’da bulunan küçük resimleri gösterme işlemine yarar.

Örnek

wordpress-once-cikarilmis-gorsel-timthumb

Timthumb.php Nedir ?

Timthumb.php ile öne çıkarılmış görselin bir arada kullanılmasının türlü avantajları vardır en önemlisi ise resimleri istediğiniz boyutlarda ölçeklendirip o şekilde listeleme yapabilmenizdir. Resmin boyutlarında büyük çapta bozulma olmamaktadır.Aynı Zamanda resim optimize işlemi yaparak resimlerimizi küçük boyutlarda cacheler site hızınızın artmasına vesile olur.
Şimdi İşlemlere Geçelim..

1.Aşama

functions.php dosyamızı açıyoruz <?php kodlar ?> şeklinde aşağıdaki kodlarımızı yerleştiriyoruz.

add_theme_support('post-thumbnails');

Bu işlemle birlikte WP-Admin > Yeni Yazı ekle Dediğimizde Sağ Alt Tarafta Öne Çıkan Görseli Görebileceksiniz.

Örnek

wordpress-one-cikan-gorsel-alani

2.Aşama

Şimdi Timthumb.php dosyasını ediniyoruz. Buradan indirebilirsiniz.

  • İndirdiğiniz Dosyası Tema içerisine gönderin.

3.Aşama

<?php $image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full'); if ( has_post_thumbnail() ) { ?>

<a title="<?php the_title(); ?>" href="<?php the_permalink() ?>" rel="bookmark"><img src="<?php bloginfo('template_url'); ?>/timthumb.php?src=<?php echo $image_url&#91;0&#93;; ?>&w=255&h=250&zc=1" alt="<?php the_title(); ?>" width="255" height="250" /></a>

<?php } ?>

Kod Hakkında

  • &w=255&h=250&zc=1 (255 değeri yükseklik 250 değeri genişliği temsil eder.)

Varsayalım ki işlemleri yaptınız fakat bazı yazılarınıza Öne çıkarılmış görsel belirlemedik bunun için ise aşağıda ki kodu kullanıyoruz.

4.Aşama

<?php $image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full'); if ( has_post_thumbnail() ) { ?>
<a title="<?php the_title(); ?>" href="<?php the_permalink() ?>" rel="bookmark"><img src="<?php bloginfo('template_url'); ?>/timthumb.php?src=<?php echo $image_url&#91;0&#93;; ?>&w=255&h=250&zc=1" alt="<?php the_title(); ?>" width="255" height="250" /></a>
<?php } else { ?>
<a title="<?php the_title(); ?>" href="<?php the_permalink() ?>" rel="bookmark"><img src="<?php bloginfo('template_url'); ?>/timthumb.php?src=Resim Adresi&w=255&h=250&zc=1" alt="<?php the_title(); ?>" width="255" height="250" /></a>
<?php } ?>

Kod Hakkında

  • Resim Adresi kısmını düzenliyoruz.
  • &w=255&h=250&zc=1 (255 değeri yükseklik 250 değeri genişliği temsil eder.)
Beğen

Yapılan Yorumlar

  1. yaa bu kodları nereye yazacağımızı söylermisiniz. bir türlü çözemedim bu işi.

    • 5 sene önce

      Kullanmak istediğiniz şablonda döngü içinde gösterebilirsiniz.

      Örneğin index.php, single.php, archive.php, category.php, search.php bunların hepsinde veya size özel kendi şablonlarınızın içerisinde gösterebilirsiniz.

  2. hocam bilgi için teşekkürler yalnız ben siteme uyguladığımda eklenen resim yazının üstünde kalıyor bnun yazının soluna geçmesi için ne yapabiliriz. solda resim yanında yazı şeklinde tıpkı eklediğiniz resimdeki gibi olsun istiyorum

    • 5 sene önce

      Resmi eklediğiniz alana style = float:left; ataması yapmayı deneyin muhtemelen çözülecektir..

  3. hocam mrb yardıma ıhtıyacım var öne cıkarılmıs gorselı yazı ıcınden nasıl kaldırabılırım sadece sayfada gorunmesını ıstıorum

    • 6 sene önce

      İlgili Kodları Single.php içerisinden kaldırdığınız durumda, konu içerisinden kaldırılır hocam. Kolay gelsin.

      • Merhaba;
        Sİngle.php dosyası içerisin de sadece aşağıdaki gibi kodlar var hangisini kaldırmamız gerekiyor ?

        • 4 sene önce

          Kodlarınızı bir yere yüklerseniz yardımcı olmaya çalışayım hocam.

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.