Como adicionar paginação numérica em seu tema do WordPress

Deseja adicionar paginação numérica em seu tema do WordPress?

Por padrão, os temas do WordPress adicionam links Next / Previous na parte inferior das páginas de arquivo. O desafio é que eles não são muito fáceis de usar. É por isso que muitos blogs populares usam a paginação numérica para facilitar a navegação dos visitantes em suas páginas de arquivo.

Neste artigo, mostraremos como adicionar paginação numérica ao seu tema do WordPress.

Por que adicionar paginação numérica em seu tema WordPress?

A maioria dos temas tem uma página de arquivo que mostra uma lista de publicações. À medida que você publica mais publicações no blog do WordPress, sua página de arquivo se estenderá por várias páginas.

Os links de paginação ajudam os visitantes a se moverem entre as páginas de arquivo e geralmente aparecem na parte inferior do seu site WordPress.

Alguns temas do WordPress usam os links “Postagens mais antigas” e “Postagens mais recentes” para paginação. No entanto, isso só permite que o visitante avance e retroceda uma página.

Ele também não mostra a localização atual do visitante no arquivo. Isso pode dificultar a navegação dos visitantes pelo arquivo do seu blog.

É aí que entra a paginação numérica.

Em vez de mostrar links “Mais antigos” e “Mais recentes”, a paginação numérica mostra uma série de números que permitem que os visitantes acessem uma página específica do arquivo.

A paginação numérica também pode usar destaques ou cores diferentes para mostrar o número da página atual, para que o visitante sempre saiba exatamente onde está no arquivo.

No WPBeginner, usamos a paginação numérica e destacamos o número da página atual em laranja. Também fornecemos links diretos para as 4 páginas ao redor da página atual do visitante.

Temos até um link para a última página do nosso arquivo, para que os visitantes possam ver de forma rápida e fácil nossas primeiras postagens, como você pode ver na imagem a seguir.

Em nossa experiência, esse tipo de paginação numérica torna seu site mais fácil de navegar em comparação com os links padrão “Postagens mais antigas” e “Postagens mais recentes”.

Se o seu tema do WordPress tiver paginação “Mais antiga” e “Mais recente”, sempre recomendamos substituí-la por paginação numérica.

Neste guia, abordaremos duas maneiras diferentes de adicionar paginação numérica em seu tema do WordPress. Se você preferir ir direto para um método específico, poderá usar os links abaixo.

• Método 1. Como adicionar paginação numérica no WordPress usando o WP-PageNavi
• Método 2. Como adicionar manualmente a paginação numérica em seu tema do WordPress

Método 1. Como adicionar paginação numérica no WordPress usando o WP-PageNavi

A maneira mais fácil de adicionar paginação numérica no WordPress é usar o plug-in WP-PageNavi.

Para usar esse plug-in, você ainda precisará fazer algumas alterações no código do seu tema, mas é muito mais fácil do que o método de código completo, pois o WP-PageNavi oferece controle total sobre a paginação do seu site.

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

Depois de ativar o plug-in, vá para Settings ” PageNavi para definir as configurações do plug-in.

Aqui, você pode substituir qualquer texto de paginação padrão pelo seu próprio texto. Por exemplo, você pode alterar o texto que seu site usa para os links “Primeira página” e “Última página”.

Você também pode personalizar os links de paginação numérica.

Na seção “Number Of Pages To Show” (Número de páginas a serem mostradas), você pode escolher quantas páginas o plug-in mostrará na seção de paginação do seu site.

Isso é definido como 5 por padrão, o que significa que o WP-PageNavi mostrará links diretos para 5 páginas.

Como você pode ver na captura de tela abaixo, se você estiver na página 4, verá links para as páginas 2, 3, 4, 5 e 6.

Você pode querer mostrar mais ou menos páginas. Para fazer essa alteração, basta digitar o novo número no campo “Number Of Pages To Show”.

Por padrão, o plug-in mostrará vários números maiores. Isso permite que os visitantes avancem por várias páginas, com apenas um clique.

Por padrão, o plug-in mostra três números maiores que aumentam em 10 a cada vez. Por exemplo, 10, 20 e 30.

Deseja usar um intervalo diferente, como 5 ou 20? Basta digitar o novo intervalo no campo “Show Larger Page Numbers In Multiples Of” (Mostrar números de páginas maiores em múltiplos de).

Cada site do WordPress é diferente, portanto, é uma boa ideia tentar configurações diferentes para ver quais configurações de paginação funcionam melhor para você.

Se você tiver feito alguma alteração nas configurações do WP-PageNavi, não se esqueça de rolar até a parte inferior da página e clicar no botão Save Changes (Salvar alterações).

Em seguida, você precisa adicionar uma tag de modelo em seu tema do WordPress. Para fazer isso, recomendamos a criação de um tema filho e a edição do código do tema filho.

