Ładowanie wpisów za pomocą AJAX zamiast tradycyjnej paginacji

Ajax pozwala dynamicznie ładować wpisy bez konieczności odświeżania całej strony. Dzięki niemu można stworzyć płynne przeglądanie treści dla odwiedzających, zwłaszcza na stronach z dużą ilością treści.

Ten samouczek przeprowadzi Cię przez implementację funkcjonalności wczytywania wpisów za pomocą AJAX w WordPress.

Szczegółowe wskazówki:

1. Wyświetlanie wpisów i przycisku “Wczytaj więcej”:

Możesz użyć poniższego kodu w następujących plikach motywu:

index.php: aby wyświetlić wpisy na głównej stronie bloga.
archive.php: do wyświetlania wpisów na stronach archiwum (kategorie, tagi, daty, autorzy, itp.).
search.php: do wyświetlania wyników wyszukiwania.
home.php: dla głównej strony bloga, jeśli nie ma pliku index.php.
page.php: jeśli chcesz wyświetlać wpisy na statycznej stronie.
single.php: do wyświetlania wpisów indywidualnie.

<div id="posts_list">
	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<div class="post">
			<?php the_title(); ?>
			<?php the_excerpt(); ?>
		</div>
	<?php endwhile; else: echo '<p>'.__('No content.', 'text-domain').'</p>'; endif; ?>
</div>
<?php 
$load_more_btn = (get_query_var('paged') < $wp_query->max_num_pages) 
    ? '<div class="load-more-btn"><a href="#" id="load-more-posts">Wczytaj więcej</a></div>' 
    : 'none';
echo $load_more_btn;
?>

Szczegółowy opis kodu:

Po sekcji wyświetlającej wpisy sprawdzane jest warunkowe wyrażenie oparte na bieżącej stronie paginacji. Jeśli bieżąca strona jest mniejsza niż całkowita liczba stron ($wp_query->max_num_pages), generowany jest element <div> o klasie load-more-btn, zawierający link “Wczytaj więcej” z identyfikatorem load-more-posts.
Jeśli warunek nie jest spełniony, zamiast przycisku “Wczytaj więcej” wyświetlane jest “none”.
Na koniec kod wypisuje stworzony blok przycisku “Wczytaj więcej” lub “none” w zależności od warunku paginacji.

Upewnij się, że dodajesz ten kod w odpowiedni plik szablonu, w którym chcesz wyświetlić wpisy i przycisk w swoim motywie WordPress.

2. Rejestrowanie skryptów i obsługa żądań AJAX:

Ten kod, który obsługuje ładowanie postów za pomocą AJAX i rejestruje skrypty, powinien zostać dodany do pliku functions.php w Twojej motywie WordPress.

function loadmoreposts_scripts() {
    wp_enqueue_script('loadmoreposts', get_template_directory_uri() . '/js/loadmoreposts.js', array('jquery'), '1.0', true);
    
    global $wp_query;
    $total_pages = $wp_query->max_num_pages;
    
    wp_localize_script('loadmoreposts', 'loadmore_params', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'total_pages' => $total_pages,
    ));
}
add_action('wp_enqueue_scripts', 'loadmoreposts_scripts');

function load_more_posts() {
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => get_option('posts_per_page'),
        'paged' => $_POST['page'],
    );
    $query = new WP_Query($args);

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            echo '<div class="post">';
            the_title();
            the_excerpt();
            echo '</div>';
        }
    }
    wp_die();
}
add_action('wp_ajax_load_more_posts', 'load_more_posts');
add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts');

Szczegółowy opis kodu:

