WordPress için Bootstrap sayfalama…

Boostrap altyapılı bir tema kullanmıyor olsanız bile buna ihtiyacınız olabilir. Aslında özelleştirilmiş bir sayfalama fonksiyonu ile karşı karşıyayız. Birçok amaçla kullanabileceğiniz bir fonksiyon. Bunu temanızda kullanabilmek için tabii ki bootstrap sayfalama css kodlarına sahip olmanız gerekmekte. Yazının sonuna o alanın da linkini ekleyeceğim. Gelelim kodlarımızı göstermeye…

Kod

Aşağıdaki kodu temanızın functions.php dosyası içinde en sonda bulunan ?> işaretinden önce ekleyin.

Bootstrap Sayfalama Kodu

<?php

// Numeric Page Navi
function page_navi($before = '', $after = '') {
 global $wpdb, $wp_query;
 $request = $wp_query->request;
 $posts_per_page = intval(get_query_var('posts_per_page'));
 $paged = intval(get_query_var('paged'));
 $numposts = $wp_query->found_posts;
 $max_page = $wp_query->max_num_pages;
 if ( $numposts <= $posts_per_page ) { return; }
 if(empty($paged) || $paged == 0) {
  $paged = 1;
 }
 $pages_to_show = 7;
 $pages_to_show_minus_1 = $pages_to_show-1;
 $half_page_start = floor($pages_to_show_minus_1/2);
 $half_page_end = ceil($pages_to_show_minus_1/2);
 $start_page = $paged - $half_page_start;
 if($start_page <= 0) {
  $start_page = 1;
 }
 $end_page = $paged + $half_page_end;
 if(($end_page - $start_page) != $pages_to_show_minus_1) {
  $end_page = $start_page + $pages_to_show_minus_1;
 }
 if($end_page > $max_page) {
  $start_page = $max_page - $pages_to_show_minus_1;
  $end_page = $max_page;
 }
 if($start_page <= 0) {
  $start_page = 1;
 }
  
 echo $before.'<div class="pagination"><ul class="clearfix">'."";
 if ($paged > 1) {
  $first_page_text = "«";
  echo '<li class="prev"><a href="'.get_pagenum_link().'" title="İlk">'.$first_page_text.'</a></li>';
 }
  
 $prevposts = get_previous_posts_link('← Previous');
 if($prevposts) { echo '<li>' . $prevposts  . '</li>'; }
 else { echo '<li class="disabled"><a href="#">← Önceki</a></li>'; }
 
 for($i = $start_page; $i  <= $end_page; $i++) {
  if($i == $paged) {
   echo '<li class="active"><a href="#">'.$i.'</a></li>';
  } else {
   echo '<li><a href="'.get_pagenum_link($i).'">'.$i.'</a></li>';
  }
 }
 echo '<li class="">';
 next_posts_link('Sonraki →');
 echo '</li>';
 if ($end_page < $max_page) {
  $last_page_text = "»";
  echo '<li class="next"><a href="'.get_pagenum_link($max_page).'" title="Son">'.$last_page_text.'</a></li>';
 }
 echo '</ul></div>'.$after."";
}

?>

Bunu kullanabilmek için bootstrap css dosyasına ihtiyacınız olacak. Temanızın header.php dosyası içine etiketinden önce aşağıdaki kodu ekleyin. Unutmayın bu dosya temanızın css dosyasının yanında olmalı.

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/bootstrap.css">

Bunları ekledikten sonra istediğiniz alanda bu fonksiyonu kullanmak için yapmanız gereken ilgili dosya içine (örn index.php, page.php) aşağıdaki fonksiyonu çağırın.

<?php page_navi(); ?>

Linkler
http://twitter.github.com/bootstrap/components.html#pagination

http://twitter.github.com/bootstrap/customize.html

http://wp-snippets.com/pagination-for-twitter-bootstrap

Selametle