Cómo añadir paginación en WordPress sin plugin

Tutoriales WordPress Publicado por Claudia en agosto 6, 2011

Si pensamos en paginación en WordPress, probablemente pensemos en un plugin: WP-Pagenavi. No obstante, también podemos paginar nuestro blog para mejorar la experiencia de los usuarios sin plugin. Ello es especialmente útil a la hora de desarrollar temas para terceros, o simplemente si queremos evitar llenarnos de plugins que pueden no ser indispensables.

Boutros Abichedid enseña cómo hacerlo, en tres simples pasos, y sin necesidad de tener grandes conocimientos de WordPress:

PASO 1: Copiar en el archivo funcions.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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<?php
/***** Numbered Page Navigation (Pagination) Code.
      Tested up to WordPress version 3.1.2 *****/
 
/* Function that Rounds To The Nearest Value.
   Needed for the pagenavi() function */
function round_num($num, $to_nearest) {
   /*Round fractions down (http://php.net/manual/en/function.floor.php)*/
   return floor($num/$to_nearest)*$to_nearest;
}
 
/* Function that performs a Boxed Style Numbered Pagination (also called Page Navigation).
   Function is largely based on Version 2.4 of the WP-PageNavi plugin */
function pagenavi($before = '', $after = '') {
    global $wpdb, $wp_query;
    $pagenavi_options = array();
    $pagenavi_options['pages_text'] = ('Página %CURRENT_PAGE% de %TOTAL_PAGES%:');
    $pagenavi_options['current_text'] = '%PAGE_NUMBER%';
    $pagenavi_options['page_text'] = '%PAGE_NUMBER%';
    $pagenavi_options['first_text'] = ('Primera');
    $pagenavi_options['last_text'] = ('Última');
    $pagenavi_options['next_text'] = 'Siguiente &raquo;';
    $pagenavi_options['prev_text'] = '&laquo; Anterior';
    $pagenavi_options['dotright_text'] = '...';
    $pagenavi_options['dotleft_text'] = '...';
    $pagenavi_options['num_pages'] = 5; //continuous block of page numbers
    $pagenavi_options['always_show'] = 0;
    $pagenavi_options['num_larger_page_numbers'] = 0;
    $pagenavi_options['larger_page_numbers_multiple'] = 5;
 
    //If NOT a single Post is being displayed
    /*http://codex.wordpress.org/Function_Reference/is_single)*/
    if (!is_single()) {
        $request = $wp_query->request;
        //intval — Get the integer value of a variable
        /*http://php.net/manual/en/function.intval.php*/
        $posts_per_page = intval(get_query_var('posts_per_page'));
        //Retrieve variable in the WP_Query class.
        /*http://codex.wordpress.org/Function_Reference/get_query_var*/
        $paged = intval(get_query_var('paged'));
        $numposts = $wp_query->found_posts;
        $max_page = $wp_query->max_num_pages;
 
        //empty — Determine whether a variable is empty
        /*http://php.net/manual/en/function.empty.php*/
        if(empty($paged) || $paged == 0) {
            $paged = 1;
        }
 
        $pages_to_show = intval($pagenavi_options['num_pages']);
        $larger_page_to_show = intval($pagenavi_options['num_larger_page_numbers']);
        $larger_page_multiple = intval($pagenavi_options['larger_page_numbers_multiple']);
        $pages_to_show_minus_1 = $pages_to_show - 1;
        $half_page_start = floor($pages_to_show_minus_1/2);
        //ceil — Round fractions up (http://us2.php.net/manual/en/function.ceil.php)
        $half_page_end = ceil($pages_to_show_minus_1/2);
        $start_page = $paged - $half_page_start;
 
        if($start_page <= 0) {
            $start_page = 1;
        }
 
        $end_page = $paged + $half_page_end;
        if(($end_page - $start_page) != $pages_to_show_minus_1) {
            $end_page = $start_page + $pages_to_show_minus_1;
        }
        if($end_page > $max_page) {
            $start_page = $max_page - $pages_to_show_minus_1;
            $end_page = $max_page;
        }
        if($start_page <= 0) {
            $start_page = 1;
        }
 
        $larger_per_page = $larger_page_to_show*$larger_page_multiple;
        //round_num() custom function - Rounds To The Nearest Value.
        $larger_start_page_start = (round_num($start_page, 10) + $larger_page_multiple) - $larger_per_page;
        $larger_start_page_end = round_num($start_page, 10) + $larger_page_multiple;
        $larger_end_page_start = round_num($end_page, 10) + $larger_page_multiple;
        $larger_end_page_end = round_num($end_page, 10) + ($larger_per_page);
 
        if($larger_start_page_end - $larger_page_multiple == $start_page) {
            $larger_start_page_start = $larger_start_page_start - $larger_page_multiple;
            $larger_start_page_end = $larger_start_page_end - $larger_page_multiple;
        }
        if($larger_start_page_start <= 0) {
            $larger_start_page_start = $larger_page_multiple;
        }
        if($larger_start_page_end > $max_page) {
            $larger_start_page_end = $max_page;
        }
        if($larger_end_page_end > $max_page) {
            $larger_end_page_end = $max_page;
        }
        if($max_page > 1 || intval($pagenavi_options['always_show']) == 1) {
            /*http://php.net/manual/en/function.str-replace.php */
            /*number_format_i18n(): Converts integer number to format based on locale (wp-includes/functions.php*/
            $pages_text = str_replace("%CURRENT_PAGE%", number_format_i18n($paged), $pagenavi_options['pages_text']);
            $pages_text = str_replace("%TOTAL_PAGES%", number_format_i18n($max_page), $pages_text);
            echo $before.'<div class="pagenavi">'."\n";
 
            if(!empty($pages_text)) {
                echo '<span class="pages">'.$pages_text.'</span>';
            }
            //Displays a link to the previous post which exists in chronological order from the current post.
            /*http://codex.wordpress.org/Function_Reference/previous_post_link*/
            previous_posts_link($pagenavi_options['prev_text']);
 
            if ($start_page >= 2 && $pages_to_show < $max_page) {
                $first_page_text = str_replace("%TOTAL_PAGES%", number_format_i18n($max_page), $pagenavi_options['first_text']);
                //esc_url(): Encodes < > & " ' (less than, greater than, ampersand, double quote, single quote).
                /*http://codex.wordpress.org/Data_Validation*/
                //get_pagenum_link():(wp-includes/link-template.php)-Retrieve get links for page numbers.
                echo '<a href="'.esc_url(get_pagenum_link()).'" class="first" title="'.$first_page_text.'">1</a>';
                if(!empty($pagenavi_options['dotleft_text'])) {
                    echo '<span class="expand">'.$pagenavi_options['dotleft_text'].'</span>';
                }
            }
 
            if($larger_page_to_show > 0 && $larger_start_page_start > 0 && $larger_start_page_end <= $max_page) {
                for($i = $larger_start_page_start; $i < $larger_start_page_end; $i+=$larger_page_multiple) {
                    $page_text = str_replace("%PAGE_NUMBER%", number_format_i18n($i), $pagenavi_options['page_text']);
                    echo '<a href="'.esc_url(get_pagenum_link($i)).'" class="single_page" title="'.$page_text.'">'.$page_text.'</a>';
                }
            }
 
            for($i = $start_page; $i  <= $end_page; $i++) {
                if($i == $paged) {
                    $current_page_text = str_replace("%PAGE_NUMBER%", number_format_i18n($i), $pagenavi_options['current_text']);
                    echo '<span class="current">'.$current_page_text.'</span>';
                } else {
                    $page_text = str_replace("%PAGE_NUMBER%", number_format_i18n($i), $pagenavi_options['page_text']);
                    echo '<a href="'.esc_url(get_pagenum_link($i)).'" class="single_page" title="'.$page_text.'">'.$page_text.'</a>';
                }
            }
 
            if ($end_page < $max_page) {
                if(!empty($pagenavi_options['dotright_text'])) {
                    echo '<span class="expand">'.$pagenavi_options['dotright_text'].'</span>';
                }
                $last_page_text = str_replace("%TOTAL_PAGES%", number_format_i18n($max_page), $pagenavi_options['last_text']);
                echo '<a href="'.esc_url(get_pagenum_link($max_page)).'" class="last" title="'.$last_page_text.'">'.$max_page.'</a>';
            }
            next_posts_link($pagenavi_options['next_text'], $max_page);
 
            if($larger_page_to_show > 0 && $larger_end_page_start < $max_page) {
                for($i = $larger_end_page_start; $i <= $larger_end_page_end; $i+=$larger_page_multiple) {
                    $page_text = str_replace("%PAGE_NUMBER%", number_format_i18n($i), $pagenavi_options['page_text']);
                    echo '<a href="'.esc_url(get_pagenum_link($i)).'" class="single_page" title="'.$page_text.'">'.$page_text.'</a>';
                }
            }
            echo '</div>'.$after."\n";
        }
    }
}
?>

*Lo traduje al español.

PASO 2: Reemplazar la navegación por defecto

En el archivo index.php, buscamos la navegación por defecto del theme, algo como esto:

1
2
3
4
<div class="navigation">
<div class="alignleft"><?php previous_posts_link('&laquo; Previous Entries') ?></div>
<div class="alignright"><?php next_posts_link('Next Entries &raquo;','') ?></div>
</div>

Y la reemplazamos por:

1
<div class="navigation"><?php if(function_exists('pagenavi')) { pagenavi(); } ?></div>

Hacemos lo mismo en nuestro archive.php y nuestro search.php.

PASO 3: Estilizando nuestra paginación numerada

Ahora sólo queda copiar el siguiente código en la hoja de estilos (style.css), y modificar los colores y quizás algunas propiedades:

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
38
39
40
41
42
43
44
45
46
47
48
.pagenavi {
    margin: 0 0 20px 30px;
    padding: 5px 1px 5px;
    float:left;
    width: 98%;
}
.pagenavi a {
    padding: 5px 6px 4px 6px;
    margin: 3px;
    text-decoration: none;
    border: 1px solid #ccc;
    color: #666;
    background-color: inherit;
}
.pagenavi a:hover {
    border: 1px solid #444;
    color: #444;
    background-color: #eee;
}
.pagenavi span.pages {
    padding: 5px 6px 4px 6px;
    margin: 3px;
    color: #825a2d;
    font-weight:bold;
    border: 1px solid #999;
    background-color: inherit;
}
.pagenavi span.current {
    padding: 5px 6px 4px 6px;
    margin: 3px;
    font-weight:bold;
    border: 1px solid #666;
    color: #444;
    background-color: #eee;
}
.pagenavi span.expand {
    padding: 5px 6px 4px 6px;
    margin: 3px;
    border: 1px solid #ccc;
    color: #444;
    background-color: inherit;
}
.pagenavi .first, .pagenavi .last {
    border: 1px solid #aaa;
}
.pagenavi .single_page {
border: 1px dashed #ccc;
}

