Tips-trik Kustomisasi Prev Next Post WordPress

wpJakarta.Com

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

Tentang tema website storefront

Lainnya adalah karena tema website storefront 101% kompatibel dengan WordPress ataupun WooCommerce. Tema website Storefront dibangun dan dikelola oleh developer WooCommerce itu sendiri. Sehingga kami yakin bahwa integrasi antara storefront dan plugin WooCommerce atau ekstensi WooCommerce dapat benar-benar kompatibel. Bahkan dengan plugin eksternal lain pun bisa di pastikan akan kompatibel. WooCommerce adalah plugin utama untuk membuat toko online pada platform WordPress. Maka sudah barang tentu pengembang plugin akan menyesuaikan dengan standar plugin WooCommerce itu sendiri

Artikel WordPress lainnya

Tips-trik kustomisasi post WordPress (prev – next)

“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). Di sini kami membuat sedikit Tips-trik kustomisasi post WordPress (prev – next) agar terlihat lebih baik.

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). Tips-trik kustomisasi post WordPress (prev – next) ini sangat simple. Karena 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.

Artikel lainnya

Tips-trik kustomisasi post WordPress (Prev – next) hanya dengan menambahkan kode CSS

Berikut adalah kode CSS yang di tambahkan. Selain ringan karena murni hanya menambahkan kode CSS dan tanpa membuat element baru. Tips-trik kustomisasi post WordPress (Prev – next) dengan hanya menambahkan script CSS tersebut juga aman pada tampilan handphone (mobile friendly).


/* 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 post WordPress (prev – next) tentu bisa di sesuaikan dengan gaya anda sendiri menambahkan style kode CSS lainnya. Tampilan, warna, shadow atau animasi lainnya tentu bisa di sesuaikan.