Como utilizar paginação nativa do WordPress

No último sábado 23-11-2013 participei do WordCamp São Paulo. Faço questão de participar desses eventos pois é onde podemos analisar nosso nível de conhecimento e aprender mais. Como na área de desenvolvimento web ninguém sabe tudo (vai ter sempre um nerd que sabe mais que você) eu descobri uma função que responde a um questionamento antigo meu. Por que o WordPress não tem uma paginação nativa?

Durante a palestra “Não é porque funcionou que significa que está certo!” do Cláudio Sanches, que pra mim foi uma das melhores, descobri uma coisa que fiquei espantado de como eu não sabia disso até hoje. Por isso resolvi compartilhar!

Sempre questionei o fato de ter que usar plugin pra fazer paginação no WordPress, geralmente uso Wp-pagenavi que inclui um arquivo css e aumenta o número de requisições. Pensando nisso decidi criar este post e compartilhar essa função nativa do WordPress já com um CSS padrão que desenvolvi.

Adicionando paginação no tema WordPress

CSS para função paginate_links do wordpressDesde a versão 2.1 do WordPress já existe uma função nativa para criar paginação que é pouco usada pelos desenvolvedores por falta de divulgação, por isso a cada versão lançada recomendo analisar e testar cada nova função disponível.

Para incluir a páginação basta adicionar a função paginate_links(); logo após o loop e passar alguns parâmetro como, url da paginação, quantidade de páginas, página corrente, entre outros que podem ser vistos na documentação.

<!--?php $args = array( 	'big_number' =----> 999999999,
        'base'       =&gt; str_replace( 999999999, '%#%', get_pagenum_link( 999999999 ) ),
        'format'     =&gt; '?paged=%#%',
        'current'    =&gt; max( 1, get_query_var( 'paged' ) ),
        'total'      =&gt; $wp_query-&gt;max_num_pages,
        'prev_next'  =&gt; true,
        'end_size'   =&gt; 1,
        'mid_size'   =&gt; 4,
        'type'       =&gt; 'list'
);?&gt;
<!--?php echo paginate_links( $args ); ?-->

Adicionando o código após o loop irá aparecer a paginação porém sem nenhuma estilização, ao contrario do plugin que já estamos acostumados a ter tudo pronto ;). Pensando nisso e como forma de incentivar o uso dessa função, decidi fazer o CSS abaixo e disponibilizar para você incluir no seu tema.

/* ---- CSS PAGINAÇÃO WORDPRESS ---- */
ul.page-numbers li{float:left;margin:0 2px;}
ul.page-numbers a, ul.page-numbers span {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background-color:transparent;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:2px 6px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}
ul.page-numbers a:active, ul.page-numbers span:active {
position:relative;
top:1px;
}
ul.page-numbers a:hover, ul.page-numbers span.current{
-moz-box-shadow:inset 0px 1px 0px 0px #d9d9d9;
-webkit-box-shadow:inset 0px 1px 0px 0px #d9d9d9;
box-shadow:inset 0px 1px 0px 0px #d9d9d9;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d9d9d9), color-stop(1, #676767) );
background:-moz-linear-gradient( center top, #d9d9d9 5%, #676767 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d9d9d9', endColorstr='#676767');
background-color:#d9d9d9;
border:1px solid #676767;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
text-decoration:none;
text-shadow:1px 1px 0px #676767;
}
ul.page-numbers {text-align:center; padding: 20px 0;width: 100%}

CSS para função paginate_links do WordPress

Layout do CSS para função paginate_links do WordPress

Basta adicionar no final do seu arquivo CSS e alterar o que precisar.

Acredito que depois desse post não tenhamos motivos para utilizar plugin para criar uma paginação no WordPress, já que temos tudo pronto e podemos evitar requisições e sites lentos. Espero ter ajudado, sei que é algo simples mas de grande importância. Até mais!

Newsletter

Cadastre-se Agora!

Artigos Similares

Djalma Toledo

Técnico em eletrônica formado pelo CEPHAS de São José dos Campos. Autodidata em XHTML, CSS e WordPress no qual se especializou nos últimos anos. As vezes arrisca uns códigos PHP e jQuery. Também é montanhista e músico.

2 respostas para “Como utilizar paginação nativa do WordPress”

  1. […] é mais uma dica simples mas que muita gente não conhece, assim como paginate_links() que mostrei em meu último […]

  2. Gabriel disse:

    mandou muito em deixar o css também! Valeu! Abraço!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *