Cara Menambahkan WordPress Berikutnya Posting Sebelumnya dengan Thumbnail

Menambahkan pagination ke situs WordPress Anda seharusnya bukan proses yang rumit. Faktanya, dengan pengetahuan pemrograman yang minimal, Anda dapat dengan mudah mengubah paginasi posting default Anda menjadi pagination WordPress bernomor seperti yang diilustrasikan dalam tutorial saya sebelumnya tentang pagination WordPress numerik . Hari ini, saya ingin kita fokus pada pembuatan pagination untuk satu posting yang menampilkan gambar yang mungkin Anda temui di beberapa tema WordPress majalah.

Adalah umum untuk melihat WordPress posting sebelumnya berikutnya dengan thumbnail dan judul di bawah posting tunggal atau di atas tergantung pada desain tema.

WordPress Berikutnya Posting Sebelumnya dengan Contoh Thumbnail

Misalnya di salah satu tema majalah WordPress terlaris – Surat Kabar , Anda dapat melihat satu posting memiliki pagination dengan thumbnail seperti yang ditunjukkan pada gambar di bawah ini:

Gambar di atas merupakan contoh yang baik dari satu posting WordPress dengan pagination sebelumnya berikutnya yang memiliki thumbnail.

Pada akhir tutorial pengembangan WordPress ini, Anda harus dengan mudah menambahkan kode yang kami buat ke plugin atau tema WordPress Anda dan menampilkan posting WordPress berikutnya sebelumnya dengan thumbnail seperti yang terlihat di tema WordPress Koran.

Berikutnya Sebelumnya Kode Pagination WordPress

Singkatnya, dua cuplikan kode penting yang perlu Anda miliki adalah yang mendapatkan kiriman sebelumnya atau berikutnya dan satu lagi yang mengambil gambar unggulan dari kiriman tertentu (baik di sebelah atau sebelumnya)

Sebagai ilustrasi dalam tutorial ini, kita akan menggunakan tema WordPress default Twenty Seventeen yang menjadi favorit saya karena beberapa alasan; salah satu alasannya adalah kesederhanaannya.

Kode ini pasti akan berfungsi di semua tema atau plugin WordPress lainnya. Jadi sebagai permulaan, kami telah menginstal dan mengaktifkan tema dengan satu contoh posting tunggal yang diterbitkan.

Mulai

Seperti yang Anda lihat pada gambar di bawah seperti yang ditunjukkan oleh panah, di bawah posting tidak ada pagination untuk posting sebelumnya berikutnya. Di bagian ini, kami akan menambahkan posting sebelumnya WordPress berikutnya dengan pagination thumbnail.

Langkah pertama adalah mencari file single.php di tema Anda karena ini adalah file tempat kita akan menambahkan kode tepat di bawah the_content() dan di dalam loop.

Setelah Anda menemukan file single.php, langkah selanjutnya adalah membuat dua variabel $next dan $prev yang ditugaskan ke dua fungsi inti WordPress; get_next_post() dan get_previous_post() masing-masing seperti yang ditunjukkan pada cuplikan kode di bawah ini:

 <?php
$sebelumnya = get_previous_post();
$selanjutnya = get_next_post();
?>

Kedua fungsi ini serupa dalam cara kerjanya; fungsi sebelumnya mengambil posting sebelumnya sedangkan fungsi berikutnya mengambil posting berikutnya sebagai objects .

Untuk demonstrasi saya telah menerbitkan tiga posting seperti yang ditunjukkan pada gambar di bawah ini:

Sekarang kita perlu mendapatkan judul posting sebelumnya dan thumbnail dan juga memastikan kita membungkusnya dalam a href tag dengan permalink masing-masing yang membantu membuat tautan dapat diklik:

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

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

<?php echo get_the_post_thumbnail($prev->ID, 'thumbnail'); ?>

</a>

Selanjutnya, kita mendapatkan judul posting berikutnya dan thumbnail dan juga membungkus dengan tag href dan permalink untuk posting berikutnya sebagai nilai tag href:

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

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

<?php echo get_the_post_thumbnail($next->ID, 'thumbnail'); ?>

