Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Kupası
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPress’te YouTube Videoları İçin Küçük Resimler Nasıl Eklenir

Sitelerinin ön sayfasında YouTube video küçük resimlerini kullanan popüler siteler gördünüz mü? YouTube, Vimeo veya diğer sitelerde bir video kanalı işletiyorsanız, siz de blogunuzun ön ve arşiv sayfalarında video içeren tüm gönderiler için bir video küçük resmi görüntüleyebilirsiniz. Bu makalede, WordPress’te YouTube videoları için küçük resimlerin nasıl ekleneceğini göstereceğiz.

An example of video thumbnails in WordPress

Video Küçük Resimleri ve WordPress Yazı Küçük Resimleri

WordPress, öne çıkan resimler veya yazı küçük resimleri eklemek için yerleşik işlevsellikle birlikte gelir ve çoğu WordPress teması bu özelliği destekler. Ancak, YouTube’daki video içeriğinizi vurgulamak istiyorsanız, bu içeriği video küçük resimleriyle sergilemek istersiniz. Bu makale, varsayılan WordPress yazı küçük resmi işlevini kullanarak bunu yapmanıza yardımcı olacaktır.

WordPress’te Video Küçük Resimler Eklentisini Kurma

Yapmanız gereken ilk şey Video Thumbnails eklentisini kurmak ve etkinleştirmek. Eklentiyi etkinleştirdikten sonra, eklenti ayarlarını yapılandırmak için Setttings ” Video Thumbnails bölümüne gitmeniz gerekir.

Setting up video thumbnails

Ayarlar ekranında, küçük resmi medya kitaplığınızda saklamayı seçmenizi öneririz. Bu, sitenizdeki harici http isteklerini azaltacak ve sayfalarınız daha hızlı yüklenecektir. Yazı türleri bölümünde eklenti yazıları, sayfaları ve web sitenizde varsa özel yazı türlerini gösterecektir. Eklentinin video bağlantıları için taramasını istediğiniz yazı türlerini seçin. Bu sayfadaki son seçenek özel bir alan seçmektir. WordPress için bazı video eklentileri video URL’lerini özel bir alana kaydeder ve bu tür eklentiler kullanıyorsanız, bu özel alanı buraya girmeniz gerekecektir. Bundan sonra Değişiklikleri Kaydet düğmesine tıklayın.

Ayarlar sayfasında Sağlayıcılar sekmesini de göreceksiniz. Videolarınızı paylaşmak için Vimeo kullanıyorsanız, Vimeo’da bir uygulama oluşturmanız ve ardından buraya istemci kimliği, istemci sırrı, erişim belirteci ve erişim belirteci sırrı değerlerini girmeniz gerekecektir.

Adding Vimeo app credentials

Toplu Eylemler sekmesinde, yayınlanan gönderilerinizi videolar için tarayabilir ve bunlar için video küçük resimleri oluşturabilirsiniz. Eklenti ayrıca tüm video küçük resimlerini temizlemek ve bunları yazılarınızdan ek olarak kaldırmak için bir düğme sağlar.

Scan posts to generate video thumbnails

WordPress Yazılarında Video Küçük Resimleri Oluşturma

Eklentiyi kurduğunuza göre, şimdi bir WordPress yazısına video URL’si ekleyerek bir video küçük resmi oluşturalım. Bunu yapmak için bir WordPress yazısı oluşturmanız veya düzenlemeniz ve video URL’nizi yazı düzenleme alanına eklemeniz gerekir. Yazıyı yayınladığınızda, eklentinin sizin için bir video küçük resmi oluşturduğunu ve bunu yazınıza eklediğini göreceksiniz.

Adding a video in WordPress Post and Generating a Video Thumbnail

WordPress Temanızda Video Küçük Resmi Görüntüleme

Video küçük resimleri eklentisi WordPress Post Thumbnails işlevini kullanır. Çoğu WordPress teması, yazı küçük resimlerini otomatik olarak görüntüleyecek şekilde ayarlanmıştır. Bu, temanızın video küçük resmini gönderi içeriğiniz veya alıntınızla birlikte otomatik olarak görüntüleyeceği anlamına gelir. Ancak temanız video küçük resimlerini göstermiyorsa, tema dosyalarınızı düzenlemeniz ve bu kodu küçük resmi görüntülemek istediğiniz şablona eklemeniz gerekir.

<?php the_post_thumbnail(); ?>

WordPress’te Video Küçük Resmine Oynat Düğmesi Ekleme

Artık WordPress yazılarınızda video küçük resimlerini başarıyla yakaladığınıza ve görüntülediğinize göre, normal resim küçük resimlerinizi video küçük resimlerinizden ayırmak isteyebilirsiniz. Bu, kullanıcılarınızın gönderide bir video olduğunu bilmelerini sağlar ve video gönderisini görüntülemek için oynat düğmesine tıklayabilirler. Video küçük resimleri ile normal yazı küçük resimlerini birbirinden ayırmak ve bir oynat düğmesi eklemek için koşullu etiketleri nasıl kullanacağınızı göstereceğiz.

