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:
- 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.
- 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.
thanks gan,,, sukses punya ane udah jadi 😀
iya sip, glad to hear it from you…
mas kenpa ya halaman pagenya ga berubah?
page gimana ya? bisa lihat contoh halaman atau informasi lainnya yang lebih detail?
Makasih sob tutorialnya , saya masih menemukan masalah kok nomor halamannya tidak ada linknya ? hanya nomor saja.
untuk halaman aktif memang tidak ada, tapi untuk next dan prev-nya pasti ada.
Saya coba dan berhasil tampilan sesuai harapan, tetapi saat login wp tdk mau muncul dashboard. Saat file functions.php saya kembalikan normal, baru bisa login wp dan dashboard muncul normal.
saya coba juga saat sudah berhasil login wp dan muncul dashboard wp, saya upload lagi file function.php yg sdh di ubah seperti diatas. semua aktifitas di dashboard wp lancar, tetapi masalah terjadi ketika posting atau update/edit posting dan saya save/upload, yang muncul blank.
mohon pencerahannya..
functions.php memang sensitif, biasanya lebih satu linebreak saja ngaruh. Jangan ada linebreak kosong antara kode function default dan kode tambahan.
– pastikan simpn fungsi navigasi ini di bawah, atw jika ada kode selain fungsi default tema simpan paling akhir.
– coba cek kode sebelum dan sesudah upload, biasanya perbedaan file di window(sebelum) dan di server(unix/linux) berubah karena proses transfer
koq masih gak bisa ya mas.. masih blank wp dashboard saat login wp-admin… penasaran deh..
juga manakala akses kategori juga blank.. semisal namadomain[dot]com/category/nama-category/.
tetapi jika file function.php saya kembalikan normal tanpa ada tambahan kode wp-pagenavi diatas maka akan kembali normal bisa terakses muncul menjadi namadomain[dot]com/category/nama-category
mohon pencerahannya.. terima kasih..
Apa selain kode ini ada kode lain selain kode asli tema yg ditambahkan? tolong cek dulu. Sampai saat ini saya masih pake kode di atas untuk navigasi blog ini dan gda problem.
tidak ada yg kami tambahkan kode lain, langsung copas begitu saja, sedangkan di index.php, serta archive.php serta category.php tidak perlu saya sisipkan karena semua sdh ada di navigation.php. saya menggunakan theme TechMatrix.
hmmh.., saya sendir belum pernah mengalami itu. tp jika kode ini bkin blank mungkin karena fungsi tema ada yg konflik dengan kode page navigasinya sehingga tidk bisa dipakai bersamaan. solusinya ya gunakan tema yg berbeda atau page navigation yg lain. kode ini juga saya adaptasi dari wp-pagenavi.
Waduh ternyata hanya untuk PHP, gak bisa untuk blog yah gan??
Untuk blogger juga ada bro, lebih keren malah. cek nih https://blog.finderonly.net/cara-buat-widget-page-navigation-cantik-untuk-blogger.html