💡 Näin otat käyttöön loputtoman vierityksen Elementorissa Ajax Load Moren avulla

• Asenna ilmainen lisäosa Ajax Load More WordPress.orgin lisäosavarastosta ja aktivoi se.
• Kopioi yksittäisen artikkelin HTML-rakenne Elementor-ruudukosta DevTools-työkalujen avulla ja rakenna Repeater Template.
• Valitse Shortcode Builderissa lataustyyliksi "Infinite Scroll" ja aseta posts_per_page (4-6, jos käytössä on 2-3 sarakkeen ruudukko).
• Lisää scroll_container ja transition_container_classes -kenttiin Elementor-ruudukon CSS-luokat, jotta ladatut artikkelit perivät tyylit.
• Kääri shortcode HTML-säiliöön, jolla on yksilöllinen elementor-element-*-widget-luokka, ja sijoita lohko sivulle.
• Avaa sivu julkisella puolella, vieritä alas ja varmista, että artikkelit latautuvat vierittämällä ilman sivun uudelleenlatausta.

Mitä tarvitset

Varmista ennen aloittamista, että sivustollasi on asennettuna ja aktivoituna kaksi asiaa:

• Elementor (ilmainen versio tai Pro), rakentaja, jossa artikkeliruudukkosi on luotu.
• Ajax Load More, ilmainen lisäosa sisällön lataamiseen AJAXin avulla. Lataa WordPress.orgista

Pidä myös virallinen dokumentaatio ja esimerkkisivu käsillä. Tarjolla on kymmeniä valmiita koodinpätkiä eri tilanteisiin: tavallisista artikkeleista WooCommerceen ja ACF:ään.

Elementorin sisäänrakennettu Artikkelit-widget tarjoaa vain numeroidun sivutuksen; ilmainen tai Pro-versio eivät kumpikaan osaa ladata artikkeleita vierittämällä. Ajax Load More paikkaa tämän puutteen: se lisää loputtoman vierityksen, "Lataa lisää" -painikkeen ja laiskan latauksen säilyttäen samalla ruudukon ulkoasun. Avainasemassa on oikein tehty Repeater Template. Kun rakennat sen, ladatut artikkelit ovat visuaalisesti erottamattomia sivulla jo olevista.

Yllä oleva lyhyt video näyttää integraation toiminnassa: Elementorin artikkelit latautuvat saumattomasti ilman sivun uudelleenlatauksia tai asettelun hyppimistä.

Vaihe 1: Repeater Templaten rakentaminen Elementor-ruudukolle

Tärkein osuus on yksittäisen artikkelin HTML-rakenteen siirtäminen oikein Elementorista Ajax Load Moren malliin. Jos malli ei vastaa todellista asettelua, ladatut artikkelit "hajoavat": marginaalit siirtyvät, kortit katoavat ja ruudukko menee rikki.

Avaa sivu, jolla ruudukko on, selaimessasi, paina F12 (DevTools), siirry Elements-välilehdelle ja etsi yhden artikkelin DOM-solmu. Tarvitset yhden elementin KOKO HTML:n, avaavasta <article>- tai <div class="elementor-post"> -tagista sulkevaan tagiin asti.

Elementor-ruudukon peruspohja (kaksi saraketta, Cards-ulkoasu) näyttää tältä:

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

Tallenna pohja hallintapaneelissa: Ajax Load More → Repeater Templates, klikkaa "Add New". Anna sille kuvaava nimi, esimerkiksi "Elementor Grid 2 Columns".

Mihin kannattaa kiinnittää huomiota:

• Luokat elementor-post, elementor-post__card ja elementor-post__thumbnail ovat Elementorin "natiiveja" luokkia. Ne varmistavat, että ladatut artikkelit vastaavat visuaalisesti alkuperäistä ruudukkoa.
• the_post_thumbnail('alm-thumbnail') käyttää Ajax Load More -lisäosan rekisteröimää pienoiskuvakokoa. Jos teemassasi on rekisteröity mukautettu koko, korvaa alm-thumbnail sillä.
• <?php the_ID(); ?> <article>-luokassa antaa jokaiselle artikkelille yksilöllisen tunnisteen, josta on hyötyä CSS-kohdistuksessa.

Tärkeää: luokat voivat poiketa toisistaan riippuen Posts-widgetin ulkoasusta (Classic, Cards, Full Content). Ota luokat OMASTA merkinnästäsi sen sijaan, että kopioisit yllä olevan koodin sellaisenaan. Kaiken on täsmättävä, mukaan lukien järjestys ja välilyönnit.

