Posted on

Tips-trik Kustomisasi Prev Next Post WordPress

wpJakarta.Com – Tips-trik Kustomisasi Prev Next Post WordPress. Website wpJakarta.Com menggunakan tema website storefront by WooCommerce. Kami memilih storefront karena ingin flexibilitas atau bebas kustomisasi via hook dan yang pasti bisa lari kencang karena tema website ini masih tergolong plain. Dan yang pasti tema website storefront 101% kompatibel dengan WordPress ataupun WooCommerce.

Artikel WordPress lainnya

Kustomisasi prev next post WordPress storefront by WooCommerce

“Prev Next” yang di maksud adalah dua navigasi ke kanan dan ke kiri yang di gunakan sebagai link ke post sebelumnya atau post setelah. DI website WordPress umum terlihat di bagian bawah setiap post. Bukan hanya WordPress, hampir di semua platform website pasti ada navigasi tersebut. Baik tema website premium atau free juga ada prev next post tersebut. Hanya saja desainya yang berbeda-beda di setiap tema.

Khusus tema website storefront, “prev next post terlihat sangat sederhana. Atau sudah bisa di bilang jadul. Maklum karena storefront adalah tema dasar khusus untuk mengakomodasi WooCommerce. WooCommerce memang sengaja membuatnya plain, karena biasanya storefront di gunakan lagi orang para user atau developer untuk mengembangkan tema baru yang berbasis storefront (storefront framework).

Artikel WooCommerce lainnya

Tips-trik Kustomisasi Prev Next Post WordPress tema website storefront

Kami sangat tidak puas melihat prev next post di tema website storefront. Lalu berfikir untuk sedikit memodifikasinya tanpa banyak perubahan. Tidak perlu membuat “section” baru atau tambahin banyak kode. Jadilah kustomisasi ringan yang kami lakukan. Yaitu dengan memberikan kotak dengan box shadow di tambah animasi transisi saat hover (ketika di tunjuk mouse). Kustomisasi simple ini hanya menambahkan beberapa baris CSS saja. Contohnya bisa terlihat seperti pada gambar berikut. Atau coba scroll ke bagian bawah lalu hover over prev next post di halaman ini.

Tips-trik Kustomisasi Post WordPress

Artikel lainnya

Kustomisasi prev next post WordPress dengan menambahkan kode CSS

Berikut adalah kode CSS yang di tambahkan. Perubahan karena penambahan script CSS tersebut juga aman pada tampilan handphone.


/* Prev-Next Post */
#post-navigation {
	border-top:1px solid #ba0c49;
	margin-top:3em;
}

.site-main nav.navigation .nav-previous, .site-main nav.navigation .nav-next {
	border:1px solid #ba0c49;
	padding:2em;
	width:65%;
	margin-bottom:0.5em;
	transition:width 3s;
	background-image:linear-gradient(to right, rgba(255,0,0,0), rgba(186,12,73,1));
}

.site-main nav.navigation .nav-previous:hover, .site-main nav.navigation .nav-next:hover {
	box-shadow:2px 2px 4px #ba0c49;
	width:100%;
}

Jika anda juga menggunakan tema website storefront. Kode di atas bisa langsung di copy paste karena menggunakan ID dan selector asli storefront. Tips-trik kustomisasi prev next post WordPress tentu bisa di sesuaikan dengan gaya anda sendiri menambahkan style kode CSS lainnya. Tampilan, warna, shadow atau animasi lainnya tentu bisa di sesuaikan.