Eso es todo. Toma menos tiempo que instalar y configurar un plugin.

Posts relacionados

Compártelo!

30 Comentarios

agosto 6, 2011

Información Bitacoras.com…

Valora en Bitacoras.com: Si pensamos en paginación en WordPress, probablemente pensemos en un plugin: WP-Pagenavi. No obstante, también podemos paginar nuestro blog para mejorar la experiencia de los usuarios sin plugin. Ello es especialmente útil……

danielmd soycachanilla.com
agosto 6, 2011

Excelente articulo Claudia, así a la hora de actualizar no se batalla :P

giltesa giltesa.com
agosto 6, 2011

A falta de mejorar el css para adaptarlo a la página, lo que es el código en si funciona perfecto, gracias :)

Cristina tarotbarato.bligoo.es
agosto 9, 2011

Para mi lo más óptimo es evitar los plugins todo lo posible. Sin duda es mejor paginar nuestro blog para mejorar la experiencia de los usuarios sin plugin.

agosto 13, 2011

Me funciona genial,muchas gracias pero el problema lo tengo al iniciar sesión,me sale esto
Warning: Cannot modify header information – headers already sent by (output started at /home/ucolors/public_html/wp-content/themes/Ninaucolors/functions.php:3) in /home/ucolors/public_html/wp-includes/pluggable.php on line 934

agosto 13, 2011

Oma: Para prevenir esos problemas lo ideal es editar el archivo functions.php vía FTP. A mí también me ha pasado… Lo más sencillo para remediar el problema, es “guardar los cambios” en tu funcions.php (vía FTP), (no añades nada, sólo guardas cambios)… o reinstalar el tema.

agosto 13, 2011

¡Ya funciona! Muchas gracias Claudia :)

diciembre 16, 2011

Muy buen artículo…. una alternativa que me encanta para paginaciones es kpaginate, está genial… a ver que les parece a ustedes paginación php

Pruebenla y me cuentan, saludos!!!

antonio lawebdemelo.es.tl
diciembre 17, 2011

