Como Adicionar Miniaturas aos Links de Posts Anterior e Próximo no WordPress

Depois de todo o trabalho em um post de blog do WordPress, ver os leitores saírem depois de uma página é frustrante.

Um grande motivo? Os links de navegação de texto simples na parte inferior dos seus posts mal são notados.

Adicionar imagens em miniatura a esses links de navegação pode ajudar a chamar a atenção. Os leitores podem ver instantaneamente o que vem a seguir, o que os torna muito mais propensos a permanecer e explorar seu conteúdo.

Testamos muitos métodos e descobrimos que o WPCode é a melhor ferramenta para o trabalho. Ele permite adicionar trechos de código personalizados com segurança sem tocar nos arquivos do seu tema.

Neste guia, mostraremos exatamente como adicionar miniaturas aos seus links de posts anterior e próximo no WordPress. É mais fácil do que você pensa! 💡

Por que exibir miniaturas com os links de posts anterior e próximo?

Miniaturas tornam instantaneamente seus links de navegação mais atraentes e clicáveis. Eles podem encorajar os leitores a continuarem explorando seu site, potencialmente aumentando pageviews e tempo de permanência.

Seu blog WordPress oferece alguns recursos úteis para ajudar os visitantes a encontrar novo conteúdo e navegar em seu site.

Esses recursos incluem:

• Menus de navegação
• Uma barra de pesquisa, e
• Um widget de arquivos de posts.

Outra funcionalidade útil de navegação é encontrada na parte inferior de cada postagem de blog. Lá, você encontrará links para as postagens anterior e seguinte do seu site.

Esses links aumentam o engajamento do usuário porque, quando os visitantes terminam de ler uma postagem de blog, eles podem procurar algo mais para ler. No entanto, se você adicionar miniaturas, os links parecerão mais interativos.

É também uma ótima maneira de chamar a atenção para suas postagens de blog de melhor desempenho ou postagens de blog populares.

Por exemplo, você pode ter conteúdo pilar que já está gerando muito tráfego e convertendo esses leitores em assinantes de e-mail. Adicionar miniaturas com links de postagem apenas ajudaria você a construir sua lista de e-mail e expandir seu pequeno negócio.

Com isso em mente, mostraremos como adicionar miniaturas aos links de postagem anterior e seguinte no WordPress. Aqui estão todos os tópicos que abordaremos neste artigo:

Vamos começar!

Usando Miniaturas com Links de Postagem Anterior e Seguinte no WordPress

Para adicionar miniaturas aos seus links de posts anterior e próximo, você terá que adicionar código aos arquivos do seu tema WordPress.

Recomendamos o uso do WPCode, o melhor plugin de snippets de código para WordPress. Ele permite adicionar código sem quebrar seu site e vem com muitos modelos prontos, para que você não precise escrever código do zero.

Em nossos sites, usamos o WPCode para criar e gerenciar trechos de código personalizados. Ele funcionou incrivelmente bem para nós, e você pode conferir nossa análise completa do WPCode para explorar seus recursos.

Se você nunca fez isso antes, consulte nosso guia sobre como copiar e colar código no WordPress.

Para começar, você precisará instalar e ativar o plugin WPCode. Na sua área de administração do WordPress, vá para Plugins » Adicionar Novo.

Na próxima tela, use a caixa de pesquisa para encontrar rapidamente o plugin WPCode.

Clique em ‘Instalar agora’ no resultado da pesquisa, seguido por ‘Ativar’.

Se precisar de ajuda, você pode conferir nosso artigo sobre como instalar um plugin do WordPress.

Após a ativação, vá para Trechos de Código » + Adicionar Trecho no seu painel do WordPress.

Você será redirecionado para uma biblioteca de snippets de código, onde poderá escolher entre uma ampla variedade de modelos pré-fabricados.

Para adicionar miniaturas aos links de postagem anterior e seguinte, faremos o upload de um trecho de código personalizado.

Então, vamos clicar em ‘+ Adicionar Trecho Personalizado’ em ‘Adicionar Seu Código Personalizado (Novo Trecho)’.

No pop-up que aparece, você selecionará o tipo de código.

Aqui, você vai querer escolher ‘Trecho de PHP’, que é um pequeno pedaço de código usado para estender a funcionalidade do WordPress.

O próximo passo é dar um nome ao snippet de código para que você possa consultá-lo mais tarde.

Em seguida, simplesmente copie o seguinte código para o editor de texto do WPCode:

function wpb_posts_nav(){
    $next_post = get_next_post();
    $prev_post = get_previous_post();
     
    if ( $next_post || $prev_post ) : ?>
     
        <div class="wpb-posts-nav">
            <div>
                <?php if ( ! empty( $prev_post ) ) : ?>
                    <a href="<?php echo get_permalink( $prev_post ); ?>">
                        <div>
                            <div class="wpb-posts-nav__thumbnail wpb-posts-nav__prev">
                                <?php echo get_the_post_thumbnail( $prev_post, [ 100, 100 ] ); ?>
                            </div>
                        </div>
                        <div>
                            <strong>
                                <svg viewBox="0 0 24 24" width="24" height="24"><path d="M13.775,18.707,8.482,13.414a2,2,0,0,1,0-2.828l5.293-5.293,1.414,1.414L9.9,12l5.293,5.293Z"/></svg>
                                <?php _e( 'Previous article', 'textdomain' ) ?>
                            </strong>
                            <h4><?php echo get_the_title( $prev_post ); ?></h4>
                        </div>
                    </a>
                <?php endif; ?>
            </div>
            <div>
                <?php if ( ! empty( $next_post ) ) : ?>
                    <a href="<?php echo get_permalink( $next_post ); ?>">
                        <div>
                            <strong>
                                <?php _e( 'Next article', 'textdomain' ) ?>
                                <svg viewBox="0 0 24 24" width="24" height="24"><path d="M10.811,18.707,9.4,17.293,14.689,12,9.4,6.707l1.415-1.414L16.1,10.586a2,2,0,0,1,0,2.828Z"/></svg>
                            </strong>
                            <h4><?php echo get_the_title( $next_post ); ?></h4>
                        </div>
                        <div>
                            <div class="wpb-posts-nav__thumbnail wpb-posts-nav__next">
                                <?php echo get_the_post_thumbnail( $next_post, [ 100, 100 ] ); ?>
                            </div>
                        </div>
                    </a>
                <?php endif; ?>
            </div>
        </div> <!-- .wpb-posts-nav -->
     
    <?php endif;
}

