💡 Kuidas seadistada Elementoris lõputut kerimist Ajax Load More abil

• Paigalda tasuta plugin Ajax Load More WordPress.org repositooriumist ja aktiveeri see.
• Kopeeri ühe postituse HTML-struktuur Elementor ruudustikust DevToolsi abil ja ehita kordusmall (Repeater Template).
• Vali Shortcode Builderis laadimisstiiliks „Infinite Scroll" ja määra posts_per_page (4-6 kahe- või kolmeveerulise ruudustiku puhul).
• Lisa scroll_container ja transition_container_classes koos CSS-klassidega Elementori ruudustikust, et laaditud postitused pärivad stiilid.
• Ümbritse lühikood HTML-konteinerisse, millel on unikaalne elementor-element-* vidinaklass, ja paiguta plokk lehele.
• Ava leht esiküljel, keri lõpuni ja veendu, et postitused laaduvad kerimisel ilma lehe värskendamiseta.

Mida sul vaja läheb

Enne alustamist veendu, et saidil on paigaldatud ja aktiveeritud kaks asja:

• Elementor (tasuta versioon või Pro), ehitaja, kus sinu postituste ruudustik on loodud.
• Ajax Load More, tasuta plugin sisu laadimiseks AJAX-i kaudu. Laadi alla WordPress.org-ist

Hoia samuti käepärast ametlik dokumentatsioon ja näidete leht. Seal on kümneid valmislahendusi erinevate stsenaariumite jaoks: tavalistest postitustest kuni WooCommerce'i ja ACF-ni.

Elementori sisseehitatud postituste vidin pakub ainult nummerdatud lehitsemist; ei tasuta ega Pro versioon suuda postitusi kerimisel laadida. Ajax Load More täidab selle lünga: see lisab lõputu kerimise, „Lae rohkem" nupu ja laisa laadimise, säilitades samal ajal ruudustiku välimuse. Võti on õige kordusmall. Kui oled selle valmis ehitanud, on laaditud postitused visuaalselt eristamatud juba lehel olevatest.

Ülaltoodud lühivideo näitab integratsiooni töös: Elementori postitused laaduvad sujuvalt, ilma lehe värskenduste või paigutuse hüpeteta.

1. Samm: kordusmalli ehitamine Elementori ruudustiku jaoks

Kõige olulisem osa on ühe postituse HTML-struktuuri korrektne ülekandmine Elementorist Ajax Load More malli. Kui mall ei vasta tegelikule paigutusele, „lagunevad" laaditud postitused: veerised nihkuvad, kaardid kaovad ja ruudustik puruneb.

Ava leht koos ruudustikuga oma brauseris, vajuta F12 (DevTools), mine vahekaardile Elements ja leia ühe postituse DOM-sõlm. Sul on vaja ühe elemendi TÄIELIKKU HTML-i, alates avavast <article> või <div class="elementor-post"> sildist kuni sulgeva sildini.

Elementori ruudustiku põhimall (kaks veergu, Cards-välimus) näeb välja selline:

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
        Read more »
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

Salvesta mall halduspaneelis: Ajax Load More → Repeater Templates, klõpsa „Add New". Anna sellele arusaadav nimi, näiteks „Elementor Grid 2 Columns".

Millele tähelepanu pöörata:

• Klassid elementor-post, elementor-post__card ja elementor-post__thumbnail on Elementori „omad" klassid. Need tagavad, et laaditud postitused sobituvad visuaalselt algse ruudustikuga.
• the_post_thumbnail('alm-thumbnail') kasutab pisipildi suurust, mille on registreerinud Ajax Load More plugin. Kui sinu teema on registreerinud kohandatud suuruse, asenda alm-thumbnail sellega.
• <?php the_ID(); ?> <article> klassis annab igale postitusele kordumatu identifikaatori, mis on kasulik CSS-iga sihtimiseks.

Oluline: klassid võivad erineda sõltuvalt postituste vidina välimusest (Classic, Cards, Full Content). Võta klassid ENDA märgendist, selle asemel et ülaltoodud koodi üks-ühele kopeerida. Kõik peab klappima, sealhulgas järjekord ja tühikud.

Samm 2: Ajax Load More lühikoodi koostamine

Mine lehele Ajax Load More → Shortcode Builder. Visuaalne koostaja genereerib sinu parameetrite põhjal lühikoodi:

• Post Type: post (või sinu kohandatud postituse tüüp).
• Posts per Page: mitu postitust ühe laadimistsükli kohta. 2-3 veeruga ruudustiku puhul kasuta 4-6.
• Loading Style: Infinite Scroll (lõputu kerimine). Alternatiivid: „Load More" nupp, laisklaadimine.
• Container Type: div.
• Transition: animatsioon uute postituste jaoks: Fade, Slide või None.

Lihtne lühikood näeb välja umbes selline:

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="Loading..."]

Elementoriga integreerimiseks on kaks lisaparameetrit kriitilise tähtsusega: scroll_container ja transition_container_classes. Need „seovad" Ajax Load More väljundi Elementori CSS-ruudustikuga:

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"]

Peamiste parameetrite selgitus:

• scroll_container="elementor-grid-2" on kahe veeruga ruudustiku konteiner. Kolme veeru puhul muuda elementor-grid-3 vastu; nelja puhul kasuta elementor-grid-4.
• transition_container_classes="..." sisaldab KÕIKI ruudustiku konteineri CSS-klasse, mis on kopeeritud DevToolsist. Ilma nendeta ei päri laaditud postitused Elementori stiile ja kuvatakse tavalise loendina.
• images_loaded="true" ootab, kuni pildid on täielikult laaditud, enne kui uue ploki kuvab. See välistab paigutuse hüpped laadimise ajal.
• offset="2" jätab vahele esimesed N postitust. See on vajalik, kui mõned postitused on juba kuvatud tavalise Elementori vidina poolt (vt samm 4).

Samm 3: Lühikoodi HTML-ümbris

Ajax Load More nõuab, et lühikood oleks HTML-konteineris, mis kordab Elementori ruudustiku struktuuri. Ilma ümbriseta ruudustiku stiile ei rakendata ja võlu ei toimi.

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>

Klass elementor-element-6ba59dc on SINU postituste vidina kordumatu identifikaator. Leia see DevToolsist (see algab alati elementor-element- ja lõpeb räsiga). See klass kannab endas kõiki stiile, mida on vidinale Elementori redaktoris rakendatud: veerised, varjud, ääreraadiused ja kaartide värvid.

Samm 4: Ruudustiku CSS-stiilide säilitamine

Kui sa lihtsalt kustutad postituste vidina ja jätad alles ainult Ajax Load More lühikoodi, kaovad lehe <head> osast kõik Elementori poolt loodud stiilid. Ruudustik laguneb koheselt.

Toimiv lähenemine: jäta postituste vidin lehele minimaalse arvu postitustega (2-3) ja määra Ajax Load More lühikoodis offset="2". Sel viisil:

• Elementor genereerib CSS-i kahe esimese postituse jaoks, nii et stiilid jäävad lehe kehasse.
• Ajax Load More korjab ülejäänud postitused alates kolmandast, kasutades samu klasse ja stiile.

Sellel lähenemisel on üks miinus: iga kord, kui sa muudad Elementori redaktoris postituste vidina MISTAHES seadet, genereeritakse kordumatu elementor-element-* klass uuesti. Sa pead seda HTML-ümbrises uuendama. See võtab DevToolsi abil 30 sekundit, kuid sa ei tohi seda unustada.

Samm 5: Lehele paigutamine

Lisa HTML-ümbris koos lühikoodiga, kasutades Elementoris vidinaid „Shortcode" või „Text Editor"; mõlemad aktsepteerivad HTML-i. Paiguta plokk sinna, kus postituste vidin asus või asuma hakkaks.

Salvesta leht ja ava see esiküljel. Keri lõppu. Postitused peaksid hakkama automaatselt laadima kohe, kui kerimine jõuab konteinerini.

Kui see ei tööta, siis siin on kolm kiiret kontrolli:

