Como adicionar scroll infinito a um template WordPress

Fonte: Paulo Faustino/IMasters

Para quem trabalha com desenvolvimento de temas WordPress, introduzir constantemente novas funcionalidades é primordial – não só para tornar seus templates mais atrativos, mas acima de tudo, mais funcionais. O scroll infinito é uma forma muito popular de carregar conteúdo de forma dinâmica no seu site, sendo necessário apenas que o usuário faça scroll na tela, para o conteúdo ir carregando e aparecendo de forma dinâmica.

Sites populares, como o Twitter e Facebook usam esta funcionalidade há um bom tempo e ela pode ser facilmente adaptada para um template WordPress, dependendo logicamente das suas necessidades. Nem todos os tipos de sites e blogs se encaixam bem em um scroll infinito, portanto, ao usar a funcionalidade, tenha isso em mente. Para colocar o scroll infinito no seu WordPress, siga os passos deste artigo, baseado no código dos colegas do wptheming.

Para quem trabalha com desenvolvimento de temas WordPress, introduzir constantemente novas funcionalidades é primordial – não só para tornar seus templates mais atrativos, mas acima de tudo, mais funcionais. O scroll infinito é uma forma muito popular de carregar conteúdo de forma dinâmica no seu site, sendo necessário apenas que o usuário faça scroll na tela, para o conteúdo ir carregando e aparecendo de forma dinâmica.

Sites populares, como o Twitter e Facebook usam esta funcionalidade há um bom tempo e ela pode ser facilmente adaptada para um template WordPress, dependendo logicamente das suas necessidades. Nem todos os tipos de sites e blogs se encaixam bem em um scroll infinito, portanto, ao usar a funcionalidade, tenha isso em mente. Para colocar o scroll infinito no seu WordPress, siga os passos deste artigo, baseado no código dos colegas do wptheming.

Baixe o JavaScript

Faça o download de uma cópia do arquivo “jquery.infinitescroll.min.js”, que está no repositório do GitHub, e coloque-o na pasta de scripts ou arquivos JavaScript do seu template WordPress. Se não tem uma pasta “scripts” ou “js” no seu template, você poderá criar uma apenas para organizar todos os arquivos e funcionalidades do seu tema.

Se desejar, pode ainda escolher uma das imagens para o efeito de loading do script. Veja aqui. Carregue a imagem para a pasta “imagens” do seu template.

Carregar o script

Vai ser necessário registar e carregar o script para dentro do arquivo functions.php do seu template. Copie e cole o seguinte código para dentro do arquivo functions.php do seu tema. Se o seu tema não tiver um arquivo com esse nome, deverá criar um e colar o seguinte código:

/**
* Load javascripts used by the theme
*/
function custom_theme_js(){
wp_register_script( 'infinite_scroll',  get_template_directory_uri() . '/js/jquery.infinitescroll.min.js', array('jquery'),null,true );
if( ! is_singular() ) {
wp_enqueue_script('infinite_scroll');
}
}
add_action('wp_enqueue_scripts', 'custom_theme_js');.

Inicializar o script

No código seguinte, estão listados diferentes parâmetros usados no template. Provavelmente, você precisará alterar alguns deles para se ajustarem corretamente ao seu template. Veja:

  • img: O caminho para o URL da imagem de loading;
  • nextSelector: Selector do link “artigos antigos”;
  • navSelector: Selector dos links de navegação anterior/próximo;
  • itemSelector: Selector para posts. Poderá ser .hentry, .post, .etc;
  • contentSelector: Contém divs para os seus posts.
/**
* Infinite Scroll
*/
function custom_infinite_scroll_js() {
if( ! is_singular() ) { ?>
<script>
var infinite_scroll = {
loading: {
img: "<?php echo get_template_directory_uri(); ?>/images/ajax-loader.gif",
msgText: "<?php _e( 'Loading the next set of posts...', 'custom' ); ?>",
finishedMsg: "<?php _e( 'All posts loaded.', 'custom' ); ?>"
},
"nextSelector":"#nav-below .nav-previous a",
"navSelector":"#nav-below",
"itemSelector":"article",
"contentSelector":"#content"
};
jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );
</script>
<?php
}
}
add_action( 'wp_footer', 'custom_infinite_scroll_js',100 );

Nota: Não esqueça de traduzir as mensagens de carregamento para a língua desejada.

Testar o script

Ao carregar o conteúdo da homepage ou de uma categoria, o scroll infinito deverá estar funcionando. Caso não esteja, verifique se o script não está carregando corretamente, ou se por ventura está dando algum erro de JavaScript. Verifique também se os seletores estão todos funcionando corretamente.

Se você fizer scroll diversas vezes, é provável que a determinada altura comece a dar erros 404, pelo que você deverá aplicar o seguinte patch ao arquivo functions.php:

/**
* If we go beyond the last page and request a page that doesn't exist,
* force WordPress to return a 404.
* See http://core.trac.wordpress.org/ticket/15770
*/
function custom_paged_404_fix( ) {
global $wp_query;
if ( is_404() || !is_paged() || 0 != count( $wp_query->posts ) )
return;
$wp_query->set_404();
status_header( 404 );
nocache_headers();
}
add_action( 'wp', 'quimby_paged_404_fix' );

É isso, pessoal! Até mais.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *