Ecancan – Kişisel Blog

WordPress Eklentisiz Sayfalama Yapımı (Eklentisiz Pagenavi)

AHMET CAN

WordPress üzerinde bir çok eklenti kullanmaktayız ve genel olarak kullandığımız bir çok eklenti mevcuttur bu eklenti sayısının üzerinede ek olarak kendi yüklediğimiz eklentiler sitemizi yavaşlatmaktadır. Bu genel olarak kullanılan eklentilerden en başlıca olanı [onemli]wp-peganavi[/onemli] eklentisidir. Ne kadar az eklenti kullanırsak wordpress ile kurulmuş sitemizi bir o kadar hızlı olarak yayında tutabiliriz. WordPress sisteminde dahil olan bir kaç fonksiyon ile standart bir sayfalama işlemi yapılabilmektedir bunlar bu fonksiyonlar

<?php next_posts_link('Önceki Sayfa »', 0); ?> | <?php previous_posts_link('Sonraki Sayfa »', 0); ?>

fonksiyonlarıdır. Bu fonksiyonları kullanarak iki ayrı buton ile önceki ve sonraki sayfalara giden link yapsını oluşturabiliriz ancak bu sistem kullanıcılar tarafından kullanışsız ve zor bir sistem olacaktır. Bu sistemi biraz daha genişletmek için aşağıdaki kodları gerekli yerlere eklemeniz sonucunda istenilen dinamik yapıya ulaşacaksınız.

[onemli]Functions.php dosyasına eklenecek kodlar[/onemli]

function sayfalama($pages = '', $range = 3)
{
$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='wp-pagenavi'>";
if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>İlk</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)."'>Son</a>";
echo "</div>";
}
}

Yukarıdaki kodu ilgili sayfaya ekledikten sonra bu fonksiyonu istediğimiz yerde çalıştırmak için aşağıdaki php kod öbeğini kullanmanız yeterli olacaktır.

<?php sayfalama(); ?>

Bu işlemden sonra artık eklentisiz bir şekilde ana sayfanızdaki son yazılarınızı sayfalama işlemini gerçekleştirmiş olacaksınız. Anak birde buna biraz css düzenlemeler ekleyerek estetik bir görünüm sağlayalım.

.wp-pagenavi .extend{
display: none;
}
.wp-pagenavi .pages{
display: none;
}
.wp-pagenavi span.current{border: 1px solid #000;
color: #000;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
-moz-box-shadow: inset 0 0 1px #fff;
-ms-box-shadow: inset 0 0 1px #fff;
-webkit-box-shadow: inset 0 0 1px #fff;
box-shadow: inset 0 0 1px white;
background: #fff; /* For IE and older browsers */
background-image: -moz-linear-gradient(top,#fff 0,#fff 100%);
background-image: -ms-linear-gradient(top,#fff 0,#fff 100%);
background-image: -o-linear-gradient(top,#fff 0,#fff 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FAFAFA),color-stop(100%,#fff));
background-image: -webkit-linear-gradient(top,#fff 0,#fff 100%);
background-image: linear-gradient(to bottom,#fff 0,#fff 100%);
display: inline-block;
line-height: 2.48em;
height: 2.4em;
text-decoration: none;
margin: 0 .3em 12px;
padding: 0 .85em;
font-size: 12px;
text-shadow: 0 1px 0 #fff;}

.wp-pagenavi a, .wp-pagenavi a:link,.wp-pagenavi a:visited {
border: 1px solid #CCC;
color: #666;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
-moz-box-shadow: inset 0 0 1px #fff;
-ms-box-shadow: inset 0 0 1px #fff;
-webkit-box-shadow: inset 0 0 1px #fff;
box-shadow: inset 0 0 1px white;
background: #fff; /* For IE and older browsers */
background-image: -moz-linear-gradient(top,#fff 0,#fff 100%);
background-image: -ms-linear-gradient(top,#fff 0,#fff 100%);
background-image: -o-linear-gradient(top,#fff 0,#fff 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FAFAFA),color-stop(100%,#fff));
background-image: -webkit-linear-gradient(top,#fff 0,#fff 100%);
background-image: linear-gradient(to bottom,#fff 0,#fff 100%);
display: inline-block;
line-height: 2.48em;
height: 2.4em;
text-decoration: none;
margin: 0 .3em 12px;
padding: 0 .85em;
font-size: 12px;
text-shadow: 0 1px 0 #fff;
}

.wp-pagenavi a:hover{
border: 1px solid #385ae0 !important;
-moz-box-shadow: 0 0 3px rgba(0,0,0,.25);
-ms-box-shadow: 0 0 3px rgba(0,0,0,.25);
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.25);
box-shadow: 0 0 3px rgba(0,0,0,.25);
}

Bu eklemeyide yaptıktan sonra artık tasarım yönünden de gerekli geliştirmeyi de yapmış durumdayız ve tasarım olarak resimdeki gibi olması gerekmektedir.

Makalemin sonuna kadar okuduğunuz için teşekkür eder ve konu altına yorum atarak destek verirseniz sevinrim. Soru ve sorunlarınız için konu altına yorum bırakabilir yada iletişim sayfasından bana mail gönderebilirsiniz. Bir başka konuda görüşmek üzere.

 

Exit mobile version