Quando estiver a desenhar sites WordPress para os seus clientes, a usabilidade é um factor importante a considerar. Contudo, algumas das técnicas usadas para melhorar a Experiência do Utilizador (UX) num site, podem não ser os melhores métodos para outro.

A rolagem infinita é uma táctica que os programadores e designers usam para manter os visitantes do site envolvidos. Enquanto alguns posit podem realmente prejudicar a usabilidade dos sites, há muitos casos em que pode ser benéfico.

Neste post, vamos explicar o que é rolagem infinita e que tipos de sites podem se beneficiar com ela. Em seguida, vamos guiá-lo através de três métodos que você pode usar para adicionar esta funcionalidade aos sites dos seus clientes. Vamos começar!

Uma introdução à rolagem infinita

A rolagem infinita é uma técnica de web design em que o novo conteúdo é automaticamente carregado quando um visitante chega ao final da página. O resultado é uma alimentação constante e aparentemente infinita de conteúdo.

Exemplos populares de sites que usam rolagem infinita são as redes sociais como Facebook, Twitter e Pinterest. Você também pode vê-lo em blogs e sites de entretenimento como Mashable e Buzzfeed:

Existem muitos benefícios em incorporar rolagem infinita nestes sites. O mais óbvio é que poupa tempo e fornece aos seus utilizadores mais conteúdo sem a necessidade de clicar num botão Ler mais ou em links de paginação.

Com menos distrações, a alimentação automática de conteúdo também pode significar que os usuários ficam por mais tempo, o que pode traduzir-se em taxas de engajamento mais altas. Além disso, este recurso é amigável para celular.

No entanto, nem todo site é adequado para rolagem infinita. Por exemplo, se você tem um site orientado a objetivos, como uma loja de comércio eletrônico, pode tornar difícil para os usuários encontrar o que eles estão procurando. Também pode ter impacto no desempenho do site se não for optimizado correctamente.

Por outro lado, se tiver um site com uma estrutura linear, pode ser altamente benéfico. A rolagem infinita pode ser particularmente útil para fins de narração, seja através de posts de blogs de longa duração ou conteúdo visual como imagens.

Como adicionar rolagem infinita a sites de clientes (3 métodos)

Se está a criar sites de clientes que são guiados pelo conteúdo, pode considerar adicionar uma funcionalidade de rolagem infinita. Vamos ver três métodos que pode usar para o fazer.

Utilizar um Plugin de Rolagem Infinita

Um dos métodos mais rápidos e fáceis que pode usar para adicionar rolagem infinita aos websites dos seus clientes é usar um plugin. Alguns, como o Jetpack, incluem recursos para implementar este elemento de design.

Não há muitos plugins autônomos de rolagem infinita. No entanto, um popular que recomendamos usar é o Ajax Load More:

Este plugin é gratuito e fácil de usar, apesar de requerer algum conhecimento de programação. Ele permite que você adicione rolagem infinita para carregamento preguiçoso de posts, páginas e comentários.

Após instalar e ativar o plugin, você pode configurar os parâmetros relevantes da consulta do WordPress com base em vários tipos de conteúdo. Na página Configurações, você pode ajustar e personalizar como Ajax Load More se comporta nos sites de seus clientes. Por exemplo, você pode adicionar seu próprio CSS personalizado:

O plugin também inclui um Shortcode Builder que você pode usar para modificar rapidamente páginas e posts do seu editor de conteúdo ou dos seus arquivos template. Outra característica do plugin que vale a pena conferir é o seu Repeater Templates:

Você pode fazer seu próprio template repetidor e ajustar como o HTML e PHP funcionam dentro do atalho. Você também pode incluir múltiplas instâncias do plugin Ajax Load More em um único post, página, ou template.

Embora o plugin gratuito forneça muitos recursos para rolagem infinita, há também uma versão premium que desbloqueia o acesso a mais templates. Para saber mais, você pode conferir a página Ajax Load More documentation and support page.

Escolha Temas Com Rolagem Infinita Construída

Se você não quiser adicionar outro plugin aos sites dos seus clientes, não se preocupe. Você pode conseguir o mesmo efeito usando um tema que tem o scroll infinito embutido.

Obviamente, esta rota não é a mais prática para sites existentes. Mudar o tema de um site muitas vezes requer um rebranding extensivo. Isto não vale exactamente o trabalho só para ter acesso a uma funcionalidade de rolagem infinita – especialmente tendo em conta que o pode conseguir utilizando outros métodos.

Existe um número saudável de temas WordPress que incluem esta funcionalidade. Você pode navegar no Diretório de Temas do WordPress e pesquisar pelo recurso de rolagem infinita:

Embora o tema em si possa ser gratuito, tenha em mente que você pode precisar atualizar para a versão premium para usar a rolagem infinita. No entanto, existem alguns que oferecem a funcionalidade sem custos, como Minimal Dark.

Embora encontre um tema que goste que inclua a funcionalidade, descarregue-o e instale-o da forma que você faria com qualquer outro tema. A maioria incluirá a funcionalidade no Theme Customizer.

Por exemplo, com Minimal Dark, você pode encontrar a opção de scroll infinito indo para Appearance > Customize > Opções de Tema > Opções de Paginação:

Se você quiser recursos mais avançados, você pode considerar um tema premium. Theme Forest tem uma ampla seleção que inclui rolagem infinita.

As instruções para ativar e usar a função de rolagem infinita dependerá do tema que você está usando. Portanto, é melhor verificar com a documentação do desenvolvedor para orientação.

Manually Add Code to Your Site

Um terceiro método para implementar rolagem infinita – e um que pode ser preferido se você for um desenvolvedor experiente – é adicionar código manualmente ao seu site. Esta opção lhe dá mais controle e elimina a necessidade de instalar um plugin adicional.

Plus, você pode usar este código em sites com temas que não vêm com scroll infinito embutido. O primeiro passo é activar a funcionalidade através do ficheiro functions.php do seu tema.

Para fazer isto, adicione o seguinte código ao ficheiro:

Após isto estar completo, o próximo passo é configurar a função Renderizar Parâmetro. Esta é a parte do código que trata de carregar os posts para rolagem infinita em um loop.

Para que os posts sejam carregados continuamente, adicione a função mytheme_infite_scroll_init ao arquivo functions.php do seu tema assim:

function mytheme_infinite_scroll_render(){get_template_part( 'loop' );}

Após adicionar estes dois snippets, você deve estar pronto para ir. No entanto, se não estiver funcionando, você ainda pode ter que mudar o tema do site. Produtos mais antigos e ultrapassados podem não suportar rolagem infinita.

Conclusão

Rolagem infinita não é para todos. No entanto, existem alguns sites, tais como blogs e outras publicações online de conteúdo pesado, onde pode fornecer melhor UX e até mesmo aumentar o envolvimento.

Neste artigo, discutimos três métodos que você pode usar para adicionar rolagem infinita aos sites clientes:

1. Utilizar um plugin de rolagem infinita.
2. Selecionar temas com rolagem infinita incorporada.
3. Adicionar código ao seu site.