alexa  Menu
wordpress tema yapımı

WordPress yazı resmi (thumbnail) özelliği

  18.02.2015 ,   39 yorum ,   18.895 kez okundu.

Bu yazımla birlikte wordpressin çok kullanılan fonksiyonlarını teker teker paylaşmaya başlıyorum. Hadi hayırlısı. Buarada uzun zamandır yakında yakında dediğim ama bir türlü bitiremediğim bootstrap ile wordpress tema yapımı dersini de unutmadım. Mutlaka yayınlayacağım. 🙂

Şimdi geçelim bu yazımda paylaşmak istediğim fonksiyona. İngilizcesi thumbnail olan fonksiyonu ben yazımda yazı resmi veya küçük resim olarak adlandıracağım. Ki zaten bu adlar da değişik sayfalarda karşınıza çıkabilir.

Bahsettiğimiz thumbnail yani yazı resmi haber, blog, magazin ve diğer hemen hemen her türlü sayfalarda o konuya ait, konuyu özetleyen, ya da konuya ait anahtar kelimeleri kendine barındıran küçük resimlerdir.

Örneğin benim blog sayfamdaki gibi:

thumbnail-yazi-resmi-kucuk-resim-wordpress

Kendiniz temanızı tasarlamaya çalışıyorsanız yazı resmini kullanabilmeniz için önce bu özelliği aktif hale getirmeniz gerekecektir.

Bildiğiniz gibi wordpress fonksiyonları temamızda yer alan functions.php dosyasına ekleniyor.

Dolayısıyla bu özelliği aktif hale getirebilmeniz için functions.php dosyasına aşağıdaki kodu eklemeniz gerekiyor:

<?php add_theme_support( 'post-thumbnails' ); ?>

Bu kadar!

Ama daha detaylı açıklama yapmak gerekirse şunları söylemekte fayda var. Bildiğiniz gibi wordpresste yazı (post) ve sayfa (page) oluşturma özellikleri var. Dolayısıyla hem sayfa hem de yazı için yazı resmini aktif hale getirmek için üstte paylaştığım kodu kullanmanızda fayda var. Ama yok sadece sayfa veya yazı için aktif hale getirmek istiyorsanız aşağıdaki kodları kullanabilirsiniz:

<?php //Sadece yazılar için
add_theme_support( 'post-thumbnails', array( 'post' ) );
 
//Sadece sayfalar için
add_theme_support( 'post-thumbnails', array( 'page' ) ); ?>

Bu fonksiyonu kullandıktan sonra yönetim panelinde yazı ve sayfa oluşturma alanlarında sağ kısımda aşağıdaki bölüm belirecektir:

yazi-resmi-ozel-resim-belirle

Artık sayfanız veya yazınız için yazı resmi belirleyebilirsiniz.

Nasıl kullanacağız?

Temanızı kodlarken yazı resmini göstermek istediğiniz sayfada aşağıdaki kodlardan birini eklemeniz gerekir:

the_post_thumbnail( 'thumbnail' );       // Thumbnail - küçük  (default 150px x 150px max)
the_post_thumbnail( 'medium' );          // Medium resolution - orta (default 300px x 300px max)
the_post_thumbnail( 'large' );           // Large resolution - büyük (default 640px x 640px max)
the_post_thumbnail( 'full' );            // Full resolution - tam (original size uploaded)
the_post_thumbnail( array(100, 100) );  // diğer resolutions

Peki yazı resmi boyutlarını nasıl nereden belirleyeceğiz?

Yazı resmi boyutunu yönetim panelinizden ve functions.php dosyasında ayarlamanız mümkün. Yönetim panelinde Ayarlar (Settings) > Ortam (Media) bölümünden ayarlayabilirsiniz:

wordpress-ortam-yazi-resmi-boyutlari

işte bu kadar. anlamadığınız birşey olursa yorum kısmından sorabilirsiniz.

kaynak: the post thumbnail

