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!
  • Pingback: Bitacoras.com()

  • Excelente articulo Claudia, así a la hora de actualizar no se batalla 😛

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

  • 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.

  • Oma

    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

  • Claudia

    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.

  • Oma

    ¡Ya funciona! Muchas gracias Claudia 🙂

  • el_quick

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

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

  • Jeferson

    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!

  • Marcelo

    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?

  • hugo

    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

  • hugo

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

  • Fabricio

    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

  • 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

    • 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.

  • Sergio

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

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

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

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

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

  • 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

  • Pingback: Cambié por error la dirección de mi WordPress y no puedo entrar - Adnan.es()

  • Pingback: Cómo usar cualquier tipografía en WordPress con @font-face - Adnan.es()

  • kitty

    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 🙂

  • ElManu

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

  • erServi

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

  • Muy bueno! Gracias!!

  • andres

    claudia tienes algun email de concato? saludos!

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

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

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

  • 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… 😀

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

  • rafael

    no me funciona… no me da ningun mensaje de error pero no me pagina..

    • imar

      a mi tampoco me pagina, as encontrado otra forma de paginar?

  • Luis Rene Mas Mas

    lo voy a implementar en mi web gracias

  • Pingback: Markito Groxo - Arte Urbano Comunidad()