WordPress temaya Load More butonu eklemek (Eklentisiz)

4 sene önce

Emre GürEditör

561Okunma

Switch

Wordpress temaya Load More butonu eklemek

WordPress‘te Load More butonu yapımını araştıran ancak faydalı bir kaynak bulamayan dostlar için bu yazımızı hazırladık. Son zamanlarda sayfalama yerine daha fazla yükle butonu kullanan sitelerin sayısı oldukça arttı. Otoriter sitelerin de bu akıma uyması kullanıcılarda el alışkanlığı oluşmasına neden oldu.

Load More butonu nasıl yapılır?

Load more butonunu temaya eklemek için Functions.php ve eklemek istediğiniz sayfanın kaynak kodlarına müdahale etmeniz gerekmektedir. Bu işlem gözünüzü korkutmasın. Olabildiğince basit bir anlatımla temanıza load more özelliğini ekleyeceğiz.

Web sitesine load more ( daha fazla ) butonu eklemek isteyen arkadaşlar için gerekli adımları ve kodları aşağıda listeledik.

1-İlk olarak tema dosyalarınızın yedeğini alın.

2-Temanızın Functions.php dosyasını açın ve en alt kısmına aşağıdaki kod parçasını yerleştirin

function load_posts_by_ajax_callback() {

check_ajax_referer(‘load_more_posts’, ‘security’);

$paged = $_POST[‘page’];

$args = array(

‘post_type’ => ‘post’,

‘post_status’ => ‘publish’,

‘orderby’ => ‘date’,

‘order’ => ‘DESC’,

‘posts_per_page’ => 2,

‘paged’ => $paged

);

$my_posts = new WP_Query($args);

if ($my_posts->have_posts()) {

while ($my_posts->have_posts()) { $my_posts->the_post(); ?>

<?php the_excerpt();

};

wp_die();

}

add_action(‘wp_ajax_load_posts_by_ajax’, ‘load_posts_by_ajax_callback’);
add_action(‘wp_ajax_nopriv_load_posts_by_ajax’, ‘load_posts_by_ajax_callback’);

Tıkla, konuyla ilgili düşüncelerini paylaş.

3-Bu işlemi yaptıktan sonra, butonu eklemek istediğiniz sayfanın kaynak kodundaki, içerik listeleme kodlarının yerine aşağıdaki kod parçasını yerleştirin.

<?php

$args = array(

‘post_type’ => ‘post’,

‘post_status’ => ‘publish’,

‘orderby’ => ‘date’,

‘order’ => ‘DESC’,

‘posts_per_page’ => 2,

‘paged’ => 1

);

$my_posts = new WP_Query($args);

if ($my_posts->have_posts()) {

<?php while ($my_posts->have_posts()) { $my_posts->the_post(); ?>

<?php the_excerpt(); ?>

<?php } ?>

</div>

<?php } ?>

<button class=”loadmore”>Daha Fazla..</button>

</div>

var ajaxurl = “<?php echo admin_url( ‘admin-ajax.php’ ); ?>”;

var page = 2;

jQuery(‘body’).on(‘click’, ‘.loadmore’, function() {

var data = {

‘action’: ‘load_posts_by_ajax’,

‘page’: page,

‘security’: ‘<?php echo wp_create_nonce(“load_more_posts”); ?>’,

‘all_pages’: ‘<?php echo $my_posts->max_num_pages; ?>’

};

jQuery.post(ajaxurl, data, function(response) {

jQuery(‘.my-posts’).append(response);

if(page == data[‘all_pages’]) {

jQuery(‘.loadmore’).fadeOut(400);

}

page++;

});

</script>

4- Verdiğimiz ikinci kodu kendi div yapınıza göre düzenlemeniz gerekecek. Ek olarak butonu CSS kullanarak güzelleştirebilirsiniz.

İşlemler bu kadar… İşte temanıza Load More butonu eklemek bu kadar basit.

Abone ol

0 Yorum

Inline Feedbacks

Tüm yorumları görüntüle

Sıradaki

İzzet Yıldızhan'ın piyano çalması sosyal medyada viral oldu!

İzzet Yıldızhan'ın piyano performansına sosyal medyadan gelen yorumlar

WordPress temaya Load More butonu eklemek (Eklentisiz)

Load More butonu nasıl yapılır?

Benzer paylaşımlar