39 yorum yapılmış

    Wordpress yazı resmi (thumbnail) boyutlandırma

    […] önceki paylaşımımda tema kodlarken yazı resmi (thumbnail) özelliğini nasıl aktif hale getireceğinizi anlatmıştım. Aslında yazı resimlerinin […]

    20.02.2015, 0:28:35

    Wordpress tema yapımı #4

    […] dersi izleyerek, temanıza öne çıkarılmış görsel özelliği ekleyebilir, öne çıkarılmış görsel boyutlarını ayarlamayı öğrenebilir, özel […]

    22.04.2015, 11:00:58

    kategori sayfasında thumbnail gösterme - wordpress tema yapımı

    […] sayfası hazırlama dersine ilave olarak hazırladığım bu videoda, kategori şablonumuza yazı resmi (thumbnail) ekleme konusuna değindim. Aslında blog sayfamda daha önce de bu konuya […]

    31.05.2015, 12:58:21

    Wordpresste yazı resmine (thumbnail) sınıf adı ekleme

    […] önceki paylaşımlarımda anlattığım üzere function.php dosyasında yazı resmi özelliğini aktifleştirdiğinizi […]

    27.06.2018, 10:37:12

    Yararlı İnternet Siteleri

    […] WordPress yazı resmi (thumbnail) özelliği […]

    16.09.2018, 0:00:02

    Can Murat Demir

    Hocam thumbnail sorunum var da… şu ana kadar eklediğim resimlerde sıkıntı yok, ne var ki yeni bir yazı ve ressim girdiğimde saçma sapan küçük resimler atıyor sistem.. bunun nedeni nedir? Yardımcı olur musunuz

    11.06.2015, 2:03:44

      Anar SAMADOV

      Sebebi yeni bir eklenti kurmuş olabilmeniz veya functions.php sayfasında thumbnail boyutlarıyla oynamış olabilmenizdir.

      11.06.2015, 2:24:58

        Can Murat Demir

        acaba wp ortam ayarlarından olabiir mi?
        ya da benim anladığım kadarıyla tema timb tumb dosyası çalıştırıyor bu olabilir mi?

        http://www.felsefehayat.net/ bu adresten kontrol ettiğinizde anasayfadaki bazı resimlerin boyutlarının farklı olduğunu göreceksiniz. lütfen yardım edin bir türlü bulamıyorum

        11.06.2015, 2:51:33

        Anar SAMADOV

        Ayarlar> ortam bu alanda da sorun olabilir. bir de temanın kendi ayarlarında da olabilir. Yönetim panelini incelemeden kesin birşey söylemek yanlış olur.

        11.06.2015, 16:47:23

    Bilal

    hocam yazı içindeki resimleri nasıl boyutlandırabiliriz?
    yazı içine eklediğim tüm fotolar sayfa genişliğine göre boyutlanıyor sebebi nedir?

    14.03.2016, 16:59:43

    Bilal

    Örnekle mesela böyle oluyor tüm yazı alanını kaplıyor foto halbuki küçük boyutta bir resim
    http://i.hizliresim.com/JAq2QY.png

    14.03.2016, 17:06:08

      Anar SAMADOV

      Fotoğrafa img-responsive sınıfını eklediyseniz o yüzdendir. Mobil cihazlarda duyarlı olması için img-responsive sınıfı kullanılır istemiyorsanız kaldırınız. ya da width degerini 100% yapmışsınızdır.

      14.03.2016, 18:04:37

    Eren Uğurlu

    Merhaba kolay gelsin sizin videolarınızı takip ediyorum da sormak istediğim bir konu var thumbnail komutunu ekleyince siteye otomatik olarak img src … gibi kodları ile birlikte geliyor peki yazıya öne çıkarılmış görsel olarak belirle dediğimiz resmin direk kodu varmıdır mesela resmigetir(); dediğimizde img src değil de direk resmin yüklendiği adresi gösteren kod varmıdır? Teşekkürler şimdiden.

    14.09.2016, 14:29:29

    Gürkan Bilgisu

    Merhaba,
    Öne çıkarılan görselleri silmek için function.php dosyama

    global $wpdb;
    $wpdb->query( "
        DELETE FROM $wpdb->postmeta 
        WHERE meta_key = '_thumbnail_id'
    " );

    kodunu eklemiştim, fakat sitedeki tüm içeriklerin thumbnaileri yok oldu. Bu sorunu nasıl çözebilirim. Function.php yi orijinali ile değiştirmeme rağmen sorun çözülmedi ve diğer temalarda da aynı problem oldu. Sorunu nasıl çözebilirim.
    Edit: İlk yazdığım yorumun düzeltmesidir.

    18.10.2016, 19:54:30

    sezer

    merhaba wordpress & bootstrap birleşimi bir web site çalışmam oldu gayet iyi ilerlerken içinden çıkamadığım bir durumla karşılaştım..
    öne çıkarılan görsellerden resim ekledim sitede gayet güzel gözüküyor lightbox ta mevcut açlıyor ama açılan lightboxta resim yok yani öne çıkan resimlerden attığım görseli aynı zamanda nasıl lightboxta gösterebilirim?

    31.10.2016, 9:24:36

      Anar SAMADOV

      lightboxa göre incelemek gerekir ama genelde fotoğrafın asıl urlsine link vermeniz gerekiyor.

      31.10.2016, 10:44:40

        sezer

        işte asıl mesele orada temayı wordpresse giydirirken thumbnail olarak değişiyor ben ne şekilde link verebilirim ki?

        31.10.2016, 10:47:26

        Anar SAMADOV

        Bunlar hepsi wordpress dökümantasyonunda var aslında. sadece mantıklı anahtar kelimelerle google da aratmanız gerekiyor.
        görsel linkini şu şekilde alabilirsiniz:

        $thumb_id = get_post_thumbnail_id();
        $thumb_url = wp_get_attachment_image_src($thumb_id,'thumbnail-size', true);
        echo $thumb_url[0];
        31.10.2016, 11:27:18

    yusuf

    Merhaba hocam. derslerinizi izleyerek bootstrap ile uğraşıyorum. wordpress için bootstrap tabanlı bir video teması yapıyorum. benim sorunum şu ;
    ana ekranda (index sayfasında) videolar col-lg-2 divleri arasında thumbnail ile başlıklarla gösteriliyor. ancak thumbnail resimleri farklı boyutlarda olduğundan divlerimde acayip bir kayma oluşuyor. yani videolar alt alta değil de şiki üçtanesi alt alta deiğerleri saçma sapan bir hal alıyor. bunu nasıl önelyebilirim?
    diğer bir sorunum iseana sayfada sırasıyla , ve şeklinde 3 tane divim var. ben while döngüsü ile wordpress veritabanımdaki videoları ver thumbnail resimlerini içerisinde görüntülüyorum. ancak bu divlerim yan yana değil alt alta görüntüleniyor. css’de float:left denedim olmadı. nasıl çözebilirim ?

    13.11.2016, 17:44:46

      Anar SAMADOV

      fotoğrafları aynı boyutlarda crop ederek sorunu çözmek daha mantıklı. farklı boyutlarda olacaksa masonry js kullanabilirsin örneğin. ikinci soruda muhtemelen while döngüsü içerisinde doğru kodları döndürmüyorsun. mesela row sınıfını veya clearfix sınıfını döngü içerisinde döndürüyorsan dediğin gibi alt alta çıkması normal.

      14.11.2016, 11:59:55

    yusuf

    Merhaba. Cevabınız için teşekkür ederim. Row sınıfı döndü içinde ama dışına aldığımda da sonuç aynı. Thimbnail boyutu ile ilgili olarak ise crop işlemini deneyip akşam dönüş yaparım. Bu arada crop işlemini yapabileceğim bir kod parçası varmı ?

    14.11.2016, 12:51:07

    yusuf

    Videolarinizin tamamını indirdim 🙂

    16.11.2016, 14:19:07

    yusuf

    Bilgisayarımdan bile dışarı çıkmaz. Flash belleğe bile tamam. 🙂

    17.11.2016, 11:53:36

    Koray

    Hocam Merhaba 🙂
    Ziyaretçi anasayfayı açtığında bir resim görsün ve istediğinde bu resmi kapatabilsin istiyorum ancak arama yaptım ama bulamadım .
    Nasıl bir yol izleyebilirim?

    24.12.2016, 16:31:21

    Ömer

    Hocam merhaba,
    Var olan hazır bit temam var ve bot yardımıyla içerik çekiyorum. Bot ile gelen resim orjinal boyut olarak geliyor. Bunu wp ile oto kırpıp öne çıkarılan görsel olarak wordpress üzerinden ayırlanabilir mi ? yoksa bot üzerinden mi bunu kırpmam lazım ?

    10.02.2017, 14:53:27

    Yunus Emre ORHAN

    Merhaba, elimde çok fazla görsel dosya var bunları temamın duvarında gözükmesi için öne çıkan görsel olarak girmem gerekli. ama dediğim gibi çok resim olduğu için tek tek paylaşmak benim için zaman kaybı. ben toplu halde nasıl öne çıkan görsel eklenir onu öğrenmek istiyorum. çok araştırdım ama hala bulamadım. teşekkür ederim ilgilerinize.

    09.01.2019, 10:51:00

      Anar SAMADOV

      tam olarak anlamadım, öne çıkan görsel bir posta ait. bir posta birden fazla öne çıkan görsel mi eklemek istiyorsunuz yoksa postun içinde galeri mi eklemek istiyorsunuz?

      09.01.2019, 16:47:14

        Yunus Emre ORHAN

        şimdi şöyle ben bu temayı satın aldım (http://demo.uncommons.pro/themes/wp/random/site/) duvarındaki fotoğrafların wall da gözükmesi için öne çıkan görsel olarak tek tek kayıt etmem gerekiyor ve öyle de yapıyorum ama inanın bu benim için bir işkenceye dönüştü. Bir yol vardır diye düşündüm. Yani nasıl olacağı önemli değil tek seferde ortam dosyalarından ctrl ile seçeceğim dosyalarla ayrı ayrı postlar oluştursun thumbnails diye yazılıyor sanırım öne çıkan görsel yapsın istiyorum onları.

        09.01.2019, 17:26:11

        Anar SAMADOV

        normalde admin panelde ortam menüsünde sürükle bırak ile tüm fotoları atmak mümkün. aynı anda birden fazla fotoğrafı da seçebiliyorsunuz ortam menüsünde.ama hepsini aynı anda öne çıkan görsel olarak belirlemek mümkün değil bence. yine de temayı satın aldıysanız supportuna yazabilirsiniz.

        09.01.2019, 17:32:41

        Yunus Emre ORHAN

        yazdım evet onlardan da cevap bekliyorum şuanda. merak ediyorsanız cevabı yine buraya yazarım isterseniz.

        09.01.2019, 17:59:08

    Yunus Emre ORHAN

    bu temanın özelliğinde yokmuş ama imkansız da değilmiş özel çalışmaları gerekiyormuş para istediler bunun için ama eğer ellerinde varsa vermelerini istedim. ek bütçem yok diyede not ekledim. Böyle işte.

    10.01.2019, 15:52:30

    özel ders

    videolar için teşikkürler

    16.04.2019, 15:45:22

Anar SAMADOV için bir yanıt yazın Yanıtı iptal et

isim yerine gerçek isim ve soyisim yazılmadan yapılan yorumlar kesinlikle onaylanmıyor bilginiz olsun.


The reCAPTCHA verification period has expired. Please reload the page.


%d blogcu bunu beğendi: