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

Por padrão, o WordPress exibe os links de postagem anterior e seguinte na parte inferior de cada postagem para facilitar a navegação.

A adição de miniaturas a esses links pode fazer uma grande diferença na experiência do usuário do seu blog WordPress. Essa simples alteração pode chamar a atenção do leitor e mantê-lo em seu site por mais tempo.

Neste artigo, vamos orientá-lo sobre como adicionar miniaturas aos links de postagens anteriores e seguintes no WordPress para dar um impulso visual ao seu site.

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

Seu blog do 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 seu site.

Esses links aumentam o envolvimento do usuário porque, quando os visitantes terminam de ler uma publicação de blog, eles podem procurar outra coisa para ler. Entretanto, se você adicionar miniaturas, os links parecerão mais interativos.

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

Por exemplo, você pode ter um conteúdo de pilar que já está 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.

Com isso em mente, 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 usando o WPCode, o melhor plug-in de trechos de código. Ele permite que você adicione código sem quebrar seu site e vem com vários modelos prontos, para que você não precise escrever código 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 “ + Add Snippet. Em seguida, clique em “Add New” (Adicionar novo).

Você será levado a uma biblioteca de trechos de código, onde poderá escolher entre uma ampla variedade de modelos predefinidos.

No entanto, para adicionar miniaturas aos links de postagem anterior e seguinte, faremos o upload de uma sequência de código personalizado. Então, vamos clicar em “Use Snippet” em “Add Your Custom Code”.

A próxima etapa é dar um nome ao snippet de código para que você possa consultá-lo mais tarde.

Em seguida, basta copiar o código a seguir no editor de texto do WPCode. Certifique-se de selecionar “PHP Snippet” como o “Code Type” (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;
}

Depois de inserir o snippet, você pode alternar o botão de “Inativo” para “Ativo”.

Ele deve ter a seguinte aparência.

Isso permitirá que o código funcione.

Em seguida, basta clicar no botão “Update” (Atualizar).

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

Novamente, na opção “Add Your Custom Code” (Adicionar seu código personalizado), você selecionará “Use Snippet” (Usar snippet) e dará um nome a ele para que possa consultá-lo posteriormente.

Em seguida, você pode copiar o código a seguir e colá-lo no editor de texto do WPCode. Certifique-se de selecionar “PHP Snippet” no menu suspenso “Code Type” (Tipo de código).

wpb_posts_nav();

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

Agora, role para baixo até a seção “Inserção” e clique no menu suspenso ao lado de “Local”.

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, você pode ativar a opção “Active” (Ativo) e clicar em “Update” (Atualizar).

Depois de salvar as alterações, você pode usar essa função no modelo em que deseja mostrar links de postagens anteriores e seguintes com miniaturas.

E pronto, você adicionou e configurou as miniaturas da postagem anterior e da próxima!

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.

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 permitirá que seus leitores vejam seu melhor conteúdo, em vez de apenas os artigos publicados anteriormente e os próximos.

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.

Ou você pode 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. Em seguida, talvez você também queira saber como cortar e editar miniaturas de postagens no WordPress ou como adicionar miniaturas de vídeos em destaque no 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.