Vaihe 2: Ajax Load More -lyhytkoodin rakentaminen

Siirry kohtaan Ajax Load More → Shortcode Builder. Visuaalinen rakentaja luo lyhytkoodin parametriesi perusteella:

• Post Type: post (tai oma mukautettu artikkelityyppisi).
• Posts per Page: kuinka monta artikkelia ladataan kerralla. 2-3 sarakkeen ruudukossa käytä arvoa 4-6.
• Loading Style: Infinite Scroll (loputon vieritys). Vaihtoehtoja: "Load More" -painike, lazy load.
• Container Type: div.
• Transition: animaatio uusille artikkeleille: Fade, Slide tai None.

Peruslyhytkoodi näyttää suunnilleen tältä:

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

Elementor-integraatiota varten kaksi lisäparametria on kriittisiä: scroll_container ja transition_container_classes. Ne "sitovat" Ajax Load Moren tulosteen Elementorin CSS-ruudukkoon:

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

Keskeiset parametrit selitettynä:

• scroll_container="elementor-grid-2" on kahden sarakkeen ruudukkokontti. Kolmelle sarakkeelle vaihda arvoksi elementor-grid-3; neljälle käytä elementor-grid-4.
• transition_container_classes="..." sisältää KAIKKI ruudukkokontin CSS-luokat, jotka on kopioitu DevToolsista. Ilman niitä ladatut artikkelit eivät peri Elementorin tyylejä ja näkyvät pelkkänä listana.
• images_loaded="true" odottaa kuvien latautumista kokonaan ennen uuden lohkon näyttämistä. Tämä poistaa asettelun hyppimisen latauksen aikana.
• offset="2" ohittaa N ensimmäistä artikkelia. Tämä on tarpeen, jos osa artikkeleista näytetään jo tavallisella Elementor-widgetillä (katso vaihe 4).

Vaihe 3: HTML-kääre lyhytkoodille

Ajax Load More edellyttää, että lyhytkoodi on HTML-säiliön sisällä, joka toistaa Elementor-ruudukon rakenteen. Ilman käärettä ruudukon tyylit eivät sovellu, eikä taika 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>

Luokka elementor-element-6ba59dc on SINUN Posts-widgettisi yksilöllinen tunniste. Etsi se DevToolsista (se alkaa aina elementor-element- ja päättyy hash-arvoon). Tämä luokka kantaa kaikki widgettiin Elementor-editorissa sovelletut tyylit: marginaalit, varjot, reunusten pyöristykset ja korttien värit.

Vaihe 4: Ruudukon CSS-tyylien säilyttäminen

Jos poistat Posts-widgetin ja jätät vain Ajax Load More -lyhytkoodin, kaikki Elementorin luomat tyylit katoavat sivun <head>-osiosta. Ruudukko hajoaa välittömästi.

Toimiva lähestymistapa: jätä Posts-widget sivulle minimaalisella artikkelimäärällä (2-3) ja aseta Ajax Load More -lyhytkoodiin offset="2". Näin:

• Elementor luo CSS:n kahdelle ensimmäiselle artikkelille, joten tyylit säilyvät sivun rungossa.
• Ajax Load More poimii loput artikkelit kolmannesta alkaen, samoilla luokilla ja tyyleillä.

Tässä lähestymistavassa on yksi haittapuoli: aina kun muutat MITÄ TAHANSA asetusta Posts-widgetissä Elementor-editorissa, yksilöllinen elementor-element-*-luokka luodaan uudelleen. Sinun on päivitettävä se HTML-kääreeseen. Se vie 30 sekuntia DevToolsin kautta, mutta sitä ei saa unohtaa.

Vaihe 5: Sijoittaminen sivulle

Lisää HTML-kääre ja lyhytkoodi käyttämällä "Shortcode"- tai "Text Editor" -widgettiä Elementorissa; molemmat hyväksyvät HTML:n. Sijoita lohko sinne, missä Posts-widget oli tai tulisi olemaan.

Tallenna sivu ja avaa se julkisella puolella. Vieritä alas. Artikkeleiden pitäisi alkaa latautua automaattisesti heti, kun vieritys saavuttaa säiliön.

Jos se ei toimi, tässä on kolme nopeaa tarkistusta:

