WordPress temaya Load More butonu eklemek (Eklentisiz)

Wordpress temaya Load More butonu eklemek

Emre

Editör

5 ay önce

647 Okunma

facebook twitter whatsapp

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(); ?>
                <h2><?php the_title(); ?></h2>
                <?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’);

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.

<div class=”entry-content”>
    <?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()) {
    ?>
        <div class=”my-posts”>
            <?php while ($my_posts->have_posts()) { $my_posts->the_post(); ?>
                <h2><?php the_title(); ?></h2>
                <?php the_excerpt(); ?>
            <?php } ?>
        </div>
    <?php } ?>
    <button class=”loadmore”>Daha Fazla..</button>
</div>
<script type=”text/javascript”>
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.