Wordpress Infinite Scroll fără a folosi niciun plugin

Pentru scroll infinit pe articole individuale, mai jos este soluția:

single.php

<div class="blog-article-section"> 
<?php while( have_posts() ): ?>   
<div class="blog-article">
  <?php if( have_posts() ): the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <p><?php the_content(); ?></p>
  <?php endif;  ?>
  <div class="pagination-single" >
    <div class="next_post_link"><?php previous_post_link( '%link','Articol Anterior' ) ?></div>
    <div class="previous_post_link"><?php next_post_link( '%link','Articol Următor' ) ?></div>
  </div>
</div>
<?php endwhile; ?>
</div>
<div class="blog-article1"></div>
<a href="#" class="loadArticle">Încarcă mai mult</a>

script.js

(function($) {
$(document).ready(function(){
    var next_count = 1;
    $('.next_post_link a').attr("id", "next"+next_count);
    var prev_count = 1;
    $('.prev_post_link a').attr("id", "prev"+prev_count);
    $(".loadArticle").click(function(e) {
        e.preventDefault();
        loadNextArticle();
    });
    $(window).scroll(function(){
        loadNextArticle();
        console.log('scroll')
    });
    function loadNextArticle(){
        var next_link = $("#next"+next_count).attr("href");
        var prev_link = $("#prev"+prev_count).attr("href");
         if(typeof(next_link) != "undefined"){
            $.ajax({
              type: "GET",
              url: next_link,
              data: {},
              async: false,
              success: function(data){
                next_count = ++next_count;
                var result = $(data);
                $('.next_post_link a', result).attr("id","next"+next_count);
                result.find('.blog-article').appendTo('.blog-article1').fadeIn('slow');
              }
            });
        } 
    }
});
}(jQuery));

Pentru a implementa scroll infinit în WordPress, puteți utiliza diverse metode, inclusiv JavaScript cu WordPress REST API sau o bibliotecă precum jQuery. Mai jos găsiți un ghid pas cu pas pentru implementarea scroll-ului infinit folosind JavaScript și WordPress REST API.

Pasul 1: Încărcarea Scripturilor

Mai întâi, încărcați fișierul JavaScript în fișierul functions.php al temei dumneavoastră.

function enqueue_infinite_scroll_script() {
    wp_enqueue_script(
        'infinite-scroll',
        get_template_directory_uri() . '/js/infinite-scroll.js',
        array('jquery'),
        null,
        true
    );

    // Localizare script pentru a transmite date către JavaScript
    wp_localize_script(
        'infinite-scroll',
        'infinite_scroll_params',
        array(
            'ajax_url' => admin_url('admin-ajax.php'),
            'query_vars' => json_encode($wp_query->query),
        )
    );
}
add_action('wp_enqueue_scripts', 'enqueue_infinite_scroll_script');

Pasul 2: Crearea Fișierului JavaScript

Creați un fișier js/infinite-scroll.js în directorul temei. Acest fișier va gestiona cererea AJAX pentru încărcarea mai multor articole.

jQuery(function($) {
    var canBeLoaded = true, // acest parametru permite inițierea apelului AJAX doar dacă este necesar
        bottomOffset = 2000; // distanța (în px) de la partea de jos a paginii când doriți să încărcați mai multe articole

    $(window).scroll(function() {
        var data = {
            'action': 'loadmore',
            'query': infinite_scroll_params.query_vars, // asta este modul în care obținem parametrii din funcția wp_localize_script()
            'page': infinite_scroll_params.current_page
        };

        if ($(document).scrollTop() > ($(document).height() - bottomOffset) && canBeLoaded == true) {
            $.ajax({
                url: infinite_scroll_params.ajax_url,
                data: data,
                type: 'POST',
                beforeSend: function(xhr) {
                    canBeLoaded = false; // dezactivează apelul AJAX în timp ce este în desfășurare
                },
                success: function(data) {
                    if (data) {
                        $('#content').find('article:last-of-type').after(data); // inserează articole noi
                        infinite_scroll_params.current_page++;
                        canBeLoaded = true; // apelul AJAX este complet, acum îl putem permite din nou
                    }
                }
            });
        }
    });
});

Pasul 3: Gestionarea Cererii AJAX

În fișierul functions.php al temei, adăugați o funcție pentru a gestiona cererea AJAX și a returna articolele.

function loadmore_ajax_handler() {
    // Pregătim argumentele pentru interogare
    $args = json_decode(stripslashes($_POST['query']), true);
    $args['paged'] = $_POST['page'] + 1; // avem nevoie de următoarea pagină pentru a fi încărcată
    $args['post_status'] = 'publish';

    // Interogăm articolele
    query_posts($args);

    if (have_posts()) :
        // Începem bucla
        while (have_posts()): the_post();

            // Conținutul dumneavoastră aici
            get_template_part('template-parts/content', get_post_format());

        endwhile;
    endif;
    die; // ieșim din script și nu este necesar nici măcar wp_reset_query()!
}

add_action('wp_ajax_loadmore', 'loadmore_ajax_handler'); // dacă este apelat din panoul de administrare
add_action('wp_ajax_nopriv_loadmore', 'loadmore_ajax_handler'); // dacă este apelat din altă parte

Pasul 4: Modificarea Interogării

Modificați interogarea principală pentru a transmite parametrii necesari către JavaScript.

global $wp_query;
wp_localize_script('infinite-scroll', 'infinite_scroll_params', array(
    'ajax_url' => admin_url('admin-ajax.php'),
    'query_vars' => json_encode($wp_query->query),
    'current_page' => get_query_var('paged') ? get_query_var('paged') : 1,
));

Pasul 5: Adăugarea Stilurilor pentru Scroll Infinit (Opțional)

Puteți dori să adăugați câteva stiluri pentru indicatorul de încărcare sau alte elemente legate de scroll infinit.

/* Exemplu CSS pentru indicatorul de încărcare */
.loading {
    text-align: center;
    padding: 20px;
    display: none;
}

.loading img {
    width: 32px;
    height: 32px;
}

Rezumat

Cu acești pași, veți implementa scroll infinit pe site-ul dumneavoastră WordPress. Adaptați codul după cum este necesar pentru a se potrivi cu structura și designul temei.