Você quer adicionar paginação numérica ao seu tema WordPress?
Por padrão, os temas do WordPress adicionam links de Próximo / Anterior na parte inferior das páginas de arquivo. O desafio é que eles não são muito amigáveis ao usuário. É por isso que muitos blogs populares usam 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 WordPress.
Por que Adicionar Paginação Numérica ao Seu Tema WordPress?
A maioria dos temas tem uma página de arquivo que mostra uma lista de posts. À medida que você publica mais posts de blog WordPress, sua página de arquivo se estenderá por várias páginas.
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 WordPress usam links de ‘Posts Antigos’ e ‘Posts Novos’ para paginação. No entanto, isso apenas permite que o visitante avance e retroceda uma página.
Também não mostra a localização atual do visitante no arquivo. Isso pode dificultar a navegação dos visitantes no arquivo do seu blog.
É aí que entra a paginação numérica.
Em vez de mostrar links de ‘Mais Antigo’ e ‘Mais Novo’, a paginação numérica mostra uma série de números que permitem aos visitantes pular para uma página específica no arquivo.
A paginação numérica também pode usar realces ou cores diferentes para mostrar o número da página atual, para que o visitante saiba sempre exatamente onde está no arquivo.
No WPBeginner, usamos 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 que cercam a página atual do visitante.
Temos até um link para a última página em nosso arquivo, para que os visitantes possam ver rapidamente e facilmente nossas postagens mais antigas, 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 de ‘Posts mais antigos’ e ‘Post mais novo’.
Se o seu tema do WordPress tiver paginação ‘Mais antigo’ e ‘Mais novo’, sempre recomendamos substituí-la por paginação numérica.
Neste guia, cobriremos duas maneiras diferentes de adicionar paginação numérica ao seu tema do WordPress. Se você preferir pular direto para um método específico, pode usar os links abaixo.
- Método 1. Como adicionar paginação numérica no WordPress usando WP-PageNavi
- Método 2. Como adicionar paginação numérica manualmente ao seu tema do WordPress
Método 1. Como Adicionar Paginação Numérica no WordPress usando WP-PageNavi
A maneira mais fácil de adicionar paginação numérica no WordPress é usando o plugin WP-PageNavi.
Para usar este plugin, 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, porque o WP-PageNavi lhe dá controle total sobre a paginação do seu site.
First thing you need to do is install and activate the WP-PageNavi plugin. For more details, please see our step by step guide on how to install a WordPress plugin.
Após ativar o plugin, vá para Configurações » PageNavi para configurar as opções do plugin.
Aqui, você pode substituir qualquer um dos textos de paginação padrão por sua própria redação. Por exemplo, você pode alterar o texto que seu site usa para seus links de ‘Primeira Página’ e ‘Última Página’.
Você também pode personalizar os links de paginação numérica.
Na seção ‘Número de Páginas a Exibir’, você pode escolher quantas páginas o plugin exibirá na seção de paginação do seu site.
Este valor é definido como 5 por padrão, o que significa que o WP-PageNavi exibirá 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 exibir mais ou menos páginas. Para fazer essa alteração, basta digitar o novo número no campo ‘Número de Páginas a Exibir’.
Por padrão, o plugin exibirá vários números maiores. Isso permite que os visitantes avancem várias páginas com um único clique.
Por padrão, o plugin exibe três números maiores que aumentam em 10 a cada vez. Por exemplo, 10, 20 e 30.
Quer usar um intervalo diferente, como 5 ou 20? Basta digitar o novo intervalo no campo 'Mostrar números de página maiores em múltiplos de'.
Cada site WordPress é diferente, então é uma boa ideia experimentar diferentes configurações para ver quais configurações de paginação funcionam melhor para você.
Se você fez alguma alteração nas configurações do WP-PageNavi, não se esqueça de rolar até o final da página e clicar no botão Salvar alterações.
Em seguida, você precisará adicionar uma tag de modelo ao seu tema WordPress. Para fazer isso, recomendamos criar um tema filho e, em seguida, editar o código do tema filho.
Ao criar um tema filho, você ainda pode atualizar seu tema WordPress com segurança sem perder sua paginação numérica personalizada. Para saber mais, consulte nosso guia passo a passo sobre como criar um tema filho do WordPress.
Independentemente de você escolher editar um tema pai ou filho, você precisará de um cliente FTP. Se esta for a primeira vez que você usa FTP, consulte nosso guia completo sobre como conectar ao seu site usando FTP.
Quando você estiver conectado à sua conta de hospedagem WordPress via FTP, você estará pronto para editar o código do seu tema WordPress.
Estas etapas variarão dependendo do seu tema do WordPress. No entanto, você normalmente precisará editar o código em seu arquivo index.php ou archive.php, além de quaisquer outros arquivos de modelo de arquivo em seu tema do WordPress.
Simplesmente abra esses arquivos e, em seguida, procure pelas 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 você não conseguir encontrar essas tags em seu tema, procure por the_posts_navigation em vez disso. 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 prosseguir e substituir esta linha pelo seguinte trecho de código:
<?php wp_pagenavi(); ?>
Após fazer essas alterações, salve e feche quaisquer arquivos abertos do tema do WordPress.
Agora, se você visitar sua página de arquivo do WordPress, você deverá ver sua nova paginação numérica ativa em seu site.
Neste ponto, você pode querer alterar a cor e o estilo da paginação numérica, para que ela complemente melhor seu tema ou a marca do seu site.
Você pode fazer isso editando o código do plugin.
No entanto, recomendamos colar o código do WP-PageNavi no arquivo style.css do seu tema e, em seguida, fazer suas alterações dentro do arquivo do tema. Isso significa que você não perderá suas personalizações quando atualizar o plugin WP-PageNavi.
Para copiar o código do seu plugin, vá para Configurações » PageNavi. Você pode então encontrar a seção 'Usar pagenavi-css.css' e clicar no botão de rádio 'Não' ao lado dela.
Não se esqueça de clicar no botão 'Salvar Alterações' para salvar suas alterações.
Em seguida, vá para Plugins » Editor de Arquivos de Plugin.
Você pode então abrir o menu suspenso 'Selecionar plugin para editar' e escolher 'WP-Page Navi'. Depois disso, você está pronto para clicar em 'Selecionar'.
No menu do lado direito, clique no arquivo pagenavi-css.css.
Em seguida, prossiga e copie todo o código deste arquivo.
Em seguida, basta ir em Aparência » Editor de Arquivos do Tema.
No menu da direita, clique no arquivo style.css do seu tema.
Agora você pode colar seu código pagenavi-css.css no arquivo style.css do tema e começar a fazer suas alterações.
Vamos ver 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 ficará em seu site.
Vale a pena experimentar diferentes estilos para ver o que fica melhor em seu site WordPress.
Quando você estiver satisfeito com a aparência da sua paginação numérica, clique no botão Atualizar Arquivo para salvar suas alterações.
Método 2. Como Adicionar Paginação Numérica Manualmente em Seu Tema WordPress
Outra opção é adicionar manualmente a paginação numérica em seu tema WordPress usando código.
Muitos temas WordPress vêm com links 'Anterior' e 'Próximo' integrados, 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 este método para personalizar a paginação integrada de um tema. Por exemplo, você pode alterar a estilização 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 você estiver usando FTP, poderá ver 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";
}
Este código obtém o número de páginas, pronto para você exibir em seu tema WordPress.
Os próximos passos variarão dependendo do seu tema.
Se o seu tema não tiver alguma forma de paginação padrão integrada, você pode simplesmente adicionar a seguinte tag de modelo em seu index.php, archive.php, category.php ou qualquer outra página onde você queira exibir a paginação numérica.
<?php wpbeginner_numeric_posts_nav(); ?>
Apenas esteja ciente de que onde você adiciona este código afetará onde a paginação numérica é exibida em seu site.
Normalmente, você vai querer mostrar a paginação na parte inferior de suas páginas de arquivo, então você geralmente vai querer adicionar a tag de modelo ao seu código de rodapé.
Seu tema já possui alguma forma de paginação, como links de 'Posts Antigos' e 'Posts Novos'?
Neste caso, você precisará encontrar o código de paginação e substituí-lo pelo trecho acima.
Por exemplo, Ashe é um dos melhores temas gratuitos de blog para WordPress e já adiciona links de paginação 'Primeira' e 'Última página' às suas páginas de arquivo.
Para substituir esses links integrados por paginação numérica, você precisa editar os arquivos templates/grid.php e templates/blog-pagination.php do tema.
Em cada um desses arquivos, simplesmente encontre a seguinte seção:
<?php get_template_part( 'templates/grid/blog', 'pagination' ); ?>
Você pode então prosseguir e substituir esta 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 suas alterações.
O próximo passo é 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 neste 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, simplesmente salve suas alterações clicando no botão Atualizar Arquivo.
Agora, se você visitar a página de arquivo, verá a paginação numérica ao vivo em seu site.
Esperamos que este artigo tenha ajudado você a aprender como adicionar paginação numérica em seu tema WordPress. Você também pode conferir nosso guia sobre maneiras de ganhar dinheiro online blogando com WordPress e como criar um tema WordPress personalizado sem escrever nenhum código.
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.
Emmy Clifford
Como você pode fazer os botões "Anterior" e "Próximo" ficarem mais fortes sem usar temas?
WPBeginner Support
Você precisaria usar CSS para estilizar isso. Se você usa o WP-PageNavi, recomendamos verificar com o suporte deles qual o método recomendado ou se eles têm uma opção integrada para isso.
Admin
Kzain
isso é útil, mas como sei se meu tema funciona com paginação? e o que acontece se eu usar o botão de paginação do Elementor para a seção de posts relacionados
WPBeginner Support
If your theme or page builder already has a pagination option, we would recommend using that first instead of the method from this guide
Admin
Jiří Vaněk
Eu uso o tema Generate Press e encontrei um trecho que funciona muito bem para estender a barra de paginação para mais páginas. No entanto, agora vejo, de acordo com este artigo, que eu também poderia personalizar a barra de paginação para combinar com o visual do meu site. Provavelmente tentarei em breve seu guia de personalização e tentarei estilizar a barra melhor para combinar com as cores do meu site. É um detalhe menor, mas esta barra é bastante visível e importante. Obrigado.
Sujal
There’s little bug in last lines which shows next link. You’re missing $ sign at two places get_next_posts_link() . Can you please fix that so code works well for new visitors
/** Link para o Próximo Post */
if ( $get_next_posts_link() )
printf( ‘%s’ . “\n”, $get_next_posts_link() );
Sandipan
Não está funcionando. . Depois de adicionar o código, os links do index.php não funcionam
WPBeginner Support
Seu tema pode ter alguma estilização personalizada, você deve entrar em contato com o suporte específico do seu tema e eles deverão ser capazes de ajudar.
Admin
Quy
obrigado.
Normalmente, home.php exibirá o conteúdo do loop para a página de Posts, mas como meu tema não fornece home.php por padrão, eu coloquei o wpbeginner_numeric_posts_nav(); em index.php (abaixo de endwhile;) e funcionou.
WPBeginner Support
Thanks for sharing how you were able to solve the issue
Admin
FloJDM
Muito útil, obrigado!
WPBeginner Support
You’re welcome
Admin
Alexandre
Artigo incrível, simples e direto ao ponto!
Funcionou perfeitamente para mim, muito obrigado!!
WPBeginner Support
Glad our guide was helpful
Admin
ModGirl
Estou usando o tema do WordPress “X Blog” e estou tentando descobrir como adicionar isso a esse tema. tudo o que tento continua me dando erros. não tenho certeza por que o tema não funciona com isso. qualquer ajuda seria apreciada. obrigado
Adam
Este é um tutorial muito útil, obrigado. Usei o exemplo de código genesis com sucesso!
Meu único problema foi que simplesmente copiar e colar o código deste site causou um erro de codificação onde as reticências aparecem na paginação numerada. Então, no site, ele exibia um caractere de diamante/interrogação em vez das reticências. Acabei usando a Entidade HTML (decimal) de reticências: … em vez disso, o que corrigiu esse erro. Isso ocorreu apenas em um dos dois sites onde este código foi implementado, provavelmente devido a diferenças no meta charset ou algo assim.
Ilya
Saudações de 2018! Tenho algo legal para você, a função the_posts_pagination() do core do WordPress.
jagadeesh
adicionei o código, mas está sendo exibido no topo do site
Sijo
A paginação não funciona após a página 2. Está mostrando a página 404 ao clicar em 3, 4 etc... Usei o mesmo código acima. Como posso resolver isso?
Jean Braithwaite
Estou usando seu método manual de paginação, e você diz “adicione a seguinte tag de modelo em seu tema index.php, archive.php, category.php e qualquer outro modelo de página de arquivo”.
O site é um site regular junto com um blog que usa um tipo de postagem personalizado.
Funcionou bem na minha página archive.php, mas eu também gostaria de usá-lo na minha página de blog, que é um modelo de página, page-blog.php. Não consigo fazer funcionar lá. Por quê? Há algo que eu possa fazer para fazê-lo funcionar?
ziru
olá, adicionei a alguns modelos e meu wordpress não funcionou mais, nem mesmo o login e minha página inicial ficou em branco e parece que todo o site quebrou, o que posso fazer?
Turab
Amo você por isso. Você me salvou.
Subroto
Muito obrigado por este post.
Ingy Anees
Isso está funcionando bem para mim em tipos de postagem personalizados, mas não consigo fazer funcionar com resultados de pesquisa. Nada é exibido. Algum conselho?
souno
Artigo muito bom e tenho uma pergunta.
Como mostrar o número total de páginas no final? Na sua demonstração, mostra “9”
Obrigado!
renee
código incrível – funcionou perfeitamente! obrigado por compartilhar
Azamat
Como posso adicionar paginação à lista de termos de taxonomia personalizada?
Andy
Assim como Rajath, tive alguns problemas com a paginação não sendo bem renderizada em dispositivos móveis. No meu caso, as linhas se sobrepunham. Resolvi isso adicionando uma altura de linha ao CSS:
line-height: 2.5em;
mostafa
Olá, eu usei este código para o meu tema (sem o plugin wp-nav), ele funciona em outras páginas, exceto na página inicial. Qual é exatamente o problema?
Rajath
Olá, estou usando esta paginação no meu tema e funciona bem em todas as páginas e categorias, exceto nas páginas onde estou usando custom wp_query. Li que você está usando um código semelhante ao do framework genesis e usei wp_reset_query(), mas não está funcionando. Agradeço antecipadamente pela ajuda.
anuj sharma
oi
estou usando o código que você forneceu e colei na função .php e também adicionei CSS em style.css, mas isso mostra o design da paginação, porém não está funcionando
JM
Olá! Antes de mais nada, quero agradecer por postar isso. Sei que esta postagem já está bem antiga, mas ainda é muito útil!
A paginação é exibida e funciona bem na maior parte; mas os links da primeira e da última página estão faltando para mim. Não importa em qual página eu esteja (primeira, segunda, terceira, etc.), nenhum link da primeira ou última página aparece. Alguma ideia de como posso consertar isso?
Agradeço antecipadamente por qualquer ajuda!
Syed Hamza
A paginação numérica aparece apenas no PC, mas não no celular. Quero que essa paginação apareça em ambas as versões.
Como posso corrigir isso?
JeffD
Muito obrigado pelo excelente tutorial. Quero usar a solução sem plugin (o script php), mas sem truncamento/reticências para os links de página (em vez de 1…2 3 4 5 6…10, quero mostrar todas as páginas o tempo todo – 1 2 3 4 5 6 7 8 9 10). Como posso modificar o script para fazer isso? Deve ser fácil para vocês especialistas, mas não para mim! Agradeço antecipadamente por qualquer ajuda!
Nelson
Este código não está funcionando para mim, há alguma dica?
Youssef
Oi, eu quero retornar a paginação padrão do WP no meu tema "freshlife" da theme junkie. Eu não gosto da paginação numérica porque ela mostra o total de posts no meu site. Por favor, wpbeginne ajude
Bilal
eu quero paginar meus produtos, como posso fazer isso?
Rajath
Olá, ótimo tutorial e seu site me ajudou em muitas questões ao desenvolver meu próprio tema. Optei pela paginação manual mostrada aqui em vez de um plugin. Mas a paginação não é responsiva e fica feia quando o tamanho da tela é reduzido. Como torná-la responsiva ou existem outras alternativas (sem plugins, por favor). Não vou publicar este tema, então estou construindo-o apenas para atender às minhas necessidades.
WPBeginner Support
Olhe a folha de estilos do seu tema WordPress. Estude como seu tema lida com responsividade. Alguns temas usam media queries para detectar a largura da tela e, em seguida, ajustam diferentes elementos de acordo. Alguns temas usam larguras relativas para garantir que todos os elementos dentro do layout do design sejam responsivos à largura da tela.
Admin
Rajath
Estou desenvolvendo o tema. Não consigo tornar a paginação responsiva. Então, eu apenas removi o padding ao redor dos links, o que os faz parecer um botão. Em vez disso, deixei-os como números, o que funciona bem em telas pequenas também. Obrigado pela resposta.
javad
oi
usei o primeiro código na função, mas a linguagem do WP mudou para palavras ilegíveis, por quê????
Gabriel Tellez
Obrigado cara, é ótimo.
James
Estou tentando remover a paginação da minha página inicial, que aparece abaixo de cada resumo de postagem, para mim não fica bom, há alguma maneira de fazer isso.
WPBeginner Support
Por favor, entre em contato com o desenvolvedor do seu tema WordPress. Eles poderão orientá-lo melhor.
Admin
Aryan
Na verdade, sou novo no wordpress, mas conheço bem php... quero adicionar uma paginação de uma tabela personalizada no banco de dados...
Fasih
a paginação numerada sem o plugin está funcionando bem em localhost, mas quando faço o upload dos arquivos, não vejo nada, mas quando verifico o elemento de inspeção, a única coisa que encontrei foi uma div vazia contendo as classes, mas sem nada dentro dela. fiz o upload de todos os arquivos corretamente e verifiquei novamente, mas sem sucesso. por favor, me guie
Abraham
Legal!
Marco Riesco
Excelente!! obrigado
Moustafa
Este script não funciona na nova versão do WordPress 4.3.1
omdat bij de oude versie heeft die script wel gewerkt en nu niet meer
Por favor, ajude…