muy bonita la pagina . visitar mi pagina http://lawebdemelo.es.tl/ os gustara. saludos.

enero 7, 2012

Muchisiiiimas gracias! He estado buscando esto desde hace tiempo… ya me había rendido… hoy sin querer lo encontré aquí! Muy bueno! Me engancho tu blog, Dios te cuide!

abril 14, 2012

Hola, sabes que lo implemente para las categorías y va muy bien, pero intento implementarlo para la navegación de comentarios y no me funciona. Sabes como implementarlo?

abril 25, 2012

bien al parecerle funciona a todos, una consulta yo tengo mi tema casi limpio y no tengo el como se menciona, cual seria la ubicacion exacta para agregarlo. Muchas Gracias

abril 25, 2012

Quise decir que no tengo el div con id “navigation”. =)

julio 30, 2012

Hola, por favor, necesito ayuda con el paginado…
coloque tal cual el codigo que esta publicado aca y cuando quiero ir a la pagina 2 o siguiente me da que que no encuentra la pagina…y veo que en la barra de direccion agrego bien el “?paged=2″ que puede estar pasando?

desde ya, muchas gracias
f

Claudia plus.google.com
julio 31, 2012

Debiera aparecer así: http://chicablogger.com/page/2/ No sé por qué te aparece como dices.

lorenzo installationtvatlanta.com
septiembre 17, 2012

intente introducir estos codigos a mi pagina, y guarde algunos cambios pero de casualidad apague la pc y ahora me sale esta informacion no soy muy experto,,, me puedes ayudar please.. este es lo qeu sale

Warning: Cannot modify header information – headers already sent by (output started at /home/mariafe/public_html/installationtvatlanta.com/wp-content/themes/boldy/functions.php:2) in /home/mariafe/public_html/installationtvatlanta.com/wp-includes/pluggable.php on line 881

gracias es ugente alguien me puede ayudar

Claudia plus.google.com
septiembre 24, 2012

Lorenzo, siempre es conveniente modificar el functions desde tu servidor (no desde WordPress) para evitar ese tipo de problemas. Quizás hay un error en tu functions que puedes modificar desde ahí, tal vez una línea de más o alguna función que ya estaba añadida.

septiembre 29, 2012

Gracias por el aporte, me sirvió mucho!
Saludos desde Bs As. Arg.

ainhoa ascodecurro.com
octubre 11, 2012

Hola! lo he instalado y funciona genial, muchas gracias!
Pero tengo una página que he creado como plantilla, donde he puesto que me muestre las entradas de una sola de las categorias filtrando las entradas con

Entonces me numera correctamente pero no funciona la navegación, nunca puedo ir a la segunda página.
¿como podría hacer que funcione? muchas gracias por adelantado!

ainhoa ascodecurro.com
octubre 11, 2012

no ha salido antes el comentario el php que te ponia como ejemplo

php query_posts(‘category_name=humor-en-el-trabajo’)

leiva osmanleiva.com
octubre 17, 2012

gracias claudia, me ha sido muy util para personalizar mi blog en WP

remanencia publixiten.com
octubre 23, 2012

Esta genial, segui los pasos y me FUNCIONO de lo LINDO , y encima te TOMASTES la molestia de TRADUCIRLO al ESPAÑOL ,
porque en otro tutoriales al respecto es similar toman del plugin wp-pagenavi

noviembre 5, 2012

[...] Cómo añadir paginación en WordPress sin plugin About Adnan [...]

noviembre 5, 2012

[...] Cómo añadir paginación en WordPress sin plugin [...]

noviembre 22, 2012

Hola , lo implemente como dices, pero no me funciono, los numeros salen bien y la url’s son asi
http://x.com/folios/page/2 , pero me sale error 404 y con todas las paginas me sale lo mismo. Ayuda urgente por favor gracias :-)

diciembre 14, 2012

Excelente aportación. Muchas gracias. Es libre el código?

Claudia plus.google.com
diciembre 14, 2012

Sí, libre.

febrero 7, 2013

Estupendo y clarísimo post, Claudia. Muchas gracias.

Andres bitacorasdeviaje.com
febrero 9, 2013

Muy bueno! Gracias!!

abril 24, 2013

claudia tienes algun email de concato? saludos!

Deja tu comentario

Nombre (requerido)
Email (requerido)
Sitio web (opcional)