• Brauseri konsool (F12 → Console): punased JavaScripti vead viitavad pluginakonfliktidele või katkisele lühikoodi süntaksile.
• scroll_container klass: võrdle seda lehel oleva konteineri tegeliku CSS-klassiga. Isegi ühe märgi viga (näiteks tühik sidekriipsu asemel) lõhub kerimise päästiku.
• Ajax Load More → Settings: veendu, et plugin on aktiivne ja seda ei blokeeri mõni vahemällu salvestamise plugin (WP Rocket, W3 Total Cache). Ajax-päringud salvestatakse mõnikord vahemällu, seega lisa /wp-admin/admin-ajax.php erandite hulka.

⁉️🤔 Korduma kippuvad küsimused

Kas see töötab Elementori tasuta versiooniga?

Jah. Ajax Load More ei sõltu Elementor Pro-st. See vajab ainult ruudustiku HTML-struktuuri, mida tasuta versioon pakub. Kopeeri klassid DevToolsi abil ja ehita mall; Pro funktsioone pole vaja.

Kas kohandatud postitüüpe saab laadida tavaliste postituste asemel?

Jah. Määra lühikoodis post_type="your_cpt". Ajax Load More töötab kõigi avalike postitüüpidega: tavalised postitused, lehed, WooCommerce'i tooted, portfoolioüksused jne. Iga tüüp vajab oma kordusmalli.

Laaditud postitused näevad algsest ruudustikust erinevad välja. Milles probleem?

Probleem on peaaegu alati transition_container_classes parameetris: kopeerisid puudulikud klassid või tegid ühes neist vea. Ava DevTools, leia algne ruudustiku konteiner, kopeeri kogu klassistring ja kleebi see lühikoodi. Teine levinuim probleem: scroll_container osutab valele elemendile.

Kas Ajax Load More Premium lisad on põhiseadistuse jaoks vajalikud?

Postituste lõputu kerimise jaoks ei ole. Tasuta versioon on piisav. Premium lisad (Elementor Widget Connector, Single Posts, WooCommerce, SEO, Filters) laiendavad stsenaariume: lõputu kerimine üksikute postituste sees, filtriintegratsioon, SEO-lehekülgede numeratsioon unikaalsete URL-idega. Kui su projekt kasvab ja vajad neid funktsioone, uuri Pro Bundle'i.

Miks ruudustiku stiilid laaditud postitustelt pärast Elementoris muudatuste tegemist „kaovad"?

Iga kord, kui salvestad postituste vidina, genereerib Elementor uuesti unikaalse elementor-element-* klassi. Leia DevToolsis uus klass ja asenda see lühikoodi HTML-ümbrises. Seda ei ole võimalik tavavahenditega automatiseerida; pead seda käsitsi tegema. See võtab aga ainult umbes 30 sekundit.

Kas peaksid ootama Elementori sisseehitatud lõputut kerimist?

Kuue aasta jooksul pärast esimeste selleteemaliste juhendite avaldamist ei ole Elementori sisseehitatud postituste vidin saanud lõputut kerimist ei tasuta ega Pro versioonis. Nummerdatud lehekülgede numeratsioon jääb arhiivide ja postituste ruudustike ainsaks võimaluseks.

Ajax Load More täidab selle tühimiku täielikult ja pakub veelgi enam. Pluginat arendatakse aktiivselt: sellel on üle 200 000 aktiivse installatsiooni WordPress.org-is, regulaarsed uuendused (viimane oli kirjutamise hetkel vähem kui kuu aega tagasi) ja üle tosina lisa erinevate stsenaariumide jaoks. Tasuta versioon haldab lõputut kerimist, nuppu „Laadi rohkem", laiska laadimist ja kohandatud kordusmalle. See katab enamiku Elementori projektidest.

Kui Elementor haldab sinu saidil postituste ruudustikku ja külastajad vajavad lõputut kerimist, ehita kordusmall ülaltoodud juhiste järgi. Pool tundi esmaseks seadistamiseks ja postitused laaditakse ilma lehte värskendamata.

🔗 Ajax Load More WordPress.org-is