Ao criar um tema filho, você ainda pode atualizar seu tema do WordPress com segurança sem perder a paginação numérica personalizada. Para saber mais, consulte nosso guia passo a passo sobre como criar um tema filho do WordPress.

Independentemente de optar por editar um tema pai ou filho, você precisará de um cliente FTP. Se esta é a primeira vez que você usa FTP, consulte nosso guia completo sobre como se conectar ao seu site usando FTP.

Quando estiver conectado à sua conta de hospedagem do WordPress via FTP, você estará pronto para editar o código do tema do WordPress.

Essas etapas variam de acordo com seu tema do WordPress. No entanto, normalmente você precisará editar o código no arquivo index.php ou archive.php, além de qualquer outro arquivo de modelo de arquivo no seu tema do WordPress.

Basta abrir esses arquivos e procurar as tags previous_posts_link e next_posts_link.

Se você encontrar essas tags, substitua-as pelo seguinte trecho de código:

<?php wp_pagenavi(); ?>

Alguns temas podem não ter uma tag previous_posts_link ou next_posts_link.

Se não conseguir encontrar essas tags em seu tema, procure por the_posts_navigation. Por exemplo, você encontrará o seguinte no arquivo archive.php do tema Twenty Twenty-One:

<?php /*twenty_twenty_one_the_posts_navigation();*/ 

Você pode então substituir essa linha pelo seguinte trecho de código:

<?php wp_pagenavi(); ?>

Depois de fazer essas alterações, salve e feche todos os arquivos de tema do WordPress abertos.

Agora, se você visitar a página de arquivo do WordPress, verá a nova paginação numérica ativa em seu site.

Nesse momento, talvez você queira alterar a cor e o estilo da paginação numérica para que ela combine melhor com o tema ou a marca do seu site.

Você pode fazer isso editando o código do plug-in.

No entanto, recomendamos colar o código do WP-PageNavi no arquivo style.css do seu tema e, em seguida, fazer as alterações no arquivo do tema. Isso significa que você não perderá suas personalizações quando atualizar o plug-in WP-PageNavi.

Para copiar o código do plug-in, vá para Configurações ” PageNavi. Em seguida, encontre a seção “Usar pagenavi-css.css” e clique no botão de opção “Não” ao lado dela.

Não se esqueça de clicar no botão “Save Changes” (Salvar alterações) para salvar suas alterações.

Em seguida, vá para Plugins ” Plugin File Editor.

Em seguida, você pode abrir o menu suspenso “Selecionar plug-in para editar” e escolher “WP-Page Navi”. Depois disso, você está pronto para clicar em “Select” (Selecionar).

No menu à direita, clique no arquivo pagenavi-css.css.

Em seguida, copie todo o código desse arquivo.

Em seguida, basta acessar Appearance ” Theme File Editor.

No menu à direita, clique no arquivo style.css do seu tema.

Agora você pode colar o código pagenavi-css.css no arquivo style.css do tema e começar a fazer suas alterações.

Vamos dar uma olhada em um exemplo. Aqui está uma versão modificada do código de paginação numérica que você pode adicionar ao arquivo style.css do seu tema:

wp-pagenavi {
    clear: both;
}
 
.wp-pagenavi a, .wp-pagenavi span {
    color: #FFF;
    text-decoration: none;
    background-color:#6FB7E9;
    border: 1px solid #B2D1E5;
    padding: 5px 5px;
    margin: 2px;
}
 
.wp-pagenavi a:hover, .wp-pagenavi span.current {
    border-color: #E9F2F9;
    background-color:#6FB7E9;
}
 
.wp-pagenavi span.current {
    font-weight: bold;
    background-color:#3C8DC5;
}

Na imagem a seguir, você pode ver como essa paginação numérica será exibida em seu site.

Vale a pena experimentar estilos diferentes para ver o que fica melhor em seu site WordPress.

Quando estiver satisfeito com a aparência da paginação numérica, clique no botão Update File (Atualizar arquivo) para salvar as alterações.

Método 2. Como adicionar manualmente a paginação numérica em seu tema do WordPress

Outra opção é adicionar manualmente a paginação numérica em seu tema do WordPress usando código.

Muitos temas do WordPress vêm com links incorporados “Mais antigo” e “Mais recente” ou paginação numérica padrão. Por exemplo, o popular tema Astra adiciona automaticamente sua própria paginação numérica às suas páginas de arquivo, como você pode ver na imagem a seguir.

Você pode usar esse método para personalizar a paginação integrada de um tema. Por exemplo, você pode alterar o estilo para se adequar melhor ao seu site.

Para adicionar manualmente a paginação numérica, abra o arquivo functions.php do seu tema. Aqui você pode usar um cliente FTP ou o gerenciador de arquivos do cPanel da sua hospedagem WordPress. Se estiver usando FTP, consulte nosso guia completo sobre como se conectar ao seu site usando FTP.

