Como adicionar o botão Carregar mais publicações no WordPress

Deseja adicionar um botão para carregar mais publicações no WordPress? Muitas plataformas populares permitem que os usuários carreguem mais publicações quando chegam ao final da página, e por um bom motivo.

Em nossa experiência, esse simples botão pode melhorar significativamente a experiência do usuário. Em vez de clicar em várias páginas, os usuários podem carregar instantaneamente o novo conteúdo sem interromper o fluxo de navegação.

Neste artigo, mostraremos como adicionar facilmente um botão para carregar mais publicações no WordPress.

Quando e por que adicionar o botão Carregar mais publicações no WordPress

Manter os usuários envolvidos com o conteúdo ajuda a obter mais visualizações e, por fim, mais assinantes.

Muitos blogs usam o simples link de navegação “Postagens mais antigas” no final de suas páginas inicial, de blog e de arquivo. Alguns sites usam navegação de página numérica que acrescenta mais contexto.

No entanto, há certos tipos de sites que podem se beneficiar imensamente da rolagem infinita ou do botão carregar mais publicações. Alguns exemplos incluem sites de fotografia, listas e sites de conteúdo viral.

Em vez de carregar uma página totalmente nova, o botão “carregar mais publicações” funciona como uma rolagem infinita. Ele usa JavaScript para buscar rapidamente o próximo conjunto de conteúdo. Isso melhora a experiência do usuário e dá a ele a chance de ver mais do seu conteúdo.

Dito isso, vamos dar uma olhada em como adicionar facilmente o botão carregar mais publicações ao seu site WordPress.

Adicionando o botão Carregar mais publicações no WordPress

A primeira coisa que você precisa fazer é instalar e ativar o plug-in Ajax Load More. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, o plug-in adicionará um novo item de menu denominado “Ajax Load More” ao menu de administração do WordPress. Você precisa clicar nele e ir para a página de configurações do plug-in.

Na página de configurações, você pode escolher a cor do seu botão. Você também pode substituir o botão por rolagem infinita, que carrega o próximo lote de publicações automaticamente sem que os usuários cliquem no botão.

Em seguida, você precisa visitar a página Ajax Load More ” Repeater Template para adicionar seu modelo de exibição de posts.

O plug-in vem com um modelo básico que contém o loop do WordPress para exibir posts. No entanto, ele não combina com seu tema e pode parecer fora de lugar em seu site.

Para corrigir isso, você precisa copiar o código que seu tema usa para exibir publicações nas páginas de índice, arquivo e blog.

Normalmente, esse código está localizado na pasta template-parts de seu tema. Nessa pasta, você verá modelos para exibir diferentes conteúdos. Por exemplo, content-page.php, content-search.php e outros.

Você estará procurando o modelo genérico content.php. Aqui está um exemplo do arquivo content.php do nosso tema de demonstração:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <?php
        // Post thumbnail.
        twentyfifteen_post_thumbnail();
    ?>
 
    <header class="entry-header">
        <?php
            if ( is_single() ) :
                the_title( '<h1 class="entry-title">', '</h1>' );
            else :
                the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
            endif;
        ?>
    </header><!-- .entry-header -->
 
    <div class="entry-content">
        <?php
            /* translators: %s: Name of current post */
            the_content( sprintf(
                __( 'Continue reading %s', 'twentyfifteen' ),
                the_title( '<span class="screen-reader-text">', '</span>', false )
            ) );
 
            wp_link_pages( array(
                'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfifteen' ) . '</span>',
                'after'       => '</div>',
                'link_before' => '<span>',
                'link_after'  => '</span>',
                'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>%',
                'separator'   => '<span class="screen-reader-text">, </span>',
            ) );
        ?>
    </div><!-- .entry-content -->
 
    <?php
        // Author bio.
        if ( is_single() && get_the_author_meta( 'description' ) ) :
            get_template_part( 'author-bio' );
        endif;
    ?>
 
    <footer class="entry-footer">
        <?php twentyfifteen_entry_meta(); ?>
        <?php edit_post_link( __( 'Edit', 'twentyfifteen' ), '<span class="edit-link">', '</span>' ); ?>
    </footer><!-- .entry-footer -->
 
</article><!-- #post-## -->

Depois de encontrar esse código, você precisa colá-lo no campo “Repeater Templates” (Modelos de repetidor) nas configurações do plug-in.

Não se esqueça de clicar no botão “Save Template” (Salvar modelo) para armazenar suas configurações.

Em seguida, você precisa visitar a página Ajax Load More ” Shortcode Builder para gerar o shortcode.

Essa página contém muitas opções diferentes que você pode personalizar. Primeiro, você precisará selecionar o tipo de contêiner. Se não tiver certeza, basta olhar para o modelo que você copiou anteriormente. A maioria dos temas modernos do WordPress usa o elemento <div>;.

Depois disso, role para baixo até a seção de rótulos de botões. Aqui você pode alterar o texto que aparece no botão. Por padrão, o plug-in usa “Older Posts” (Postagens mais antigas) e você pode alterá-lo para “Load more posts” (Carregar mais postagens) ou o que desejar.

Por fim, você precisa escolher se deseja que as postagens sejam carregadas automaticamente ou esperar que os usuários cliquem no botão carregar mais postagens.

Seu shortcode agora está pronto para ser usado. Na coluna da direita, você verá a saída do shortcode. Vá em frente, copie o shortcode e cole-o em um editor de texto, pois você precisará dele na próxima etapa.

Como adicionar mais posts em seu tema do WordPress

Esta parte do tutorial exige que você adicione código aos arquivos de tema do WordPress. Se você nunca fez isso antes, dê uma olhada no nosso guia sobre como copiar e colar código no WordPress.

Não se esqueça de fazer backup do tema do WordPress antes de fazer qualquer alteração.

Você precisará localizar os arquivos de modelo onde deseja adicionar o botão carregar mais publicações em seu tema. Dependendo de como seu tema está organizado, geralmente esses arquivos são index.php, archives.php, categories.php, etc.

Você precisará adicionar o shortcode que copiou anteriormente ao seu tema logo após a tag endwhile;.

Como estamos adicionando o shortcode em um arquivo de tema, precisaremos adicioná-lo dentro da função do_shortcode, assim:

echo do_shortcode('[ajax_load_more container_type="div" post_type="post"]');  

Agora você pode salvar suas alterações e visitar seu site para ver o botão “Carregar mais publicações” em ação. Veja como ficou em nosso site de demonstração:

Esperamos que este artigo tenha ajudado você a aprender como adicionar o botão carregar mais publicações no WordPress. Talvez você também queira ver nossa mega lista das dicas, truques e hacks mais úteis do WordPress para iniciantes e nossas escolhas de especialistas dos melhores plug-ins do WordPress para o Facebook para expandir seu blog.

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