
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 Prev Next Post WordPress
- Untuk Website WordPress, Pilih myISAM atau InnoDB
- Tips-trik Kustomisasi Footer WordPress
- Tips-trik Membuat Dan Kustomisasi Topbar WordPress
- Tips-trik Menampilkan Jumlah View Halaman WordPress
- Tips-trik Membatasi Jumlah Revisi Post Website WordPress
- Tips-trik Mengatasi WordPress Error Establishing a Database Connection
- The Response Is Not A Valid JSON Response
- Tutorial WordPress
- Tips-trik Membuat Author Box WordPress
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 Halaman Checkout WooCommerce
- Tips-trik Menambahkan Teks Pada Halaman Login WooCommerce
- Tips-trik Membuat Deskripsi Pendek Produk Pada Halaman Belanja WooCommerce
- Tips-trik Kustomisasi Halaman Produk WooCommerce
- Tips-trik Membuat Produk WooCommerce
- Menampilkan Harga Yang Berbeda Pada Masing-Masing Kustomer WooCommerce
- Tips-trik Merubah Teks No-Shipping Available WooCommerce
- Memindahkan Deskripsi Kategori Produk WooCommerce Ke Bagian bawah
- Menambahkan Gambar Checkout Aman Pada Halaman Single WooCommerce
- Membuat Menu Sosial Media Pada Tema Storefront WooCommerce
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
- Desain Ulang Website Freshplus62.Com
- Daftar Iklan Alternatif Selain Google Adsense
- Remove BG – Tools Online Remove Background
- Kaos Sablon WordPress Murah Di wpJakarta
- Merchandise WordPress Dan WooCommerce Murah Di wpJakarta
- Insight dan Data Industri Laundry di Indonesia (pengalaman selama 10 tahun QnC Laundry)
- Waralaba Usaha Laundry Kiloan oleh QnC Laundry
- Perbedaan Kol Dan Kubis ?
- Apa Itu Cornerstone Content
- Cari Website Guest Posting Gratis, Aman Dan Terpercaya
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.