Küçük Resim ile WordPress Sonraki Önceki Gönderi Nasıl Eklenir

WordPress sitenize sayfalama eklemek karmaşık bir süreç olmamalıdır. Aslında, minimum programlama bilgisi ile, sayısal WordPress sayfalandırma hakkındaki önceki öğreticimde gösterildiği gibi, varsayılan gönderi sayfalandırmanızı kolayca numaralandırılmış WordPress sayfalandırmasına değiştirebilirsiniz. Bugün, muhtemelen birden fazla dergi WordPress temasında karşılaştığınız resimlerin yer aldığı tek gönderi için sayfalandırma oluşturmaya odaklanmamızı istiyorum.

WordPress'i, temanın tasarımına bağlı olarak, bir sonraki gönderide küçük resim ve tek gönderinin altında veya üstte bir başlık ile görmek yaygındır.

Küçük Resim Örneği ile WordPress Sonraki Önceki Yazı

Örneğin, en çok satan WordPress dergi temalarından biri olan Gazete'de , tek gönderinin aşağıdaki resimde gösterildiği gibi küçük resimli bir sayfa numaralandırması olduğunu görebilirsiniz:

Yukarıdaki resim, küçük resmi olan bir sonraki önceki sayfalandırmaya sahip bir WordPress tek gönderisinin iyi bir örneğini temsil etmektedir.

Bu WordPress geliştirme öğreticisinin sonunda, oluşturduğumuz kodu WordPress eklentinize veya temanıza kolayca eklemeli ve WordPress'i Gazete WordPress temasında görüldüğü gibi küçük resim ile bir sonraki önceki gönderiyi görüntülemelisiniz.

Sonraki Önceki WordPress Sayfalandırma Kodu

Özetle, sahip olmanız gereken iki önemli kod parçacığı, önceki veya sonraki gönderiyi alan ve belirli bir gönderinin öne çıkan görüntüsünü (yanındaki veya önceki) alan bir kod parçacığıdır.

Bu derste örnek olarak, birkaç nedenden dolayı favorim olan Yirmi Onyedi varsayılan WordPress temasını kullanacağız; nedenlerinden biri basitliğidir.

Bu kod kesinlikle diğer tüm WordPress temalarında veya eklentilerinde çalışacaktır. Başlangıç ​​için, yayınlanan örnek bir gönderi ile temayı kurduk ve etkinleştirdik.

Başlarken

Aşağıdaki resimde de görüldüğü gibi okla gösterildiği gibi, gönderinin altında bir sonraki önceki gönderiler için sayfalama yoktur. Bu bölümde, küçük resim sayfalandırmasıyla bir sonraki önceki gönderiye WordPress ekleyeceğiz.

İlk adım, temanızdaki single.php dosyasını bulmaktır çünkü bu, kodu the_content()'in hemen altına ve döngünün içine ekleyeceğimiz dosyadır.

Single.php dosyasını bulduktan sonraki adım, iki WordPress temel işlevine atanmış iki $next ve $prev değişkeni oluşturmaktır; get_next_post() ve get_previous_post() aşağıdaki kod parçacığında gösterildiği gibi sırasıyla:

 <?php
$önceki = get_previous_post();
$sonraki = get_next_post();
?>

Bu iki işlev, çalışma biçimleri bakımından benzerdir; önceki işlev önceki gönderiyi alırken sonraki işlev sonraki gönderiyi objects olarak alır.

Gösteri için aşağıdaki resimde gösterildiği gibi üç gönderi yayınladım:

Şimdi önceki gönderi başlığını ve küçük resmi almamız ve ayrıca bunları, bağlantıları tıklanabilir hale getirmeye yardımcı olan ilgili kalıcı bağlantıyla a href tag emin olmamız gerekiyor:

 <a href="<?php echo get_permalink( $prev->ID ); ?>">

<?php echo application_filters( 'the_title', $prev->post_title ); ?>

<?php echo get_the_post_thumbnail($prev->ID, 'küçük resim'); ?>

</a>

Daha sonra, bir sonraki gönderi başlığını ve küçük resmi alırız ve ayrıca bir href etiketi ve bir sonraki gönderi için kalıcı bağlantı ile href etiketi değeri olarak sararız:

 <a href="<?php echo get_permalink( $next->ID ); ?>">

<?php echo application_filters( 'the_title', $next->post_title); ?>

<?php echo get_the_post_thumbnail($next->ID, 'küçük resim'); ?>

</a>

Bu noktaya kadar, WordPress'i bir sonraki önceki gönderiyi küçük resim ile görüntüleyebilen çalışan kodumuz var. Bu adıma kadar olan kodun tamamı aşağıda gösterildiği gibi olmalıdır:

 <?php

