WordPress eklentisiz ajax daha fazla yükle seçeneği

WordPress eklentisiz ajax daha fazla yükle seçeneği

WordPress eklentisiz ajax daha fazla yükle seçeneği 129

Günümüzde tema tasarleken en önem verilen şey tasarımınızın işlevselliğidir. Tasarımınızın kullanımı kolay olduğu sürece her daim google ve ziyaretçileriniz tarafından sevileceksiniz. Bu yazımda sizlere genellikle Twitter, İnstagram gibi yerlerde görmeye alışık olduğunuz nesnelerin ihtiyaç halinde yani aşağıya inildikçe gözükmesini sağlayan bir ajax eklentisinden bahsedeceğim.

Demo

Başlayalım

İlk olarak div oluşturarak başlıyoruz.

<div id="lazyload">

</div>

WordPress yazılarını çağırmak için php döngüsü oluşturalım

<?php
$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
$query_args = array(
'post_type' => 'post',
'posts_per_page' => 5,
'paged' => $paged
);
if (have_posts()) {
?>

<?php
}
?>

Her sayfa için ayrı bir div oluşturalım, yeni yazılar yüklendikçe page_1, page_2 diye div oluşacak.

<div class="page" id="p<?php echo $paged; ?>">

</div>

Sonra, her bir yazıyı farklı div içine alarak yazının başlığını özetini çağıralım.

<?php while (have_posts()) { the_post(); ?>
<article>
<header class="entryheader">
<h2 class="entrytitle"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
</header>
<div class="entrycontent">
<?php the_excerpt(); ?>
</div>
</article>
<?php } ?>

Şimdide yazıların altına daha fazla butonunu ekleyelim.

<div id="spinner">
<img src="loading.gif">
</div>

Son olarakta js kodlarımızı oluşturalım.

[js]
<script>
jQuery(function(){
var page = 2;
var loadmore = ‘on’;
jQuery(document).on(‘scroll resize’, function() {
if (jQuery(window).scrollTop() + jQuery(window).height() + 60 > jQuery(document).height()) {
if (loadmore == ‘on’) {
loadmore = ‘off’;
jQuery(‘#spinner’).css(‘visibility’, ‘visible’);
jQuery(‘#lazyload’).append(jQuery(‘<div class=”page” id=”p’ + page + ‘”>’).load(‘/?paged=’ + page + ‘ .page > *’, function() {
page++;
loadmore = ‘on’;
jQuery(‘#spinner’).css(‘visibility’, ‘hidden’);
}));
}
}
});
jQuery( document ).ajaxComplete(function( event, xhr, options ) {
if (xhr.responseText.indexOf(‘class=”page”‘) == -1) {
loadmore = ‘off’;
}
});
});
</script>
[/js]

Evet işlem tamamlandı sıra sıra işlemleri yapamayanlar için tüm kodları aşağıda birleştirdim.

<div id="lazyload" class="grid_12">
<?php
$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
$query_args = array(
'post_type' => 'post',
'posts_per_page' => 5,
'paged' => $paged
);
?>
<?php if (have_posts()) { ?>
<div class="page" id="p<?php echo $paged; ?>">
<?php while (have_posts()) { the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class('entry') ?>>
<header class="entryheader">
<h2 class="entrytitle"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
</header>
<div class="entrycontent">
<?php the_excerpt(); ?>
</div>
</article>
<?php } ?>
</div>
<?php } ?>
</div>
<div id="spinner">
<img src="loading.gif">
</div>
<script>
jQuery(function(){
var page = 2;
var loadmore = 'on';
jQuery(document).on('scroll resize', function() {
if (jQuery(window).scrollTop() + jQuery(window).height() + 60 > jQuery(document).height()) {
if (loadmore == 'on') {
loadmore = 'off';
jQuery('#spinner').css('visibility', 'visible');
jQuery('#lazyload').append(jQuery('<div class="page" id="p' + page + '">').load('/?paged=' + page + ' .page > *', function() {
page++;
loadmore = 'on';
jQuery('#spinner').css('visibility', 'hidden');
}));
}
}
});
jQuery( document ).ajaxComplete(function( event, xhr, options ) {
if (xhr.responseText.indexOf('class="page"') == -1) {
loadmore = 'off';
}
});
});
</script>
Uckan

1995 doğumlu, balıkesirde yaşayan Fenerbahçeli kendi halinde bir yazar..

Yorumlar (5)

Yapılan Yorumlar (5)

  1. Hocam birde bu sistemi aşağı scroll yapınca değilde daha fazla butonu yapıp ona tıklayınca gelecek şekilde nasıl yapabiliriz. Birde kodlarda şöyle bir problem var. Mesela ben 4.sayfadayım. aşağı scroll yapınca 2. sayfa geliyor sonra 3, 4, 5, diye gidiyor. Direkt 5. sayfayı getirmiyor her seferinde 2.sayfadan getirmeye başlıyor.

  2. Hocam öncelikle bu güzel paylaşımınız için teşekkür ediyorum. Ben bunu sizin sitenizdeki gibi yazı içerisinde aşağı inince diğer yazının hatta sonraki yazıdan ziyade etiketlere göre ayarlanmış bir sonraki benzer yazının açılmasını istiyorum. Nasıl yapabiliriz acaba?

    • Bu özellik hakkında detaylı bir yazı hazırlamayı düşünüyorum, beklemede kalın.

      • Bekliyorum hocam teşekkürler.

  3. Çalışmıyor!