WordPress Temasına Eklentisiz Sonsuz Kaydırma Ekleme
Merhaba! Bu yazıda, WordPress temanıza eklenti kullanmadan sonsuz kaydırma (infinite scroll) özelliğini nasıl ekleyeceğinizi anlatacağım. Kendi projelerimde bu yöntemi kullandığımda, hem performans hem de kullanıcı deneyimi açısından harika sonuçlar aldım. İnternetteki birçok kaynak, ya eklenti kullanımına odaklanıyor ya da sadece index.php için çalışan ama category.php veya author.php gibi sayfalarda sorun çıkaran yöntemler sunuyor. Bu rehber, her sayfada doğru çalışan, özelleştirilebilir bir çözüm sunuyor. Örnek olarak, AdminLteWpTheme kaynak kodlarını referans alabilirsiniz; orada çalışan bir örnek bulabilirsiniz. Hazırsanız, başlayalım!
Önce Alt Tema Oluşturun
Bu özelliği eklemeden önce, bir alt tema (child theme) oluşturmanızı öneririm. Böylece ana temanızın güncellemeleri, yaptığınız özelleştirmeleri etkilemez. Alt tema oluşturma adımları için WordPress’in resmi dokümantasyonuna göz atabilirsiniz.
Adım 1: functions.php Dosyasına Kod Ekleme
Sonsuz kaydırma için AJAX tabanlı bir fonksiyon oluşturacağız. Aşağıdaki kodu, temanızın (veya alt temanızın) functions.php dosyasına ekleyin:
// Sonsuz Kaydırma
function wp_infinitepaginate() {
$loop_dosyasi = $_POST['loop_file'];
$sayfa_no = $_POST['page_no'];
$aksiyon = $_POST['what'];
$deger = $_POST['value'];
if ($aksiyon == 'author_name') {
$arg = array('author_name' => $deger, 'paged' => $sayfa_no, 'post_status' => 'publish');
} elseif ($aksiyon == 'category_name') {
$arg = array('category_name' => $deger, 'paged' => $sayfa_no, 'post_status' => 'publish');
} elseif ($aksiyon == 'search') {
$arg = array('s' => $deger, 'paged' => $sayfa_no, 'post_status' => 'publish');
} else {
$arg = array('paged' => $sayfa_no, 'post_status' => 'publish');
}
# Yazıları yükle
query_posts($arg);
get_template_part($loop_dosyasi);
exit;
}
add_action('wp_ajax_infinite_scroll', 'wp_infinitepaginate'); // Giriş yapmış kullanıcılar için
add_action('wp_ajax_nopriv_infinite_scroll', 'wp_infinitepaginate'); // Giriş yapmamış kullanıcılar içinBu Kod Ne Yapar?
- AJAX İsteği: Bu fonksiyon, bir AJAX isteği geldiğinde çalışır ve belirtilen dosyadan bir döngü oluşturur.
- POST Verileri:
- loop_file: HTML kodlarını üretecek döngü dosyasının adı.
- page_no: Hangi sayfanın yükleneceğini belirler.
- what: Kategori, yazar veya arama gibi sayfa türünü belirtir.
- value: Kategori slug’ı, yazar adı gibi değerleri taşır.
- Sorgu Oluşturma: if koşullarıyla, istenen sayfa türüne göre query_posts için parametreler oluşturulur. Ardından, get_template_part ile döngü dosyası çağrılır.
- AJAX Desteği: add_action ile fonksiyon, WordPress’in AJAX sistemine bağlanır (wp-admin/admin-ajax.php).
Bir blog projesinde bu kodu kullandığımda, kategori sayfalarında doğru yazıları yüklemek için what ve value parametrelerini özelleştirdim; bu, kullanıcı deneyimini çok iyileştirdi.
Adım 2: Döngü Dosyası Oluşturma
Temanızın dizininde bir döngü dosyası oluşturun. Dosya adını istediğiniz gibi belirtebilirsiniz, ancak AJAX isteğinde loop_file parametresine bu adı göndermeyi unutmayın. Ben örnek olarak loop.php adını kullandım. Bu dosya, yazılarınızın HTML çıktısını oluşturacak. Örneğin, index.php dosyanızdaki döngüyü kopyalayabilirsiniz. İşte AdminLteWpTheme’den esinlenilmiş bir örnek:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<!-- Zaman çizelgesi etiketi -->
<li class="time-label">
<span class="bg-green"><?php the_time('d.m.Y'); ?></span>
</li>
<!-- Zaman çizelgesi öğesi -->
<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 if (has_post_thumbnail()) {
$resim_yolu = wp_get_attachment_image_src(get_post_thumbnail_id(), 'medium');
?>
<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(); ?>">Devamını Oku</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 yorum', '1 yorum', '% yorum'); ?>
</div>
</div>
</li>
<!-- Zaman çizelgesi öğesi sonu -->
<?php endwhile; ?>
<?php endif; ?>Bu dosyayı bir haber sitesinde kullandığımda, yazılarımın görsel ve düzenli bir şekilde yüklendiğini gördüm. Döngü dosyasını özelleştirerek, temanıza uygun bir tasarım oluşturabilirsiniz.
Adım 3: JavaScript Kodunu Ekleme
Son olarak, sonsuz kaydırmayı etkinleştirmek için JavaScript kodunu index.php, category.php gibi dosyalara eklemelisiniz. Aşağıdaki kod, sayfa aşağı kaydırıldığında yeni yazıları yükler:
<script type="text/javascript">
jQuery(document).ready(function($) {
var count = 2; // Başlangıç sayfası (2. sayfa)
var total = <?php echo $wp_query->max_num_pages; ?>; // Toplam sayfa sayısı
$(window).scroll(function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
if (count > total) {
return false; // Tüm sayfalar yüklendiğinde dur
} else {
loadArticle(count); // Yeni sayfayı yükle
}
count++;
}
});
function loadArticle(pageNumber) {
$('a#inifiniteLoader').show('fast'); // Yükleme simgesini göster
$.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'); // Yükleme simgesini gizle
$("ul.timeline").append(html); // Yeni yazıları ekle
}
});
return false;
}
});
</script>Kategori Sayfaları için Özelleştirme
Kategori sayfalarında (category.php) doğru yazıları yüklemek için what ve value parametrelerini ekleyin. Örneğin:
<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>Kodun Açıklaması
- count: Hangi sayfanın yükleneceğini belirler. İlk yüklemede 2’den başlar, çünkü 1. sayfa zaten yüklüdür.
- total: WordPress’in $wp_query->max_num_pages ile toplam sayfa sayısını alır.
- scroll olayı: Kullanıcı sayfanın sonuna geldiğinde AJAX isteği gönderilir.
- loadArticle: Yükleme simgesini gösterir, AJAX ile yeni yazıları çeker ve HTML’e ekler.
- what ve value: Kategori veya yazar sayfalarında doğru içeriği yüklemek için kullanılır. Örneğin, value kategori slug’ını taşır.
Bir blog sitesinde bu yöntemi uyguladığımda, kategori sayfalarında yalnızca ilgili yazılar yüklendi ve kullanıcılar kesintisiz bir deneyim yaşadı.
Sonuç
WordPress temanıza eklentisiz sonsuz kaydırma eklemek, hem performans dostu hem de özelleştirilebilir bir çözüm. Bu adımları takip ederek, index.php, category.php veya author.php gibi sayfalarda sorunsuz bir sonsuz kaydırma özelliği oluşturabilirsiniz. Kendi projelerimde bu yöntemi kullanarak kullanıcı deneyimini artırdım ve eklenti bağımlılığını azalttım. Siz de bu kodları deneyerek sitenize modern bir dokunuş katabilirsiniz!
if I write the javascript in archive-posttype.php page, Will this code work for custom post type archive page ?
I don’t think it will work on archive. You need to add action and some codes like category, author, search.
Hello Erhan. I’m afraid I couldn’t get it to work! I set up a test site using the default theme (WordPress Twentyseventeen) and generated a set of posts, categories and tags (using FakerPress). I copied the loop from index.php to a file called loop.php and placed it in the root of the theme directory. I added the script to the bottom of both index.php and archive.php (Twentyseventeen theme uses this for archives, categories and tags). I added the function wp_infinitepaginate() to functions.php. Nothing happened at all and there were no errors in the console. Maybe I’ve misunderstood and I should… Read more »
Hello,
I checked your website. Infinite scroll is working. Open developer tools console and check the network section. When you’re bottom of the page, there will be a ajax request. You can see that there are articles in response of the ajax request. You must update the javascript code according to theme.
$('#inifiniteLoader').hide('1000'); $("#posts").append(html);You must update this code. There is no #posts element on the theme so you must find the parrent div of the articles and update the code with that div element.