Cara Custom Related Post JetPack, Tampil Bagus dan Tidak Berantakan

Yabdhi.com – Custom Related Post JetPack untuk Atasi Tampilan yang Tak Sedap Dipandang – Jika Sobat adalah blogger atau webmaster yang menggunakan platform WordPress, tentu sangat mengenal plugin JetPack dan kemungkinan menggunakannya juga.

Plugin jetpack punya banyak fitur dalam satu paket yang lengkap, salah satu yang penting adalah fitur ‘Related Post’ yang akan menampilkan rekomendasi artikel pada pembaca blog, agar berlama-lama berada blog tersebut.

Namun masalahnya adalah tampilan Related Post JetPack tersebut sangat tidak menarik, bahkan terkesan membuat blog berantakan jika digunakan, khususnya di versi mobile yang trafiknya paling tinggi. Saya mencoba mengutak-atik tampilan related post tersebut agar bisa terlihat bagus layaknya menggunakan plugin khusus related post.

Dari berbagai saran di forum WordPress, saya dapatkan beberapa coding yang bekerja sangat baik di blog otomotif saya ‘CaruserMagz.com‘. Alhasil, saya tidak perlu menggunakan plugin khusus Related Post atau bawaan thema yang terlihat kurang menarik.

Mengapa harus menggunakan fitur Related Post JetPack?

Jika Sobat menggunakan versi AMP, maka related post jetpack juga akan tampil di thema AMP versi gratisan. Sedangkan related post bawaan thema WP atau dari plugin khusus related post tidak akan tampil di versi AMP. Selain itu, related post bawaan thema AMP gratisan juga sering fail (gagal) menampilkan related post.

Selain itu, JetPack adalah plugin yang mengandung banyak fitur, sehingga sayang jika volume data yang sudah mengambil space di hosting kita, tidak dimamfaatkan, bahkan kita mengistall plugin lain khusus related post yang tentunya mengurangi space data.

Cara Menampilkan Related Post Jetpack

Sebelumnya kita mesti menginstall plugin JetPack lalu mengaktifkannya. Kemudian untuk menampilkan related post di bawah artikel, kita harus membuka pengaturan atau setting JetPack sebagai berikut:

• Klik ‘JetPack‘ di Dashboard WP
• Pilih ‘Settings‘ atau ‘Pengaturan‘
• Pilih ‘Traffic‘
• Kemudian klik semua tombol pada kolom related post
• Klik ‘Configure Related Post in The Customizer‘

Setelah masuk ke halamam Cusomize, lakukan hal berikut:

• Jika belum terbuka halaman pengaturan related post jetpack, scroll ke bawah lalu pilih ‘Related Post‘.
• Centang ‘Show Headline‘ dan ‘Show Thumbnail‘
• Ketikkan judul headline yang kamu inginkan, misalnya ‘BACA ARTIKEL MENARIK LAINNYA‘ atau ‘ARTIKEL TERKAIT‘.
• Pilih Layout ‘Grid‘
• Tekan ‘Publish‘ (Dibagian atas).

Setelah itu kamu bisa buka salah satu halaman posting untuk melihat apakah Related Post JetPack sudah tampil di bawah postingan. Jika sudah, biasanya tampilannya tidak menarik dan hanya ada 3 judul postingan. Untuk menampilkan lebih dari 3 judul, ikuti langkah berikut:

Menampilkan Lebih dari 3 Artikel Terkait di Bawah Artikel

Letakkan kode di bawah ini dengan mengedit ‘function.php‘ pada editor thema, caranya sebagai berikut:

• Buka Dashboard, kemudian pilih ‘Apprearance‘ atau ‘Tampilan‘
• Pilih ‘Theme Editor‘ di bagian paling bawah
• Pilih ‘Function.php‘
• Scroll ke Paling Bawah
• Paste Kode berikut kemudian klik ‘Update File‘ di bagian bawah.

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

Kamu bisa menentukan berapa jumlah related post yang ingin ditampilkan. Sebaiknya pilih angka kelipatan 3 dan angka genap misalnya 6 atau 12, agar simetris karena nantinya di versi dekstop akan tampil 3 judul per baris dan di versi mobile tampil 2 judul per baris.

Custom Related Post JetPack di Blog WordPress

Setelah tampil, penampakan related post jetpack secara default tidaklah menarik, antara lain warna text judul postingnya akan sesuai warna link, posisinya tidak center, ukuran text headline dan judul posting-nya kecil dan saat dibuka pada versi mobile, tata letaknya akan kacau.