Bu yöntemi kullanmak için video yayınlarınızı belirli bir kategori altında (örneğin Videolar) yayınladığınızdan emin olmanız gerekir. Ardından temanızın index.php, archive.php, category.php veya content.php gibi şablon dosyalarının içinde bu kod satırını arayın:

<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>

Şimdi bu kodu aşağıdaki kodla değiştirmemiz gerekiyor:

<?php if ( in_category( 'video' )) : ?>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?><span class="playbutton"></span></a>
<?php else : ?> 
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>	
<?php endif; ?>

Bu kod, yalnızca video kategorisi altında dosyalanan gönderiler için gönderi küçük resminden sonra <span class="playbutton"?></span> ekler. Bir sonraki adım Medya ” Yeni Ekle ekranından bir resim dosyası yüklemektir. Bu resim oynat düğmesi olarak kullanılacaktır. Resim dosyasını yükledikten sonra, resmin yanındaki Düzenle bağlantısına tıklayarak resim dosyasının konumunu not edin.

Son adım oynat düğmesini görüntülemektir. Video küçük resmindeki oynat düğmesini görüntülemek ve konumlandırmak için CSS kullanacağız. Bunu yapmak için, Görünüm ” Düzenleyici‘ye tıklayarak bu CSS kodunu kopyalayıp temanızın veya alt temanızın stil sayfasına yapıştırmanız gerekir.

.playbutton {
    background: url('http://example.com/wp-content/uploads/playbutton.png') center center no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 74px;
    height: 74px;
    margin: -35px 0 0 -35px;
    z-index: 10;
    opacity:0.6;
}
.playbutton:hover { 
    opacity:1.0;
}

Arka plan resmi url’sini daha önce yüklediğiniz oynat düğmesi resim dosyasının URL’si ile değiştirmeyi unutmayın. Hepsi bu kadar. Video küçük resim dosyalarınızın üzerinde artık bir oynat düğmesi olmalıdır.

Umarız bu makale YouTube videolarınızı WordPress’te küçük resimlerle vurgulamanıza yardımcı olmuştur. Geri bildirim ve sorularınız için lütfen yorum bırakın veya bizi Twitter‘da takip edin.

Açıklama: İçeriğimiz okuyucu desteklidir. Bu, bazı bağlantılarımıza tıklarsanız komisyon kazanabileceğimiz anlamına gelir. WPBeginner'ın nasıl finanse edildiğini, neden önemli olduğunu ve nasıl destek olabileceğinizi görün. İşte editoryal sürecimiz.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Ultimate WordPress Araç Kiti

Araç setimize ÜCRETSİZ erişim sağlayın - her profesyonelin sahip olması gereken WordPress ile ilgili ürün ve kaynaklardan oluşan bir koleksiyon!

Reader Interactions

44 yorumBir Cevap Bırakın

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Peter

    It is amazing that it still works!
    However does somebody know why it is not getting a thumbnail from a YT playlist?
    i´ve several posts with playlist and the image is always a grey “Video is not found” image

    • WPBeginner Support

      The plugin was created for videos and not entire playlists, you would need to reach out to the plugin’s author for including playlist functionality.

      Yönetici

  3. eddie art

    would this work to get a thumbnail image on an iframe embed code video?

    • WPBeginner Support

      You would need to check with the plugin’s support for if that is supported.

      Yönetici

  4. Faisal Iqbal

    Where to put that code in functions.php. I am no techie please anybody help me?

  5. Mohammad

    Hi
    I try to use this plugin but it doesn’t work for me and the developer in support forums doesn’t answer most of the unsolved topics. In debugging page when I try “Test Markup for Video” I get this error:

    Thumbnail found, but it may not exist on the source server. If opening the URL below in your web browser returns an error, the source is providing an invalid URL. Thumbnail URL:
    what’s the problem?

  6. Neon emmanuel

    what if i want three parameters, 1 a fall back when there is no thumbnail, two i fall back if it is video, (i.e) adding a play button overlay to it , and three a fall back it it is video with an overlay play icon on it.

  7. Bryan

    Will any of this code work for Adobe Muse/Dreamweaver?

  8. john

    Hi
    We are looking for a developer who can implement this for us. Are you available ?

  9. pamela sillah

    Is there any other way for me to do this WITHOUT plugins?? please help

  10. franck

    Hi folks,

    is anybody know how to remove related video when Youtube video is played till the end in video gallery plugin from Huge IT?

  11. Ernesto

    How do I remove the image from inside the entrance? I want input into the video display and no image

  12. Quoterland

    Thanks, great tutorial.

  13. Rihan

    And wordpress 4.0 I add the video (youtube) URL in the post edit area and its showing me a video player :( on the video thumb are i can see this text only (No video thumbnail for this post.) not working!

    any Idea :) thanks

    • srem

      Sorry I don’t know why it not show code.

  14. Mauro Scarpa

    Hi! Great website and post, i have a question, if then I want to share my post on facebook, will appear whit the play button also? Thanks

  15. Piet

    Cool plugin and tutorial. Instead of showing a play button image, I would like to suggest using a font icon, for example from FontAwesome.

  16. WPBeginner Staff

    TCB: if you are using WordPress SEO plugin then youc an try this method. Once the video thumbnail plugin has fetched the thumbnail image for your video, you need to find its location in your media library and copy the URL. After that remove the video thumbnail image from the post. In the WordPress SEO meta box on the post editor, click on the social tab, and paste the link next to the facebook image field.

  17. TCB

    Is it possible to use the video thumbnail as post image on facebook?
    That would be great because I don’t want to the show the picture as featured image.

  18. Megha Verma

    I am facing a problem as the play button is showing only on the first post….due to absolute position….not on other post’s images…

  19. Sutherland Boswell

    Great tutorial! As the developer I love to get feedback from users and work on easy solutions for the most requested features. Overlaying a play button and making the video actually play when clicking the thumbnail are two of the most requested features, but they’re both highly dependent on the theme. Learning to modify a theme on your own can be rewarding, so don’t be afraid to give it a shot!

    PS – I hope everyone will check out the pro version!

    • Jesse

      Hi Sutherland.

      I’ve read such good things about your plugin and I’m eager to try it.

      However, when using your plugin to scan for video files, it finds all 22 videos under the ‘video’ page which they are posted. The problem is it isn’t finding any thumbnails.

      After reading your various support replies to similar issues, as well as your instructions, i sought to find out whether my theme (metric, by grandpixels) is using a custom field. I have been unsuccessful in finding this information.

      Do you have suggestions on how to make this work?

      Thanks,

      Jesse

  20. Audee

    What if I want to display post thumbnail only for posts filed under video ‘Post Format’ ?

    Thank you for sharing article about this plugin!

      • Alex

        Hi Sutherland Boswell,

        i use your plugin for Detube theme, the problem is there is no <a href="”> code line in those files: index.php, archive.php, category.php..
        Do you have any idea or a way to make it work in Detube theme?

        Thanks in advance!

        • Alex

          i would be so glad if someone has an idea and could answer my question. I’ve been working for many hours to get this code works on Detube, but no succes untill now…
          Could someone here please help me?

  21. Ahmad Rafi Maseer

    HOw to play directly in thumbnail so the user should not go to post page to play the video???

    • WPBeginner Support

      For that you will have to edit your theme and instead of displaying the thumbnail you will have to embed the video.

      Yönetici

  22. Sue Anne

    Thanks SO much for the great instruction on putting a video and video thumbnail on my WordPress blog. It took about 5 minutes and I’m no techie!

  23. Pali Madra

    Hi!

    Great website and one of my favorite post.

    I had a related question. I’m adding video by placing the URL in the HTML code of the posts but I also want to show a caption below it. Is that possible without using a plugin?

    Thanks in advance

  24. Matt

    Fantastic tutorial. Thanks very much for posting this!

  25. Tiguan

    The ‘span’ must be placed inside the thumbnail’s hyperlink tags, otherwise the image link over play button will be disabled. So the correct code will be:

    However, it’s a nice tutorial.

  26. adolf witzeling

    Great tutorial.

  27. gottfrid q.

    > This will let your users know that there is a video in the post, and they can click on the play button to view the video post.
    I don’t want to disappoint you, but the button (spin) don’t have any click method.
    How exactly this button was supposed to work and how to implement it?

    Thanks for your time.

    • WPBeginner Support

      The button will not play the video right there, however it will take the user to the video page. The whole thumbnail is linked to the post containing the video.

      Yönetici

      • gottfrid q.

        Must the ‘span’ be placed inside the thumbnail’s hyperlink tags then?

  28. Akash

    And. how to implement Play Button in GENESIS Theme? there is no index.php, archive.php, category.php, or content.php file there to add the code.

    Thanks.

  29. Akash

    But what will be the size of the Video Thumbnail? Will it be same as the image thumbnail already set in the blog?

Bir Cevap Bırakın

Yorum bırakmayı seçtiğiniz için teşekkür ederiz. Lütfen tüm yorumların yorum poli̇ti̇kasi uyarınca denetlendiğini ve e-posta adresinizin yayımlanmayacağını unutmayın. Ad alanında anahtar kelime KULLANMAYIN. Kişisel ve anlamlı bir sohbet edelim.