Depois de se conectar com sucesso ao seu site, abra o arquivo functions.php e adicione o seguinte código:

function wpbeginner_numeric_posts_nav() {
 
    if( is_singular() )
        return;
 
    global $wp_query;
 
    /** Stop execution if there's only 1 page */
    if( $wp_query->max_num_pages <= 1 )
        return;
 
    $paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1;
    $max   = intval( $wp_query->max_num_pages );
 
    /** Add current page to the array */
    if ( $paged >= 1 )
        $links[] = $paged;
 
    /** Add the pages around the current page to the array */
    if ( $paged >= 3 ) {
        $links[] = $paged - 1;
        $links[] = $paged - 2;
    }
 
    if ( ( $paged + 2 ) <= $max ) {
        $links[] = $paged + 2;
        $links[] = $paged + 1;
    }
 
    echo '<div class="navigation"><ul>' . "\n";
 
    /** Previous Post Link */
    if ( get_previous_posts_link() )
        printf( '<li>%s</li>' . "\n", get_previous_posts_link() );
 
    /** Link to first page, plus ellipses if necessary */
    if ( ! in_array( 1, $links ) ) {
        $class = 1 == $paged ? ' class="active"' : '';
 
        printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( 1 ) ), '1' );
 
        if ( ! in_array( 2, $links ) )
            echo '<li>…</li>';
    }
 
    /** Link to current page, plus 2 pages in either direction if necessary */
    sort( $links );
    foreach ( (array) $links as $link ) {
        $class = $paged == $link ? ' class="active"' : '';
        printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $link ) ), $link );
    }
 
    /** Link to last page, plus ellipses if necessary */
    if ( ! in_array( $max, $links ) ) {
        if ( ! in_array( $max - 1, $links ) )
            echo '<li>…</li>' . "\n";
 
        $class = $paged == $max ? ' class="active"' : '';
        printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max );
    }
 
    /** Next Post Link */
    if ( get_next_posts_link() )
        printf( '<li>%s</li>' . "\n", get_next_posts_link() );
 
    echo '</ul></div>' . "\n";
 
}

Esse código obtém o número de páginas, pronto para ser exibido em seu tema do WordPress.

As próximas etapas variam de acordo com seu tema.

Se o seu tema não tiver alguma forma de paginação padrão incorporada, basta adicionar a seguinte tag de modelo em seu index.php, archive.php, category.php ou qualquer outra página em que você queira mostrar a paginação numérica.

<?php wpbeginner_numeric_posts_nav(); ?>

Lembre-se de que o local em que você adicionar esse código afetará o local em que a paginação numérica será exibida em seu site.

Normalmente, você deseja mostrar a paginação na parte inferior das páginas de arquivo, portanto, adicione a tag de modelo ao código do rodapé.

Seu tema já tem alguma forma de paginação, como os links “Postagens mais antigas” e “Postagens mais recentes”?

Nesse caso, você precisará localizar o código de paginação e substituí-lo pelo snippet acima.

Por exemplo, o Ashe é um dos melhores temas de blog gratuitos do WordPress e já adiciona links de paginação “Primeira” e “Última página” às suas páginas de arquivo.

Para substituir esses links incorporados pela paginação numérica, você precisa editar os arquivos templates/grid.php e templates/blog-pagination.php do tema.

Em cada um desses arquivos, basta localizar a seção a seguir:

<?php get_template_part( 'templates/grid/blog', 'pagination' ); ?>

Você pode então substituir essa linha pelo seguinte trecho de código:

<?php wpbeginner_numeric_posts_nav(); ?>

Depois de adicionar o código, não se esqueça de salvar as alterações.

A próxima etapa é estilizar sua paginação numérica personalizada.

Para ajudar os visitantes a navegar pelo arquivo, vamos destacar o número da página atual com uma cor diferente. Para fazer isso, abra o arquivo style.css do seu tema e cole o seguinte código nesse arquivo:

.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
    color: #fff;
    text-decoration:none;
}
 
.navigation li {
    display: inline;
}
 
.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
    background-color: #6FB7E9;
    border-radius: 3px;
    cursor: pointer;
    padding: 12px;
    padding: 0.75rem;
}
 
.navigation li a:hover,
.navigation li.active a {
    background-color: #3C8DC5;
}

Depois de tudo isso, basta salvar suas alterações clicando no botão Update File (Atualizar arquivo).

Agora, se você visitar a página de arquivo, verá a paginação numérica ativa em seu site.

Esperamos que este artigo tenha ajudado você a aprender como adicionar paginação numérica ao seu tema do WordPress. Você também pode ler nosso guia sobre maneiras de ganhar dinheiro on-line com blogs no WordPress e como criar um tema personalizado do WordPress sem escrever nenhum código.

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.