Putri Aprilia Putri is an SEO Content Writer at Niagahoster. She has experience in SEO writing with business and tech topic.

Cara Menambahkan Custom Pagination WordPress Tanpa Ribet!

4 min read

Cara Menambahkan Custom Pagination WordPress

Anda sedang mencari cara menambahkan fitur pagination WordPress? Wah, Anda sudah menemukan artikel yang tepat nih! Kali ini kami akan menjelaskan tentang pagination WordPress dengan lengkap.

Pagination memang cara termudah menelusuri postingan Anda. Jadi, akan membuat pengunjung di website semakin nyaman. Bahkan, pagination bisa membuat website tersebut jadi lebih SEO-friendly

Kok bisa ya?  Santai, penjelasan mengenai manfaat pagination juga akan kami bahas di artikel ini.

Nah, sebelum masuk ke pembahasan tentang cara dan manfaatnya, mari simak terlebih dahulu pengertian pagination WordPress berikut ini.

Apa itu Pagination WordPress?

Pagination adalah fitur untuk membagi konten website menjadi beberapa halaman agar memudahkan pengunjung melakukan navigasi. 

Bayangkan, blog Anda punya banyak postingan. Semua artikel tersebut ditampilkan dalam satu halaman. Yang akan terjadi, pengunjung tentunya harus scroll terus menerus untuk mengakses semua konten Anda. Tentu ribet, kan?

Nah, dengan adanya pagination WordPress, semua ini bisa dihindari.

Katakanlah secara default, WordPress pagination menentukan satu halaman berisi sepuluh artikel. Artinya, setelah sepuluh artikel tersebut, artikel lain akan ditampilkan pada halaman berikutnya.

Tanpa perlu scroll jauh ke bawah, WordPress akan menampilkan menu Next dan Previous atau Older Post di bagian bawah halaman seperti ini:

default pagination WordPress

Nah, bagaimana jika Anda ingin mengatur setiap halaman website hanya berisi 6 posting saja?

Tak perlu khawatir. Anda bisa mengatur jumlahnya melalui pengaturan di dashboard WordPress. Cukup klik Settings > Reading.

Mengatur Jumlah Postingan di Setiap Halaman

Lalu, ganti jumlah blog yang ditampilkan dengan angka 6 pada Blog pages shot at most

Dengan cara di atas, Anda sudah berhasil mengatur jumlah artikel per halamannya. Nah, bagaimana jika ingin membuat custom pagination agar lebih menarik dan memudahkan pengunjung, ya? 

Bisa kok. Salah satunya menggunakan angka seperti di blog Niagahoster berikut ini:

Custom Pagination Niagahoster

Mau tahu cara membuatnya? Simak pembahasannya! 

Cara Menambahkan Custom Pagination WordPress

Ada dua metode untuk menambahkan pagination WordPress, yaitu secara manual dan menggunakan plugin. Ayo mulai dari cara manual terlebih dulu. 

1. Metode manual

Metode manual artinya Anda perlu melakukan coding untuk membuat pagination WordPress. Tenang, caranya tidak serumit yang Anda bayangkan, kok. 

WordPress sebenarnya telah menyediakan fungsi yang dapat menampilkan tampilan pagination secara otomatis. Anda hanya perlu menambahkan kode fungsi tersebut pada file tema WordPress Anda. Begini caranya:

  1. Buka Appearance > Theme Editor di dashboard
  2. Pilih file index.php 
  3. Cari baris-baris kode berikut ini 

<?php 

if ( have_posts() ) :

while (have_posts() ) : the_post();

get_template_part(‘content’, get_post_format() );

endwhile

  1. Bagi pengguna WordPress versi 4.1 ke atas, setelah baris endwhile tambahkan kode the_post_pagination(); . Sedangkan pengguna versi lama bisa pakai kode berikut: echo paginate_link();

Hasilnya, Anda akan melihat tampilan seperti contoh berikut ini. 

