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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Sujal says
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
/** Next Post Link */
if ( $get_next_posts_link() )
printf( ‘%s’ . “\n”, $get_next_posts_link() );
Sandipan says
Not working. . After adding the code index.php links not working
WPBeginner Support says
Your theme may have some custom styling, you would want to reach out to your theme’s specific support and they should be able to assist.
Administrador
Quy says
thanks.
Normally, home.php will show up the loop content for Post page, but since my theme does not provide home.php by default so I put the wpbeginner_numeric_posts_nav(); at index.php (below endwhile;) and it works.
WPBeginner Support says
Thanks for sharing how you were able to solve the issue
Administrador
FloJDM says
Very Helpful Thx !
WPBeginner Support says
You’re welcome
Administrador
Alexandre says
Awesome article, simple and straight to the point!
It worked perfectly for me, thanks a lot!!
WPBeginner Support says
Glad our guide was helpful
Administrador
ModGirl says
I’m using the wordpress theme “X Blog” and I’m trying to figure out how to add this to that theme. everything I try keeps giving me errors. not sure why the theme won’t work with this. any help would be appreciated. thanks
Adam says
This is a really useful tutorial, thanks. I used the genesis code example with success!
My one issue was that simply copying and pasting the code from this site caused an encoding error for where the ellipses go in the numbered pagination. So on the site it displayed a diamond/question mark character instead of the ellipsis. I ended up using the HTML Entity (decimal) ellipsis: … instead which fixed this error. This only occurred on one of the two sites implemented this code on probably due to differences in meta charset or something.
Ilya says
Greetings from 2018! I have something cool for you, WordPress core the_posts_pagination() function.
jagadeesh says
i have added the code but displaying at the top of website
Sijo says
Pagination not working after page2. It’s showing 404 page when click 3 ,4 etc… I have used the same code above. How can i resolve this ?
Jean Braithwaite says
I am using your manual method for pagination, and you say “add the following template tag in your theme’s index.php, archive.php, category.php, and any other archive page template”.
The site is a regular website along with a blog which uses a custom post type.
It worked well on my archive.php page, but I would also like to use it on my blog page, which is a page template, page-blog.php. I can’t get it to work there at all. Why is that? Is there something I can do to get it working?
ziru says
hello, I added to some templates and my wordpress couldn’t work anymore, not even login in and my homepage turn to a blank page and seems the whole website break down, what can I do?
Turab says
Love u for this. U’re a lifesaver.
Subroto says
Thank you very much for this post.
Ingy Anees says
This is working fine with me in custom post type but can’t get it to work with search results .. nothing is shown at all. and advice ?
souno says
Very nice article and i have a question.
How to show total number of pages at last? In your demo it shows “9”
Thank You!
renee says
awesome code – worked like a charm! thank you for sharing it
Azamat says
How can I add pagination to the custom taxonomy terms list?
Andy says
Like Rajath I had a few problems with the pagination not rendering well on mobiles. In my case the lines overlapped. I resolved this by adding a line height to the CSS:
line-height: 2.5em;
mostafa says
Hi, I ‘ve used this code for my theme (without wp-nav plugin) ,it works other pages except in front page .what is exactly the problem?
Rajath says
Hi i`m using this pagination in my theme and it works fine in all pages and categories except in the pages where i`m using custom wp_query. I`ve read that you are using a code similar to the one in genesis framework and i`ve used wp_reset_query() but it isn`t working. Thanks in advance for the help.
anuj sharma says
hi
i m using your given code and paste in function .php and also add css in style.css but this shows pagination design but its not working
JM says
Hello! First off, I want to thank you for posting this. I know that this post is now pretty old, but it is still very useful!
The pagination displays and functions fine for the most part; but the first and last page links are missing for me. It does not matter which page I am on (first, second, third, etc.), no first page or last page links show up. Any ideas on how I can fix this?
Thanks in advance for any help!
Syed Hamza says
Numeric Pagination shows only on PC but doesn’t show on mobile. I want to show this pagination on both versions.
How I can fix it?
JeffD says
Thank you so much for the excellent tutorial. I want to use the non-plugin solution (the php script), but with no truncation/ellipses for page links (instead of 1…2 3 4 5 6…10, I want to just show all pages all the time – 1 2 3 4 5 6 7 8 9 10). How can I modify the script to do this? Should be easy for you experts but not for me! Thank you in advance for any helps!
Nelson says
This code is not working for me, are there any pointers
Youssef says
Hi I want return default wp pagination in my theme” freshlife by theme junkie I don’t Like the numeric pagination because it show the total posts in my website . please wpbeginne help
Bilal says
i want to paginate my products how can i do it
Rajath says
Hi, NIce tutorial and your website have helped me in many issues while developing my own theme. I have opted for the manual pagination shown here instead of plugin. But the pagination is not responsive and looks bad when the screen size is reduced. How to make it responsive or are there any other alternatives(no plugins please).I`m not going to publish this theme so i`m building it just to suit my need…
WPBeginner Support says
Look at your WordPress theme’s stylesheet. Study how your theme handles responsiveness. Some themes use media queries to detect screen width and then adjust different elements accordingly. Some themes use relative widths to make sure that all elements inside their design layout are responsive to the screen width.
Administrador
Rajath says
I’m developing the theme. I’m unable to make the pagination responsive. So I just removed the padding around the links which make them to look like a button. Instead I left them like numbers which works fine in small screens too. Thank You for the reply.
javad says
hi
i used first code in function but WP language changed to unreadable words why????
Gabriel Tellez says
Thanks man, is great.
James says
I’m trying to remove the pagination from my homepage found below each summary post, to me it doesn’t look great, is there a way to do this.
WPBeginner Support says
Please contact your WordPress theme developer. They will be able to guide you better.
Administrador
Aryan says
Actually i am new to wordpress but i know php good……i want to add a pagination from custom table in data base……
Fasih says
the numbered pagination without the plugin is working fine on localhost but when i upload the files i cant see anything but when i check the inspect element, the only thing i found was an empty div containing the classes but with nothing inside it. i have uploaded all the files correctly and double checked but not successful. please guide me
Abraham says
Cool!
Marco Riesco says
Excelent!! thanx
Moustafa says
This script does not work in the new WordPress 4.3.1
omdat bij de oude versie heeft die script wel gewerkt en nu niet meer
Pleas help…
Tom says
You really helpped me. Thanks !
Sam says
Thanks very helpful
lucky cabarlo says
how can i adjust the numbers to show in the custom numeric pagination
spongie says
how do you limit the page number to say up to 2 only then show ellipsis?
krishma says
can i use this plugin for custom post type
Astra says
Of course mate. You just need to put this code into your page-custom.php
Med says
Hello,
I found this very useful and I placed it to my new site. The problem is that it works perfect on the first page of the category, and after clicking on the “Next” link the url changes to /page/2/ but the highlighted page number is aways “1” and the content is always the first 10 articles (always in the first page).
I think there is something missing in my query:
<a href="”>
‘aligncenter’));
} else {
echo ”;
}
?>
Preeti Bhandari says
how can i prevent whole page reload when clicking on next link, only want to refresh that particular section… Please help….
Luis Eduardo Braschi says
Because “the goal is to replace the default Older and Newer pagination links at the bottom of archive pages” – and this is what “your” function does – “with easy to navigate page numbers.”.
Tony says
Hi how do you get just the next and previous links only. thanks.
Barry says
How can i use the wpbeginner_numeric_posts_nav(); for my Custom Post type?
I have replaced global $wp_query for
$args = array(
‘post_type’ => ‘my-cpt’,
‘meta_key’=>’cpt_detail’,
‘orderby’=>’meta_value’,
‘order’ => ‘ASC’,
‘paged’ => $paged
);
$cpt_query = new WP_Query($args);
and replaced $wp_query reference with $cpt_query but it doesn’t work
igloobob says
Hi, did you ever figure this out please? I’m trying to get this working myself and struggling. Would appreciate your help very much if you got it working…
Ashley Michèlle says
Using the ‘wpbeginner_numeric_posts_nav’ method, how would one change the navigation brackets? I’m not a huge fan of the ‘»’.
Thanks!
James George Dunn says
Hello Ashley,
You can set a value in the brackets of get_previous_posts_link() and get_next_posts_link(). For example, get_next_posts_link(‘Next Post’) will show “Next Post” instead of the default “Next Page »”.
AmirMasoud says
how can i change “Next Page” & “Previous page” text?
TimParkerRD says
If you’re using the wpbeginner_numeric_posts_nav function, you can pass custom text to the get_next_posts_links() and get_previous_posts_link(), like so:
get_previous_posts_link(“Go Back”);
Daniel Ortiz says
since Genesis Framework is not an open-source framework, are we allowed to use this code, commercially or not?( and are you allowed to distribute it?)
mr anon says
thanks a lot