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

WordPress’te Önceki ve Sonraki Yazı Bağlantılarına Küçük Resimler Ekleme

Varsayılan olarak WordPress, gezinmeye yardımcı olmak için her gönderinin altında önceki ve sonraki gönderi bağlantılarını gösterir.

Bu bağlantılara küçük resimler eklemek WordPress blogunuzun kullanıcı deneyiminde büyük bir fark yaratabilir. Bu basit değişiklik okuyucularınızın dikkatini çekebilir ve sitenizde daha uzun süre kalmalarını sağlayabilir.

Bu kılavuzda, WordPress’te önceki ve sonraki yazı bağlantılarına nasıl küçük resim ekleyeceğinizi adım adım göstereceğiz – kodlama becerisi gerekmez! 🚀

How to use Thumbnails with Previous and Next Post Links in WordPress

Neden Önceki ve Sonraki Gönderi Bağlantılarıyla Birlikte Küçük Resimler Görüntüleniyor?

WordPress blogunuz, ziyaretçilerin yeni içerik bulmasına ve sitenizde gezinmesine yardımcı olacak bazı yararlı özellikler sunar. Bu özellikler şunları içerir:

Bir başka yararlı gezinme özelliği de her WordPress blog yazısının altında bulunur. Orada, sitenizin önceki ve sonraki yazılarına bağlantılar bulacaksınız.

You Find Links to the Previous and Next Posts at the Bottom of Each Blog Post

Bu bağlantılar kullanıcı etkileşimini artırır çünkü ziyaretçiler bir blog yazısını okumayı bitirdiklerinde okuyacak başka bir şey arayabilirler. Ancak, küçük resimler eklerseniz bağlantılar daha etkileşimli görünecektir.

Ayrıca en iyi performans gösteren veya popüler blog yazılarınıza dikkat çekmek için de harika bir yoldur.

Örneğin, halihazırda tonlarca trafik çeken ve bu okuyucuları e-posta abonelerine dönüştüren temel içeriğiniz olabilir. Gönderi bağlantıları içeren küçük resimler eklemek yalnızca e-posta listenizi oluşturmanıza ve küçük işletmenizi büyütmenize yardımcı olur.

Bunu göz önünde bulundurarak, WordPress’te önceki ve sonraki yazı bağlantılarına nasıl küçük resim ekleyeceğinizi göstereceğiz. İşte bu makalede ele alacağımız tüm konular:

Hadi başlayalım!

WordPress’te Önceki ve Sonraki Yazı Bağlantıları ile Küçük Resim Kullanma

Önceki ve sonraki yazı bağlantılarınıza küçük resimler eklemek için WordPress temanızın dosyalarına kod eklemeniz gerekir. Bunu daha önce yapmadıysanız, WordPress’te kod kopyalama ve yapıştırma hakkındaki kılavuzumuza bakın.

WPCode Kullanarak Kod Ekleme

İlk adım, en iyi kod parçacıkları eklentisi olan WPCode‘u kullanarak aşağıdaki kod parçacığını eklemektir. Sitenizi bozmadan kod eklemenizi sağlar ve çok sayıda hazır şablonla birlikte gelir, böylece sıfırdan kod yazmak zorunda kalmazsınız.

💡 Özel kod parçacıkları oluşturmak ve yönetmek için WPCode kullanıyoruz. Bizim için inanılmaz derecede iyi çalıştı. Özelliklerini keşfetmek için eksiksiz WPCode incelememize göz atabilirsiniz!

Başlamak için WPCode eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Yardıma ihtiyacınız varsa, WordPress eklentisi yükleme hakkındaki makalemize göz atabilirsiniz.

Buradan Kod Parç acıkları + Parçacık Ekle sayfasına gidin. Ardından ‘Yeni Ekle’ye tıklayın.

add new code snippet

Çok çeşitli önceden hazırlanmış şablonlar arasından seçim yapabileceğiniz bir kod parçacığı kitaplığına yönlendirileceksiniz.

Ancak, önceki ve sonraki gönderi bağlantılarına küçük resimler eklemek için bir dizi özel kod yükleyeceğiz. Bu yüzden, ‘Özel Kodunuzu Ekleyin’ altındaki ‘Snippet Kullan’ seçeneğine tıklayalım.

add custom code

✋ Özel bir snippet eklemek için WPCode ücretsiz sürümünü kullanabilirsiniz, ancak WPCode Pro ‘ya yükseltme, tam kod revizyon geçmişine ve zamanlama özelliklerine erişmenizi sağlar.

Bir sonraki adım, kod parçacığına daha sonra başvurabilmeniz için bir ad vermektir.