Custom pagination dengan cara manual

2. Menggunakan Plugin Pagination 

Susah pakai cara manual? Atau, takut hasilnya error? Anda bisa menggunakan plugin saja. Nah, di antara banyaknya plugin yang tersedia, inilah plugin rekomendasi dari kami.

1. WP-PageNavi

WP PageNavi

WP PageNavi adalah plugin pagination yang populer dengan lebih dari 700.000 pengguna . Untuk menggunakannya, Anda bisa menginstal dan mengaktifkan plugin ini dulu. 

Caranya, dari dashboard WordPress, klik Plugin > Add New. Cari plugin WP-PageNavi di kolom pencarian. Lalu, klik Install dan Activate

Langkah berikutnya, tinggal mengganti kode default yang ada pada tema yang sedang digunakan. Di contoh ini kami pakai tema Twenty Ten

Ini dia caranya: 

  • Masuk ke menu Appearance > Theme editor.
  • Pilih file halaman web, misalnya index.php, archive.php atau category.php. 
  • Cari baris kode berikut ini: 

<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentyten' ) ); ?></div>

<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?></div> 

  • Ganti kode tersebut dengan baris kode berikut ini: 

<?php wp_pagenavi(); ?>

Nah, setelah Anda mengganti kode default dari tema Anda, hasilnya akan seperti ini: 

Belum puas dengan tampilan tersebut? Tenang, Anda masih bisa mengubah warna dan style custom pagination tersebut supaya lebih menarik dan sesuai keinginan.

Begini cara edit warna dan style: 

  • Buka menu Settings > PageNavi 
  • Hapus centang untuk opsi Use PageNavi-css.css
  • Klik save change
  • Masuk ke menu Plugin > Editor 
  • Select plugin to edit di menu drop down, pilih WP-PageNavi, dan klik tombol Select
  • Anda akan melihat daftar file plugin, kemudian klik pada file pagenavi-css.css dan salin semua isi file tersebut
Setting WP PageNavi
  • Buka Appearance > Theme Editor
  • Tempel ke file style.css 

Jangan lupa pastikan konten pagenavi-css.css telah Anda salin ke file style.css tema. Barulah Anda bebas melakukan modifikasi warna, border, dan lainnya sesuai kebutuhan. 

Contoh modifikasi yang kami lakukan adalah menggunakan kode berikut: 

.wp-pagenavi {
    clear: both;
}

.wp-pagenavi a, .wp-pagenavi span {
   color: #FFF;
 text-decoration: none
background-color:#6FB7E9;
border: 1px solid #B2D1E5;
  padding: 5px 5px;
margin: 2px;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
    border-color: #E9F2F9;
    background-color:#6FB7E9;
}

.wp-pagenavi span.current {
    font-weight: bold;
    background-color:#3C8DC5;
}

Inilah hasil perubahannya:

Custom Pagination dengan Plugin WP PageNavi

Nah, kalau Anda bingung harus pakai kode warna apa, kami sudah pernah membahasnya di → Daftar Kode Warna HTML dan CSS.  

2. WP-Paginate

WP Paginate

Rekomendasi kami yang kedua adalah plugin WP-Paginate. Dengan plugin ini, Anda bisa mengatur jumlah halaman pagination WordPress, markup dan tampilannya, hingga melakukan custom CSS.

Nah, setelah plugin terinstall dan aktif, Anda bisa melakukan langkah seperti di atas tapi dengan kode yang berbeda. 

Setelah menghapus baris kode default pagination dari tema WordPress Anda, isikan dengan kode berikut: 

<?php if(function_exists('wp_paginate_comments')) {
   wp_paginate_comments();
} ?>

WP-Paginate menyediakan tiga style pagination WordPress yang bisa Anda pilih: Grey, Blue, Modern Grey. 

Pilihan style WP Paginate

Namun, jika ketiga pilihan tersebut kurang sesuai dengan tema website, Anda bisa membuat custom pagination melalui tab custom CSS.

Custom CSS WP-Paginate

Baca juga: 10 Plugin WordPress Terbaik dan Gratis 

Kenapa Custom Pagination WordPress Itu Penting?

Meskipun WordPress sudah menyediakan fitur pagination secara default, menggunakan custom pagination memiliki beberapa manfaat. Apa saja?

1. Memudahkan Pengunjung Menelusuri Blog

Custom pagination WordPress lebih memudahkan pengunjung menelusuri blog. Alih-alih terus klik tombol next atau prev, pengunjung bisa langsung klik angka halaman yang diinginkan. 

2. Meningkatkan Ranking di Google 

Seperti kami sebutkan di awal, custom pagination WordPress dapat meningkatkan ranking website di Google, lho! Menurut riset, custom pagination merupakan salah satu cara terbaik untuk SEO website. 

Namun, menambahkan pagination WordPress harus benar. Kalau tidak pas, justru akan menyebabkan masalah pada crawling yang menyulitkan robot Google bekerja. Bahkan, bisa memunculkan duplicate content yang merugikan upaya SEO. 

Baca juga: Belajar SEO, Panduan Terbaru Raih Peringkat Satu

Terapkan Pagination Website untuk Kenyamanan dan Performa Website

Itu tadi cara menambahkan custom pagination WordPress yang bisa Anda coba. Kalau Anda bisa coding, gunakanlah cara manual. Tidak terlalu sulit kok. Namun, menggunakan plugin tentu saja lebih mudah dan aman.

Custom pagination WordPress itu penting untuk memudahkan pengunjung mengakses website Anda. Pada akhirnya, hal tersebut akan meningkatkan user experience mereka dan sekaligus membantu upaya SEO yang dilakukan. 

Nah, kalau Anda ingin tahu lebih banyak soal SEO, Anda bisa baca ebook gratis Mitos SEO. 

Ebook Mitos SEO

Semoga informasi di artikel ini bermanfaat untuk mengembangkan website Anda. Kalau masih ada pertanyaan, silakan bertanya di kolom komentar ya..

Putri Aprilia Putri is an SEO Content Writer at Niagahoster. She has experience in SEO writing with business and tech topic.
[{"code":"","label":"Coba Lagi","win":false},{"code":"HOSTING50","label":"Extra Diskon 50rb ","win":true},{"code":"HOSTING20","label":"Extra Diskon 20rb ","win":true},{"code":"HOSTING100","label":"Extra Diskon 100rb ","win":true},{"code":"","label":"Belum Beruntung","win":false},{"code":"HOSTING20","label":"Extra Diskon 20rb ","win":true},{"code":"","label":"Coba Lagi","win":false},{"code":"HOSTING50","label":"Extra Diskon 50rb ","win":true},{"code":"HOSTING20","label":"Extra Diskon 20rb ","win":true},{"code":"FREESHIPPING","label":"Coba Lagi","win":false},{"code":"","label":"Sedikit Lagi! ","win":false},{"code":"HOSTING50","label":"Extra Diskon 50rb ","win":true}]
[{"code":"","label":"Coba Lagi","win":false},{"code":"HOSTING50","label":"Extra Diskon 50rb ","win":true},{"code":"HOSTING20","label":"Extra Diskon 20rb ","win":true},{"code":"HOSTING100","label":"Extra Diskon 100rb ","win":true},{"code":"","label":"Belum Beruntung","win":false},{"code":"HOSTING20","label":"Extra Diskon 20rb ","win":true},{"code":"","label":"Coba Lagi","win":false},{"code":"HOSTING50","label":"Extra Diskon 50rb ","win":true},{"code":"HOSTING20","label":"Extra Diskon 20rb ","win":true},{"code":"FREESHIPPING","label":"Coba Lagi","win":false},{"code":"","label":"Sedikit Lagi! ","win":false},{"code":"HOSTING50","label":"Extra Diskon 50rb ","win":true}]