$önceki = get_previous_post();
$sonraki = get_next_post();

// önceki gönderi başlığı ve küçük resim

?>

<?php echo get_the_post_thumbnail($prev->ID, 'küçük resim'); ?>

<a href="<?php echo get_permalink( $prev->ID ); ?>">

<?php echo application_filters( 'the_title', $prev->post_title ); ?>

</a>

<?php

// sonraki gönderi başlığı ve küçük resim

?>

<?php echo get_the_post_thumbnail($next->ID, 'küçük resim'); ?>

<a href="<?php echo get_permalink( $next->ID ); ?>">

<?php echo application_filters( 'the_title', $next->post_title); ?>

</a>

<?php

Bu kodu single.php dosyasına ekleyin ve uygun PHP açılış ve kapanış etiketleriyle HTML'den çıktığınızdan emin olun ve dosyayı güncelleyin ve ardından ön uçtaki değişiklikleri kontrol edin.

Aşağıdaki resimde gösterildiği gibi başlığın görüntülendiği bir önceki gönderiyi ve sonraki gönderinin küçük resmini görmelisiniz:

WordPress Şekillendirme Önceki Sonraki Yazı

Şimdi iki divs tanıtmamız ve her bir gönderiyi her iki tarafta kaydırmamızı sağlamak için uygun stilleri eklememiz gerekiyor. Bunu, kodu aşağıda gösterildiği gibi iki divs ile sararak başarabiliriz:

 <div class="temizle düzeltme">

<?php

$önceki = get_previous_post();

$sonraki = get_next_post();

// önceki gönderi başlığı ve küçük resim

?>

<div class="post-box prevPost">

<a href="<?php echo get_permalink( $prev->ID ); ?>">

<?php echo application_filters( 'the_title', $prev->post_title ); ?>

<?php echo get_the_post_thumbnail($prev->ID, 'küçük resim'); ?>

</a>

</div>

<?php

// sonraki gönderi başlığı ve küçük resim

?>

<div class="post-box nextPost">

<a href="<?php echo get_permalink( $next->ID ); ?>">

<?php echo application_filters( 'the_title', $next->post_title); ?>

<?php echo get_the_post_thumbnail($next->ID, 'küçük resim'); ?>

</a>

</div>

</div>

<?php

Div'ler için sınıfları ekledikten sonra, şimdi aşağıda gösterildiği gibi CSS kullanarak stilleri uygulayabiliriz:

 * {
  kutu boyutlandırma: kenarlık kutusu;
} 

.posta kutusu {
  yüzer: sol;
  genişlik: %50;
}

.clearfix::sonra {
  içerik: "";
  ikisini de temizle;
  ekran: tablo;
}
.post-box.prevPost görseli {
    maksimum genişlik: %40;
    yükseklik: otomatik;
}
.post-box.nextPost görseli {
    maksimum genişlik: %40;
    yükseklik: otomatik;
}

Çözüm

Bu kodla, WordPress'in bir sonraki önceki gönderi sayfalandırmasını küçük resim ile kolayca ekleyebilirsiniz. Tek gönderi sayfalandırmasının görsel sunumunu iyileştirmek için daha iyi stiller de ekleyebilirsiniz. CSS kodunu ekledikten sonra, aşağıdaki resimde gösterildiği gibi iki yazının düzeninin göründüğünü görmelisiniz.

Koşullu bir ifade ekleyerek küçük resmin veya gönderinin var olup olmadığını kontrol etmeniz de önemlidir. Örneğin, $prev bölümünü aşağıda gösterildiği gibi bir koşulla sarabilirsiniz:

 <?php

$prev_ = get_previous_post();

if ( ! boş( $önceki ) ): ?>

    <a href="<?php echo get_permalink( $prev->ID ); ?>">

        <?php echo application_filters('the_title', $prev_post->post_title); ?>

    </a>

<?php endif; ?>

Kod doğrulama, WordPress geliştirmenin önemli bir parçasıdır ve gözden kaçırılmamalıdır. Umarım bu gönderi size biraz fikir vermiştir ve artık sitenize veya temanıza küçük resimli tek gönderi sayfalandırması ekleyebilirsiniz. WordPress blog sayfalandırmanın nasıl oluşturulacağını öğrenmek istiyorsanız, bu önceki öğreticiye göz atabilirsiniz – WordPress'te sayı sayfalandırma nasıl oluşturulur.

Daha fazla yardıma ihtiyacınız varsa, özellikle kodun nasıl çalıştığını anlamayan kullanıcılar için bir WordPress tema geliştiricisinden yardım alabilirsiniz. Ayrıca yardım için benimle iletişime geçebilirsiniz.