Selanjutnya beberapa hal perlu disetting untuk mendapatkan tampilan yang kece. Ikuti langkah-langkah di bawah ini, atau langsung ke akhir posting untuk paket coding lengkap sekaligus.

Buka halaman Customize pada dashboard wordpress, kemudian pilih ‘Additional CSS‘. Copy-paste kode-kode di bawah ini di kolom codingnya, lalu tekan ‘Publish‘ jika sudah selesai.

Mengatasi Display Tidak Center di Versi Dekstop

Tampilan Related Post JetPack cenderung akan rata kiri, sehingga tidak sedap dipandang. Untuk membuatnya rata tengah, hingga menyesuaikan dengan letak posting artikel, copas coding berikut:

#jp-relatedposts {
    width: 100%;
    margin: 0 auto;
}

Tampilan Related Post Jetpack Kacau di Versi Mobile

Di versi Mobile atau smartphone, tampilan related post jetpack hanya memuat dua posting per baris, sedangkan 1 lagi judul akan berada di bagian bawah dan menyisakan ruang kosong di kanannya. Ini terlihat tidak menarik dan blog jadi terkesan asal-asalan.

Untuk membuatnya lebih rapi dengan dua judul per baris dan tetap berada di tengah pada versi mobile, copas coding berikut ke ‘Additional CSS‘.

@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;
	}
}

Ganti Judul Posting Related Post jadi tidak Sewarna Text-link

Kode di bawah ini adalah untuk mengganti warna Judul posting Related Post JetPack agar tidak sewarna dengan warna link standar di blog Sobat. Warna tersebut saya arahkan menjadi warna hitam, untuk mengganti dengan warna lain, ganti kode #000000 dengan kode warna lain.

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a {color: #000000;}

Ganti Ukuran dan Tebal Huruf Judul Related-Post

Jika dirasa ukuran huruf default dari Related Post JetPack terlalu kecil, bisa diganti dengan kode di bawah ini. Untuk ukuran dan ketebalan yang berbeda, silahkan ganti angka ’17’ dan angka ‘600’.

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a {font-size: 17px; font-weight: 600;}

Pengaturan ukuran huruf ini bisa digabung dengan setting untuk warna text judul related post melalui kode berikut:

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a {color: #000000; font-size: 17px; font-weight: 600;}

Ganti Ukuran dan Tebal Huruf Headline

Headline related post jetpack biasanya terlalu kecil dan seadanya, untuk mengganti ukuran dan ketebalannya, juga warna bila diperlukan bisa melalui kode berikut:

#jp-relatedposts h3.jp-relatedposts-headline {font-size: 18px; font-weight: bold;}

Ukuran huruf bisa diubah-ubah sesuai kebutuhan dengan pengganti angka ‘18‘ pada coding di atas. Ketebalan huruf juga bisa diatur dengan mengubak kata ‘bold‘ menjadi angka semisal 600 atau 700 untuk yang lebih tebal.

Mengatasi Related Post tampil Buram karena Opacity Kecil

Satu permasalahan lagi yang membuat tampilan Related Post JetPack tidak menarik adalah setting default tampilan yang buram, kemudian baru akan terlihat jelas jika cursor diarahkan ke related post. Itu karena tampilan yang jelas disetting sebagai hover.

Untuk mengembalikan setting ke yang lebih cerah atau tampilan warna sebenarnya dari gambar dan text related post, copas kode berikut:

#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post {opacity: 100;}

Baca juga: Thema Worpress Gratis Cantik, Tanpa Kredit Link dan Bisa Dicustom

Paket Coding Lengkap Custom Related Post JetPack di ‘Additional CSS’

Jika ingin lebih simpel dan instan, kamu bisa copas paket coding berikut ke kolom ‘Additional CSS‘ pada kolom Customisasi Thema WordPress blog, kemudian klik ‘Publish‘. Jangan lupa ganti angka-angka ukuran atau kode warna sesuai kebutuhan sebelum klik ‘Publish‘.

#jp-relatedposts {
    width: 100%;
    margin: 0 auto;
}

@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;
	}
}

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a {color: #000000; font-size: 17px; font-weight: 600;}

#jp-relatedposts h3.jp-relatedposts-headline {font-size: 18px; font-weight: bold;}

#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post {opacity: 100;}

Hasilnya pada versi Dekstop adalah seperti pada screenshot berikut:

Kemudian pada versi Mobile atau tampilan di smartphone, akan lebih rapi seperti pada tampilan di bawah ini:

Demikian, semoga artikel ini bermamfaat bagi Sobat blogger yang menggunakan platform WordPress. Jika ada pertanyaan atau masukan terkait topik ini, jangan segan untuk berbagai di kolom komentar.