Página inicial de suporte > Aparência > Rolagem infinita

Rolagem infinita

Em vez de ter que clicar em um link para ir para o próximo conjunto de posts, a rolagem infinita exibe os próximos posts automaticamente quando o leitor se aproxima da parte inferior da página.

Ao contrário de muitas das funcionalidades do Jetpack, a rolagem infinita funciona apenas com temas compatíveis com ela. Como cada tema é desenvolvido de forma diferente, a funcionalidade rolagem infinita precisa de informações sobre o tema para funcionar adequadamente.

OBSERVAÇÃO: a maioria dos temas atualmente têm suporte integrado para a rolagem infinita! Para saber se o seu tema tem suporte para rolagem infinita, acesse JetpackConfiguraçõesEscrever no Painel do seu site e verifique na seção Melhorias de tema.

Se o seu tema não tiver suporte integrado para a rolagem infinita, leia as instruções detalhadas sobre como adicionar suporte ao seu tema e como usar o CSS para personalizar a aparência.

Como adicionar suporte

A ativação da rolagem infinita é muito similar à adição de suporte para miniaturas de posts ou estilos de editor porque ambas utilizam add_theme_support(). Forneça algumas informações importantes ao chamar o add_theme_support() para integrar a rolagem infinita facilmente ao seu tema.
Se você tiver um tema bem elaborado, como os temas padrão do WordPress, será muito fácil adicionar a rolagem infinita. Veja como isso é feito para o Twenty Twelve:

add_theme_support( 'infinite-scroll', array(
 'container' => 'content',
 'footer' => 'page',
) );

Dessa forma, você obtém uma experiência de rolagem infinita totalmente funcional.

container

O parâmetro container é fundamental para a adição da rolagem infinita ao seu tema: ele especifica a ID do elemento HTML na qual a rolagem infinita deve adicionar outros posts. O valor padrão é content, mas ela pode ser qualquer ID válida de CSS que apareça no tema com suporte e seja apropriada para a inclusão de posts. Geralmente, esse valor corresponde ao contêiner matriz dos posts no seu tema.

footer

Um dos problemas da rolagem infinita é que você não pode acessar o rodapé de uma página, já que sempre que você se aproxima do fim, novos posts são carregados. A nossa rolagem infinita tem um rodapé fixo que desliza quando você rola a página para baixo. O parâmetro footer ajuda a combinar esse rodapé com o design do seu tema. Se outra ID for passada, o rodapé da rolagem infinita corresponderá à largura para encaixe perfeito no seu design. No entanto, se você passar um valor false, nenhum rodapé será adicionado.
Outros parâmetros podem ser ajustados. Este exemplo mostra os valores padrão de cada opção de configuração:

add_theme_support( 'infinite-scroll', array(
 'type' => 'scroll',
 'footer_widgets' => false,
 'container' => 'content',
 'wrapper' => true,
 'render' => false,
 'posts_per_page' => false,
) );

Analisando cada opção:

type

type aceita dois valores diferentes: scroll ou click. Isso controla o comportamento padrão da rolagem infinita. O scroll fará com que os posts sejam carregados automaticamente quando o visitante alcançar a parte inferior da lista de posts atual, enquanto click mostra um botão Carregar mais posts, que permite que o usuário controle quando mais posts serão carregados.

o padrão é o scroll, mas se um tema tiver widgets de rodapé, ele poderá ser substituído por click para que os widgets fiquem acessíveis.

footer_widgets

O argumento footer_widgets aceita diversos valores e indica se um tema tem widgets de rodapé. Se os widgets de rodapé estiverem presentes, o tipo de rolagem será definido como click para que os widgets fiquem acessíveis.

Para simplificar, um valor booleano true ou false pode ser definido para sempre exibir o rodapé ou nunca o exibir, respectivamente.
Além disso, uma string representando uma ID de barra lateral ('sidebar-1', por exemplo) ou um array de IDs de barras laterais serão aceitos pelo argumento footer_widgets. O código da rolagem infinita verificará se as barras laterais contêm widgets e definirá o argumento footer_widgets de acordo.

É altamente recomendável que, sempre que possível, sejam fornecidas as IDs de barra lateral se um tema posicionar áreas de widget abaixo da lista de posts. Isso garantirá a melhor experiência para os usuários do tema ao determinar dinamicamente se o tipo de rolagem deve ser scroll ou click. Assim, se um tema especificar click como o tipo desde o início, o argumento footer_widgets poderá ser omitido com segurança.

Se todas essas opções não forem suficientes, o filtro infinite_scroll_has_footer_widgets está disponível para lógica avançada. O filtro deve retornar um valor booleano e pode ser usado para detectar a presença de menus de navegação ou um visitante que use um dispositivo móvel.

wrapper

O comportamento do argumento wrapper é similar ao do footer_widgets, pois ele aceita alguns valores diferentes. Este argumento determina se cada conjunto de posts adicionais estará contido em um elemento div quando ele for anexado ao contêiner especificado no argumento anterior.
Se um valor booleano (true ou false) for especificado, talvez um div com a classe infinite-wrap seja colocado ao redor dos posts adicionais.

Para envolver os posts em um div com uma classe personalizada, defina o argumento wrapper como uma string que represente a classe personalizada.
Observe que o argumento wrapper aceita somente uma string sem espaço em branco.

Geralmente é recomendável envolver os posts anexados em um div, a menos que isso resulte em uma marcação inválida. Por exemplo, se um tema usar um elemento de lista (ol ou ul) para exibir posts, o wrapper deve ser desativado para que os elementos div não apareçam em lugares errados.

Render

A rolagem infinita usa um loop padrão do WordPress para renderizar os posts adicionais anexados e utiliza partes de modelos no formulário content-{post format}.php. Se um tema incluir pelo menos content.php, o argumento render poderá ser omitido. Esta é a função de renderização padrão usada pela rolagem infinita:

while( have_posts() ) {
 the_post();
 get_template_part( 'content', get_post_format() );
}

Se uma personalização maior for necessária, ou se um tema não usar as partes do modelo content, um nome de função deverá ser especificado para o argumento render e essa função será usada para gerar a marcação da rolagem infinita. A função deve incluir a parte while() do loop do WordPress e pode utilizar as funções disponíveis para o tema quando os posts forem renderizados.

posts_per_page

Por padrão, o argumento type controla quantos posts são carregados cada vez que a rolagem infinita é ativada. No tipo scroll, sete (7) posts são carregados cada vez que a rolagem infinita é ativada. No tipo click, o valor “As páginas do blog mostram no máximo” do site encontrado em Configurações → Leitura é usado.
Entretanto, se o layout de um tema contar com um determinado número de posts, o argumento posts_per_page substituirá os padrões mencionados no parágrafo anterior. Esse controle é útil, por exemplo, em um tema com um layout de três colunas no qual uma quantidade maior ou menor que três posts resultará em um layout irregular.

Exemplos

Com a maior variedade de temas e criadores de temas possível, nosso objetivo é fornecer controle suficiente sobre o comportamento da rolagem infinita para suporte a muitos temas. Assim, a nossa experiência com o WordPress.com mostrou que, geralmente, cada tema precisa de poucas opções de configuração. Para demonstrar, fornecemos a configuração da rolagem infinita em temas padrão do WordPress.

Twenty Twelve
/**
 * Adicionar suporte ao tema na rolagem infinita.
 *
 * @uses add_theme_support
 * @return void
 */
function twenty_twelve_infinite_scroll_init() {
 add_theme_support( 'infinite-scroll', array(
 'container' => 'content',
 ) );
}
add_action( 'after_setup_theme', 'twenty_twelve_infinite_scroll_init' );

Para os usuários que não estiverem familiarizados com o tema Twenty Twelve, ele usa partes do modelo content-{post format}.php e não tem área de widget abaixo dos posts; os argumentos footer_widgets e render foram omitidos. Na verdade, como o valor de container corresponde ao padrão, esse argumento também poderia ser omitido; ele foi deixado para clareza.

Twenty Eleven
/**
 * Adicionar suporte ao tema na rolagem infinita.
 */
function twenty_eleven_infinite_scroll_init() {
 add_theme_support( 'infinite-scroll', array(
 'container' => 'content',
 'footer_widgets' => array( 'sidebar-3', 'sidebar-4', 'sidebar-5', ),
 'footer' => 'page',
 ) );
}
add_action( 'after_setup_theme', 'twenty_eleven_infinite_scroll_init' );