Funkcja loadmoreposts_scripts() odpowiada za dodanie skryptu loadmoreposts.js do kolejki zależności jQuery. Dodatkowo lokalizuje skrypt, przekazując dane takie jak ajax_url i total_pages, które będą używane w skrypcie.
Wewnątrz funkcji loadmoreposts_scripts() obliczana jest łączna liczba stron w bieżącym zapytaniu za pomocą zmiennej $wp_query->max_num_pages.
Dane lokalizacyjne są przekazywane do skryptu za pomocą funkcji wp_localize_script(), co umożliwia dostęp do zmiennych w skrypcie loadmoreposts.js.
Funkcja load_more_posts() obsługuje żądanie Ajax dotyczące wczytywania kolejnych postów na podstawie numeru strony przesłanego za pomocą $_POST['page'].
Wewnątrz funkcji load_more_posts() tworzony jest nowy obiekt WP_Query z parametrami, aby pobrać następny zestaw postów na podstawie numeru strony przekazanego w żądaniu AJAX.
Funkcja następnie iteruje przez pobrane posty za pomocą pętli while i wyświetla tytuł i streszczenie każdego posta, opakowane w element <div> z klasą post.
Po przetworzeniu wszystkich postów wywoływana jest funkcja wp_die(), aby zakończyć skrypt i zapobiec dodatkowemu wyjściu.
Dwa haki akcji wp_ajax_load_more_posts i wp_ajax_nopriv_load_more_posts są używane do obsługi żądania AJAX dla użytkowników uwierzytelnionych i nieuwierzytelnionych, poprzez przypisanie ich do funkcji load_more_posts().

3. Kod JavaScript:

Aby zaimplementować opisaną funkcjonalność w JavaScript, musisz utworzyć plik o nazwie loadmoreposts.js w katalogu motywu (zwykle w podfolderze, np. /js/).

Skopiuj powyższy fragment kodu JavaScript do pliku loadmoreposts.js.

jQuery(function($) {
    var page = 1;
    var totalPages = loadmore_params.total_pages;

    $('#load-more-posts').on('click', function(e) {
        e.preventDefault();
        var $btn = $(this);

        $.ajax({
            url: loadmore_params.ajax_url,
            type: 'POST',
            data: {
                action: 'load_more_posts',
                page: page,
            },
            success: function(response) {
                $('#posts_list').append(response);
                page++;

                if (page > totalPages) {
                    $btn.hide();
                }
            },
            error: function(xhr, status, error) {
                console.log(error);
            }
        });
    });
});

Szczegółowy opis kodu:

Kod JavaScript w pliku loadmoreposts.js ma na celu obsługę funkcjonalności AJAX do wczytywania kolejnych postów bez konieczności odświeżania strony.
Skrypt rozpoczyna się od umieszczenia swojego kodu w funkcji jQuery document-ready, aby upewnić się, że kod zostanie wykonany po pełnym załadowaniu DOM.
Inicjalizuje zmienne page i totalPages, aby śledzić bieżący numer strony i łączną liczbę dostępnych stron do paginacji postów.
Ustawiony jest nasłuch na kliknięcia przycisku “Wczytaj więcej” o identyfikatorze load-more-posts.
Po kliknięciu przycisku wykonywane jest żądanie AJAX w celu pobrania dodatkowych postów. Żądanie zawiera numer bieżącej strony w danych przesyłanych.
Po pomyślnym zakończeniu żądania Ajax, odpowiedź zawierająca dodatkową treść postów jest dołączana do elementu #posts_list, wyświetlając je na stronie.
Skrypt zwiększa zmienną page, aby przygotować się do wczytania kolejnych postów po kolejnych kliknięciach, i sprawdza, czy bieżąca strona przekracza dostępną łączną liczbę stron, aby ukryć przycisk “Wczytaj więcej”, gdy wszystkie posty zostaną wczytane.
W przypadku błędów podczas żądania AJAX, skrypt rejestruje błąd w konsoli przeglądarki w celu debugowania.

Zastąpienie tradycyjnej paginacji funkcjonalnością wczytywania wpisów za pomocą AJAX nie tylko poprawia doświadczenie użytkowników, ale także zmniejsza czas ładowania i zasoby serwera potrzebne do pobrania i wyświetlenia treści. To prowadzi do szybszego ładowania strony i bardziej angażującego przeglądania dla Twojej widowni.