Cara custom WordPress Jetpack related postd jadi lebih indah

Related post bagi saya adalah fitur yang wajib ada pada sebuah blog.

Kenapa?

Karena related post dapat membuat pengunjung menjadi lebih lama mengunjungi blog. Dapat membuat bounce-rate lebih rendah.

Jika dalam website penjualan, hal ini dapat membuat penjualan lebih banyak.

Akan tetapi, di WordPress, fitur ini termasuk fitur yang berat. Fitur ini jika digunakan sembarangan, dapat membuat loading blog Anda menjadi berat.

Tentu Anda tidak ingin membuat blog Anda menjadi berat bukan.

Other related post vs. Jetpack related post

Ada banyak plugin related post di WordPress, ada yang gratis, ada yang bayar.

Tapi jangan salah, menurut saya, plugin related post yang gratis sudah sangat baik. Bahkan menurut saya tidak ada bedanya.

Related post ini biasanya bekerja dengan cara membuat query khusus yang akan memilih postingan berdasarkan tag atau category yang sama.

Nah, di sinilah kenapa related post itu bisa membuat blog jadi lebih lambat.

Karena query related post biasanya tidak efesien.

Bahkan ada beberapa hosting yang mem-banned plugin related post tertentu.

Berbeda dengan kebanyakan plugin related post. Yang menjadi pembeda Jetpack Related Post adalah cara dia bekerja.

Jetpack Related Post tidak memberatkan server blog kita. Semua proses membuat suggestion related post dilakukan di cloud (tidak di server blog).

Setup Jetpack related post

Anda dapat menginstall Jetpack Related Post ini melalui Jetpack plugin. Setelah Berhasil install, Anda harus connect blog Anda dengan Jetpack…

…tentunya, Anda harus membuat akun di wordpress.org terlebih dahulu.

Untuk mengaktifkan related postnya, masuk ke traffic > related posts.

Setup Jetpack related posts
gambar 1. Setup Jetpack related posts

Di bagian ini Anda dapat melakukan konfigurasi terhadap related posts-nya. Anda bisa membuat apakah related post tersebut menampilkan gambar, tanggal, atau kategori.

Nah, selain itu. Di theme setting Anda bisa menentukan seperti apa tampilan related post Jetpack ini.

Related post theme setting
gambar 2. Related posts theme setting

Di tahap ini Anda sudah dapat melihat related posts-nya.

Tetapi, apakah Anda sudah cukup puas dengan tampilan related posts-nya?

Saya sendiri kurang begitu puas dengan tampilannya. Tampilannya terlalu standar, jika saya sebagai pengunjung, saya kurang begitu suka.

Custom Jetpack Related Posts

Jetpack memberikan kebebasan penggunanya untuk melakukan custom related posts mereka.

Jika Anda cukup tahu PHP dan hook WordPress Anda bisa melakukan apa saja melalui hook Jetpack related posts. Anda bisa menyisipkan post tertentu di related post, merubah berapa banyak size related post-nya, dll.

…saya akan membahas lebih detail tentan custom jetpack ini di tulisan kedepan.

Di sini, saya kurang puas dengan tampilan related posts-nya. Saya akan coba membuat related post ini lebih indah.

Before custom Jetpack related posts
gambar 3. Before custom Jetpack related posts

Nah, yang perlu Anda tambahkan adalah kode css di bawah ke dalam css theme Anda. Di sini saya merubah tampilan untuk ukuran layar mobile dan desktop.

/** RELATED POSTS **/

#jp-relatedposts {
	width: 500px;
} 

#jp-relatedposts .jp-relatedposts-list .jp-relatedposts-post img.jp-relatedposts-post-img {
	border-radius: 8px;
	border: 1px solid var(--border-color-main);
}

#jp-relatedposts .jp-relatedposts-list h4.jp-relatedposts-post-title {
	padding-bottom: 10px;
}

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}

@media only screen and (max-width: 640px) {
	#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post {
		width: 100%;
	}
	#jp-relatedposts .jp-relatedposts-list h4.jp-relatedposts-post-title {
		max-width: 60%;
	}
	
}

@media only screen and (max-width: 480px) {
	#jp-relatedposts {
		width: 100%;
	}
	#jp-relatedposts .jp-relatedposts-list .jp-relatedposts-post img.jp-relatedposts-post-img  {
		max-width: 100%;
	}
	#jp-relatedposts .jp-relatedposts-list .jp-relatedposts-post img.jp-relatedposts-post-img, #jp-relatedposts .jp-relatedposts-list h4.jp-relatedposts-post-title {
		width: 100%;
		margin-right: 0;
		float: none;
	}
	#jp-relatedposts .jp-relatedposts-list h4.jp-relatedposts-post-title {
		padding-bottom: inherit;
		max-width: 100%;
	}
	h4.jp-relatedposts-post-title {
		padding-top: 8px
	}
	#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post {
		padding-right: 0;
	}
}

/** END RELATED POSTS **/

Untuk mobile, saya berikan size gambar 100%, font saya bikin lebih besar.

Untuk desktop saya hanya merubah typography dan radius dari gambar. Tetapi hasilnya jadi lebih halus.

Tampilannya akan berubah kurang lebih menjadi seperti ini:

After custom related posts
gambar 4. After custom related posts

Jika Anda masih merasa kesulitan di mana menambahkan kode css di atas, Anda dapat membuka theme setting, lalu buka custom css.

Anda hanya perlu paste kode css di atas di custom css theme Anda. Dan Violla! tampilan related post-nya jadi berubah.

**

Saya garis bawahi lagi. Jetpack related post ini jauh lebih ringan dibanding plugin related post sejenis. Karena proses membuat related post tidak dilakukan di server blog kita, tetapi di cloud WordPress.

Selamat mencoba dan Happy blogging ๐ŸŽ‰๐ŸŽ‰

Tinggalkan komentar