O Twenty Eleven tem áreas de widget de rodapé, que não poderiam ser alcançadas na rolagem para baixo, pois novos posts seriam adicionados sempre que a parte inferior fosse alcançada. Para solucionar isso, passamos um array com as IDs dessas áreas de widget para footer_widgets. Agora, se uma dessas barras laterais tem um widget, o plugin de rolagem infinita o detecta e troca para o tipo click automaticamente (no qual você clica para carregar mais posts sob demanda). Assim, o conteúdo do rodapé ainda pode ser acessado perfeitamente. Se o seu tema tiver widgets de rodapé, considere essa abordagem para melhorar de forma significativa a experiência dos seus usuários.

Twenty Ten
/**
 * Adicionar suporte ao tema na rolagem infinita
 */
function twenty_ten_infinite_scroll_init() {
 add_theme_support( 'infinite-scroll', array(
 'container' => 'content',
 'render' => 'twenty_ten_infinite_scroll_render',
 'footer' => 'wrapper',
 ) );
}
add_action( 'after_setup_theme', 'twenty_ten_infinite_scroll_init' );
/**
 * Definir o código a ser renderizado para chamar posts,
 * vinculados a partes do modelo, quando possível.
 *
 * Observação: deve definir um loop.
 *
function twenty_ten_infinite_scroll_render() {
 get_template_part( 'loop' );
}

O Twenty Ten usa uma estrutura de modelo ligeiramente diferente para renderizar posts, assim, precisamos determinar uma função de renderização personalizada para a rolagem infinita.

Faça com estilo

A parte final do processo consiste em encaixar a rolagem infinita perfeitamente no design do seu site. A rolagem infinita depende do tema compatível com body_class, que fornece aos desenvolvedores de temas o máximo de flexibilidade para melhorar a experiência usando algumas classes específicas de texto: quando a rolagem infinita estiver ativa, a classe infinite-scroll estará disponível em body; se o tipo da rolagem infinita for “scroll”, a classe neverending também estará presente. Depois que o último post do blog for carregado, uma classe infinity-end será adicionada. Com essas classes, você pode ocultar os links de navegação e os rodapés regulares e exibi-los novamente quando a rolagem infinita estiver concluída. Exemplo:

/* Oculta os links de navegação e o rodapé do site quando a rolagem infinita está ativa */
.infinite-scroll #navigation,
.infinite-scroll.neverending #footer {
 display: none;
}
/* Mostra o rodapé novamente caso todos os posts tenham sido carregados */
.infinity-end.neverending #footer {
 display: block;
}

Você também pode personalizar estes dois elementos para que eles se adequem ao seu tema:

[...]

e

[…]

span.infinite-loader é o indicador de carga exibido enquanto novos posts são recuperados. Ele é inserido como filho do contêiner e, caso não seja mais necessário posteriormente, ficará oculto em vez de ser removido do DOM. Garanta que o CSS dê conta dos dois casos.
div#infinite-handle é o botão Carregar mais posts exibido para type=click. Você pode ignorá-lo caso seu tema sempre for usar type=scroll e nunca for incluir widgets de rodapé.

Eventos do JavaScript

Inevitavelmente, há situações em um tema que requerem uma interação do JavaScript depois que os posts são adicionados. Por exemplo, um tema que use Masonry da jQuery e precise acionar essa biblioteca para posicionar os posts adicionais. Reconhecendo essa necessidade, acionamos um evento depois que os posts são anexados. Para utilizar esse evento, basta acessar o evento post-load quando for exibido em document.body:

( function( $ ) {
 $( document.body ).on( 'post-load', function () {
 // Novos posts foram adicionados na página.
 } );
} )( jQuery );

Adicionar argumentos personalizados na consulta da rolagem infinita

Alguns temas e plugins adicionam argumentos extras em consultas de posts, geralmente para alterar a forma como os posts são classificados ou carregados. Você pode usar o filtro infinite_scroll_query_args para também adicionar esses argumentos extras na rolagem infinita. No exemplo a seguir, adicionaremos 2 parâmetros personalizados de classificação, order e orderby:

