Paginação Sem Usar Plugins

Por: em Hacks/Dicas, Tutoriais no dia 9 Abril, 2012

paginacao-wp

Quanto menos plugins usarmos melhor, menos vulnerável fica o nosso site e também mais rápido fica. Mas isto tudo apenas se soubermos que funções usar e como.

É por isso que venho explicar como fazer uma paginação para os artigos sem recorrer a plugins, como por exemplo o famoso WP-PageNavi É tão simples que vão sem duvida começar a usar em todos os vossos themes.

1- Adicionem esta função ao ficheiro functions.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/** Paginação */
function pagination_funtion() {

global $wp_query;
$total = $wp_query->max_num_pages;
                   
if ( $total > 1 )  {
    if ( !$current_page = get_query_var('paged') )
        $current_page = 1;
                           
        $big = 999999999;

        $permalink_structure = get_option('permalink_structure');
        $format = empty( $permalink_structure ) ? '&page=%#%' : 'page/%#%/';
        echo paginate_links(array(
            'base' => str_replace( $big, '%#%', get_pagenum_link( $big ) ),
            'format' => $format,
            'current' => $current_page,
            'total' => $total,
            'mid_size' => 4,
            'type' => 'plain'
        ));
    }

}
/** END Paginação */

2- E depois no index.php ou nos restantes ficheiros com paginação, como o category.php etc, só precisam de adicionar o seguinte código.

1
2
3
4
<div id="pagination">
   <?php pagination_funtion(); ?>
   <div style="clear: both;"> </div>
</div>

3- Agora só precisamos de adicionar um pouco de estilo à paginação. Para isso adicionamos o seguinte código CSS ao ficheiro style.css.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#pagination {
 margin: 5px 0;
 text-align: center;
 padding: 8px 4px;
 background: #DFDFDF;
}

#pagination {
 margin: 0 auto;
}

#pagination a, #pagination .dots, #pagination .next, #pagination .prev {
 padding: 2px 4px;
 margin: 0 2px;
 border: 1px solid #000;
 color: #000;
 background-color: #fff;
}
#pagination a:hover, #pagination .next:hover, #pagination .prev:hover {
 border: 1px solid #FF0000;
 color: #FF0000;
 background-color: #fff;
}
#pagination .current {
 padding: 2px 4px;
 margin: 0 2px;
 border: 1px solid #ccc;
 color: #333;
 background-color: #eee;
}

#pagination .next {
float: right;
}
#pagination .prev {
float: left;
}

E é tudo, menos um plugin a fazer peso no vosso blog! 😀



Com um total de 71 posts.

5 Comentários

  1. Fernandes
    6 de Novembro de 2012 ás 19:41

    Boa tarde, muito legal esta sua dica, porém fiquei com uma dúvida, como faria para mostrar paginação em uma página filha… explico melhor: eu tenho uma categoria mãe e uma categoria filha, a categoria mãe eu chamo no arquivo page-mae.php por exemplo e faço um loop com todos os posts daquela categoria e o paginador funciona numa boa… agora, se eu clico na página filha (eu uso o mesmo arquivo, page-mae.php visto que esta também marcado como categoria mãe e categoria filho) ele não mostra o paginador. O que estou fazendo de errado?

  2. Clodoaldo tetas
    21 de Março de 2013 ás 17:40

    Corrigindo, funtion= errado, function= certo.

  3. Carlos
    1 de Agosto de 2013 ás 13:18

    Nesta função tem como eu especificar a quantidade de posts que irá paginar? (5 por página, 10 por página, etc)

  4. ORiOn
    7 de Agosto de 2013 ás 20:21

    Carlos, isso pode ser feito nas opções do wordpress.

  5. Rômulo
    15 de Abril de 2014 ás 19:15

    Olá amigo, esse código serve para colocar em página, tenho uma página dentro do site em wordpress, só que o conteúdo dela é muito grande, gostaria de quebrar em várias páginas o mesmo conteúdo e no final de cada um ter a paginação tipo assim: <>.

    Quero que fique semalhante ao que está nesse endereço: http://2013.cnbc.org.br/leis-normas/etica?showall=&start=1

Comenta com força que é de graça!