Dalam artikel kali ini teknologi[dot]visitklaten[dot]com akan berbagi cara membuat custom previous post dan next post di wordpress. Previous post dan next post akan sangat membantu pengunjung untuk melihat artike lain dalam sebuah website. Tentu saja hal ini akan membuat trafik website akan menjadi lebih besar.
Dengan adanya fitur previous post dan next post ini pengunjung akan melihat artikel sebelum dan sesudah artikel yang dibuka. Dengan begitu mugkin saja akan tertarik untuk melihatnya.
Bisa jadi artikel yang dibuat adalah artikel berkelanjutan jadi dengan adanya fitur ini maka pengunjung bisa melihat artikel sebelumnya atau kelanjutan dari artikel yang baru dibaca.
Sebelumnya kami mengucapkan terima kasih kepada para pengunjung teknologi[dot]visitklaten[dot]com yang rela meluangkan waktunya untuk mengunjungi website kami yang masih banyak kekurangan ini. Kami menerima segala masukkan dan kritikan agar web dan diri kami menjadi lebih baik lagi.
Pada umumnya navigasi previous post dan next post dalam sebuah website adalah berupa link judul saja. Sekarang teknologi[dot]visitklaten[dot]com akan berbagi dengan menambahkan gambar thumbnail atau gambar mini. Sehingga tampilan menjadi lebih menarik dan terlihat profesional.
Mari, langsung saja berikut Cara Membuat Custom Previous Post Dan Next Post Di WordPress tanpa tambahan plugin.
Catatan, ada tambahan css dari bootstrap, sehingga apabila hasil tampilan tidak sama kemungkinan karena dari style CSS,nya yang nanti bisa diedit sesuai kebutuhan.
Membuat Custom Previous Post Dan Next Post
Langkah pertama adalah membuka file “single.php” di dalam tema dan tambahkan kode dibawah ini di dalam loop yang biasanya setelah area “the_content()”.
<div class="row m-0">
<div class="prev-posts col-sm-6 p-1">
<?php
$prev_post = get_previous_post();
if($prev_post) {
$prev_title = strip_tags(str_replace('"', '', $prev_post->post_title));
echo "\t" . '<a rel="prev" href="' . get_permalink($prev_post->ID) . '" title="' . $prev_title. '" class="link-theme">
<div class="row m-0"><div class="col-4 p-1 vk-thumbnail"><img src="'.get_the_post_thumbnail_url($prev_post->ID,'thumbnail').' " alt=""/></div>
<div class="col-8 p-1 text-left"><strong><<< SEBELUMNYA </strong></br>'. $prev_title . '"</div></div></a>' . "\n";
}
?>
</div>
<div class="next-posts col-sm-6 p-1">
<?php
$next_post = get_next_post();
if($next_post) {
$next_title = strip_tags(str_replace('"', '', $next_post->post_title));
echo "\t" . '<a rel="prev" href="' . get_permalink($next_post->ID) . '" title="' . $next_title. '" class="link-theme">
<div class="row m-0"><div class="col-8 p-1 text-right"><strong>SELANJUTNYA >>></strong></br>'. $next_title . '"</div>
<div class="col-4 p-1 vk-thumbnail"><img src="'.get_the_post_thumbnail_url($next_post->ID,'thumbnail').' " alt=""/></div></div></a>' . "\n";
}
?>
</div>
</div>
Langkah berikutnya adalah membuka file style.css dan tambahkan style berikut (bisa ditambahkan style yang lain)
.vk-thumbnail img {
height: 110px;
object-fit: cover;
width: 100%;
}
Untuk hasil atau tampilannya bisa dilihat dibawah ini
Terima kasih telah mengunjungi website kami.
Share jika bermanfaat, jika ada kritik, tambahan, pertanyaan atau saran silakan hubungi kami atau silakan isi di kolom komentar.
Info Tambahan
Sekilas info apabila berminat dan semoga berminat, Apabila ingin mengiklankan usahanya yang khususnya berada wilayah klaten (selain dari klaten juga boleh banget) maka bisa memasang iklan di https://www.visitklaten.com/pasang-iklan/ .
Kelebihannya dari iklan ini apabila diketikan kata kunci dan ditambah dengan kata “klaten” maka kesempatan muncul di halaman pertama google akan semakin besar. Selain itu yang tak kalah menarik ada diskonnya….
Tersedia juga iklan dalam bentuk banner. Apabila ingin beriklan di web inipun juga bisa, silakan Chat WA saja. Untuk wilayah selain klaten juga boleh banget seperti solo, jogja, boyolali, dll.
Komentar