/**
 * Classificar todos os resultados da rolagem infinita alfabeticamente por nome do post
 *
 * @param array $args
 * @filter infinite_scroll_query_args
 * @return array
 */
function jetpack_infinite_scroll_query_args( $args ) {
 $args['order'] = 'ASC';
 $args['orderby'] = 'nome';
 return $args;
}
add_filter( 'infinite_scroll_query_args', 'jetpack_infinite_scroll_query_args' );

Solução de problemas

Eu defini a rolagem infinita como “Carregar mais posts à medida que a página do leitor rolar para baixo”. No entanto, o botão “Posts mais antigos” é exibido em vez disso.

O seu tema tem widgets de rodapé? Se você tiver widgets na área de widgets de rodapé, a rolagem infinita passará a usar o botão “Posts mais antigos” automaticamente para garantir que os widgets de rodapé possam ser exibidos no seu site. Se você quiser que os posts sejam carregados enquanto rola para baixo na página, coloque os widgets em uma área alternativa, como a barra lateral. Se o seu tema tiver apenas áreas de widget de rodapé, você pode procurar um tema diferente com mais opções de área de widget.

Outras observações

Como essa funcionalidade requer o suporte aos temas para ser utilizada, incluímos o suporte no Jetpack para os temas padrão do WordPress: Twenty Ten, Twenty Eleven etc. Se você estiver utilizando um desses temas, poderá ativar a rolagem infinita e desfrutar dessa funcionalidade imediatamente. Se você estiver utilizando um dos temas da Automattic disponíveis no WordPress.org, o upgrade deles incluirá o suporte para a rolagem infinita. O cartão da funcionalidade avisará aos usuários que podem fazer upgrade dos temas se o tema ativo tiver um upgrade disponível.

Informações de privacidade

Esta funcionalidade está desativada por padrão. Se você precisar desativá-la, alterne o botão Carregar mais posts usando o comportamento de tema padrão na seção Melhorias de tema em Jetpack — Configurações — Escrita.

Mais informações sobre o uso de dados no seu site
Dados usados
Usuários/Proprietários de sites
Para registrar as visualizações de página por meio das estatísticas do WordPress.com (que devem estar ativadas para que o controle de visualização de páginas funcione) com cargas adicionais, as seguintes informações são usadas: endereço de IP, ID do usuário do WordPress.com (se tiver efetuado login), nome de usuário do WordPress.com (se tiver efetuado login), agente usuário, URL visitante, URL de referência, carimbo de data/hora do evento, idioma do navegador, código do país.
Visitantes do site
Para registrar as visualizações de página por meio das estatísticas do WordPress.com (que devem estar ativadas para que o controle de visualização de páginas funcione) com cargas adicionais, as seguintes informações são usadas: endereço de IP, ID do usuário do WordPress.com (se tiver efetuado login), nome de usuário do WordPress.com (se tiver efetuado login), agente usuário, URL visitante, URL de referência, carimbo de data/hora do evento, idioma do navegador, código do país.
Atividade monitorada
Usuários/Proprietários de sites
As visualizações de página serão monitoradas com cada carga adicional (como quando você rola até a parte inferior da página e um novo conjunto de posts é carregado automaticamente). Se o proprietário do site tiver ativado o Google Analytics para funcionar com essa funcionalidade, um evento de visualização de página também será enviado para a conta adequada do Google Analytics com cada carga adicional.
Visitantes do site
As visualizações de página serão monitoradas com cada carga adicional (como quando você rola até a parte inferior da página e um novo conjunto de posts é carregado automaticamente). Se o proprietário do site tiver ativado o Google Analytics para funcionar com essa funcionalidade, um evento de visualização de página também será enviado para a conta adequada do Google Analytics com cada carga adicional.
Dados sincronizados (leia mais)
Usuários/Proprietários de sites
Sincronizamos as opções que identificam se a funcionalidade está ativada e se o Google Analytics está integrado a essa funcionalidade.
Visitantes do site
Nenhum.
  • Tabela de Conteúdo

  • Categorias

  • Contate-nos

    Precisa de ajuda? Sinta-se à vontade para entrar em contato conosco.