Como Adicionar Rolagem Infinita ao Seu Site WordPress (Passo a Passo)

A rolagem infinita é uma tendência de sites que evoluiu ao longo dos anos, encontrando seu lugar em muitos sites populares. É ótima para sites com muito conteúdo, como blogs, portais de notícias e plataformas de mídia social, onde os usuários gostam de navegar sem fim.

Se você deseja manter os visitantes grudados em seu conteúdo, a rolagem infinita pode ser a solução que você procura. Esse recurso carrega automaticamente novo conteúdo à medida que os usuários rolam para baixo, para que eles não precisem clicar na próxima página.

Mas como você adiciona isso ao seu site WordPress? Não se preocupe, pois criamos 3 maneiras fáceis de implementar a rolagem infinita, independentemente de suas habilidades técnicas.

Para Rolagem Infinita ou Não? 🔍

A rolagem infinita não é para todos. Embora este elemento de design de sites WordPress funcione muito bem para sites com muito conteúdo, como feeds de redes sociais e portais de notícias, ele pode frustrar usuários em um site de comércio eletrônico que procuram produtos específicos.

Em nossa experiência, a rolagem infinita funciona melhor quando seus visitantes querem navegar e descobrir conteúdo naturalmente.

Pense em galerias de fotos no estilo Instagram ou sites de notícias como o BuzzFeed, onde os leitores desfrutam de uma exploração de conteúdo contínua. Pode tornar mais fácil e agradável para os visitantes navegar pelos seus feeds de conteúdo (como posts de blog ou listas de produtos), especialmente se eles estiverem em dispositivos móveis.

Mas pode ser frustrante em sites ou diretórios da web onde os usuários precisam de navegação clara ou querem encontrar informações específicas rapidamente.

Outra consideração importante? Embora a rolagem infinita possa aumentar o engajamento, ela precisa ser implementada corretamente para evitar lentidão no seu site ou criar problemas de acessibilidade. Portanto, se você quiser experimentá-la, é uma boa ideia otimizar o desempenho do seu site WordPress.

Rolagem Infinita: Prós e Contras

Prós da Rolagem Infinita	Contras da Rolagem Infinita
Navegação Contínua: Os usuários desfrutam de uma exploração de conteúdo ininterrupta sem clicar em 'próxima página'.	Frustração do Usuário: Pode ser irritante para usuários orientados a objetivos (por exemplo, eCommerce, diretórios) que tentam encontrar itens específicos.
Aumento de Engajamento: Incentiva os usuários a passarem mais tempo em sites com muito conteúdo (blogs, notícias, mídias sociais).	Problemas de Desempenho: Pode diminuir os tempos de carregamento do site sem otimização adequada, especialmente com arquivos de mídia grandes.
Amigável para Dispositivos Móveis: O movimento natural de rolagem é ideal para dispositivos móveis, aprimorando a experiência do usuário.	Desafios de Acessibilidade: Pode dificultar a navegação para usuários com leitores de tela ou navegação por teclado.
Descoberta de Conteúdo: Ótimo para sites como galerias de fotos (estilo Instagram) onde a descoberta é fundamental.	Preocupações com SEO: Sem otimização específica (AJAX, URLs exclusivas, schema), os mecanismos de busca podem não indexar todo o conteúdo.

Dito isso, vamos ver como adicionar a rolagem infinita do WordPress ao seu site. Você pode usar estes links rápidos para pular para um método específico:

Opção 1: Use o Catch Infinite Scroll para Configuração Rápida

Durante nossos testes e pesquisas, descobrimos que o plugin Catch Infinite Scroll é uma ótima maneira de adicionar rolagem infinita rapidamente. Além de ser simples de usar, ele também permite personalizar como a rolagem infinita do seu site se comporta.

A primeira coisa que você precisa fazer é instalar e ativar o plugin Catch Infinite Scroll. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin WordPress.

Após a ativação, você verá um novo item de menu chamado ‘Catch Infinite Scroll’ no seu painel do WordPress. Simplesmente clique nele para configurar as definições do plugin.

Queremos acionar a rolagem infinita quando o usuário começar a rolar a página para baixo.

Com isso em mente, abra o menu suspenso ‘Carregar em’ e escolha ‘Rolar’. Se você escolher ‘Clicar’, o Catch Infinite Scroll exibirá um botão ‘Carregar mais’ em vez disso.

Em seguida, você pode personalizar o seletor de navegação, o próximo seletor, o seletor de conteúdo e o seletor de item. Essas configurações ajudam o plugin a entender qual conteúdo carregar e onde exibi-lo em seu tema específico.

Frequentemente, as configurações padrão funcionam bem, mas se você achar que a rolagem infinita não está funcionando como esperado, estas são as configurações que você vai querer ajustar.

A seção ‘Imagem’ mostra o ícone do carregador de conteúdo que o Infinite Scroll exibirá ao carregar conteúdo.

Por padrão, ele usa uma imagem GIF de carregamento, mas você pode alterá-la se desejar. Simplesmente clique em ‘Upload’ e, em seguida, escolha uma imagem da biblioteca de mídia ou carregue um novo arquivo.

Quando estiver satisfeito com a configuração da rolagem infinita, clique no botão ‘Salvar alterações’ para armazenar suas modificações.

Agora, se você visitar seu site WordPress, verá a rolagem infinita em ação.

Opção 2: Adicione Rolagem Infinita ao WooCommerce com YITH

YITH Infinite Scrolling é um plugin de rolagem infinita da YITH, uma desenvolvedora de plugins para WooCommerce. Portanto, se você deseja adicionar rolagem infinita às suas páginas de produtos, este é o plugin que recomendamos. Ele funciona muito bem com outros plugins YITH como YITH WooCommerce Points and Rewards.

Este plugin foi projetado para funcionar perfeitamente com o WooCommerce, então você geralmente pode apenas instalá-lo e ativá-lo para adicionar rolagem infinita às suas páginas de produtos. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin WordPress.

Após a ativação, você pode visitar seu site para ver a nova funcionalidade de rolagem infinita em ação.

Se você quiser ajustar a rolagem infinita, encontrará algumas configurações simples acessando YITH » Infinite Scrolling no seu painel do WordPress.

Aqui, você pode habilitar e desabilitar a rolagem infinita.

Você também pode alterar a imagem ou GIF que o YITH exibe ao carregar conteúdo. Simplesmente role até a seção 'Loading Image' e faça o upload da sua imagem. Você também pode fazer o upload de uma imagem via URL.

Não se esqueça de clicar no botão 'Save Options'.

Opção 3: Personalização Avançada com Ajax Load More

Ajax Load More possui uma interface avançada com muitas opções diferentes, incluindo um modelo repetidor, construtor de shortcode e consultas do WordPress.

O plugin também oferece mais configurações de personalização, incluindo muitos estilos de ícone de carregamento de página e estilos de botão.

Tendo isso em mente, ele tem uma curva de aprendizado mais acentuada e não é recomendado para iniciantes. No entanto, ele oferece aos usuários mais avançados controle total sobre o scroll infinito do site.

Para um guia detalhado, você pode ver nosso tutorial sobre como criar um botão de carregar mais posts no WordPress usando o plugin Ajax Load More.

Adicionando Scroll Infinito no WordPress: Perguntas Frequentes

Você ainda tem dúvidas sobre como adicionar scroll infinito ao seu site WordPress? Vamos discutir algumas perguntas frequentes sobre este recurso de design.

O scroll infinito é bom ou ruim?

O scroll infinito tem seus prós e contras. É ótimo para sites como redes sociais, blogs e sites de notícias onde os usuários gostam de navegar por uma variedade de conteúdo. No entanto, para sites orientados a objetivos como eCommerce, pode ser frustrante para os usuários que tentam encontrar itens específicos.

O scroll infinito melhora o desempenho?

O scroll infinito pode facilitar o acesso dos usuários a mais conteúdo rapidamente, especialmente em dispositivos móveis onde rolar é natural.

No entanto, sem a otimização adequada, ele pode diminuir os tempos de carregamento da página, especialmente com arquivos de mídia grandes. É por isso que é uma boa ideia seguir as melhores práticas de velocidade e desempenho do site.

O scroll infinito é ruim para SEO?

Sem otimização adequada, a rolagem infinita pode ser ruim para o SEO do WordPress. Os mecanismos de busca podem não indexar todo o conteúdo, pois eles não rolam automaticamente para baixo.

Mas existem maneiras de otimizá-lo para um melhor SEO. Você pode adicionar um botão "carregar mais" usando AJAX para que os mecanismos de busca reconheçam material adicional, usar marcação de esquema para esclarecer seu conteúdo para os mecanismos de busca e pré-carregar links para o conteúdo futuro.

O scroll infinito é melhor que a paginação?

Se a rolagem infinita é melhor do que a paginação depende do que funciona melhor para o seu site e usuários. A rolagem infinita oferece uma experiência contínua, enquanto a paginação fornece uma estrutura mais clara. Ambos têm suas vantagens, então escolha com base nas preferências de conteúdo e público.

Saiba Mais Maneiras de Otimizar o Design do Seu Blog WordPress

Quer mais dicas e truques para melhorar seu blog WordPress? Confira estes guias:

• How to Add a Parallax Effect to Any WordPress Theme
• Como Adicionar um Redimensionador de Fonte no WordPress para Acessibilidade
• Como Criar um Divisor de Forma Personalizado no WordPress
• Truques de Barra Lateral do WordPress para Obter Resultados Máximos
• Como Adicionar Barra de Rolagem Personalizada a Qualquer Elemento no WordPress
• Como Destacar Texto no WordPress (Guia para Iniciantes)
• Como Adicionar Conteúdo Dinâmico no WordPress (Guia para Iniciantes)

Esperamos que este tutorial tenha ajudado você a aprender como adicionar rolagem infinita ao seu site WordPress. Você também pode querer conferir nosso guia para iniciantes sobre como editar seu site WordPress e nossas melhores escolhas de especialistas das melhores alternativas ao Canva para gráficos de sites.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.