Para quem trabalha com desenvolvimento de temas WordPress, estar constantemente introduzindo novas funcionalidades é sem dúvida primordial, não só para tornar seus templates mais atrativos, mas acima de tudo mais funcionais. O Scroll Infinito é uma forma extremamente popular de carregar conteúdo dinamicamente no seu site, sendo necessário apenas que o usuário faça scroll na tela do ecrã para o conteúdo ir carregando e aparecendo de forma dinâmica. Sites populares como o Twitter e Facebook usam esta funcionalidade há imenso tempo, a qual pode ser facilmente adaptável a um template WordPress, dependendo logicamente das suas necessidades. Nem todos os tipos de sites e blogs encaixam bem num scroll infinito, portanto, ao usar a funcionalidade, tenha isso em consideração. Para colocar o scroll infinito no seu WordPress, siga este tutorial, baseado no código dos colegas do wptheming.

scroll infinito

BAIXE O JAVASCRIPT

Faça o download de uma cópia do ficheiro “jquery.infinitescroll.min.js” que está no repositório do GitHub, e carregue o ficheiro para a pasta de scripts ou ficheiros javascript do seu template WordPress. Se não tem uma pasta “scripts” ou “js” no seu template, poderá criar uma, apenas para organizar mais facilmente todos os ficheiros e funcionalidades do seu tema.

Se desejar pode ainda escolher uma das imagens para o efeito de loading do script, aqui: ajax-loader.gif. Carregue a imagem para a pasta “imagens” do seu template. Caso não tenha uma, poderá criar.

CARREGAR O SCRIPT

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

/**
 * 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ê irá necessitar de alterar alguns deles, para se ajustarem corretamente ao seu template. Tome nota:

  • 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 conteúdo da homepage ou de uma categoria, o scroll infinito deverá estar funcionando. Caso não esteja funcionando, verifique se o script não está carregando corretamente, ou se por ventura está dando algum erro de JavaScript. Verifique também se os selectores 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 ficheiro 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' );

Até Já!