Cara Menambahkan Custom Pagination WordPress Tanpa Ribet!

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 tridaya.cloud.com 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

4.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

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

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.