Home » Internet » Wordpress » Page number/Pagenavi WordPress Tanpa Plugin

Page number/Pagenavi WordPress Tanpa Plugin

Cara Membuat WordPress Page Number atau Pagenavi Tanpa WP-Plugin. Sebagaimana sudah diketahui, bahwa secara default CMS WordPress tidak menggunakan page number (nomor halaman) untuk homepage (halaman depan), archive, search, category dan tag, melainkan hanya menggunakan model next posts dan previous posts atau newer dan older. Berikut cara atau kode untuk membuat page number WordPress tanpa menggunakan plugin.

Model default dari WordPress yang hanya menampilkan next/previous membatasi pengunjung (netter) dalam melihat-lihat atau mencari artikel. Mau tidak mau harus klik dari satu halaman ke halaman lain, tidak bisa melompat begitu saja. Untuk menampilkan nomor halaman sudah tersedia plugin wp-pagenavi. Akan tetapi karena saya ingin meminimalisir plugin agar loading blog tetap cepat saat diakses, maka iseng-iseng Googling langsung menemukan kode yang simpel dan usefull.

Maka saya akan sharing kode itu untuk membuat page number atau pagenavi WordPress tanpa plugin, dengan menambahkan sendiri script ke dalam theme WordPress. Dengan memasang page number pada blog ini, pengunjung akan lebih mudah dalam menelusuri konten blog.

Dan pesan saya, cobalah dahulu di localhost atau offline, karena setiap theme mempunyai perbedaan dalam susunan kodenya. Kalau coba di localhost sudah fix, sekalian dengan kustomisasinya, baru deh di upload ke web hosting.

Yuk dengan semangat ’45 kita mulai membuat page number WordPress tanpa plugin, dengan menambahkan kode di bawah ini ke dalam file function.php theme WordPress

//BEGIN Corenavi
function wp_corenavi() {
  global $wp_query, $wp_rewrite;
  $pages = '';
  $max = $wp_query->max_num_pages;
  if (!$current = get_query_var('paged')) $current = 1;
  $a['base'] = ($wp_rewrite->using_permalinks()) ? user_trailingslashit( trailingslashit( remove_query_arg( 's', get_pagenum_link( 1 ) ) ) . 'page/%#%/', 'paged' ) : @add_query_arg('paged','%#%');
  if( !empty($wp_query->query_vars['s']) ) $a['add_args'] = array( 's' => get_query_var( 's' ) );
  $a['total'] = $max;
  $a['current'] = $current;

  $total = 1; //1 - display the text "Page N of N", 0 - not display
  $a['mid_size'] = 5; //how many links to show on the left and right of the current
  $a['end_size'] = 1; //how many links to show in the beginning and end
  $a['prev_text'] = '« Previous'; //text of the "Previous page" link
  $a['next_text'] = 'Next »'; //text of the "Next page" link

  if ($max > 1) echo '<div>';
  if ($total == 1 && $max > 1) $pages = '<span>Page ' . $current . ' of ' . $max . '</span>'."\r\n";
  echo $pages . paginate_links($a);
  if ($max > 1) echo '</div>';
}
// END Corenavi

This code from Dimox , it’s wonderfull code, i like it….

Kode yang saya peroleh ini lebih mudah dipahami, dan kita bebas memodifikasinya. Setelah memasukkan kode di atas ke dalam file function.php maka selanjutnya untuk memanggil kode tersebut dengan script perintah sebagai berikut :

<?php if (function_exists('wp_corenavi')) wp_corenavi(); ?>

Masukkan pada file yang ingin menggunakan page number ini, umumnya file index.php dan archieves.php. Dalam beberapa theme terkadang juga perlu menambahkan ke dalam search.php untuk hasil pencarian.
Cobalah ganti pada angka yang berwarna merah.

Untuk memanggil kode tersebut, cari kode wp_page_number seperti di bawah

<?php
if(function_exists('wp_page_numbers')) {
    wp_page_numbers();
}

Kemudian gantilah dengan script wp_corenavi di atas.

