WordPress kod bankası yazılarıma gelen taleplerin doğrultusunda gene yakın geçmişte bir projemde kullandığım kaliteli bir hook ‘u sizler ile paylaşmak beni çok mutlu edecek.
Başlıkta ben her şeyi anlatmaya çalıştım ama kısaca özetlemem gerekirse, Facebook ve Twitter gibi sosyal medya ağlarında sayfadaki kaydırma çubuğunu çektiğinizde eski yazıları nasıl alırım mantığından yola çıktığımızda, WordPress’in sayfalama mimarisini kullanarak ve Jquery bilgimizi kullanarak bunu nasıl yaparız diye araştırdım.
Ve fantastik içerikleri yayımlamak için bir müşterim bu özelliğin havalı olduğunu ve kendi blogunda da uygulamamız gerektiğini söyleyince el mahkum yapmak gerekti. Hal böyle olunca çok ama çok havalı bir sonuç elde ettim ve burada da sizler ile paylaşmak istedim. Artık sizlerde bu havalı uygulamayı kullanarak daha şık çıktılar elde edebilirsiniz.
Lakin bu uygulamanın seo açısından pek de faydalı olmadığını belirtmek isterim, malum, normal sayfalama yapısında oluşan alt sayfalara bu uygulama ile veda etmek durumundasınız.
Adım adım makaleyi takip ederek, sizde artık sayfa indikçe yüklenen içeriklere sahip olabileceksiniz. Buyrun sonraki sayfaya geçelim.
1- Fonksiyonlarımızı ve Action’larımızı oluşturmak :
İlk olarak yapılacak işlem wp_register_script metodumuz ile jquery kütüphanemizin son sürümünü temamıza dahil ediyorum. Siz farklı eklentiler veya başka temalar kullanıyorsanız ve bu kütüphaneyi çağırıyorsanız bu adımı geçebilirsiniz.
Ben örnek uygulamada Twenty Ten temasını kullanıyorum …
Fonksiyon dosyamıza eklememiz gereken yapı;
add_action('wp_ajax_infinite_scroll', 'Ft_Poz_ScrollerPagenavi'); // Kullanıcı girişi yapılırsa
add_action('wp_ajax_nopriv_infinite_scroll', 'Ft_Poz_ScrollerPagenavi'); // Kullanıcı girişi yapılmazsa
function Ft_Poz_ScrollerPagenavi(){
$loopFile = $_POST['loop_file'];
$paged = $_POST['page_no'];
$posts_per_page = get_option('posts_per_page');
query_posts(array('paged' => $paged ));
get_template_part( $loopFile );
exit;
}
function Ft_Poz71_ScriptAdd() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js');
wp_enqueue_script( 'jquery' );
}
add_action('wp_enqueue_scripts', 'Ft_Poz71_ScriptAdd');Hemen ardından; hazırlamış olduğumuz register_script ve add_action’larımızın açıklamasını yapacak olursak, varsayılan action’ımız burada wp_ajax_ arkasından gelen ekler ie, jquery fonksiyonlarımıza verdiğimiz isimler siz bunları kendinize göre kişiselleştirebilirsiniz elbette.
Diğer sayfaya geçerek, header.php dosyamızda head tag’leri arasındaki jquery betiğimizi nasıl yazdık ona bakalım.
[B]2- Jquery fonksiyonlarımızı oluşturmak :[/B]
Head kapanış etiketinden hemen önce tanımlamamızı sayfa ve tekil yazı şablonları dışında her alanda geçerli olmak üzere şu şekilde hazırlıyoruz.
<script>
jQuery(document).ready(function($) {
var count = 2;
var total = max_num_pages; ?>;
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
if (count > total){
return false;
}else{
loadArticle(count);
}
count++;
}
});
function loadArticle(pageNumber){
$('a#PozFantPagMoreContent').show('fast');
$.ajax({
url: "/wp-admin/admin-ajax.php",
type:'POST',
data: "action=infinite_scroll&page_no="+ pageNumber + '&loop_file=loop',
success: function(html){
$('a#PozFantPagMoreContent').hide('1000');
$("#content").append(html);
}
});
return false;
}
});
</script>
Bu kısımda önemli olan yer #content adındaki css seçicimizin post loop ‘ının kapsadığı kısım olduğuna dikkat edilmesidir.
Yani ;
Loop kısmı Sayfalama yapımız çalışabilmesi için bu şekilde kapsayan bir seçici yaratmalıyız. Varsa şayet hem Jquery kısmından hem de loop kısmından özelleştirilmiş seçiciyi ek olarak tanımlamanız lazım.
Devam edelim…
3- Bir kaç dokunuş daha
Fonksiyonlarımız ve sorgularımızı yazdık, şimdi görsel açıdan nasıl daha çekici hale getirebiliriz aşamasındayız. Bunun için kullanıcı scrool ile sayfayı alta indirdiğinde yazıların yüklendiğini gösteren bir loader ikonu ekleyeceğiz. Ben footer.php kısmında bunu şu şekilde ekledim ;
Yeni yazılar yükleniyor... ; ?>/images/PozLoader.gif)
Ardından a değermizin CSS yapısını şu şekilde tanımlıyoruz :
a#PozFantPagMoreContent{position: fixed; z-index: 2; bottom: 15px; right: 10px; display:none;}Artık daha şık bir sayfala mantığımız var ;) Scroll indikçe dökülen yazılar. Gayet Fantastik değil mi? ;)
Kaynak dosyaları indirmek için bu bağlantıyı kullanabilirsiniz.
Twenty Ten temasında değişiklik yaptığımdan yapı o temaya uygundur. Adımları takip ederek , kendiniz kendi temanıza uyarlayabilirsiniz.
İyi bloglamalar.
Yararlanılan kaynaklar :
@Eizil‘in teknikleri için teşekkürler.
Link : http://fatihtoprak.com/wordpress-icin-sayfa-scrool-asagi-cekildikce-yuklenen-eski-yazilari-almak-facebook-veya-twitter-tarzi-sayfalama-yapmak-ipucu-71.html/4
Happy coding.
