How to Start a Blog? Panduan Membuat Website Hanya 30 Menit

Cara Membuat Nomor Halaman dengan WP-PageNavi di WordPress

Cara Membuat Nomor Halaman dengan WP-Pagenavi di WordPress – Tutorial kali ini akan membahas bagaimana menambahkan nomor halaman atau Page Number dalam tema WordPress. Menambahkan fitur nomor halaman pada situs WordPress Anda bertujuan untuk memudahkan para pembaca untuk menavigasi situs Anda ketika ingin melakukan pindah dari halaman Pertama menuju ke halaman kedua maupun langsung meloncat ke halaman yang mereka inginkan sekalipun.

Fitur nomor halaman ini biasanya pada tema tertentu sudah terpasang, namun masih banyak sekali template WordPress yang masih belum ada fitur page number dan yang ditampilkan adalah fitur bawaan bawaan seperti ‘Older Post dan Previous Post’.

Jika Anda saat ini memiliki situs WordPress dan tema Anda belum mendukung fitur page number, maka pada artikel kali ini saya akan memberikan cara termudah untuk Anda untuk menambahkan fitur page number di tema WordPress Anda dengan plugin WP-PageNavi.

WP Page Number PageNavi nomor halaman WordPress

Cara Membuat Page Number dengan WP-PageNavi

Untuk membuat Page number di WordPress, hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan plugin WP-PageNavi. Setelah mengaktifkan plugin, silahkan Anda pergi ke Setting »PageNavi untuk mengkonfigurasi pengaturan plugin.

Pada halaman pengaturan plugin ‘PageNavi Settings’ Anda dapat mengganti teks default dan pengaturan pagination numerik sesuai dengan yang anda inginkan pada kolom yang sudah disediakan.

page number plugins wp-pagenavi nomor halaman WordPress

Pada langkah berikutnya, Anda perlu menambahkan script tag php ke template tema WordPress Anda. Silahkan cari file index.phpdan archive.php di folder template yang Anda gunakan . Tambahkan tag berikut ke tema Anda untuk menggantikan script previous_posts_link and next_posts_link.

Sebagai contoh dalam tema Twentytheme, kode yang perlu Anda ganti adalah sebagai berikut :


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

Dan silahkan hapus kode seperti diatas dan ganti dengan kode dibawah ini.

<?php wp_pagenavi(); ?>

Selain itu, Anda juga dapat membuat tampilan nomor halaman sesuai dengan keinginan Anda dengan memanfaatkan pengaturan CSS kustom yang bisa Anda ubah. Caranya, Anda dapat menyalin file pagenavi-css.css dari direktori plugin ke direktori tema Anda dan melakukan modifikasi di sana. Dengan cara ini, Anda tidak akan kehilangan perubahan saat memperbarui atau melakukan update plugin.

Silahkan masuk pada menu Plugins » Editor » pilih drop down menu dan pilih ‘Wp-Pagenavi’  dan silahkan klik tombol ‘Select’. lakukan perubahan css sesuai dengan yang Anda inginkan di file ‘wp-pagenavi/pagenavi-css.css‘.

page-navi css modifikasi

Atau, Anda dapat menghapus centang pada opsi “Use pagenavi.css?” Dari halaman pengaturan dan tambahkan style ke file style.css tema Anda secara langsung.

Baca : Cara Mudah Membuat Halaman Under Construction di WordPress

Dan itulah cara mudah untuk menambahkan fitur page number di tema WordPress Anda dengan plugin WP-PageNavi, semoga artikel ini bermanfaat buat Anda dan selamat mencoba. 🙂

Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Facebook+.

Daftar isi Tutorial WordPress Terlengkap Gratis
10 top hosting!

Register Now: TOP 10 Hosting

Dapatkan Hosting Murah dengan Kualitas Terbaik. For Serious Blogger! View Deals

Niagahoster

Rp.26.000/Bln Free Domain, Unlimited Space & Bandwidth Get Host

IDCloudhost

Rp.30.000/Bln Free Domain, Unlimited Space & Bandwidth Get Host

Bluehost Hosting

$2.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

iPage Hosting

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

SiteGround Hosting

$3.45/Month Free Domain, Unlimited Space & Bandwidth Get Host

Hostgator

$3.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

6 Comments

Add a Comment

Your email address will not be published. Required fields are marked *