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.

Aşağıdaki kodu temanızın işleyişini sağlayan functions.php dosyası içine yerleştireceksiniz. Olası yanlışlıklarıda sisteminiz hata verebileceğinden dolayı lütfen functions.php dosyasının bir yedeğini alınız. functions.php genel olarak wp-content/themes/temanizin-adi/ klasöründe bulunur.

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
Bootstrap

Bootstrap

How To Create Pagination using Bootstrap

Selametle

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir