💡 Jak skonfigurować infinite scroll w Elementorze przez Ajax Load More

• Zainstaluj bezpłatną wtyczkę Ajax Load More z repozytorium WordPress.org i aktywuj ją.
• Skopiuj strukturę HTML jednego posta z siatki Elementora przez DevTools i zbuduj Repeater Template.
• W Shortcode Builder wybierz Loading Style „Infinite Scroll" i określ posts_per_page (4-6 dla siatki w 2-3 kolumny).
• Wpisz scroll_container oraz transition_container_classes z klasami CSS siatki Elementora, aby doładowane posty odziedziczyły style.
• Owiń shortcode w kontener HTML z unikalną klasą widgetu elementor-element-* i umieść blok na stronie.
• Otwórz stronę we frontendzie, przewiń w dół i sprawdź, czy wpisy ładują się podczas scrollowania bez przeładowania.

Co będzie potrzebne

Przed rozpoczęciem upewnij się, że na stronie są zainstalowane i aktywowane dwie rzeczy:

• Elementor (wersja bezpłatna lub Pro), konstruktor, w którym zbudowano siatkę postów.
• Ajax Load More, bezpłatna wtyczka do doładowywania treści przez AJAX. Pobierz z WordPress.org

Miej też pod ręką oficjalną dokumentację oraz stronę z przykładami wyświetlania, są tam dziesiątki gotowych snippetów do różnych scenariuszy: od standardowych postów po WooCommerce i ACF.

Standardowy widget „Wpisy" w Elementorze oferuje tylko paginację stronicową, ani wersja bezpłatna, ani Pro nie potrafią doładowywać postów podczas scrollowania. Ajax Load More wypełnia tę lukę: dodaje infinite scroll, przycisk „Załaduj więcej" oraz lazy load, zachowując przy tym wygląd siatki. Cała sztuka tkwi w poprawnym Repeater Template: raz zbudowany sprawia, że doładowane posty są wizualnie nie do odróżnienia od tych już obecnych na stronie.

Krótkie wideo powyżej pokazuje rezultat integracji w działaniu: posty Elementora ładują się bezszwowo, bez przeładowania strony i skoków układu.

Krok 1: Budowa Repeater Template pod siatkę Elementora

Najważniejsze to poprawnie przenieść strukturę HTML jednego posta z Elementora do szablonu Ajax Load More. Jeśli szablon nie będzie zgodny z rzeczywistym układem, doładowane posty „rozsypią się": przesuną się odstępy, znikną karty, rozpadnie się grid.

Otwórz stronę z siatką w przeglądarce, naciśnij F12 (DevTools), przejdź do zakładki Elements i znajdź węzeł DOM jednego posta. Potrzebny jest PEŁNY HTML jednego elementu, od otwierającego <article> lub <div class="elementor-post"> do znacznika zamykającego.

Podstawowy szablon dla siatki Elementor (dwie kolumny, skórka Cards) wygląda następująco:

1
<article class="elementor-post elementor-grid-item post-<?php the_ID(); ?>">
2
  <div class="elementor-post__card">
3
    <a class="elementor-post__thumbnail__link" href="<?php the_permalink(); ?>">
4
      <div class="elementor-post__thumbnail">
5
        <?php if (has_post_thumbnail()) {
6
          the_post_thumbnail('alm-thumbnail');
7
        } ?>
8
      </div>
9
    </a>
10
    <div class="elementor-post__text">
11
      <h3 class="elementor-post__title">
12
        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
13
      </h3>
14
      <div class="elementor-post__excerpt">
15
        <?php the_excerpt(); ?>
16
      </div>
17
      <a class="elementor-post__read-more" href="<?php the_permalink(); ?>">
18
        Читать далее »
19
      </a>
20
    </div>
21
    <div class="elementor-post__meta-data">
22
      <span class="elementor-post-date">
23
        <?php the_time('d.m.Y'); ?>
24
      </span>
25
    </div>
26
  </div>
27
</article>
28

Proszę zapisać szablon w panelu administracyjnym: Ajax Load More → Repeater Templates, przycisk „Add New". Proszę nadać mu sensowną nazwę, na przykład „Siatka Elementor 2 kolumny".

Na co zwrócić uwagę:

• Klasy elementor-post, elementor-post__card oraz elementor-post__thumbnail: są to „natywne" klasy Elementora, odpowiadają za wizualną zgodność doładowywanych postów z wyjściową siatką.
• the_post_thumbnail('alm-thumbnail') wykorzystuje rozmiar miniatury zarejestrowany przez wtyczkę Ajax Load More. Jeśli w Państwa motywie zarejestrowano niestandardowy rozmiar, proszę zastąpić alm-thumbnail tym rozmiarem.
• <?php the_ID(); ?> w klasie <article> nadaje unikalny identyfikator każdemu postowi, co przyda się przy targetowaniu CSS.

