Nuthost

Paginacion numerica para WordPress sin Plugins

“Normalmente, a no ser que compres un Theme premium o encargues uno personalizado los Themes para WordPress no vienen con todas las funciones posibles, por ejemplo el sistema de paginación por defecto es el típico “pagina adelante” “pagina atrás”, hoy veremos como cambiar este tipo de paginación por una numérica y mucho mas vistosa sin necesidad de utilizar ningún plugin”

Lo normal en estos casos, o por lo menos lo que hace la mayoría de la gente es utilizar algún plugin, el mas utilizado es Wp-Pagenavy, y es en este plugin en el que se basa el código que utilizaremos nosotros, lógicamente como siempre tendremos que tirar mano de nuestro archivo FUNTIONS.PHP.

Lo primero es añadir el siguiente código en nuestro archivo, este código es el que genera la paginación numérica en nuestro Theme de WordPress.

function paginado($before = '', $after = '', $pages_to_show = 12, $always_show = false) {
global $request, $posts_per_page, $wpdb, $paged;
if(empty($prelabel)) {
$prelabel = '«';
}
if(empty($nxtlabel)) {
$nxtlabel = '»';
}
$half_pages_to_show = round($pages_to_show/2);
if (!is_single()) {
if(!is_category()) {
preg_match('#FROMs(.*)sORDER BY#siU', $request, $matches);
} else {
preg_match('#FROMs(.*)sGROUP BY#siU', $request, $matches);
}
$fromwhere = $matches[1];
$numposts = $wpdb->get_var("SELECT COUNT(DISTINCT ID) FROM $fromwhere");
$max_page = ceil($numposts /$posts_per_page);
if($max_page > 1 || $always_show) {
if ($paged >= ($pages_to_show-1)) {
echo '1';
}
previous_posts_link($prelabel);
for($i = $paged - $half_pages_to_show; $i = 1 && $i if($i == $paged) {
echo "$i";
} else {
echo ' '.$i.' ';
}
}
}
next_posts_link($nxtlabel, $max_page);
if (($paged+$half_pages_to_show) < ($max_page)) {
echo ''.$max_page.'';
}
}
}
}

Ahora ya tenemos el código necesario para generar la paginación numérica, pero esto no es suficiente, el siguiente paso es decirle a WordPress donde tiene que mostrar dicha paginación, para eso necesitamos abrir todos los archivos de nuestro Theme que utilicen paginación, dependiendo del Theme pueden ser unos u otros pero lo normal son INDEX.PHP, PAGE.PHP, ARCHIVE.PHP.

En estos archivos tenemos que buscar el siguiente código (depende el theme puede variar):

<?php next_posts_link('Previous entries') ?><?php previous_posts_link('Next entries') ?>

Y lo sustituimos por el siguiente código que es el encargado de realizar la llamada a la función que anteriormente hemos puesto en nuestro FUNTIONS.PHP.

<div class="pagination"><?php paginado(); ?></div>

Ahora nuestra paginación numérica ya es visible en nuestro Theme para WordPress, eso si, algo fea, el ultimo paso que nos queda por realizar es darle estilos desde nuestra pagina de estilos, para este ejemplo he cogido los estilos de una de mis paginas personales, aquí debe entrar la imaginación de cada uno para darle forma al paginado.

.pagination{
width:80%;
display:block;
padding: 10px 0 10px 0;
margin: 10px 0 0 0;
border:3px solid #164358;
border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-o-border-radius: 15px 15px 15px 15px;
}
.pagination a {
text-decoration:none;
color:#fff;
background-color:#164358;
border:3px solid #164358;
border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-o-border-radius: 15px 15px 15px 15px;
padding: 3px 5px 3px 5px;
margin: 0 0 0 10px;
}
.pagination a:hover {
text-decoration:none;
color:#fff;
background-color:#01628c;
border:3px solid #01628c;
box-shadow:5px -5px 5px #164358;
-webkit-box-shadow:5px -5px 5px #164358;
-moz-box-shadow:5px -5px 5px #164358;
-o-box-shadow:5px -5px 5px #164358;
}

Y con esto queridos amigos tenemos una paginación numérica completamente operativa y personalizada sin necesidad de utilizar ningún plugin.

Tagged in:
Acerca de 
Web
Diego Medrano es el Coordinador General de Soporte Técnico en Nuthost. Trabaja en la empresa desde 2014. Comenzó su carrera en la empresa como soporte técnico de primer nivel, dedicándose a brindar asistencia experta y personalizada a los clientes. Su responsabilidad principal era resolver problemas técnicos de manera eficiente, asegurando una experiencia de usuario excepcional. Manejó consultas y problemas relacionados con el alojamiento web, garantizando la disponibilidad y el rendimiento óptimo de los servicios. Su compromiso y habilidades lo llevaron a asumir roles de mayor responsabilidad, y hoy lidera el equipo de soporte técnico

3 Comentarios

  1. max

    14 agosto, 2014 - 18:28

    jajjaja este cuete como ya no pudo arreglarlo ya no contesto .. el problema esta en el for de previus post, no esta bien escrito, a ver si puedo corregirlo y les digo

  2. Eduardo

    21 enero, 2014 - 10:45

    Efectivamente, hay un error en la linea que comenta Irene y no pude detectar cual es el error…

  3. Irene

    12 diciembre, 2013 - 11:05

    Hola Ricardo, estoy haciendo mi sitio web con wordpress, y he visto tu post. Me ha gustado mucho y lo he visto muy practico, pero al intentarlo me da problema de sintaxis y no funciona la web. El error me da aqui:

    for($i = $paged – $half_pages_to_show; $i = 1 && $i if($i == $paged) {

    Porque puede ser? Podrias ayudarme por favor? Muchas gracias