Como adicionar miniaturas aos links de postagem anterior e seguinte no WordPress

Você gostaria de exibir miniaturas com os links para as postagens anteriores e seguintes no WordPress?

Na parte inferior de cada postagem, o WordPress exibe links para as postagens anteriores e seguintes para facilitar a navegação. A adição de miniaturas a esses links os tornará mais atraentes para seus leitores.

Neste artigo, mostraremos como usar miniaturas com links de postagens anteriores e seguintes no WordPress.

Por que exibir miniaturas com os links de postagem anterior e seguinte?

Seu blog WordPress oferece alguns recursos úteis para ajudar os visitantes a encontrar novos conteúdos e navegar pelo site.

Esses recursos incluem menus de navegação, uma barra de pesquisa e um widget de arquivos de postagens.

Outro recurso de navegação útil é encontrado na parte inferior de cada post do blog do WordPress. Lá, você encontrará links para as postagens anteriores e seguintes do blog em seu site.

Esses links aumentam o envolvimento do usuário porque, quando os visitantes terminarem de ler uma publicação do blog, eles estarão procurando outra coisa para ler. No entanto, os links parecerão mais interativos se você adicionar miniaturas.

Também é uma boa maneira de chamar a atenção para suas postagens de blog com melhor desempenho. Por exemplo, talvez você tenha um conteúdo de pilar que já esteja gerando muito tráfego e convertendo esses leitores em assinantes de e-mail. A adição de miniaturas com links de posts só ajudaria a criar sua lista de e-mails e a expandir sua pequena empresa.

Dito isso, vamos dar uma olhada em como adicionar miniaturas aos links de postagem anterior e seguinte no WordPress.

Uso de miniaturas com links de postagem anterior e seguinte no WordPress

Para adicionar miniaturas aos links de postagem anterior e seguinte, você terá de adicionar código aos arquivos do tema do WordPress. Se você nunca fez isso antes, consulte nosso guia sobre como copiar e colar código no WordPress.

Adição de código usando WPCode

A primeira etapa é adicionar o seguinte trecho de código com um plug-in como o WPCode.

O WPCode é o melhor plugin de snippets de código que permite adicionar código sem quebrar seu site. Ele também vem com vários modelos prontos, para que você não precise escrever códigos do zero.

Para começar, você precisará instalar e ativar o plug-in WPCode. Para obter mais detalhes, consulte nosso artigo sobre como instalar um plug-in do WordPress.

A partir daí, vá para a página Code Snippets “ + Code Snippets. Em seguida, clique em “Add New” (Adicionar novo).

Aqui, você será levado a uma biblioteca de trechos de código, onde poderá encontrar vários modelos predefinidos para escolher.

Em “Add Your Custom Code” (Adicionar seu código personalizado), clique em “Use Snippet” (Usar snippet).

Dê um nome ao snippet de código para que você possa consultá-lo mais tarde.

Em seguida, copie o código a seguir no editor de texto WPCode. Certifique-se de selecionar “PHP Snippet” como o tipo de código.

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;
}

Em seguida, alterne o botão de “Inativo” para “Ativo”.

Isso fará com que o trecho de código tenha efeito.

Em seguida, basta pressionar o botão “Atualizar”.

Agora, precisaremos voltar à página Code Snippets “ +Add Snippet.

Novamente, na opção “Add Your Custom Code”, você selecionará “Use Snippet”.

Dê um nome ao snippet de código para que você possa consultá-lo mais tarde.

Em seguida, copie o código a seguir no editor de texto WPCode. Certifique-se de selecionar “PHP Snippet” como o tipo de código.

wpb_posts_nav();

Esse código informa ao WordPress onde mostrar a navegação com a imagem em destaque.

Em seguida, role para baixo até a seção Inserção. Você precisará clicar no menu suspenso ao lado de Location.

A partir daí, vá para Page-Specific e escolha Insert After Post. Dessa forma, as miniaturas aparecerão corretamente ao lado dos links.

Por fim, torne o trecho de código ativo ativando o botão “Active” (Ativo).

Em seguida, clique em “Atualizar”.

Depois de salvar as alterações, essa função pode ser chamada a partir do modelo em que você deseja exibir links de postagens anteriores e seguintes com miniaturas.

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

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

Para saber como adicionar miniaturas a uma postagem, consulte nosso guia sobre como adicionar imagens em destaque ou miniaturas de postagens no WordPress.

Alternativa: Exibição de postagens populares com miniaturas

Outra maneira de envolver seus leitores após a leitura de uma publicação é exibir uma lista de publicações populares após cada artigo. Isso dará aos seus leitores a chance de ver seu melhor conteúdo, em vez de apenas os artigos anteriores e seguintes que foram publicados.

Suas postagens populares contêm seu conteúdo de maior sucesso. Exibi-los para seus visitantes criará confiança, melhorará a prova social e garantirá que os visitantes permaneçam no site por mais tempo.

Ao verificar o primeiro método em nosso guia sobre como exibir posts por visualizações no WordPress, você saberá como é fácil adicionar posts populares usando o plugin MonsterInsights.

O widget Popular Posts do MonsterInsights oferece uma ampla variedade de temas atraentes e muitas opções de personalização.

Talvez você também queira consultar nosso guia sobre como adicionar widgets pós-post personalizados no WordPress, onde poderá aprender a adicionar vários tipos de conteúdo ao final de cada post do blog.

Esperamos que este tutorial tenha ajudado você a aprender como usar miniaturas com links de postagens anteriores e seguintes no WordPress. Você também pode querer saber como acelerar o desempenho do WordPress ou conferir nossa lista dos melhores plug-ins de mídia social para WordPress.

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.