Bagaimana Cara Membuat Nomer Halaman Paginasi di WordPress
Bagaimana Cara Membuat Nomer Halaman Paginasi di WordPress
Daftar Isi
Bagaimana Cara menbuat nomer halaman paginasi di wordpress? Jika kita sering mengamati banyak blog wordpress, maka kita akan melihat nomer paginasi di halaman homepade, kategori dan sebagainya. Nomer halaman tadi sangat bermanfaat untuk mencari halaman – halaman post yang sudah lama dan “tenggelam” didalam halaman posting lainnya.
Ada 2 cara untuk menambah nomer halaman di blog wordpress kita, yang pertama adalah menggunakan plugin sedangkan yang kedua adalah cara manual.
Sebenarnya, banyak juga theme atau template wordp[ress yang sudah menambahkan fungsi semacam ini. Tetapi, lebih banyak theme yang tidak memilikinya. Jadi, untuk keperluan menambahkan angka halaman, kita bisa melakukan 2 hal:
Menggunakan Plugin
Cara yang paling praktis adalah menggunakan plugin untuk menambah angka halaman di wordpress.
Menggunakan plugin WP-Pagenavi
WP-Pagenavi adalah salah satu plugin yang kita butuhkan. Kita hanya perlu menginstal serta mengaktifkannya saja.
Menggunakan plugin WP-Paginate
Plugin ini mirip dengan plugin sebelumnya. Perbedaan mungkin terletak kepada beberapa fitur tambahan yaitu markup pagination. Disini, kita bisa memilih menggunakan nomer halaman secara tepat dan menggunakan fungsi CSS untuk mengganti tampilan.
Bagi yang ingin lebih, Anda bisa mencoba menggunakan koding. Tenang, disini kita tidak belajar menulis koding satu persatu. Tetapi, kita akan menggunakan script yang sudah ada. Jika Anda ingin tahu apa yang dilakukan script – script tersebut, silahkan meneliti script satu persatu.
Membuat nomer halaman secara manual
Jika kita tidak ingin memperberat theme kita dengan tambahan plugin yang berbagai macam, kita bisa memasukkan kode berikut pada “functions.php” dari theme yang kita gunakan. Kita menambahkannya dibagian bawah.
function pagination_bar() {
global $wp_query;$total_pages = $wp_query->max_num_pages;
if ($total_pages > 1){
$current_page = max(1, get_query_var(‘paged’));echo paginate_links(array(
‘base’ => get_pagenum_link(1) . ‘%_%’,
‘format’ => ‘/page/%#%’,
‘current’ => $current_page,
‘total’ => $total_pages,
));
}
}
Kemudian, kita tempatkan kode berikut di halaman yang biasanya bersambung seperti homepage, archive, category serta tags.
Tempatkan file ini di index.php atau archive.php. Pastekan diantara “endiff” sebelum “endwhile.”
<Nav class = “pagination”>
<? Php pagination_bar (); ?>
</ Nav>
Untuk yang lain, kode ini didapat dari sebuah theme “inove” tetapi sedikit diubah serta sudah memiliki CSS sendiri.
Kode ini juga dimasukkan di “functions.php.”
if( $nextpage == “” ) { $nextpage = “»”; }
if( $prevpage == “” ) { $prevpage = “«”; }
if( $startspace == “” ) { $startspace = “…”; }
if( $endspace == “” ) { $endspace = “…”; }if($limit_pages == “”) { $limit_pages = “4”; }
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;
}
Anda bisa mengganti berapa halaman yang akan dibuatkan nomer halamannya. Kami menggunakan “4.”
Tambahkan kode ini (fungsi loop) pada halaman – halaman yang menampilkan banyak halaman.
<?php if(function_exists(‘wp_page_numbers’)) : ?><?php wp_page_numbers() ?><?php else : ?>
Kemudian, tampilkan kode berikut di halaman yang biasanya menampilkan banyak post seperti archive, kategori, search.php dan sebagainya, dibawah kode diatas.
<span class=”newer”><?php previous_posts_link(__(‘Newer Entries’, ‘inove’)); ?></span>
<span class=”older”><?php next_posts_link(__(‘Older Entries’, ‘inove’)); ?></span>
Untuk CSS nya, silahkan copy dan paste kode dibawah ini:
#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; }
Silahkan juga mengedit warna, border dan sebagainya sesuai selera.
