Şu zamana kadar gördüğüm en problemsiz (eklentisiz olarak) sayfalama kodlarını sizler ile paylaşmak istiyorum. Öncelikle belirtmekte fayda var; kodlar ile uğraşmak istemiyorsanız, hemen WordPress PageNavi eklentisini indirerek, anında blogunuz için sayfalama yapabilirsiniz. Lâkin, her şeyi eklentisiz olarak, sadece kodlar ile gerçekleştirme taraftarı iseniz, sizlerle sayfalama kodlarını paylaşmak istiyorum. İlgili kodları istediğiniz gibi geliştirebilirsiniz, mevcut olan CSS kodlarını da kendinize göre değiştirerek blogunuz için eklentisiz sayfalama özelliğini kullanmaya başlayabilirsiniz.
Öncelik ile aşağıdaki kodları, temanızdaki "functions" adlı dosyanın içerisine ekleyin;
function kriesi_pagination($pages = '', $range = 2)
{
$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)."'>«</a>";
if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>‹</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)."'>›</a>";
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>»</a>";
echo "</div>\n";
}
}
Sonra ise, temanızdaki "index" dosyasına aşağıdaki kodu ekleyiniz;
<?php kriesi_pagination(); ?>
Daha sonra ise, CSS kodlarını da ekleyerek sayfalamayı görsel bakımdan geliştirebilirsiniz;
.pagination {
clear:both;
padding:20px 0;
position:relative;
font-size:11px;
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;
}
Kaynak: Kriesi
Yorum bulunmamaktadır.