Home » Optimasi Wordpress » Wordpress » Cara Membuat WordPress Page Number Tanpa Plugin

Cara Membuat WordPress Page Number Tanpa Plugin

17 Jul. 201167 comments
Cara Membuat WordPress Page Number Tanpa Plugin

Cara Membuat WordPress Page Number Tanpa Plugin. Jika sebelumnya sudah pernah saya bahas tentang cara pembuatan halaman (pagination) pada halaman postingan, kali ini akan saya share tentang cara membuat wordpress page number (nomor halaman) tanpa plugin.

Sebagaimana kita ketahui, secara default wordpress tidak menggunakan page number (nomor halaman) untuk halaman depan (home), archive, search, category dan tag, melainkan hanya menggunakan sistem next_posts dan previous_posts atau newer dan older.

Sistem default seperti ini menurut saya agak kurang user friendly, karena untuk membuka halaman lainnya pengunjung hanya bisa membuka satu tingkat halaman sesudah atau sebelumnya (next dan previous). Dengan menggunakan page number (nomor halaman) pengunjung tidak hanya bisa membuka halaman sesudah atau sebelumnya (next dan previous) tapi juga bisa langsung lompat untuk membuka halaman tertentu (sesuai setting) misalnya ke halaman 5 atau ke halaman terakhir.

Oke tidak usah berpanjang kalam, sekarang kita langsung praktek. Untuk membuat page number (nomor halaman) pada tutorial kali ini sengaja saya sajikan dengan menggunakan 3 cara.

1. Cara Pertama

Ini adalah hasil iseng saya ngoprek plugin wp-page number yang selama ini saya gunakan, dan mulai saat ini page number (nomor halaman) yang saya gunakan di blog ini sudah tidak menggunakan plugin tersebut, melainkan hanya memakai code yang saya ambil dari plugin tersebut. Cara menggunakannya sebagai berikut :
Tambahkan code berikut ini di file functions.php yang ada di folder theme.

//start wp-page number oprekan dari plugin
function wp_page_numbers_check_num($num)
{
return ($num%2) ? true : false;
}

function wp_page_numbers_page_of_page($max_page, $paged, $page_of_page_text, $page_of_of)
{
$pagingString = "";
if ( $max_page > 1)
{
$pagingString .= '<li class="page_info">';
if($page_of_page_text == "")
$pagingString .= 'Page ';
else
$pagingString .= $page_of_page_text . ' ';

if ( $paged != "" )
$pagingString .= $paged;
else
$pagingString .= 1;

if($page_of_of == "")
$pagingString .= ' of ';
else
$pagingString .= ' ' . $page_of_of . ' ';
$pagingString .= floor($max_page).'</li>';
}
return $pagingString;
}

function wp_page_numbers_prevpage($paged, $max_page, $prevpage)
{
if( $max_page > 1 && $paged > 1 )
$pagingString = '<li><a href="'.get_pagenum_link($paged-1). '">'.$prevpage.'</a></li>';
return $pagingString;
}

function wp_page_numbers_left_side($max_page, $limit_pages, $paged, $pagingString)
{
$pagingString = "";
$page_check_max = false;
$page_check_min = false;
if($max_page > 1)
{
for($i=1; $i<($max_page+1); $i++)
{
if( $i <= $limit_pages )
{
if ($paged == $i || ($paged == "" && $i == 1))
$pagingString .= '<li class="active_page"><a href="'.get_pagenum_link($i). '">'.$i.'</a></li>'."\n";
else
$pagingString .= '<li><a href="'.get_pagenum_link($i). '">'.$i.'</a></li>'."\n";
if ($i == 1)
$page_check_min = true;
if ($max_page == $i)
$page_check_max = true;
}
}
return array($pagingString, $page_check_max, $page_check_min);
}
}

function wp_page_numbers_middle_side($max_page, $paged, $limit_pages_left, $limit_pages_right)
{
$pagingString = "";
$page_check_max = false;
$page_check_min = false;
for($i=1; $i<($max_page+1); $i++)
{
if($paged-$i <= $limit_pages_left && $paged+$limit_pages_right >= $i)
{
if ($paged == $i)
$pagingString .= '<li class="active_page"><a href="'.get_pagenum_link($i). '">'.$i.'</a></li>'."\n";
else
$pagingString .= '<li><a href="'.get_pagenum_link($i). '">'.$i.'</a></li>'."\n";

if ($i == 1)
$page_check_min = true;
if ($max_page == $i)
$page_check_max = true;
}
}
return array($pagingString, $page_check_max, $page_check_min);
}

function wp_page_numbers_right_side($max_page, $limit_pages, $paged, $pagingString)
{
$pagingString = "";
$page_check_max = false;
$page_check_min = false;
for($i=1; $i<($max_page+1); $i++)
{
if( ($max_page + 1 - $i) <= $limit_pages )
{
if ($paged == $i)
$pagingString .= '<li class="active_page"><a href="'.get_pagenum_link($i). '">'.$i.'</a></li>'."\n";
else
$pagingString .= '<li><a href="'.get_pagenum_link($i). '">'.$i.'</a></li>'."\n";

if ($i == 1)
$page_check_min = true;
}
if ($max_page == $i)
$page_check_max = true;

}
return array($pagingString, $page_check_max, $page_check_min);
}

function wp_page_numbers_nextpage($paged, $max_page, $nextpage)
{
if( $paged != "" && $paged < $max_page)
$pagingString = '<li><a href="'.get_pagenum_link($paged+1). '">'.$nextpage.'</a></li>'."\n";
return $pagingString;
}

function wp_page_numbers($start = "", $end = "")
{
global $wp_query;
global $max_page;
global $paged;
if ( !$max_page ) { $max_page = $wp_query->max_num_pages; }
if ( !$paged ) { $paged = 1; }

$settings = get_option('wp_page_numbers_array');
$page_of_page = $settings["page_of_page"];
$page_of_page_text = $settings["page_of_page_text"];
$page_of_of = $settings["page_of_of"];

$next_prev_text = $settings["next_prev_text"];
$show_start_end_numbers = $settings["show_start_end_numbers"];
$show_page_numbers = $settings["show_page_numbers"];

$limit_pages = $settings["limit_pages"];
$nextpage = $settings["nextpage"];
$prevpage = $settings["prevpage"];
$startspace = $settings["startspace"];
$endspace = $settings["endspace"];

if( $nextpage == "" ) { $nextpage = "&raquo;"; }
if( $prevpage == "" ) { $prevpage = "&laquo;"; }
if( $startspace == "" ) { $startspace = "..."; }
if( $endspace == "" ) { $endspace = "..."; }

if($limit_pages == "") { $limit_pages = "5"; }
elseif ( $limit_pages == "0" ) { $limit_pages = $max_page; }

if(wp_page_numbers_check_num($limit_pages) == true)
{
$limit_pages_left = ($limit_pages-1)/2;
$limit_pages_right = ($limit_pages-1)/2;
}
else
{
$limit_pages_left = $limit_pages/2;
$limit_pages_right = ($limit_pages/2)-1;
}

if( $max_page <= $limit_pages ) { $limit_pages = $max_page; }

$pagingString = "<div id='wp_page_numbers'>\n";
$pagingString .= '<ul>';

if($page_of_page != "no")
$pagingString .= wp_page_numbers_page_of_page($max_page, $paged, $page_of_page_text, $page_of_of);

if( ($paged) <= $limit_pages_left )
{
list ($value1, $value2, $page_check_min) = wp_page_numbers_left_side($max_page, $limit_pages, $paged, $pagingString);
$pagingMiddleString .= $value1;
}
elseif( ($max_page+1 - $paged) <= $limit_pages_right )
{
list ($value1, $value2, $page_check_min) = wp_page_numbers_right_side($max_page, $limit_pages, $paged, $pagingString);
$pagingMiddleString .= $value1;
}
else
{
list ($value1, $value2, $page_check_min) = wp_page_numbers_middle_side($max_page, $paged, $limit_pages_left, $limit_pages_right);
$pagingMiddleString .= $value1;
}
if($next_prev_text != "no")
$pagingString .= wp_page_numbers_prevpage($paged, $max_page, $prevpage);

if ($page_check_min == false && $show_start_end_numbers != "no")
{
$pagingString .= "<li class=\"first_last_page\">";
$pagingString .= "<a href=\"" . get_pagenum_link(1) . "\">1</a>";
$pagingString .= "</li>\n<li class=\"space\">".$startspace."</li>\n";
}

if($show_page_numbers != "no")
$pagingString .= $pagingMiddleString;

if ($value2 == false && $show_start_end_numbers != "no")
{
$pagingString .= "<li class=\"space\">".$endspace."</li>\n";
$pagingString .= "<li class=\"first_last_page\">";
$pagingString .= "<a href=\"" . get_pagenum_link($max_page) . "\">" . $max_page . "</a>";
$pagingString .= "</li>\n";
}

if($next_prev_text != "no")
$pagingString .= wp_page_numbers_nextpage($paged, $max_page, $nextpage);

$pagingString .= "</ul>\n";

$pagingString .= "<div style='float: none; clear: both;'></div>\n";
$pagingString .= "</div>\n";

if($max_page > 1)
echo $start . $pagingString . $end;
}
//end wp-page number oprekan dari plugin

Keterangan : Yang saya beri warna merah (angka 5) adalah jumlah nomor halaman yang ingin ditampilkan, anda bisa menggantinya sesuai selera.

Langkah selanjutnya buka file index.php, archive.php, search.php atau file di mana biasanya digunakan untuk menampilkan halaman sesudah atau sebelumnya (next dan previous). Kemudian cari kode kira-kira seperti ini :

<span class="newer"><?php previous_posts_link(__('Newer Entries', 'inove')); ?></span>
<span class="older"><?php next_posts_link(__('Older Entries', 'inove')); ?></span>

Kode tersebut adalah contoh yang digunakan untuk menampilkan halaman sesudah atau sebelumnya (next dan previous) pada Theme Inove, untuk theme lainnya mungkin sedikit beda, jadi silahkan disesuaikan. Kemudian tambahkan fungsi loop berikut ini sebelum kode tersebut :

<?php if(function_exists('wp_page_numbers')) : ?><?php wp_page_numbers() ?><?php else : ?>

Untuk mempercantik penampilan dari nomor halaman tersebut, tambahkan kode CSS berikut ini di file CSS yang anda gunakan, kode CSS ini juga hasil iseng saya termasuk fitur CSS3 yang saya tanamkan di dalamnya (ada sedikit efek blur ketika dihover) dan jika anda kurang suka silahkan diedit sendiri sesuai selera anda :

#wp_page_numbers ul,#wp_page_numbers li,#wp_page_numbers a
{ background:transparent;
  border:none;
  text-decoration:none;
  list-style:none;
  text-transform:none;
  text-indent:0;
  text-align:left;
  letter-spacing:0;
  word-spacing:0;
  font:normal normal normal 18px/15px "Book Antiqua",Verdana; }

#wp_page_numbers
{ margin-top:5px;
  width:100%;
  background:#F7F7FA;
  margin-bottom:4px; }

#wp_page_numbers ul
{ width:100%; }

#wp_page_numbers li
{ float:left;
  display:block;
  margin-bottom:2px; }

#wp_page_numbers a
{ background:#dbe7f0;
  padding:4px;
  padding-left:7px;
  padding-right:7px;
  margin-left:3px;
  margin-right:3px;
  display:block;
  color:#333;
  border:1px solid #949191;
  border-radius:4px;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
}

#wp_page_numbers li>a:hover
{ border:1px solid #002cba;
  background:#D1D1D1;
  border-radius:6px;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
}
#wp_page_numbers li.active_page> a
{ border-color:#0075b8;
  background:#B2BBC1;
  font-weight:bold;
  text-decoration:underline; }

#wp_page_numbers li.page_info
{ background:#dbe7f0;
  float:left;
  display:block;
  padding:4px;
  padding-left:15px;
  padding-right:15px;
  margin-right:3px;
  color:#666;
  font-size:13px;
  letter-spacing:1px;
  border:1px solid #777272;
  border-radius:4px;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  box-shadow:2px 2px 2px #b3b3b7;
  -moz-box-shadow:2px 2px 2px #b3b3b7;
  -webkit-box-shadow:2px 2px 2px #b3b3b7; }

Hasilnya kurang lebih seperti ini (termasuk yang saya gunakan di blog ini).

 

2. Cara Kedua 

Ini adalah cara yang digunakan ala kriesi.at tapi sudah sedikit saya custom. Untuk membuatnya tambahkan code berikut ini di file functions.php yang ada di folder theme.

//start pagination
function wp_pagination($pages = '', $range = 4)
{
$showitems = ($range * 2)+1;

global $paged;
if(empty($paged)) $paged = 1;

if($pages == '')
{
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$pages)
{
$pages = 1;
}
}

if(1 != $pages)
{
echo "<div class='pagination'>";

if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo;</a>";
if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo;</a>";

for ($i=1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
{
echo ($paged == $i)? "<span class='current'>".$i."</span>":"<a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a>";
}
}

if ($paged < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($paged + 1)."'>&rsaquo;</a>";
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>&raquo;</a>";
echo "</div>\n";
}
}
//end pagination

Keterangan : Yang saya beri warna merah (angka 4) akan menampilkan 5 halaman, anda bisa menggantinya sesuai selera.

Langkah selanjutnya buka file index.php, archive.php, search.php atau file di mana biasanya digunakan untuk menampilkan halaman sesudah atau sebelumnya (next dan previous). Kemudian cari kode kira-kira seperti ini :

<span class="newer"><?php previous_posts_link(__('Newer Entries', 'inove')); ?></span>
<span class="older"><?php next_posts_link(__('Older Entries', 'inove')); ?></span>

Kode tersebut adalah contoh yang digunakan untuk menampilkan halaman sesudah atau sebelumnya (next dan previous) pada Theme Inove, untuk theme lainnya mungkin sedikit beda, jadi silahkan disesuaikan. Kemudian tambahkan fungsi loop berikut ini sebelum kode tersebut :

<?php if(function_exists('wp_pagination')) : ?><?php wp_pagination() ?><?php else : ?>

Untuk mempercantik penampilan dari nomor halaman tersebut, tambahkan kode CSS berikut ini di file CSS yang anda gunakan :

.pagination {
clear:both;
padding:20px 0;
position:relative;
font-size:13px;
line-height:13px;
}

.pagination span, .pagination a {
display:block;
float:left;
margin: 2px 2px 2px 0;
padding:6px 9px 5px 9px;
text-decoration:none;
width:auto;
color:#fff;
background: #555;
}

.pagination a:hover{
color:#fff;
background: #3279BB;
}

.pagination .current{
padding:6px 9px 5px 9px;
background: #3279BB;
color:#fff;
}

Hasilnya kurang lebih seperti ini.

 

 

3. Cara Ke Tiga

Ini adalah cara yang digunakan ala akasuna tapi sudah sedikit saya custom. Untuk membuatnya tambahkan code berikut ini di file functions.php yang ada di folder theme.

//start function pagenavi
function pagenavi( $p = 4 ) { // pages will be show before and after current page
  if ( is_singular() ) return; // don't show in single page
  global $wp_query, $paged;
  $max_page = $wp_query->max_num_pages;
  if ( $max_page == 1 ) return; // don't show when only one page
  if ( empty( $paged ) ) $paged = 1;
  echo '<span class="pages">Page : ' . $paged . ' of ' . $max_page . ' </span> '; // pages
  if ( $paged > $p + 1 ) p_link( 1, 'First' );
  if ( $paged > $p + 2 ) echo '<b>... </b> ';
  for( $i = $paged - $p; $i <= $paged + $p; $i++ ) { // Middle pages
    if ( $i > 0 && $i <= $max_page ) $i == $paged ? print "<span class='page-numbers current'>{$i}</span> " : p_link( $i );
  }
  if ( $paged < $max_page - $p - 1 ) echo '<b>... </b>';
  if ( $paged < $max_page - $p ) p_link( $max_page, 'Last' );
}
function p_link( $i, $title = '' ) {
  if ( $title == '' ) $title = "Page {$i}";
  echo "<a class='page-numbers' href='", esc_html( get_pagenum_link( $i ) ), "' title='{$title}'>{$i}</a> ";
}
//end function pagenavi

Keterangan : Yang saya beri warna merah (angka 4) akan menampilkan 5 halaman, anda bisa menggantinya sesuai selera.

Langkah selanjutnya buka file index.php, archive.php, search.php atau file di mana biasanya digunakan untuk menampilkan halaman sesudah atau sebelumnya (next dan previous). Kemudian cari kode kira-kira seperti ini :

<span class="newer"><?php previous_posts_link(__('Newer Entries', 'inove')); ?></span>
<span class="older"><?php next_posts_link(__('Older Entries', 'inove')); ?></span>

Kode tersebut adalah contoh yang digunakan untuk menampilkan halaman sesudah atau sebelumnya (next dan previous) pada Theme Inove, untuk theme lainnya mungkin sedikit beda, jadi silahkan disesuaikan. Kemudian tambahkan fungsi loop berikut ini sebelum kode tersebut :

<?php if(function_exists('pagenavi')) : ?><?php pagenavi() ?><?php else : ?>

Untuk mempercantik penampilan dari nomor halaman tersebut, tambahkan kode CSS berikut ini di file CSS yang anda gunakan :

span.pages
{ line-height:25px;
  font-size:14px;
  margin:5px 2px 5px 2px;
  padding:3px 8px 5px 8px;
  text-decoration:none;
  background:#009193;
  color:#fff;
  border-radius:6px;
  -moz-border-radius:6px;
  -webkit-border-radius:6px; }

.page-numbers
{ line-height:25px;
  font-size:14px;
  margin:5px 2px 5px 2px;
  padding:3px 8px 5px 8px;
  text-decoration:none;
  background:#A3C159;
  color:#fff;
  border-radius:6px;
  -moz-border-radius:6px;
  -webkit-border-radius:6px; }

.page-numbers:hover
{ background:#009193;
  color:#FFF;
  -webkit-transition:margin-left 2s ease,background-color 2s ease;
  -moz-transition:margin-left 2s ease,background-color 2s ease;
  -o-transition:margin-left 2s ease,background-color 2s ease;
  transition:margin-left 2s ease,background-color 2s ease; }

.current,.current:hover
{ color:#FFF;
  background:#009193;
  border:1px solid #009193; }

Hasilnya kurang lebih seperti ini.

Page : 1 of 83 1 2 3 4 5 83

Ke 3 cara tersebut di atas sudah saya test dan uji coba di server lokal, dan semuanya bisa berjalan dan berfungsi dengan baik, jika berminat silahkan anda pilih salah satu cara dari ke 3 cara tersebut. Untuk CSS anda bisa mengembangkannya sendiri supaya serasi dengan theme yang anda gunakan.

Cara Membuat WordPress Page Number Tanpa Plugin Reviewed by: Alwi on Rating : 5
Mudah-mudahan artikel tentang Cara Membuat WordPress Page Number Tanpa Plugin ini bisa bermanfaat untuk anda, terima kasih.

Artikel Yang Mungkin Berkaitan :

  1. Membuat Anti Spam Dengan WP-reCAPTCHA
  2. Cara Memblokir External Requests di Dashborad
  3. Cara Submit Blog atau Website di Google Webmasters
  4. Cara Pasang Adsense Di Bawah Judul Postingan
  5. Cara Membuat Halaman (Pagination) Pada Postingan
  6. Cara Install Plugin WordPress
  7. Modifikasi Tampilan Halaman Daftar Isi
  8. Customisasi Tampilan Tag Cloud
  9. Optimasi File wp-config.php
  10. Bypass Template Path dan Stylesheet Path
  1. 23-7-2011 at 13:58 | #1

    Wah, sip2.. ngoprek yang bermanfaat…

    Reply

  2. 24-7-2011 at 13:43 | #2

    lgs saya praktekan pak.Terimakasih..
    selamat PR nya balik lg..:)

    Reply

  3. 25-7-2011 at 22:02 | #3

    Dari ketiga tampilan pagination di atas, saya suka yang ketiga mas. Saya coba tiru sedikit konsep tampilannya dengan beberapa modifikasi. Kebetulan di theme yang saya gunakan sudah ada settingan CSS dan kode fungsi paginasinya.

    Namun sementara ini, paginasi halaman baru saya aktifkan pada halaman hasil pencarian saja. Contohnya pada httpxxx://kafegue.com/?s=meta+deskripsi

    Reply

  4. Nova Monyonk
    26-7-2011 at 09:24 | #4

    Maaf mas, caranya buat postingan wordpress biar ada script yang kaya gitu gimana ya ?
    Maaf newbie

    Reply

  5. 29-7-2011 at 15:32 | #5

    weew master wordpress..ilmu yang bermanfaat, thanks banget mas udah sharing ilmunya..ijin kopas script nya..

    Reply

  6. 12-8-2011 at 10:25 | #6

    thanks mas tas sharingnya, tapi ad sedikit masalah kamii udah praktekkan tapi kq lom tampil ya hasilnya pada blog saya, mohon penjelasan lebih lanjut mas

    Reply

  7. 13-8-2011 at 21:46 | #7

    mantep om, tingkatkan terusss

    Reply

  8. djawa
    10-9-2011 at 07:00 | #8

    mas mau tanya tentang ini., ko saya coba malah muncul kode ini :
    function pagenavi( $p = 4 ) { // pages will be show before and after current page if ( is_singular() ) return; // don’t show in single page global $wp_query, $paged; $max_page = $wp_query->max_num_pages; if ( $max_page == 1 ) return; // don’t show when only one page if ( empty( $paged ) ) $paged = 1; echo ‘Page : ‘ . $paged . ‘ of ‘ . $max_page . ‘ ‘; // pages if ( $paged > $p + 1 ) p_link( 1, ‘First’ ); if ( $paged > $p + 2 ) echo ‘… ‘; for( $i = $paged – $p; $i 0 && $i <= $max_page ) $i == $paged ? print "{$i} " : p_link( $i ); } if ( $paged < $max_page – $p – 1 ) echo '… '; if ( $paged < $max_page – $p ) p_link( $max_page, 'Last' ); } function p_link( $i, $title = '' ) { if ( $title == '' ) $title = "Page {$i}"; echo "{$i} "; }
    setelah dipraktekan.,? kenapa ya.,?

    Reply

    djawa Reply:

    itu munculnya di atas/bagian header

    Reply

  9. 15-9-2011 at 09:24 | #9

    makasih atas infonya tapi gimana caranya memunculkan pake number kalau ane pake blogspot ?

    Reply

  10. 25-9-2011 at 23:29 | #10

    Weitttz mantap Je….thanks yo Gan

    Reply

Comment pages
1 2 3 4 5 7 2434
0+3=? (Wajib diisi)