Blog-Modul-Special #9: Ein «Load more»-Button für das Divi-Blog-Modul

17. Dezember 2022 | Divi-Theme, Scripts

Dieser Beitrag beinhaltet 695 Wörter. Geschätzte Lesezeit: ca. 4 Minuten.

Elegant-Themes hat zwar dem Divi-Blog-Modul eine Paginierung spendiert, mit welcher die gelisteten Beiträge durchforstet werden können. Es geht aber noch hübscher: Mit einem «Load more»-Button.

Zunächst fügen Sie an der gewünschten Stelle Ihrer Website ein Blogmodul ein. Nehmen Sie die Einstellungen vor: Layout, Anzahl gezeigter Artikel, Kategorienauswahl usw.

Anschliessend sind für unseren Hack zwei Schritte notwendig:

  • Vergeben Sie eine CSS-Klasse namens «blog-load-more». Das können Sie unter Erweitert/CSS-ID & Klassen/CSS-Klasse.
  • Weiter schalten Sie die Paginierung des Blogmoduls aus. Das geschieht im Inhalt-Tab unter «Elemente». Achtung: Die Paginierung nennt sich im deutschsprachigen Divi-Theme nicht ganz einleuchtend «Nummmerierung».

Button-Modul einfügen

Direkt im Anschluss an das Blogmodul fügen Sie nun ein Button-Modul auf der Seite ein. Beschriften Sie den Button z.B. mit «weitere Beiträge anzeigen».

Wechseln Sie nun im Buttonmodul auf den Tab «Erweitert», wählen Sie «CSS-ID & Klassen» und fügen Sie als CSS-ID-Name (NICHT als CSS-Klasse) «load_more» ein.

JQuery-Script einfügen

Nun benötigen Sie das untenstehende Script. Sie können es in ein Code-Modul direkt auf der aktuellen Seite einfügen oder aber im Backend unter Divi/Theme-Optionen/Integration in den <head>-Bereich Ihrer Website setzen:

<script>
jQuery(document).ready(function(){
    // Für Mobilanzeigen
    if (window.matchMedia('(max-width: 767px)').matches) {
        var initial_show_article = 3;
    var article_reveal = 2;
    jQuery(".blog-load-more article").not( ":nth-child(-n+"+initial_show_article+")" ).css("display","none");
    jQuery("#load_more").on("click", function(event){
        event.preventDefault();
        initial_show_article = initial_show_article + article_reveal;
        jQuery(".blog-load-more article").css("display","block");
        jQuery(".blog-load-more article").not( ":nth-child(-n+"+initial_show_article+")" ).css("display","none");
        var articles_num = jQuery(".blog-load-more article").not('[style*="display: block"]').length
            if(articles_num == 0){
            jQuery(this).css("display","none");    
            }   
    })
    } else {
        // Für Desktop-Monitore
        var initial_row_show = 1;
        var row_reveal = 2;
        var total_articles = jQuery(".blog-load-more article").length;
        jQuery(".blog-load-more article").not( ":nth-child(-n+"+initial_row_show+")" ).css("display","none");
        
        jQuery("#load_more").on("click", function(event){
            event.preventDefault();
            initial_row_show = initial_row_show + row_reveal;
            jQuery(".blog-load-more article").css("display","block");
            jQuery(".blog-load-more article").not( ":nth-child(-n+"+initial_row_show+")" ).css("display","none");
            var articles_num = jQuery(".blog-load-more article").not('[style*="display: block"]').length
            if(articles_num == 0){
            jQuery(this).css("display","none");    
            }    
        })
    } 
})
</script>

Modifizieren lässt sich das Script auf den Zeilen 5 und 6 (für Mobilanzeigen), sowie auf Zeilen 20 und 21 für die Desktop-Ansicht.

  • In der jeweils ersten Zeile des Codes steht am Ende die Zahl der zunächst anzuzeigenden Blogzeilen.
  • In der zweiten Code-Zeile (wieder am Ende) ist die Zahl der Blogzeilen eingetragen, die bei einem Klick auf den Load-more-Button zusätzlich angezeigt werden.

Das war’s schon. Eine Darstellung wie nebenan müsste nun das Resultat sein.

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This