Veja como pode ficar na sua tela:

Antes de ativar, role para baixo até a seção ‘Inserção’ para verificar as configurações.

Aqui, certifique-se de que o ‘Método de Inserção’ esteja definido como ‘Inserir Automaticamente’ e a ‘Localização’ como ‘Executar em Todos os Lugares’.

Em seguida, você pode rolar para cima novamente e alternar o botão de ‘Inativo’ para ‘Ativo’.

Não se esqueça de clicar no botão ‘Salvar Snippet’ ou ‘Atualizar’ para ativar sua nova função.

Agora que a função foi criada, precisamos criar um segundo snippet para dizer ao WordPress exatamente onde exibi-la na página. Ao dividir isso em dois snippets, criamos a funcionalidade com segurança primeiro e, em seguida, a posicionamos facilmente sem sobrecarregar seu site ou quebrar seu layout.

Vamos voltar para a página Code Snippets » + Add Snippet.

Novamente, na opção ‘Adicionar seu código personalizado (Novo Snippet)’, clique em ‘+ Adicionar Snippet Personalizado’.

No pop-up que aparece, o WPCode perguntará o tipo do seu código.

Você pode selecionar ‘Snippet PHP’.

Isso abrirá o mesmo editor de texto de antes.

Dê um nome descritivo ao seu novo snippet personalizado para que você possa consultá-lo facilmente mais tarde.

Agora, você pode copiar e colar o seguinte código no editor de texto do WPCode. Este código informa ao WordPress onde mostrar a navegação com a imagem em destaque.

wpb_posts_nav();

Veja como pode ficar na sua tela:

Com isso feito, você vai querer rolar para baixo até a seção ‘Inserção’ e clicar no menu suspenso ao lado de ‘Localização’.

A partir daqui, vá para ‘Específico da página’ e escolha ‘Inserir após o post’. Dessa forma, as miniaturas aparecerão corretamente ao lado dos links.

Finalmente, você pode ativar o 'Ativo' e clicar em 'Salvar Snippet' (ou 'Atualizar').

Após salvar suas alterações, você pode usar esta função no modelo onde deseja mostrar links de posts anteriores e seguintes com miniaturas.

Como você definiu a localização como 'Inserir Após o Post', o WPCode cuidará automaticamente do posicionamento para você. Não há necessidade de editar os arquivos do seu tema.

E é isso – você adicionou e configurou suas miniaturas de posts anteriores e seguintes!

Agora, quando você visualizar um post em seu site, verá que os links anterior e seguinte na parte inferior do post agora têm miniaturas.

Alternativa: Exibindo Postagens Populares com Miniaturas

Outra maneira de engajar seus leitores após eles lerem um post é exibir uma lista de posts populares após cada artigo. Isso permitirá que seus leitores vejam seu melhor conteúdo em vez de apenas os artigos publicados anteriormente e posteriormente.

Seus posts populares contêm seu conteúdo de maior sucesso. Exibi-los aos seus visitantes ajudará a aumentar suas pageviews e impulsionar o engajamento do usuário.

Embora os links de anterior e próximo sejam ótimos para leitura cronológica, uma ferramenta como o MonsterInsights permite que você exiba automaticamente seu melhor conteúdo, com maior taxa de conversão, para manter os leitores engajados.

Na WPBeginner, usamos o MonsterInsights para acompanhar de perto o desempenho do nosso site. Você pode ver nossa análise completa do MonsterInsights e ver por que é nossa ferramenta preferida para tomar decisões baseadas em dados.

O Widget de Posts Populares do MonsterInsights oferece uma ampla gama de temas atraentes e muitas opções de personalização.

Você pode aprender o quão fácil é configurar isso em nosso guia sobre como exibir posts por visualizações no WordPress.

Ou você pode conferir nosso guia sobre como adicionar widgets personalizados após posts no WordPress, onde você pode aprender a adicionar vários tipos de conteúdo ao final de cada postagem do blog.

Perguntas Frequentes Sobre Miniaturas de Navegação de Postagem

Tem dúvidas sobre como adicionar miniaturas à navegação dos seus posts? Aqui estão algumas das coisas que os leitores costumam perguntar antes de começar.

Links Bônus para Usar Imagens e Outros Arquivos de Mídia no WordPress

Esperamos que este tutorial tenha ajudado você a aprender como usar miniaturas com links de posts anteriores e próximos no WordPress.

Em seguida, você também pode querer aprender:

• Como Cortar e Editar Miniaturas de Posts do WordPress
• Como Adicionar Miniaturas de Vídeo em Destaque no WordPress
• Texto Alternativo da Imagem vs Título da Imagem no WordPress
• Como Corrigir Imagem Destacada Não Aparecendo no WordPress
• Como Otimizar Imagens para Desempenho na Web Sem Perder Qualidade

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