Untuk kustomisasi atau desain melalui style.css silahkan cari saja navigation yang sudah ada, atau lengkapnya pada theme saya sebagai berikut

/* navigation */
 #pagination,#nav-below{display:block;width:620px;line-height:18px;margin-bottom:5px;padding:2px 10px;border-top:1px solid #ddd; }
 .navigation{line-height:24px;margin:0;padding:2px 10px; font-size:14px;}
 #nav-below{display:inline-block;padding:20px 10px;border-top:1px solid #ddd;border-bottom:1px solid #fff;}
 .nav-previous{float:left;width:50%;}
 .nav-next{float:right;width:50%;text-align:right;}
 .pages { line-height:25px; padding:5px 10px; color: #ddd; background:#0349a8; margin-bottom:5px; border:1px solid #ccc; }
 .page-numbers { line-height:25px; margin:5px 1px; padding:5px 5px; background:#efefef; border:1px solid #ccc; color:#0349a8; }
 .page-numbers:hover { background:#4a630f; color:#FFF; }
 .current,.current:hover { color:#FFF; background:#0349a8; border:1px solid #555; }

Saya hanya menambahkan 4 baris yang bawah, hasilnya seperti yang anda lihat pada blog ini.
Style bisa diubah sesuai selera kita, silahkan untuk coba di edit sesukanya :) menjadi bulat, menambahkan efek gradasi, box shadow, tinggi-rendahnya, warna misalnya dibuat putih semua biar tidak kelihatan… ya silahkan ;)

Oh iya… kalau ingin menampilkan semua page, maka dengan menambahkan kode $a['show_all'] = 1; tapi saya ga paham maksudnya dan belum mencobanya. Jika kode tidak berfungsi, coba gantilah semua tanda kutip tunggal ( ‘ ) dan yang ganda ( ” ) secara manual dengan keyboard.

Demikian artikel sederhana tentang cara membuat page number WordPress tanpa plugin. Dengan adanya page number ini sekarang blog menjadi lebih user-friendly, bisa main lompat ke depan-belakang tanpa negok e e kurang n ;) Maaf dan terima kasih sudah meluangkan waktu membaca blog ini, silahkan dilanjut ngoprek theme WordPress…

Share to : Facebook | Twitter | Digg | Google | Technorati | Stumbleupon | Delicious | Reddit |

Artikel terkait :

Random Posts :

10 Comments.

  1. Gan ko tidak disebutkan penyinmapan atau letaknya setelah atau sebelum kode apa.,? :?: :?: :?:

    • Yusuf Fahrurrozi

      Agan Djawa: untuk function.php tinggal copas, di dalamnya banyak sekali kode-kode function, letakkan saja sebelum atau di atasnya
      Sedangkan untuk index.php dan archieves.php tinggal mencari kode wp_page_number, ganti saja seperti artikel diatas.
      Silahkan coba dulu secara offline atau localhost. Terima kasih atas kunjungannya dan semoga membantu…

  2. kodenya dimox emang ribet semua

    • Yusuf Fahrurrozi

      Mb Naysila, ah tidak ribet, malah ini yg powerfull, dan termasuk mudah u memasukkan ke theme wp kok. Karena saya sudah mencoba banyak kode, akhirnya yg saya pasang ini dari Mr. Dimox…
      Maksih dah berkunjung…. :)

  3. Ga berfungsi di them saya :(

  4. mas knpa ya situs saya koq jadi rusak, kode itu koq malah muncul diatas situs saya thme yg ak pke slick.

    maslanya knpa ya…..???

    • Yusuf Fahrurrozi

      Kemungkinan salah penempatan kodenya, untuk mendapatkan hasil yg terbaik, coba saja terlebbih dulu di localhost/ offline. Sehingga bisa mencoba-coba sampai berhasil. Saya sudah posting artikel tentang install WordPress secara offline.

  5. gan koq gak berfungi ya,, knapa.? mhon diperjelas lagi gan,, hehe makasih sebelumnya

  6. SObb..

    KaLO yank pake pLugin ada ga’..??

Leave a Comment