Cara Buat Page Navigation / Nomor Halaman 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.

Cara Membuat Penomoran Halaman WordPress tanpa Plugin

Trik ini diadaptasi dari WP Page-Navi dengan sedikit modifikasi. OK, langsung saja and let’s get started:

1. 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: Copy Code atau alternatif pilihan kode lain Anda bisa memakai kode page navigation 2.
2. 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.
3. 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.
4. 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}
   

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