Quantcast
Channel: Hacks/Dicas – DicasWP – Hacks e Dicas Para WordPress
Viewing all articles
Browse latest Browse all 10

Paginação Sem Usar Plugins

$
0
0

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! 😀


Viewing all articles
Browse latest Browse all 10

Latest Images





Latest Images