WordPress Temasına Pluginsiz Sonsuz Scroll Ekleme

Bu yazımda size wordpress temasına plugin kullanmadan sonsuz scroll eklemeyi anlatacağım. Bu yazım makale en doğru makale olacaktır. Çünkü daha önce kendim sonsuz scroll eklemek için araştırm yaptığımda ya plugin kullanılarak anlatan makaleler ya da index.php dosyasında çalışan ama category.php ya da author.php gibi dosyalarında doğru çalışmayan yöntemler anlatan makaleler bulmuştum.  Diğer dosyalarda doğru çalışmıyorlardı. Çünkü örnek verirsem kategori dosyasında 2. sayfa ve sonrasının yazılarını yüklerken kategoriye göre yüklemiyordu. Tüm sayfaları yüklüyordu.

Bu işlemleri yaparken AdminLteWpTheme‘nin kaynak kodlarına bakabilirsiniz. Orada bunun çalışan halinin kodları mevcuttur.

Öncelikle aşağıdaki kodları functions.php dosyasına ekliyoruz.

//Infinite Scroll
function wp_infinitepaginate(){
 $loopFile = $_POST['loop_file'];
 $paged = $_POST['page_no'];
 $action = $_POST['what'];
 $value = $_POST['value'];
 
 if($action == 'author_name'){
 $arg = array('author_name' => $value, 'paged' => $paged, 'post_status' => 'publish' );
 }elseif($action == 'category_name'){
 $arg = array('category_name' => $value, 'paged' => $paged, 'post_status' => 'publish' );
 }elseif($action == 'search'){
 $arg = array('s' => $value, 'paged' => $paged, 'post_status' => 'publish' );
 }else{
 $arg = array('paged' => $paged, 'post_status' => 'publish');
 }
 # Load the posts
 query_posts( $arg );
 get_template_part( $loopFile );
 
 exit;
}
add_action('wp_ajax_infinite_scroll', 'wp_infinitepaginate'); // for logged in user
add_action('wp_ajax_nopriv_infinite_scroll', 'wp_infinitepaginate'); // if user not logged in

Bir ajax isteği geldiği zaman bu fonksiyonumuz çalışacak, loop oluşturacak ve loop dosyamızı çağıracaktır. Fonksiyonumuzda bazı POST verileri alıyoruz.

“loop_file” bizim loop dosyamızın ismidir. Bu dosyamız html kodlarını oluşturacaktır. Daha sonra ise javascript ile append edeceğiz.

“page_no” sayfa numarasıdır. Bununla hangi sayfanın yazılarını çekeceğimizi belirliyoruz.

“what” ise neye göre sayfaları istediğimizdir. Kategori mi, yazar mı, arama mı gibi.

“value” ise eğer kategori, yazar gibi isteklerde kategori slug ismi, yazar nicename gibi veriyi içerir.

If sorgulaması ile burada ne istediğimize göre query_posts için parametrelerimizi oluşturuyoruz. Daha sonra query_posts ile loop oluşturulup get_template_part ile loop dosyamızı çağırıyoruz.

add_function fonksiyonları ile wp-admin/wp-ajax.php‘ye bir ajax isteği yollandığın fonksiyonumuzun çalıştırılmasını sağlıyoruz. Ajax isteği yollarken action postu içerisinde infinite_scroll gönderiyoruz. Yani başka isimler ve fonksiyonlar ile farklı farklı ajax işlemleri oluşturabilirsiniz.

Daha sonra ise loop dosyamızı oluşturacağız. İsmini burada istediğiniz gibi verebilirsiniz ama unutmayın, “loop_file” postunda onun ismini göndermelisiniz. Ben loop.php ismini verdim. Burada index.php dosyasından direk loopunuzu kopyalayabilirsiniz. Ben AdminLteWpTheme‘nin içindekinden örnek olarak koyuyorum buraya.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 <!-- timeline time label -->
<li class="time-label">
 <span class="bg-green"><?php the_time('d.m.Y ') ?></span>
 </li>
 <!-- /.timeline-label -->
 <!-- timeline item -->