Ważne: klasy mogą się różnić w zależności od skórki widżetu „Wpisy" (Classic, Cards, Full Content). Proszę pobrać klasy Z WŁASNEGO układu, a nie kopiować podany kod w niezmienionej formie. Wszystko musi się zgadzać, łącznie z kolejnością i spacjami.

Krok 2: Złożenie shortcode’u Ajax Load More

Proszę przejść do Ajax Load More → Shortcode Builder. Konstruktor wizualny złoży shortcode według Państwa parametrów:

• Post Type, post (lub Państwa niestandardowy typ wpisów).
• Posts per Page, ile postów doładowywać w jednej iteracji. Dla siatki 2-3-kolumnowej proszę ustawić 4-6.
• Loading Style, Infinite Scroll (nieskończone przewijanie). Alternatywy: przycisk „Load More", leniwe ładowanie.
• Container Type, div.
• Transition, animacja pojawiania się nowych postów: Fade, Slide lub None.

Podstawowy shortcode będzie wyglądał mniej więcej tak:

1
[ajax_load_more post_type="post" posts_per_page="4" 
2
  loading_style="infinite classic" 
3
  container_type="div" 
4
  scroll="true" 
5
  transition="fade"
6
  button_label="Загрузка..."]

Do integracji z Elementorem krytyczne są dwa dodatkowe parametry, scroll_container i transition_container_classes. „Wiążą" one wyjście Ajax Load More z siatką CSS Elementora:

1
[ajax_load_more post_type="post" posts_per_page="4" 
2
  scroll_container="elementor-grid-2" 
3
  transition_container_classes="elementor-posts-container elementor-posts elementor-grid elementor-posts--skin-cards elementor-has-item-ratio"
4
  loading_style="infinite classic"
5
  images_loaded="true"
6
  offset="2"]

Omówienie kluczowych parametrów:

• scroll_container="elementor-grid-2", kontener siatki w dwóch kolumnach. Dla trzech kolumn proszę zastąpić przez elementor-grid-3, dla czterech przez elementor-grid-4.
• transition_container_classes="...", WSZYSTKIE klasy CSS kontenera siatki skopiowane z DevTools. Bez nich doładowane posty nie odziedziczą stylów Elementora i wyświetlą się jako zwykła lista.
• images_loaded="true", czeka na pełne załadowanie obrazów przed pokazaniem nowego bloku. Eliminuje skoki układu podczas doładowywania.
• offset="2", pomija pierwsze N postów. Potrzebne, jeśli część postów została już wyświetlona standardowym widżetem Elementora (patrz krok 4).

Krok 3: HTML-owa obudowa shortcode’u

Ajax Load More wymaga, aby shortcode znajdował się wewnątrz kontenera HTML, który powtarza strukturę siatki Elementora. Bez obudowy style siatki nie zostaną przechwycone i magia nie zadziała.

1
<div class="elementor-element-6ba59dc elementor-posts--skin-cards">
2
  <div class="elementor-posts-container elementor-posts elementor-grid elementor-has-item-ratio">
3
    [ajax_load_more post_type="post" posts_per_page="4" 
4
      scroll_container="elementor-grid-2"
5
      transition_container_classes="elementor-posts-container elementor-posts elementor-grid elementor-posts--skin-cards elementor-has-item-ratio"
6
      loading_style="infinite classic"
7
      images_loaded="true"
8
      offset="2"]
9
  </div>
10
</div>

Klasa elementor-element-6ba59dc to unikalny identyfikator PAŃSTWA widżetu „Wpisy". Proszę go znaleźć w DevTools (zawsze zaczyna się od elementor-element- i kończy hashem). To właśnie ta klasa „ciągnie" za sobą wszystkie style zastosowane do widżetu w edytorze Elementora: odstępy, cienie, promienie, kolory kart.

Krok 4: Zachowanie stylów CSS siatki

Jeśli po prostu usuną Państwo widżet „Wpisy" i zostawią tylko shortcode Ajax Load More, wszystkie style wygenerowane przez Elementor znikną z sekcji <head> strony. Siatka natychmiast się rozjedzie.

Sprawdzony trik: proszę zostawić widżet „Wpisy" na stronie z minimalną liczbą postów (2-3 sztuki), a w shortcodzie Ajax Load More podać offset="2". Wówczas:

• Elementor generuje CSS dla pierwszych dwóch postów, style pozostają w treści strony.
• Ajax Load More przechwytuje resztę postów, zaczynając od trzeciego, z tymi samymi klasami i stylami.

To podejście ma jedną wadę: przy KAŻDEJ zmianie ustawień widżetu „Wpisy" w edytorze Elementora unikalna klasa elementor-element-* jest generowana na nowo. Trzeba ją zaktualizować w obudowie HTML, 30 sekund przez DevTools, ale nie wolno o tym zapominać.

Krok 5: Umieszczenie na stronie

Proszę dodać obudowę HTML z shortcodem przez widżet „Shortcode" lub „Tekst" (Text Editor) w Elementorze, oba przyjmują HTML. Proszę umieścić blok w tym samym miejscu, gdzie był lub mógłby być widżet „Wpisy".

Proszę zapisać stronę i otworzyć ją we frontendzie. Proszę przewinąć w dół, posty powinny zacząć się doładowywać automatycznie, gdy tylko przewijanie dotrze do kontenera.

Jeśli nie działa, trzy szybkie sprawdzenia:

• Konsola przeglądarki (F12 → Console): czerwone błędy JavaScript wskażą konflikt wtyczek lub uszkodzoną składnię shortcode’u.
• Klasa scroll_container: proszę porównać ją z rzeczywistą klasą CSS kontenera na stronie. Błąd nawet w jednym znaku (na przykład spacja zamiast myślnika) psuje wyzwalacz przewijania.
• Ajax Load More → Settings: proszę upewnić się, że wtyczka jest aktywna i nie jest blokowana przez wtyczkę buforującą (WP Rocket, W3 Total Cache). Żądania Ajax czasem trafiają do cache’a, proszę dodać /wp-admin/admin-ajax.php do wyjątków.

⁉️🤔 Często zadawane pytania

Czy to działa z darmową wersją Elementora?

Tak. Ajax Load More nie zależy od Elementor Pro. Potrzebuje jedynie struktury HTML siatki, którą generuje również darmowa wersja. Kopiuje Pan/Pani klasy przez DevTools i buduje szablon, funkcje Pro nie są potrzebne.

Czy można doładowywać niestandardowe typy wpisów, a nie tylko posty?

Można. W shortcodzie proszę podać post_type="your_cpt". Ajax Load More działa z dowolnymi publicznymi typami wpisów: standardowymi postami, stronami, produktami WooCommerce, elementami portfolio itd. Dla każdego typu tworzy się własny Repeater Template.

Doładowane posty wyglądają inaczej niż początkowa siatka. Gdzie jest błąd?

Problem prawie zawsze leży w transition_container_classes: skopiował Pan/Pani nie wszystkie klasy lub pomylił się w jednej z nich. Proszę otworzyć DevTools, znaleźć kontener oryginalnej siatki, skopiować cały ciąg klas i wkleić go do shortcodu. Drugie najczęstsze źródło: scroll_container wskazuje na niewłaściwy element.

Czy do podstawowego scenariusza potrzebne są dodatki Premium Ajax Load More?

Do infinite scroll na postach, nie, darmowa wersja jest wystarczająca. Dodatki Premium (Elementor Widget Connector, Single Posts, WooCommerce, SEO, Filters) rozszerzają scenariusze: nieskończone przewijanie wewnątrz pojedynczych wpisów, integracja z filtrami, paginacja SEO z unikalnymi URL-ami. Jeśli projekt rośnie i potrzebuje Pan/Pani tych możliwości, proszę spojrzeć w stronę Pro Bundle.

Dlaczego po zmianach w Elementorze style siatki „rozjeżdżają się" na doładowanych postach?

Podczas każdego zapisu widżetu „Wpisy" Elementor regeneruje unikalną klasę elementor-element-*. Proszę znaleźć nową klasę w DevTools i zastąpić nią tę w opakowaniu HTML shortcodu. Nie da się tego zautomatyzować „od ręki", tylko ręcznie, ale to pół minuty pracy.

Czy warto czekać na natywny infinite scroll od Elementora?

Standardowy widżet „Wpisy" w Elementorze przez sześć lat od ukazania się pierwszych poradników na ten temat nie doczekał się nieskończonego przewijania, ani w wersji darmowej, ani Pro. Paginacja stronicowa pozostaje jedyną opcją dla archiwów i siatek postów.

Ajax Load More wypełnia tę lukę całkowicie i z zapasem. Wtyczka jest aktywnie rozwijana: na WordPress.org ma 200 000+ aktywnych instalacji, regularne aktualizacje (ostatnia, w momencie pisania, mniej niż miesiąc temu) i kilkanaście dodatków do różnych scenariuszy. Darmowa wersja obsługuje infinite scroll, przycisk „Załaduj więcej", lazy load i niestandardowe Repeater Templates, co jest wystarczające dla większości projektów na Elementorze.

Jeśli na Pana/Pani stronie Elementor tworzy siatkę postów, a odwiedzający potrzebują nieskończonego przewijania, proszę zbudować Repeater Template według instrukcji powyżej. Pół godziny na pierwszą konfigurację i posty ładują się bez przeładowywania strony.

🔗 Ajax Load More na WordPress.org