WordPress site sahipleri, izleyicilerini mümkün olduğunca uzun süre sitelerinde tutmak için çeşitli teknikler kullanır. Bu durum kaliteli içeriğin yanı sıra ek gezinme, arama özelliği, son gönderileri içeren bir kenar çubuğu, etiketler ve diğerleri gibi çeşitli kullanışlı özelliklere sahip olmakla yardımcı olur. Bu özelliklerin çoğu web sitesi başlığında veya kenar çubuğunda bulunurken, mevcut bir sayfanın veya arşivin sonuna yakın bir yerde hedef kitlenizle etkileşime giren bir özellik vardır. Bu durum daha fazla yükle düğmesidir.
WordPress’teki daha fazla yükle düğmesinin yalnızca bloglar için ayrıldığını düşünebilirsiniz, fakat bunun gibi bir özellik, farklı içeriğe sahip web sitelerinde izleyici katılımını da artırabilir. Daha fazla yükle düğmesi, sonsuz kaydırmalı sayfalandırma özelliğine benzer şekilde çalışır. Basitçe söylemek gerekirse, mevcut sayfayı yeniden yüklemeden ve sizi başlangıcına götürmeden yeni içerik gruplarını hızlı bir şekilde getirmek için eşzamansız HTTP (Ajax) isteklerini kullanır; aksi takdirde her ikisi de hemen çıkma oranınızı artırır. Püf Nokta: ziyaretçilerinizin içeriğinize göz atmaya devam etme olasılığı daha yüksektir ve bu da dönüşüm şansınızı artıracaktır.
Daha fazla yükle düğmesi kullanmanın faydaları açık olsa da maalesef bu özellik WordPress’in yerleşik bir parçası değildir. Fakat bunu kendi başınıza eklemenin bir yolu var ve biz de bu makalede size bunu göstereceğiz. Gezinmeyi kolaylaştırmak için bu konuyu daha küçük, daha yönetilebilir kavramlara ayırdık:
-
Daha fazla yükle düğmesi oluşturma
-
Kısa kod çağrısını sayfaya ekleme
-
Daha fazla yükle düğmesinin şekillendirilmesi
Başlamadan önce
Daha fazla gönderi yükle düğmesi oluşturmak için çoğu WordPress kullanıcısı, daha fazla yükleme gezinme türünü kullanan gönderiyle ilgili kısa kodlara sahip temaları kullanmayı tercih eder. QodeInteractive’in tüm temaları bu özelliğe sahiptir ve genellikle birçok premium temada bulunur. Fakat uygun bir WordPress teması kullanmanın yanı sıra onu uygulamanın başka yolları da var. Seçeneklerden biri size yardımcı olacak uygun bir WordPress eklentisi bulmak, diğeri ise özel kod yazmaktır. Bu yazıda, Ajax Daha Fazla Yükle adlı bir eklenti kullanarak nasıl daha fazla yükle düğmesi ekleyeceğinizi göstereceğiz.
Ajax Daha Fazla Yükle, gönderi listelerini ve diğer özel gönderi türlerini daha fazla veya sonsuz kaydırmalı sayfalandırma türüyle görüntülemenizi sağlayan ücretsiz bir eklentidir. Bunu yapmak için Ajax destekli sorguları kullanır. Eklenti, adı verilen tek bir kısa kod sağlar. [ajax_load_more] ve bu kısa kodun ayarlarını yapmak için sezgisel bir panel.
Ayrıca varsayılan bir yineleyici şablonu ve stilizasyon için kullanabileceğiniz karşılık gelen bir CSS kodu sunar. Bununla birlikte eklenti ayrıca özel değişiklikler eklemek için çok fazla alan bırakır. Bunlar, özel yineleyici şablonunuzu kullanma ve hatta filtre kancalarını kullanarak eklenti kodunu ayarlama gibi daha gelişmiş bir dizi sorgu seçeneği içerir.
Bu eklenti ayrıca iyi belgelenmiştir, bu nedenle onu kullanmak ve herhangi bir özel değişiklik yapmak nispeten kolaydır. Genel olarak, Ajax Load More eklentisi, yeni başlayanlardan en ileri düzeylere kadar çok çeşitli WordPress kullanıcıları için uygundur. Eklentinin premium sürümünü seçerseniz, özel ve tema tekrarlayıcılar, ek gönderi türleri, düzen şablonları oluşturabilir veya önbelleğe alma, SEO sayfa indeksleme ile çalışabilir ve Elementor Posts widget’ı ve WooCommerce listesiyle uyumluluğun keyfini çıkarabilirsiniz. widget’lar.
Fakat sadece bu özelliği denemek istiyorsanız veya bu eklentinin size uygun olduğundan emin değilseniz, size Ajax Daha Fazla Yükle eklentisinin ücretsiz sürümünü kullanarak daha fazla yükle düğmesi oluşturma adımlarını göstereceğiz. Ayrıca bu eklentiyi ısmarlama bir tekrarlayıcı şablonu ve stil CSS kodu ile nasıl kullanacağınıza da yardımcı olacağız. Hadi başlayalım!
Daha fazla yükle düğmesi oluşturma
Eklentiyi yükledikten sonra, onu düzgün bir şekilde kullanmak için atmanız gereken üç adım vardır: bir tekrarlayıcı şablonu oluşturun, kısa kod çağrı kodunu oluşturun ve kısa kod çağrısını sayfanızdaki uygun yere ekleyin. Üç adımı da tamamladığınızda, uygun sayfalandırma seçeneğiyle gönderilerin (veya diğer özel gönderi türlerinin) bir listesini görüntüleyeceksiniz. Daha fazla yükle düğmesi veya sonsuz kaydırma kullanmayı tercih etmeniz yalnızca tercihlerinize bağlıdır. Bu makale daha fazla yükle düğmesine adandığından, kullanacağımız şey bu.
Farklı bir gönderi listesi oluşturmak isterseniz, bu üç aşamalı işlemi tekrarlamanız gerekecek. Her bir kısa kod kullanımı için farklı bir kısa kod seçeneği seti seçerek, web sitenizde farklı içerikler görüntüleyebilirsiniz.
Üç adımın her birini dikkatlice inceleyeceğiz. Fakat eklentinin kendisiyle oluşturulan tüm gönderi listelerini hedeflemek için bazı genel ayarlar sunduğunu unutmamalıyız. Bu genel ayarlar üç adımlı sürece doğrudan bağlı olmasalar da, listelerin kodlama yapısıyla ilgili oldukları için sonucu etkileyebilirler. Bu yüzden orta ve ileri düzey WordPress kullanıcılarının bunları denemesini öneririz, fakat yeni başlayanlar gerekli olmadığından dikkatli bir şekilde ilerlemelidir.
Bu seçenekleri bulmak için Ajax Daha Fazla Yükle > Ayarlar’a gidin ve Genel Ayarlar sekmesini inceleyin. Örneğin eklentinin stilizasyon için sağladığı varsayılan CSS’yi devre dışı bırakmayı seçtik. Bunun yerine, daha sonra stilizasyon için kullanabilmemiz için daha fazla yükle düğmesine custom-load-more adlı özel bir CSS sınıfı ekledik. Ek olarak tüm gönderi öğelerinin kodunu tutacak HTML öğesi olarak
Fakat daha önce de belirttiğimiz gibi, istemiyorsanız bu seçeneklerin hiçbirini kullanmanıza gerek yoktur, zorunlu değildir. Eklenti hakkında daha fazla bilgi için sağdaki yardımcı kaynaklar listesine, özellikle de Uygulama Kılavuzuna ve Belgelere göz atmanızı öneririz.
Ajax Daha Fazla Yükle eklenti kodu, gönderileri görüntülemek için bir WordPress Döngüsü içeren bir şablona sahiptir. Bununla birlikte belirli bir gönderinin hangi bölümlerinin gösterileceği yineleyici şablonları tarafından belirlenir. Bir yineleyici şablonu oluşturmak, sürecin ilk adımıdır ve bunu yapmak için Ajax Daha Fazla Yükle > Yineleyici Şablonları’na gitmelisiniz.
Şimdiye kadar görebileceğiniz gibi, eklenti size kullanabileceğiniz varsayılan bir tekrarlayıcı şablonu sağlar. Kodu aşağıda gösterilmiştir.
<li class="alm-item<?php if ( ! has_post_thumbnail() ) { ?> no-img<?php } ?>">
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail( 'alm-thumbnail' );
} ?>
<h3><a href="https://qodeinteractive.com/magazine/create-load-more-posts-button-in-wordpress/<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
<p class="entry-meta"><?php the_time( "F d, Y" ); ?></p>
<?php the_excerpt(); ?>
</li>
Yineleyici şablonu, eklenti kısa kodunun oluşturacağı gönderiler listesindeki her öğenin arkasındaki HTML ve PHP kodunu temsil eder. Varsayılan eklenti koduyla, her gönderi bir
Yukarıdaki ekran görüntüsünde görebileceğiniz gibi, Özel Yineleyiciler premium eklentisi kullanılarak ek yineleyici şablonları etkinleştirilir. Size eklentinin ücretsiz sürümünü kullanarak adımları göstermeyi seçtiğimiz için elimizdeki tek tekrarlayıcı şablon Varsayılan Şablon’dur. Fakat bu, eklenti tarafından sağlanan varsayılan şablon kodunu kullanmamız gerektiği anlamına gelmez. Bunun yerine, kendi oluşturduğumuz özel bir kodla değiştirebiliriz. Bu kod aşağıda gösterilmiştir.
<article <?php post_class( '-blog-item' ); ?>>
<div class="-blog-item-inner">
<?php if ( has_post_thumbnail() ) { ?>
<div class="-media-image">
<a itemprop="url" href="https://qodeinteractive.com/magazine/create-load-more-posts-button-in-wordpress/<?php the_permalink(); ?>">
<?php the_post_thumbnail( 'full' ); ?>
</a>
</div>
<?php } ?>
<div class="-content">
<div class="-text">
<h3 itemprop="name" class="-title entry-title">
<a itemprop="url" class="-title-link" href="https://qodeinteractive.com/magazine/create-load-more-posts-button-in-wordpress/<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h3>
<div class="-info">
<div class="-info-item -info-author">
<span class="-info-author-label"><?php esc_html_e( 'By', 'lekker' ); ?></span>
<a itemprop="author" class="-info-author-link"
href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>"><?php the_author_meta( 'display_name' ); ?></a>
</div>
<div itemprop="dateCreated" class="-info-item -info-date entry-date">
<?php the_time( get_option( 'date_format' ) ); ?>
</div>
<div class="-info-item -info-category">
<?php the_category( ', ' ); ?>
</div>
</div>
<?php if ( has_excerpt() ) { ?>
<div itemprop="description" class="-excerpt">
<?php the_excerpt(); ?>
</div>
<?php } ?>
</div>
</div>
</div>
</article>
Daha sonra varsayılan eklenti kodunu kendi özel kodumuzla değiştirdik ve Şablonu Kaydet düğmesine tıkladık. Varsayılan eklenti kodunu kullanmak istemiyorsanız aynısını yapmalısınız.
Varsayılan yineleyici şablon kodunu kullanmamayı seçerseniz, eklentinin varsayılan yineleyici kodunu bulduğunuz eşdeğer kodla değiştirmeniz veya bunun yerine bizimkini kullanmanız gerekir.
Kılavuza geçmeden önce yazı için oluşturduğumuz tekrarlayıcı şablon koduna hızlıca bir göz atalım. Yineleyici şablonu, eklenti kullanılarak oluşturulacak gönderiler listesinin bir parçası olan bir öğenin, yani gönderinin HTML kodunu temsil eder.
Kodumuzda, bu öğe
Artık tekrarlayıcı şablonunun ve oluşturduğumuz tekrarlayıcı şablon kodunun amacını anladığımıza göre, bu tekrarlayıcı şablonunu kullanan uygun kısa kod çağrısının nasıl oluşturulacağını açıklayabiliriz.
Bunu yapmak için, Ekran Ayarları sekmesini açacak olan Ajax Daha Fazla Yükle > Kısa Kod Oluşturucu’ya gidin. Bu sekme, öğelerin ekranı ve daha fazlasını yükle düğmesi için ayarların çoğunu içerir. Kullanılabilir seçeneklerin listesi 6 alt bölüme ayrılmıştır ve oldukça uzundur. Size uygun olanları seçmeden önce hepsini dikkatlice incelemelisiniz. Her seçeneği seçtiğinizde, Kısa Kod Çıktısı bölümü güncellenecektir. Bu bölüm, daha fazlasını yükle düğmesinin yanında gönderilerin listesini düzgün bir şekilde görüntülemek için ihtiyaç duyacağınız kısa kod çağrısını içerir.
Ekran Ayarları sekmesi dışında Sorgu Parametreleri sekmesi de bulunmaktadır. Önceki sekmedeki seçenekler yeni başlayanlar için daha kolay olsa da, bunlar daha az. Sorgu Parametreleri sekmesi, WP_Query sınıfının kabul ettiği tüm parametrelere aşina olan gelişmiş WordPress kullanıcıları için daha uygun seçenekler içerir. Bunlar, sayfa başına gönderi sayısını (yani yüklenen toplu iş), gönderi tipini ve biçimini, hangi kategorilerin ve etiketlerin dahil edileceğini veya hariç tutulacağını, hangi taksonominin sorgulanacağını, gönderilerin nasıl sıralandığını ve daha fazlasını içerir. Bu yüzden bu parametrelere aşina değilseniz, bu sekmede herhangi bir değişiklik yapmadan önce WP_Query sınıfının özellikleri hakkında daha fazla bilgi edinmenizi önemle tavsiye ederiz.
Bununla birlikte her iki sekmeden de kullanmak istediğiniz seçenekleri seçtikten sonra, sağdaki Kısa Kod Çıktısı bölümünde görüntülenen kısa kod çağrısını kopyalamanız gerekecektir. Kısa Kod Çıktısı bölümünü bulun ve Kısa Kodu Kopyala düğmesine tıklayın.
Yaptığımız ayarlar için aşağıdaki kısa kod çıktısını aldık:
[ajax_load_more loading_style="default" post_type="post" posts_per_page="3" scroll="false" button_loading_label="Loading..." button_done_label="No more posts" no_results_text="No results...