Como Adicionar Links de Próximo / Anterior no WordPress (Guia Definitivo)

Você já leu uma postagem de blog e quis uma maneira fácil de pular para a próxima?

É aí que os links de próximo/anterior são úteis. Esses links de navegação simples mantêm os leitores engajados, guiando-os para mais conteúdo em seu site sem que eles precisem procurá-lo.

Por padrão, o WordPress inclui links de postagem de próximo e anterior, mas dependendo do seu tema, eles podem não estar visíveis ou estilizados da maneira que você deseja.

No entanto, não se preocupe, pois nós cuidamos disso! Após testar diferentes métodos, encontramos algumas maneiras confiáveis de adicionar e personalizar esses links.

Neste guia, mostraremos como adicionar facilmente links de próximo/anterior no WordPress, seja você querendo fazer isso com um plugin ou um pouco de código personalizado.

O Que São Links de Próximo / Anterior no WordPress?

Links de próximo e anterior são links de navegação dinâmicos integrados aos temas do WordPress. Eles permitem que os usuários naveguem facilmente entre as postagens, ajudando-os a descobrir mais conteúdo sem cliques extras.

Por padrão, as postagens de blog do WordPress são exibidas em ordem cronológica reversa (postagens mais recentes primeiro).

Isso significa que a próxima postagem é aquela publicada após a postagem atual que um usuário está visualizando, e a postagem anterior é aquela que foi publicada antes da postagem atual.

Os links próximo/anterior permitem que os usuários naveguem facilmente por artigos individuais e páginas de arquivo de blog. Isso também ajuda você a obter mais visualizações de página em seu blog.

A maioria dos temas do WordPress vem com links de posts anterior e próximo integrados, que são exibidos automaticamente na parte inferior de cada post. No entanto, alguns temas não os exibem, ou você pode querer personalizar onde e como eles aparecem em seu site WordPress.

Dito isso, vamos dar uma olhada em como adicionar facilmente links anterior e próximo no WordPress. Você pode seguir os links abaixo para pular para a seção de sua escolha:

• Adicionando Links Anterior / Próximo ao WordPress Usando um Plugin (Método Mais Fácil)
• Adicionando Links Anterior / Próximo Usando Código Personalizado
• Estilizando Links Anterior / Próximo no WordPress
• Adicionando Links Anterior / Próximo para Posts com Miniaturas
• Adicionando Links Anterior / Próximo a Páginas do WordPress
• Bônus: Remover Links Anterior e Próximo no WordPress

Adicionando Links Anterior / Próximo ao WordPress Usando um Plugin (Método Mais Fácil)

Este método é fácil e recomendado para iniciantes que não se sentem confortáveis em adicionar código aos seus sites.

Primeiro, você precisa instalar e ativar o plugin CBX Next Previous Article. Para mais detalhes, consulte nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, visite a página Configurações » CBX Anterior Próximo. A partir daqui, você pode escolher onde deseja exibir os links anterior e próximo em seu site.

O plugin permite que você exiba setas de link Anterior e Próximo em posts individuais, páginas, páginas de arquivo e muito mais.

Para fazer isso, role para baixo até a seção ‘Configurações de Exibição do Arquivo’ e selecione ‘Sim’ para as áreas onde você deseja exibir esses links.

Para tornar seus links de próximo e anterior mais relevantes, você também pode optar por exibir as postagens de próximo e anterior da mesma categoria ou tag.

Agora, role para baixo até a seção ‘Configurações de Exibição de Artigo Único’. Você verá que Posts e Páginas já estão selecionados como os tipos de postagem padrão onde suas setas aparecerão.

Se você quiser exibir apenas uma seta para a postagem anterior ou a próxima, basta selecionar a opção ‘Anterior’ ou ‘Próximo’ na configuração ‘Mostrar Postagem’.

No entanto, se você quiser exibir ambas as setas, escolha a opção ‘Sim’ na configuração ‘Mostrar Ambas as setas’.

A versão gratuita do plugin permite apenas exibir setas para os artigos de próximo e anterior. Você pode fazer o upgrade para a versão pro para desbloquear outras opções de exibição, como pop-up de entrada.

Depois disso, você pode selecionar um estilo de seta no menu suspenso na seção ‘Configurações de Estilo de Seta’.

Depois de fazer isso, você verá uma prévia das setas abaixo. Em seguida, clique no botão ‘Salvar Configurações’.

Se você optar por exibir posts próximos/anteriores da mesma taxonomia, precisará mudar para a aba Navegar por Taxonomia.

A partir daqui, escolha qual taxonomia você deseja usar para selecionar os links de próximo e anterior. Em seguida, basta clicar no botão ‘Salvar Configurações’.

Opcionalmente, o plugin também permite rastrear cliques usando o Google Analytics. Para usar este recurso, você precisará primeiro instalar o Google Analytics no WordPress.

Depois disso, mude para a aba Google Analytics nas configurações do plugin e ative as opções de rastreamento de cliques.

Você pode deixar o restante das configurações como estão ou configurá-las de acordo com sua preferência. Quando terminar, simplesmente clique no botão ‘Salvar Configurações’ para armazenar suas alterações.

Agora você pode visitar seu site WordPress para ver os links de próximo/anterior em ação.

Este método é mais fácil, mas não oferece muita flexibilidade. Por exemplo, a versão gratuita do plugin não exibe o título do post anterior ou seguinte.

Adicionando Links Anterior / Próximo Usando Código Personalizado

Se você está procurando uma maneira mais flexível e personalizável de adicionar links de navegação, este método é para você. Para adicionar os links de próximo/anterior, você precisará editar os arquivos do seu tema WordPress.

Isso pode ser super arriscado, pois o menor erro pode tornar seu site inacessível.

É aqui que o WPCode entra em jogo. É o melhor plugin de snippets de código para WordPress porque permite adicionar código personalizado com segurança, sem o risco de quebrar seu site.

Para mais detalhes, veja nossa análise do WPCode.

Primeiro, você precisa instalar e ativar o plugin WPCode. Para detalhes, veja nosso tutorial sobre como instalar um plugin do WordPress.

Após a ativação, visite a página Snippets de Código » +Adicionar Snippet no painel do WordPress. Aqui, clique no botão ‘+ Adicionar Snippet Personalizado’ na opção ‘Adicionar Seu Código Personalizado (Novo Snippet)’.

Isso o levará à página ‘Criar Snippet Personalizado’, onde você pode começar adicionando um título para seu código.

Em seguida, escolha ‘Snippet PHP’ como o tipo de código no menu suspenso à direita.

Em seguida, adicione o seguinte código personalizado na caixa ‘Pré-visualização do Código’:

<?php the_post_navigation(); ?> 

Depois disso, role para baixo até a seção ‘Inserção’ e escolha o modo ‘Inserção Automática’.

Seu código será executado automaticamente em seu site após a ativação.

Em seguida, abra o menu suspenso ‘Localização’ e mude para a aba ‘Específico da Página’.

Em seguida, escolha ‘Inserir Após Post’ como a localização do seu código. Seus links de post anterior/próximo agora serão exibidos no final de cada post.

No entanto, se você tiver outra posição em mente, poderá selecionar essa opção.

Finalmente, role de volta para o topo e mude o interruptor ‘Inativo’ para ‘Ativo’.

Em seguida, clique no botão ‘Salvar Snippet’ para armazenar suas alterações.

Agora você pode visitar seu site WordPress para ver os links Próximo / Anterior em ação.

Aqui, você notará que o código personalizado que você adicionou exibe apenas os links para as postagens anterior e seguinte com o título da postagem como texto âncora.

Ele não destaca que estes são os links para os artigos anterior e seguinte.

Se você quiser mudar isso, então você pode adicionar o seguinte código personalizado na caixa ‘Visualização de Código’ em vez disso:

<?php the_post_navigation( array(
 'prev_text'  => __( 'Previous Article: %title' ),
 'next_text'  => __( 'Next Article: %title' ),
 ) );
?>

Depois de salvar suas alterações no WPCode, simplesmente visite seu site.

Veja como ficou em nosso site de teste:

Você também pode usar caracteres especiais e setas junto com os títulos das postagens anterior e seguinte.

Simplesmente substitua o código pelo seguinte:

<?php the_post_navigation( array(
 'prev_text'  => __( '← %title' ),
 'next_text'  => __( '%title →' ),
 ) );
?>

Veja como este código ficou em nosso site de teste:

Agora, digamos que você queira tornar os links de próxima e anterior mais relevantes para o artigo que o usuário está visualizando no momento.

Você pode fazer isso mostrando os links de próxima e anterior da mesma categoria ou tags:

<?php the_post_navigation( array(
 'prev_text'  => __( '← %title' ),
 'next_text'  => __( '%title →' ),
 'in_same_term' => true, 
 'taxonomy'	=> __( 'category' ),
 ) );
?>

Este código diz ao WordPress para exibir as postagens anterior e seguinte na mesma categoria. Você pode alterar o parâmetro taxonomy para tags ou qualquer outra taxonomia personalizada, se necessário.

Estilizando Links Anterior / Próximo no WordPress

Agora que aprendemos como adicionar links de Próximo / Anterior no WordPress, vamos ver como estilizar corretamente.

Por padrão, o WordPress adiciona automaticamente várias classes CSS padrão aos links de navegação de postagens. Você pode usar essas classes CSS no WPCode para estilizar esses links.

Primeiro, acesse a página Snippets de Código » Adicionar Snippet na barra lateral de administração do WordPress. Em seguida, clique no botão ‘+ Adicionar Snippet Personalizado’ em ‘Adicione seu Código Personalizado (Novo Snippet)’.

Uma vez na página ‘Criar Snippet Personalizado’, adicione um título para o seu código.

Em seguida, escolha ‘Snippet CSS’ como o tipo de código no menu suspenso.

Depois disso, você pode adicionar o seguinte código CSS à sua caixa ‘Prévia do Código’.

Este CSS básico simplesmente exibe os links de próxima e anterior um ao lado do outro, mas em lados diferentes da mesma linha:

.nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

Você também pode fazer com que seus links de navegação se destaquem adicionando cor de fundo, um efeito de passagem de mouse e mais.

Aqui está um código CSS de exemplo que você pode usar como ponto de partida:

.post-navigation {
background-color:#f3f9ff;
padding:0px;
}
.nav-previous, .nav-next{
padding:10px;
font-weight:bold
}
.nav-previous:hover,.nav-next:hover {
background-color:#0170b9;
}
.nav-previous:hover a:link ,.nav-next:hover a:link {
color:#fff;
}

Agora, role para baixo até a seção ‘Inserção’ e escolha o modo ‘Inserção Automática’.

Seu código personalizado será executado automaticamente após a ativação.

Vá em frente e alterne o interruptor ‘Inativo’ para ‘Ativo.’

Depois disso, clique no botão ‘Salvar Snippet’ para armazenar suas configurações.

Agora, visite seu site WordPress para ver os links estilizados para suas postagens.

Você notará que o texto do link agora tem alguma cor de fundo e um efeito de passagem para tornar os links anterior e próximo mais proeminentes.

Adicionando Links Anterior / Próximo para Posts com Miniaturas

Se você quiser tornar seus links anterior/próximo mais perceptíveis, você pode exibir miniaturas de postagens junto com os links. Imagens são a maneira mais fácil de atrair a atenção do usuário e tornar esses links mais envolventes.

Para fazer isso, você pode adicionar código personalizado ao seu arquivo functions.php, mas lembre-se de que o menor erro pode quebrar seu site. É por isso que recomendamos o uso de WPCode para isso também.

Após a ativação do plugin, vá para a página Snippets de Código » +Adicionar Snippet e clique no botão ‘+ Adicionar Snippet Personalizado’ em ‘Adicionar Seu Código Personalizado (Novo Snippet)’.

Assim que você for levado para a página ‘Criar Snippet Personalizado’, você precisa adicionar um título para o seu código.

Em seguida, escolha ‘Snippet PHP’ como o tipo de código no menu suspenso à direita.

Depois disso, adicione o seguinte código personalizado na caixa ‘Pré-visualização do 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;
}

Este código simplesmente cria uma função que exibe as postagens anterior e próxima com imagens em destaque ou miniaturas de postagem.

Depois de inserir o snippet, você pode alternar o interruptor para ‘Ativo’ e clicar no botão ‘Salvar Snippet’.

Em seguida, você tem que voltar para a página Snippets de Código » + Adicionar Snippet e clicar no botão ‘Usar Snippet’ em ‘Adicionar Seu Código Personalizado’.

Assim que a página ‘Criar Snippet Personalizado’ for aberta, copie o código a seguir e cole-o na caixa ‘Visualização do Código’:

<?php wpb_posts_nav(); ?>

Este código decide onde você deseja exibir os links.

Certifique-se de selecionar ‘Snippet PHP’ no menu suspenso ‘Tipo de Código’, também.

Em seguida, role para baixo até a seção ‘Inserção’ e escolha o modo ‘Inserção Automática’ para execução automática do código.

Você também pode expandir a seção ‘Localização’ e alternar para a aba ‘Específico da Página’. A partir daqui, selecione a opção ‘Inserir Após o Post’ para que as miniaturas apareçam corretamente ao lado dos links.

Finalmente, você pode ativar o interruptor para ‘Ativo’ e clicar no botão ‘Salvar Snippet’.

Agora, você pode visitar seu site para ver os links em ação.

Agora, você pode notar que esses links não parecem muito limpos.

Você pode mudar isso adicionando algum CSS personalizado com o WPCode para estilizá-los.

.wpb-posts-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 50px;
    align-items: center;
    max-width: 1200px;
    margin: 100px auto;
}
 
.wpb-posts-nav a {
    display: grid;
    grid-gap: 20px;
    align-items: center;
}
 
.wpb-posts-nav h4,
.wpb-posts-nav strong {
    margin: 0;
}
 
.wpb-posts-nav a svg {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
}
 
.wpb-posts-nav > div:nth-child(1) a {
    grid-template-columns: 100px 1fr;
    text-align: left;
}
 
.wpb-posts-nav > div:nth-child(2) a {
    grid-template-columns: 1fr 100px;
    text-align: right;
}
 
.wpb-posts-nav__thumbnail {
    display: block;
    margin: 0;
}
 
.wpb-posts-nav__thumbnail img {
    border-radius: 10px;
}

Agora você pode salvar suas alterações e visitar seu site para ver os links anterior e próximo com miniaturas.

Veja como ficou em nosso site de teste:

Para mais detalhes, você pode ver nosso guia sobre como adicionar miniaturas aos links de posts anterior e próximo no WordPress.

Adicionando Links Anterior / Próximo a Páginas do WordPress

Normalmente, os links de navegação de posts são usados para posts de blog no WordPress. Isso ocorre porque esses itens são publicados em ordem cronológica inversa.

Por outro lado, as páginas do WordPress geralmente não são publicadas em ordem cronológica. Para mais detalhes, veja nosso guia sobre a diferença entre posts e páginas no WordPress.

No entanto, alguns usuários podem querer exibir a navegação de página para ajudar os visitantes a encontrar facilmente a próxima página. A boa notícia é que o código que usamos anteriormente com WPCode mostra os links anterior e próximo para páginas.

Se você quiser exibir esses links em páginas e posts, não precisará fazer nenhuma alteração adicional.

No entanto, se você quiser exibir os links anterior/próximo apenas para páginas, acesse a página Code Snippets » + Add Snippet.

Aqui, selecione a opção ‘Add Your Custom Code (New Snippet)’.

Uma vez na página ‘Create Custom Snippet’, adicione um título para o seu snippet.

Em seguida, escolha ‘PHP Snippet’ como o tipo de código no menu suspenso.

Em seguida, adicione o seguinte código personalizado na caixa ‘Code Preview’.

Este é o mesmo código que você pode usar para adicionar links anterior/próximo para posts:

<?php the_post_navigation( array(
  'prev_text'   => __( '← %title' ),
  'next_text'   => __( '%title →' ),
   ) );
?>

Depois disso, role para baixo até a seção ‘Insertion’ e escolha o modo ‘Auto Insert’ para execução automática do código.

Você também pode configurar a posição dos seus links no menu suspenso ‘Location’. Por exemplo, se você escolher ‘Insert After Post’, seus links aparecerão no final de cada página.

Se você tiver outra posição em mente, basta selecionar a opção apropriada no menu suspenso.

Em seguida, role para baixo até a seção ‘Smart Conditional Logic’ e ative o interruptor ‘Enable Logic’.

Depois disso, escolha ‘Show’ no menu suspenso ‘Conditions’ e clique no botão ‘+ Add new group’.

Isso abrirá algumas novas configurações onde você deve definir as condições para quando o snippet de código aparece.

Como queremos exibir os links anterior/próximo apenas em páginas, abra o primeiro menu suspenso e mude para a aba ‘Where (page)’ na coluna da esquerda.

Em seguida, selecione ‘Tipo de Postagem’ nas opções, escolha ‘É’ no menu suspenso do meio e selecione ‘Páginas’ no menu suspenso final.

Finalmente, role para o topo e alterne o interruptor ‘Inativo’ para ‘Ativo’ e clique no botão ‘Salvar Snippet’. Você agora adicionou com sucesso os links anterior/próximo às suas páginas.

Veja como ficou em nosso site de demonstração:

Bônus: Remover Links Anterior e Próximo no WordPress

Alguns usuários podem querer remover os links de próximo e anterior no WordPress.

Por exemplo, alguns usuários podem achar que esses links são menos úteis. Alguns podem querer exibir posts relacionados ou posts populares em vez disso.

Existem duas maneiras de remover os links de próximo e anterior no WordPress.

Método 1. Excluir o Código no Seu Tema do WordPress

Para remover os links de próximo e anterior no WordPress, você precisará remover o código responsável por exibir os links no seu tema do WordPress.

O problema com essa abordagem é que assim que você atualizar seu tema, o código excluído voltará se fazia parte do tema original.

Para evitar isso, você precisará criar um tema filho.

Em seguida, você precisa encontrar o código responsável por exibir os links de próximo e anterior no seu tema pai.

Geralmente, ele é encontrado dentro dos templates single.php ou content-single.php.

Basicamente, você estará procurando pelo código que inclui a seguinte função:

<?php the_post_navigation() ?> 

Este código pode ter um formato e parâmetros ligeiramente diferentes.

Por exemplo, em nosso site de teste, o tema usou este código para exibir os links:

the_post_navigation(
				array(
					'prev_text' => '<span class="nav-subtitle">' . esc_html__( 'Previous:', 'mytheme' ) . '</span> <span class="nav-title">%title</span>',
					'next_text' => '<span class="nav-subtitle">' . esc_html__( 'Next:', 'mytheme' ) . '</span> <span class="nav-title">%title</span>',
				)
			);

Se você estiver usando um tema filho, então você precisa duplicar este template específico no seu tema filho e, em seguida, excluir as linhas usadas para exibir os links de próximo ou anterior.

Se preferir, você também pode excluí-lo em seu tema pai.

Excluir o código impedirá que o WordPress exiba os links de próximo e anterior.

Método 2. Ocultar os Links de Próximo e Posts Anteriores

Este método não remove realmente os links de próximo e anterior. Em vez disso, ele apenas os torna invisíveis para leitores humanos.

Simplesmente adicione o seguinte CSS personalizado ao seu tema WordPress:

nav.navigation.post-navigation {
    display: none;
}

Não se esqueça de salvar suas alterações.

Em seguida, visite seu site para ver os links de navegação desaparecerem.

Esperamos que este artigo tenha ajudado você a aprender como adicionar facilmente links de próximo e anterior no WordPress. Você também pode querer ver nosso guia sobre como usar padrões de blocos do WordPress e nossa lista de dicas essenciais para usar shortcodes no WordPress.

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.