Trick # 186 | 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