• Selaimen konsoli (F12 → Console): punaiset JavaScript-virheet viittaavat lisäosien ristiriitoihin tai rikkinäiseen lyhytkoodin syntaksiin.
• scroll_container-luokka: vertaa sitä sivulla olevan säiliön todelliseen CSS-luokkaan. Yhdenkin merkin virhe (esimerkiksi välilyönti tavuviivan sijaan) rikkoo vieritysliipaisimen.
• Ajax Load More → Settings: varmista, että lisäosa on aktiivinen eikä välimuistilisäosan (WP Rocket, W3 Total Cache) estämä. Ajax-pyynnöt menevät joskus välimuistiin, joten lisää /wp-admin/admin-ajax.php poikkeuksiin.

⁉️🤔 Usein kysytyt kysymykset

Toimiiko tämä Elementorin ilmaisversiolla?

Kyllä. Ajax Load More ei ole riippuvainen Elementor Prosta. Se tarvitsee ainoastaan ruudukon HTML-rakenteen, jonka ilmaisversio tarjoaa. Kopioi luokat DevToolsin kautta ja rakenna malli; Pro-ominaisuuksia ei tarvita.

Voiko ladata mukautettuja sisältötyyppejä artikkelien sijaan?

Kyllä. Määritä shortcodessa post_type="your_cpt". Ajax Load More toimii kaikkien julkisten sisältötyyppien kanssa: tavalliset artikkelit, sivut, WooCommerce-tuotteet, portfoliokohteet ja niin edelleen. Jokainen tyyppi tarvitsee oman Repeater Template -mallinsa.

Ladatut artikkelit näyttävät erilaisilta kuin alkuperäinen ruudukko. Mikä on vialla?

Ongelma on lähes aina transition_container_classes-kohdassa: kopioit puutteelliset luokat tai teit virheen jossakin niistä. Avaa DevTools, etsi alkuperäinen ruudukon säiliö, kopioi koko luokkamerkkijono ja liitä se shortcodeen. Toiseksi yleisin ongelma: scroll_container osoittaa väärään elementtiin.

Tarvitaanko Ajax Load More Premium -lisäosia perusasetuksiin?

Artikkelien loputtomaan vieritykseen ei tarvita. Ilmaisversio riittää. Premium-lisäosat (Elementor Widget Connector, Single Posts, WooCommerce, SEO, Filters) laajentavat skenaarioita: loputon vieritys yksittäisissä artikkeleissa, suodatinintegraatio, SEO-sivutus yksilöllisillä URL-osoitteilla. Jos projektisi kasvaa ja tarvitset näitä ominaisuuksia, tutustu Pro Bundleen.

Miksi ruudukon tyylit "katoavat" ladatuista artikkeleista Elementor-muokkausten jälkeen?

Aina kun tallennat Posts-widgetin, Elementor luo uudelleen yksilöllisen elementor-element-*-luokan. Etsi uusi luokka DevToolsista ja korvaa se shortcoden HTML-kääreessä. Tätä ei voi automatisoida suoraan, vaan se on tehtävä manuaalisesti. Se vie kuitenkin vain noin 30 sekuntia.

Kannattaako odottaa Elementorin natiivia loputonta vieritystä?

Kuuden vuoden aikana siitä, kun ensimmäiset oppaat tästä aiheesta julkaistiin, Elementorin sisäänrakennettu Posts-widget ei ole saanut loputonta vieritystä ilmais- eikä Pro-versiossa. Numeroitu sivutus on edelleen ainoa vaihtoehto arkistoille ja artikkeliruudukoille.

Ajax Load More täyttää tämän aukon täysin ja vielä enemmänkin. Lisäosaa kehitetään aktiivisesti: sillä on yli 200 000 aktiivista asennusta WordPress.orgissa, säännöllisiä päivityksiä (viimeisin alle kuukausi sitten kirjoitushetkellä) ja yli tusina lisäosaa eri skenaarioihin. Ilmaisversio hoitaa loputtoman vierityksen, "Lataa lisää" -painikkeen, laiskan latauksen ja mukautetut Repeater Template -mallit. Tämä kattaa useimmat Elementor-projektit.

Jos Elementor pyörittää sivustosi artikkeliruudukkoa ja kävijäsi tarvitsevat loputonta vieritystä, rakenna Repeater Template yllä olevien ohjeiden mukaisesti. Puoli tuntia alkuasetuksiin, ja artikkelit latautuvat ilman sivun uudelleenlatausta.

🔗 Ajax Load More WordPress.orgissa