</a>

Sampai saat ini, kami memiliki kode yang berfungsi yang dapat menampilkan WordPress posting sebelumnya berikutnya dengan thumbnail. Kode lengkap hingga langkah ini harus seperti yang ditunjukkan di bawah ini:

 <?php

$sebelumnya = get_previous_post();
$selanjutnya = get_next_post();

// judul dan gambar mini posting sebelumnya

?>

<?php echo get_the_post_thumbnail($prev->ID, 'thumbnail'); ?>

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

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

</a>

<?php

// judul dan gambar mini posting berikutnya

?>

<?php echo get_the_post_thumbnail($next->ID, 'thumbnail'); ?>

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

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

</a>

<?php

Tambahkan kode ini ke file single.php dan pastikan Anda keluar dari HTML dengan tag pembuka dan penutup PHP yang sesuai dan perbarui file kemudian periksa perubahan di frontend.

Anda akan melihat posting sebelumnya dan thumbnail posting berikutnya dengan judul yang ditampilkan seperti yang ditunjukkan pada gambar di bawah ini:

Menata WordPress Posting Sebelumnya Berikutnya

Sekarang kita perlu memperkenalkan dua divs dan menambahkan gaya yang sesuai untuk memastikan kita mengapungkan setiap posting di setiap sisi. Kita dapat mencapai ini dengan membungkus kode dengan dua divs seperti yang ditunjukkan di bawah ini:

 <div class="clearfix">

<?php

$sebelumnya = get_previous_post();

$selanjutnya = get_next_post();

// judul dan gambar mini posting sebelumnya

?>

<div class="post-box prevPost">

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

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

<?php echo get_the_post_thumbnail($prev->ID, 'thumbnail'); ?>

</a>

</div>

<?php

// judul dan gambar mini posting berikutnya

?>

<div class="post-box nextPost">

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

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

<?php echo get_the_post_thumbnail($next->ID, 'thumbnail'); ?>

</a>

</div>

</div>

<?php

Setelah menambahkan kelas untuk div, sekarang kita dapat menerapkan gaya menggunakan CSS seperti yang ditunjukkan di bawah ini:

 * {
  ukuran kotak: kotak perbatasan;
} 

.kotak pos {
  mengapung: kiri;
  lebar: 50%;
}

.clearfix::setelah {
  isi: "";
  jelas: keduanya;
  tampilan: meja;
}
.post-box.prevPost img {
    lebar maksimum: 40%;
    tinggi: otomatis;
}
.post-box.nextPost img {
    lebar maksimum: 40%;
    tinggi: otomatis;
}

Kesimpulan

Dengan kode ini, Anda dapat dengan mudah menambahkan pagination posting WordPress berikutnya sebelumnya dengan thumbnail. Anda juga dapat menambahkan gaya yang lebih baik untuk meningkatkan presentasi visual dari pagination posting tunggal. Setelah menambahkan kode CSS Anda akan melihat tata letak dua posting muncul seperti yang ditunjukkan pada gambar di bawah ini

Penting juga bagi Anda untuk memeriksa apakah ada thumbnail atau postingan dengan menambahkan pernyataan bersyarat. Misalnya, Anda dapat membungkus bagian $prev dengan kondisi seperti yang ditunjukkan di bawah ini:

 <?php

$prev_ = get_previous_post();

jika ( ! kosong( $prev ) ): ?>

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

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

    </a>

<?php endif; ?>

Validasi kode adalah bagian penting dari pengembangan WordPress dan tidak boleh diabaikan. Saya harap posting ini memberi Anda beberapa wawasan dan sekarang Anda dapat menambahkan pagination posting tunggal dengan thumbnail di situs atau tema Anda. Jika Anda ingin mempelajari cara membuat pagination blog WordPress, Anda dapat melihat tutorial sebelumnya – cara membuat nomor pagination di WordPress.

Jika Anda membutuhkan bantuan lebih lanjut, Anda bisa mendapatkan bantuan dari pengembang tema WordPress terutama bagi pengguna yang tidak mengerti cara kerja kode. Anda juga dapat menghubungi saya untuk meminta bantuan.