<li>
 <i class="fa fa-newspaper-o bg-blue"></i>
<div class="timeline-item">
 <span class="time"><i class="fa fa-clock-o"></i> <?php the_time('H:i') ?></span>
<h3 class="timeline-header"><a href="<?php the_permalink() ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?> "><?php the_title(); ?></a></h3>
<div class="timeline-body">
<div class="row">
<div class="col-lg-3 col-sm-4 col-xs-6">
 <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
 <?php $resim_yolu = wp_get_attachment_image_src( get_post_thumbnail_id(), 'medium'); if ( has_post_thumbnail() ) { ?>
 
 <img src="<?php echo $resim_yolu[0]; ?>" class="img-responsive" alt="<?php the_title(); ?>" title="<?php the_title() ?>" />
 <?php } ?>
 </a>
 </div>
<div class="col-lg-9 col-sm-8 col-xs-6">
 <?php the_excerpt_rss(); ?>
<div style="margin-top: 10px">
 <a class="btn btn-primary btn-xs" href="<?php the_permalink() ?>" title="<?php the_title(); ?>">Read more</a>
 </div>
 </div>
 </div>
 </div>
<div class="timeline-footer">
 <i class="fa fa-user"></i> <a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" title="<?php the_author(); ?>"><?php the_author(); ?></a> | <i class="fa fa-folder-open"></i> <?php the_category(', ') ?> | <i class="fa fa-comments"></i> <?php comments_number('0 comment', '1 comment', '% comments' );?>
 </div>
 </div>
 </li>
 <!-- END timeline item -->
 <?php endwhile; ?>
<?php endif; ?>

En son olarak da index.php, category.php gibi dosyalarımızda javascript kodlarımızı yazmalıyız.

<script type="text/javascript">
 jQuery(document).ready(function($) {
 var count = 2;
 var total = <?php echo $wp_query->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#inifiniteLoader').show('fast');
 $.ajax({
 url: "<?php echo admin_url(); ?>admin-ajax.php",
 type:'POST',
 data: "action=infinite_scroll&page_no="+ pageNumber + '&loop_file=loop',
 success: function (html) {
 $('li#inifiniteLoader').hide('1000');
 $("ul.timeline").append(html);
 }
 });
 return false;
 }
 
 });
</script>

Count değişkeni bizim sayfa numaramızdır. İlk başta 2 çünkü ilk başta 2. sayfanın yazıları yüklenecek. Her ajax isteğinde bir sayı artırılmakta. Total değişkenimiz ise toplam sayfa sayımızdır. Bu sayede her sayfa aşağıya indiğinde çalışmayacak şekilde ayarlayacağız.

$(window).scroll(function(){} ); fonksiyonu ile sayfa aşağıya inince ajax isteği göndermesini sağlayacağız ve count değişkenini bir artıracağız. Tabi count değişkenimiz total değişkenimizden daha büyük olduğu sürece diye bir If sorgusunu yazıyoruz ki gereğinden fazla çalışmasın.

loadarticle() fonksiyonumuz ile ilk başta yükleme iconunun gözükmesini sağlıyoruz. Daha sonra ise ajax isteğini göndermekte. data verisinde gönderilerek post verilerini inceleyebilirsiniz. Kategori, yazar gibi yerlerde de what ve value verilerini eklemeyi unutmuyoruz. Örnek olarak category.php dosyasındakini yazıyorum. Orada what ve value verilerini görebilirsiniz.

Umarım bu yazım işinize yaramıştır.

<script type="text/javascript">
 jQuery(document).ready(function ($) {
 var count = 2;
 var total = <?php echo $wp_query->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#inifiniteLoader').show('fast');
 $.ajax({
 url: "<?php echo admin_url(); ?>admin-ajax.php",
 type: 'POST',
 data: "action=infinite_scroll&page_no=" + pageNumber + '&loop_file=loop&what=category_name&value=<?php echo $yourcat->slug; ?>',
 success: function (html) {
 $('li#inifiniteLoader').hide('1000');
 $("ul.timeline").append(html);
 }
 });
 return false;
 }
 
 });
</script>