Ardından, aşağıdaki kodu WPCode metin düzenleyicisine kopyalamanız yeterlidir. ‘Kod Türü’ olarak ‘PHP Snippet’ seçtiğinizden emin olun.

function wpb_posts_nav(){
    $next_post = get_next_post();
    $prev_post = get_previous_post();
    
    if ( $next_post || $prev_post ) : ?>
    
        <div class="wpb-posts-nav">
            <div>
                <?php if ( ! empty( $prev_post ) ) : ?>
                    <a href="<?php echo get_permalink( $prev_post ); ?>">
                        <div>
                            <div class="wpb-posts-nav__thumbnail wpb-posts-nav__prev">
                                <?php echo get_the_post_thumbnail( $prev_post, [ 100, 100 ] ); ?>
                            </div>
                        </div>
                        <div>
                            <strong>
                                <svg viewBox="0 0 24 24" width="24" height="24"><path d="M13.775,18.707,8.482,13.414a2,2,0,0,1,0-2.828l5.293-5.293,1.414,1.414L9.9,12l5.293,5.293Z"/></svg>
                                <?php _e( 'Previous article', 'textdomain' ) ?>
                            </strong>
                            <h4><?php echo get_the_title( $prev_post ); ?></h4>
                        </div>
                    </a>
                <?php endif; ?>
            </div>
            <div>
                <?php if ( ! empty( $next_post ) ) : ?>
                    <a href="<?php echo get_permalink( $next_post ); ?>">
                        <div>
                            <strong>
                                <?php _e( 'Next article', 'textdomain' ) ?>
                                <svg viewBox="0 0 24 24" width="24" height="24"><path d="M10.811,18.707,9.4,17.293,14.689,12,9.4,6.707l1.415-1.414L16.1,10.586a2,2,0,0,1,0,2.828Z"/></svg>
                            </strong>
                            <h4><?php echo get_the_title( $next_post ); ?></h4>
                        </div>
                        <div>
                            <div class="wpb-posts-nav__thumbnail wpb-posts-nav__next">
                                <?php echo get_the_post_thumbnail( $next_post, [ 100, 100 ] ); ?>
                            </div>
                        </div>
                    </a>
                <?php endif; ?>
            </div>
        </div> <!-- .wpb-posts-nav -->
    
    <?php endif;
}

Parçacığı girdikten sonra, düğmeyi ‘Etkin Değil’den ‘Etkin’e geçirebilirsiniz.

Bu şekilde görünmelidir.

add code snippet

Bu, kodun çalışmasını sağlayacaktır.

Ardından, ‘Güncelle’ düğmesine tıklayabilirsiniz.

update code snippet

Şimdi, Code Snippets +Add Snippet sayfasına geri dönmemiz gerekecek.

Yine, ‘Özel Kodunuzu Ekleyin’ seçeneğinin altında, ‘Snippet Kullan’ı seçecek ve daha sonra başvurabilmeniz için bir ad vereceksiniz.

add custom code

Ardından, aşağıdaki kodu kopyalayıp WPCode metin düzenleyicisine yapıştırabilirsiniz. ‘Kod Türü’ açılır menüsünden ‘PHP Snippet’ seçeneğini seçtiğinizden de emin olun.

wpb_posts_nav();

Bu kod, WordPress’e öne çıkan görselle birlikte navigasyonun nerede gösterileceğini söyler.

add navigation snippet

Şimdi, ‘Ekleme’ bölümüne ilerlemek ve ‘Konum’un yanındaki açılır menüye tıklamak isteyeceksiniz.

Buradan, ‘Sayfaya Özel’e gidin ve ‘Gönderiden Sonra Ekle’yi seçin. Bu şekilde, küçük resimler bağlantıların yanında düzgün bir şekilde görünecektir.

insert after post wpcode

Son olarak, ‘Etkin’ seçeneğini açıp ‘Güncelle’ye tıklayabilirsiniz.

Değişikliklerinizi kaydettikten sonra, önceki ve sonraki gönderi bağlantılarını küçük resimlerle göstermek istediğiniz şablonda bu işlevi kullanabilirsiniz.

activate posts navigation snippet

İşte bu kadar – önceki ve sonraki gönderi küçük resimlerinizi eklediniz ve yapılandırdınız!

Artık web sitenizde bir gönderiyi görüntülediğinizde, gönderinin altındaki önceki ve sonraki bağlantıların artık küçük resimlere sahip olduğunu göreceksiniz.

previous and next post example

Not: Bağlantılı gönderilerden birinin zaten öne çıkan bir görseli yoksa, bir küçük resim görmezsiniz. Bir yazıya nasıl küçük resim ekleyeceğinizi öğrenmek için WordPress’te öne çıkan görseller veya yazı küçük resimleri ekleme kılavuzumuza bakabilirsiniz.

Okuyucularınızın bir yazıyı okuduktan sonra ilgisini çekmenin bir başka yolu da her makaleden sonra popüler yazıların bir listesini görüntülemektir. Bu, okuyucularınızın yalnızca önceki ve sonraki yayınlanan makaleler yerine en iyi içeriğinizi görmelerini sağlayacaktır.

Popüler gönderileriniz en başarılı içeriklerinizi içerir. Bunları ziyaretçilerinize göstermek güven oluşturacak, sosyal kanıtı geliştirecek ve ziyaretçilerinizin web sitenizde daha uzun süre kalmasını sağlayacaktır.

WordPress’te yazıların görüntülenme sayılarına göre nasıl görüntüleneceğine dair rehberimizdeki ilk yöntemi kontrol ettiğinizde, MonsterInsights eklentisini kullanarak popüler yazıları eklemenin ne kadar kolay olduğunu öğreneceksiniz.

WPBeginner’da, web sitemizin performansını yakından takip etmek için MonsterInsights kullanıyoruz. MonsterInsights incelememizin tamamını görebilir ve neden veri odaklı kararlar almak için başvurduğumuz araç olduğunu görebilirsiniz!

MonsterInsights’ın Popüler Yazılar Widget’ı çok çeşitli çekici temalar ve birçok özelleştirme seçeneği sunar.

The Popular Posts Widget in MonsterInsights

Ya da her blog gönderisinin sonuna çeşitli içerik türlerini nasıl ekleyebileceğinizi öğrenebileceğiniz WordPress’te özel gönderi sonrası widget‘larının nasıl ekleneceğine ilişkin kılavuzumuza bakabilirsiniz.

Umarız bu eğitim WordPress’te önceki ve sonraki yazı bağlantıları ile küçük resimlerin nasıl kullanılacağını öğrenmenize yardımcı olmuştur. Daha sonra, yazı küçük resimlerinin nasıl kırpılacağını ve düzenleneceğini öğrenmek veya WordPress’te öne çıkan video küçük resimlerinin nasıl ekleneceğine ilişkin kılavuzumuza bakmak isteyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

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.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

18 yorumLeave a Reply

  1. Atesz

    Hello,
    thnak you for this code. I would like to add the post navigation in the middle of my page as a block. So I tried to create a shortcode calling the wpb_posts_nav funtion:

    add_shortcode( ‘custom-post-nav’, ‘wpb_posts_nav’ );

    but if I use the shortcode [custom-post-nav] in the block editor, I cannot publish the post and I get the following: “Updating failed. The response is not a valid JSON response”
    The post nav still appears but only If I paste the code at the end of the page and then they go to wrong place (to the top).

    Do you know where is the problem?
    Thank you in advance!

  2. Sekh Sahajahan

    Hello sir have you any solution to remove the 3 line navigation bar from menu bar because it automatically added.

  3. Markus Martin

    Hi Syed. Does this still work especally with the new version of wordpress?

  4. patricia

    Hello! How would I do, if i want to use this for custom post type? thanks

  5. MarykeVanRensburg

    I got it to work. It seems the } in this “<?php } ?>” was the problem. I removed it and it works. Now just to figure out how to only show next and previous in same category. Thanks

  6. bowetech

    HOw would i set it up so that it will actually get the next post from its current category ?

  7. Japh

    Nice and simple solution, I really like it. Great answer for your Facebook asker :)

  8. Wordpress Themes Labs

    nice guide

  9. MarykeVanRensburg

    Can you tell me how to only show previous and next in the same category? Thanks for this code. I’m going to try it.

    • wpbeginner

      @MarykeVanRensburg I think the TRUE variable there means in category browsing.

      • MarykeVanRensburg

        @wpbeginner I used the code, but it doesn’t work in an Artisteer created theme. The code in my theme is as follows:

        ‘next_link’ => theme_get_previous_post_link(‘« %link’), ‘prev_link’ => theme_get_next_post_link(‘%link »’),

        and I need to change it to show a thumbnail and only a certain category. Thanks.

        • wpbeginner

          @MarykeVanRensburg AFter the link area just add ,true

          our code above will do only category browsing. Unfortunately we do not provide support for specific frameworks.

  10. Dragon Blogger

    Really cool, I do think using thumbnails with latest/next post may be overkill if you already use it with “related posts” there is limited real estate which is especially true for the growing trend of mobile browsing.

    • wpbeginner

      @Dragon Blogger That is only if you are assuming that the site has related posts. Some may not. We are using it on our List25 site which is relatively new site, so related articles is not very helpful at the time. That is why we are using single post navigation.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.