Memampilkan Artikel Terkait Jetpack Lebih Dari Tiga, Agar Related Post Jetpack Keren – Menampilkan artikel terkait di bagian bawah postingan di WordPress memiliki manfaat untuk mempermudah pengunjung dalam melihat artikel lain yang masih relevan. Hal ini sangat penting untuk meningkatkan jumlah tampilan halaman dan juga bermanfaat dalam mengurangi tingkat penolakan pengunjung (bounce rate).

Namun, fitur Jetpack secara default hanya menyediakan tiga artikel terkait untuk setiap postingan, baik pada tampilan mobile maupun desktop. Lalu bagaimana jika ingin menampilkan lebih dari tiga artikel, misalnya empat atau enam artikel? Bagaimana pula jika ingin menampilkan jumlah yang berbeda antara tampilan desktop, tablet, dan mobile? Jawabannya adalah dengan mengedit kode PHP.

Berikut adalah kode PHP untuk mengubah jumlah artikel terkait jetpact menjadi enam :


function jetpackme_more_related_posts( $options ) {
    $options['size'] = 6;
    return $options;
}
add_filter( 'jetpack_relatedposts_filter_options', 'jetpackme_more_related_posts' );

Catatan: Jika ingin menampilkan empat artikel atau jumlah yang lain, cukup mengganti angka pada bagian `’size’`.

Untuk menampilkan jumlah artikel terkait yang berbeda antara tampilan mobile, tablet, dan desktop, terkadang hal ini perlu dilakukan untuk alasan tertentu. Misalnya, untuk memaksimalkan fokus pada artikel, sehingga cukup menampilkan empat artikel pada tampilan mobile, namun harus menampilkan enam artikel untuk tablet dan desktop.

Mengapa harus enam? Karena ruang pada tampilan desktop terlalu besar. Jika hanya ditampilkan empat, akan terjadi sisa ruang yang membuat tampilan tidak efisien secara estetika.

Berikut adalah kode untuk mengatur jumlah artikel terkait yang tampil: empat artikel pada tampilan mobile, enam artikel pada tampilan tablet dan desktop:


function jetpackme_more_related_posts( $options ) {
    if (wp_is_mobile()) {
        $options['size'] = 4;
    } else {
        $options['size'] = 6;
    }
    return $options;
}
add_filter( 'jetpack_relatedposts_filter_options', 'jetpackme_more_related_posts' );

Penting! : Kamu tidak bisa menjalankan kedua kode di atas secara bersamaan. Harus memilih salah satu yang ingin ditampilkan, apakah ingin menampilkan enam artikel terkait untuk semua tampilan, atau empat pada tampilan mobile dan enam pada tampilan tablet dan desktop.

Jumlah artikel yang ditampilkan dapat diubah sesuai kebutuhan.

Selanjutnya, untuk memperbaiki tampilan thumbnail artikel terkait dengan Jetpack, kita dapat menggunakan kode CSS berikut:


/* Agar penyebaran merata di dalam kolom perangkat */
#jp-relatedposts {
    width: 90%;
    margin: 0 auto;
}

/* Agar satu baris berisi dua thumbnail artikel */
@media only screen and (max-width: 640px) {
    div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post:nth-child(3n+4),
    div#jp-relatedposts div.jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(3n+4) {
        clear: right;
    }
    div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post:nth-child(3n+6) {
        clear: right;
    }
    div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post:nth-child(3) {
        clear: left;
    }
    .jp-relatedposts-items-visual {
        margin-right: -20px !important;
    }
}

/* Agar gambar memiliki tingkat kecerahan 100% */
#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post {
    opacity: 100;
}

Dengan cara ini, tampilan artikel terkait akan lebih rapi dan menarik, terutama pada tampilan mobile.

Semua ini dapat diimplementasikan dengan mudah melalui penyesuaian CSS pada pengaturan tampilan (customizer) situs WordPress Anda.

Reviews

100 %