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

Varsayılan olarak, WordPress kolay gezinme için her yazının altında önceki ve sonraki yazı bağlantılarını görüntüler.

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 makalede, sitenize görsel bir destek sağlamak için WordPress’te önceki ve sonraki yazı bağlantılarına nasıl küçük resimler ekleyeceğiniz konusunda size rehberlik edeceğiz.

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 arasında gezinme menüleri, arama çubuğu ve yazı arşivleri widget‘ı yer alır.

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.

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 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 akılda tutarak, WordPress’te önceki ve sonraki yazı bağlantılarına küçük resimlerin nasıl ekleneceğine bir göz atalı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.

Başlamak için WPCode eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için WordPress eklentisinin nasıl kurulacağına ilişkin makalemize göz atabilirsiniz.

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

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

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.

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

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

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

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.

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

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.

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

Alternatif: Popüler Gönderileri Küçük Resimlerle Görüntüleme

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.

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

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, WordPress yazı küçük resimlerini nasıl kırpacağınızı ve düzenleyeceğinizi veya WordPress’te öne çıkan video küçük resimlerini nasıl ekleyeceğinizi de öğrenmek 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.