WordPress’te Bootstrap sayfalama kullanımı

WordPress’te Bootstrap sayfalama kullanımı
66

Eğer kullandığınız tema bootstrap ile tasarlanmışsa wp-pagenavi eklentisini yüklemenize gerek yok. Bootstrap bir çok özelliği içinde bulundurduğu gibi pagination yani sayfalamayıda içinde bulunduruyor. Bizim yapmamız gereken tek şey bunu wordress’e entegre etmek. O işide bu yazı ile anlatacağım.

İlk olarak bootstrap’ın pagination makalesine göz atın.

bootstrap-pagination-wordpress

Bootstrap Pagination Özellikler

  • İlk ve son sayfa butonları (First, Last)
  • İleri, geri butonları (Next, Previous)
  • Sayfa sayısı ve bulunduğunuz sayfayı gösteren buton (Page 2 of 9)
  • Küçük cihazlarda ilk ve son yazıları gözükmez
  • Küçük cihazlarda önceki ve sonraki yazıları gözükmez

WordPress’te Bootstrap sayfalama kullanımı

İlk olarak aşağıdaki kodu temanızın functions.php dosyasının içerisine ekleyin.

// Bootstrap pagination function

function wp_uck_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 '<nav><ul class="pagination"><li class="disabled hidden-xs"><span><span aria-hidden="true">Page '.$paged.' of '.$pages.'</span></span></li>';
if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<li><a href='".get_pagenum_link(1)."' aria-label='First'>&laquo;<span class='hidden-xs'> First</span></a></li>";
if($paged > 1 && $showitems < $pages) echo "<li><a href='".get_pagenum_link($paged - 1)."' aria-label='Previous'>&lsaquo;<span class='hidden-xs'> Previous</span></a></li>";
for ($i=1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
{
echo ($paged == $i)? "<li class=\"active\"><span>".$i." <span class=\"sr-only\">(current)</span></span>
</li>":"<li><a href='".get_pagenum_link($i)."'>".$i."</a></li>";
}
}
if ($paged < $pages && $showitems < $pages) echo "<li><a href=\"".get_pagenum_link($paged + 1)."\" aria-label='Next'><span class='hidden-xs'>Next </span>&rsaquo;</a></li>";
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<li><a href='".get_pagenum_link($pages)."' aria-label='Last'><span class='hidden-xs'>Last </span>&raquo;</a></li>";
echo "</ul></nav>";
}

}

Daha sonra aşağıdaki kodu index.php, archive.php, tag.php, category.php sayfalarının en altına(son php endif; ‘den sonra) ekleyin.

<?php
if (function_exists("wp_bg_pagination"))
{
//wp_bg_pagination($the_query->max_num_pages);
wp_bg_pagination();
}
?>

İşlemimiz tamamlanmıştır sayfayı yenileyip olanlara göz atın.

Yorum Yap