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.

Compártelo!
34 Comentarios en Cómo añadir paginación en WordPress sin plugin
  1. 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……

  2. danielmd dice:

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

  3. giltesa dice:

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

  4. Cristina dice:

    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.

  5. Oma dice:

    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

  6. Claudia dice:

    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.

  7. Oma dice:

    ¡Ya funciona! Muchas gracias Claudia :)

  8. el_quick dice:

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

  9. antonio dice:

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

  10. Jeferson dice:

    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!

  11. Marcelo dice:

    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?

  12. hugo dice:

    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

  13. hugo dice:

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

  14. Fabricio dice:

    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

  15. lorenzo dice:

    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 dice:

      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.

  16. Sergio dice:

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

  17. ainhoa dice:

    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!

  18. ainhoa dice:

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

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

  19. leiva dice:

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

  20. remanencia dice:

    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

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

  22. kitty dice:

    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 :-)

  23. ElManu dice:

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

  24. erServi dice:

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

  25. Andres dice:

    Muy bueno! Gracias!!

  26. andres dice:

    claudia tienes algun email de concato? saludos!

  27. Como Ganar Dinero dice:

    me encanto el articulo ya que teniendo muchos plugins ralentizamos nuestro sitio web gracias por este aporte

  28. Míriam dice:

    Muchas gracias por compartir conocimientos explicados de manera sencilla y didáctica.

  29. niko dice:

    Gracias claudia me gusto la explicación ahora a probar en mi blog haber como queda, me evito instalar un plugin.

  30. Willy dice:

    Excelente tutorial, me funciono todo bien, aunque tube que guardar los datos por ftp porque di lo editaba desde el escritorio de wordpress me daba errores… :D

    Lo pueden ver funcionar en : http://weblogwh.org/

Deja tu comentario
Tu Comentario