Categorias: jQuery

Botão Load More no módulo Blog

Escrito por Amanda de Lavra

9 de maio de 2023

O desafio dessa vez era fazer um site similar a outro já existente. Nesse site, o blog tem um botão Load More para carregar mais posts ao invés de paginação. O Divi não tem essa opção nativa, mas encontrei esse tutorial que resolve o problema: https://www.peeayecreative.com/how-to-add-a-load-more-posts-button-to-the-divi-blog-module/.

Primeiro, é preciso acrescentar um módulo de blog e atribuir a classe blog-al ao módulo. A paginação do módulo blog deve estar desativada. Em seguida, deve-se acrescentar um módulo de botão e atribuir o id blog-al-load-more. Aí vem o código abaixo para ser incluso na aba Integração das Opções de Tema.

jQuery(document).ready(function(){
	//For mobile Screens
  if (window.matchMedia('(max-width: 767px)').matches) {
		var initial_show_article = 10;
		var article_reveal = 5;
		jQuery(".blog-al article").not( ":nth-child(-n+"+initial_show_article+")" ).css("display","none");
		jQuery("#blog-al-load-more").on("click", function(event){
			event.preventDefault();
			initial_show_article = initial_show_article + article_reveal;
			jQuery(".blog-al article").css("display","block");
			jQuery(".blog-al article").not( ":nth-child(-n+"+initial_show_article+")" ).css("display","none");
			var articles_num = jQuery(".blog-al article").not('[style*="display: block"]').length;
			if(articles_num == 0){
				jQuery(this).css("display","none");
			}
		})
	} else {
	//For desktop Screens
		var initial_row_show = 5;
		var row_reveal = 5;
		var total_articles = jQuery(".blog-al article").length;
		jQuery(".blog-al article").not( ":nth-child(-n+"+initial_row_show+")" ).css("display","none");
		jQuery("#blog-al-load-more").on("click", function(event){
			event.preventDefault();
			initial_row_show = initial_row_show + row_reveal;
			jQuery(".blog-al article").css("display","block");
            	jQuery(".blog-al article").not( ":nth-child(-n+"+initial_row_show+")" ).css("display","none");
			var articles_num = jQuery(".blog-al article").not('[style*="display: block"]').length;
			if(articles_num == 0){
				jQuery(this).css("display","none");
			}
		})
	} 
})
Dá para definir quantos posts serão mostrados inicialmente e quantos serão revelados ao clicar no botão tanto no desktop quanto no celular.

Posts relacionados

Esconder título na imagem em hover no Divi

Esconder título na imagem em hover no Divi

O Divi tem uma coisa muita chata que é aparecer o atributo título das imagens quando passa o mouse em cima delas. Tentei resolver com CSS, mas o código usava a propriedade pointer-events e definia como none. Isso tira não apenas a ação do hover, mas também do click e,...

Botão Leia Mais no Elementor

Botão Leia Mais no Elementor

O site do cliente tinham alguns textos que eram muito extensos e, num layout de coluna, variavam muito de tamanho. Decidi adaptar o que já havia feito no Divi, ao incluir um botão Leia Mais (https://blog.amandadelavra.com.br/modulo-texto-com-botao-leia-mais/), mas...

Cabeçalho diferente ao rolar a página com Divi

Cabeçalho diferente ao rolar a página com Divi

Para o site deste cliente, resolvi fazer dois cabeçalhos diferentes, um maior com várias informações que aparece ao abrir a página, e outro menor e fixo, apenas com o logo e o menu e que aparece ao rolar a página. Achei este tutorial:...