Cara Membuat Page Navigation (Page Numbering) tanpa Plugin
Jika sebelumnya saya telah menulis tentang Membuat Related Post tanpa Plugin, kali ini saya akan share tentang cara membuat page navigation atau menambahkan penomoran halaman tanpa plugin. Selain mempermudah pengunjung untuk menjelajahi dan mengeksplorasi situs kita, ternyata dari sisi SEO juga memiliki nilai lebih karena memberikan akses navigasi bagi spider atau bot dari search engine untuk lebih meng-crawl isi situs kita lebih dalam lagi. Dan tidak hanya itu, dengan cara ini kita juga dapat mengurangi banyaknya jumlah plugin dan secara signifikan dapat meningkatkan performa blog kita.
Trik ini diadaptasi dari WP Page-Navi dengan sedikit modifikasi. OK, langsung saja and let’s get started:
- Buka file functions.php pada directory tema yang sobat gunakan. Jika dari langsung dari Dashboard, klik appearance – editor dan cari Theme Function, kemudian tambahkan kode di dalam file ini: View Code
- Jika sudah, kini tinggal memanggil fungsi dari file function.php tadi dengan menambahkan kode ini <?php wp_pagenavi(); ?>. Copy dan paste pada file index.php setelah post entry. Adapun penempatannya relatif sesuai dengan tema yang digunakan.
- Sampai tahap ini fungsi page navigation sudah bisa berfungsi pada tema, namun baru halaman depan saja (index.php). Maka tambahkan pula kode (no 2) pada file archive.php sehingga page navigation akan tampil pula pada halaman arsip, kategori, dan tag.
- Untuk mempercantik tampilan, maka sobat dapat menambahkan styling pada CSS, buka file style.css dan tambahkan kode berikut:
/*Page Navi*/
.wp-pagenavi{text-align:center; margin-bottom:21px; margin-top:5px; clear:both}
.wp-pagenavi a, .wp-pagenavi span{text-decoration:none; font-weight:bold; border:2px groove #555; padding:3px 5px; margin:2px}
.wp-pagenavi a:hover, .wp-pagenavi span.current{background-color:#43Bccc; border-color:#000}
.wp-pagenavi span.current{font-weight:bold; background:#ccc} - Adapun untuk memanggil fungsi styling pada CSS, tambahkan kode <div class =“wp-pagenavi”>. Sehingga setelah digabungkan dengan kode page navigation di atas (no 2) menjadi:
<div class =“wp-pagenavi”><?php wp_pagenavi(); ?></div>
Lihat dan ikuti kembali langkah nomor 2 di atas.
Nah selesai deh… Gampang’kan? Sebagai contoh hasilnya, sobat bisa melihatnya pada halaman depan blog ini, atau pada halaman arsip, kategori dan tag. Atau di bawah ini adalah page navigation blog ini yang sudah mengalami sedikit perubahan:
Di samping itu page navigation ini memiliki 2 fitur pilihan navigasi yaitu navigasi normal seperti blog ini dan navigasi dropdown. Untuk mengubah pilihan navigasi ini dapat dibuka kembali file functions.php tadi dan sobat dapat membuat modifikasi custom sesuai selera. Kalau ada yang masih bingung atau kurang jelas silahkan ditanyakan dan jika sudah paham, maka mari kita beranjak ke topik berikutnya yaitu Minify Html, Javascript dan CSS tanpa plugin.
Terima Kasih untuk tidak Copy Paste tanpa izin dan menghindari praktek Plagiasi.
trims atas infonya gan dan disini saya mau tanya kalau memperbaiki wp yang error saat kita coba validasi di feedburner bagaimana??? mohon bantuannya
[Reply]
tengkyu tutonya pak…..
sudah mencoba dan langsung berhasil tanpa ada error…..
[Reply]
Oke sama2 bro, bagus deh kalo gitu
[Reply]
saya sudah coba dan berhasil, tapi page 1 of jumlah page tidak mau muncul. yang muncul hanya 1 2 3 4 Next
gimana biar page 1 of jumlah page bisa muncul??
mohon bantuanya. salam
[Reply]
Cek dan ricek aja dulu, by default mestinya gak kejadian kyk gitu.
[Reply]
saya sudah ngutak-ngatik trik ini tapi belum pernah berhasil., malah selalu eror di Function.php jadinya kudu masuk cpanel,mau tanya gan itu kode yang untuk Function.php disimpannya disebelah mana.,? sebelum atau sesudah kode apa.,?
[Reply]
Kodenya ditambahkan di file functions.php, bisa di mana saja. Namun pastikan tidak ada break space atau satu baris kosong di bawahnya, karena itu memang ngaruh bgt
[Reply]
Kalau mau percobaan lebih baik di localhost saja, kalau dah OK, upload file tsb.
Mengurangi plugin, mengapa tidak ?
[Reply]