Navegación numerada sin plugin

Creo que medio planeta que usa WordPress utiliza el plugin PageNavi para ofrecer algo mejor que el típico «Entradas anteriores – Entradas siguientes«, y la verdad es que está muy bien.

Lo que no sabe ese medio planeta es que puede disponer la misma funcionalidad sin tener que usar el plugin

Y es lo que medio planeta WordPress igual no sabe es que desde la versión 2.1 de WordPress hay una función para EXACTAMENTE esa misma funcionalidad de ofrecer navegación numerada de entradas.

Lo mejor de todo es que consume muchos menos recursos que el plugin PageNavi, y para usarla solo tienes que hacer 2 pasos:

1. Crear la función

Añade este código a tu plugin de funciones o archivo functions.php de tu tema activo:

//Paginación de entradas
function wp_corenavi() {
  global $wp_query, $wp_rewrite;
  $pages = '';
  $max = $wp_query->max_num_pages;
  if (!$current = get_query_var('paged')) $current = 1;
  $a['base'] = str_replace(999999999, '%#%', get_pagenum_link(999999999));
  $a['total'] = $max;
  $a['current'] = $current;
 
  $total = 1; //1 - muestra el texto "Página N de N", 0 - para no mostrar nada
  $a['mid_size'] = 5; //cuantos enlaces a mostrar a izquierda y derecha del actual
  $a['end_size'] = 1; //cuantos enlaces mostrar al comienzo y al fin
  $a['prev_text'] = '« Anterior'; //texto para el enlace "Página siguiente"
  $a['next_text'] = 'Siguiente »'; //texto para el enlace "Página anterior"
 
  if ($max > 1) echo '<div class="navigation">';
  if ($total == 1 && $max > 1) $pages = '<span class="pages">Página ' . $current . ' de ' . $max . '</span>'."\r\n";
  echo $pages . paginate_links($a);
  if ($max > 1) echo '</div>';
}

2. Añadir la función a tu tema

Una vez guardes los cambios solo tienes que añadir el siguiente código donde quieras que se muestre la paginación de entradas, normalmente en la primera línea del archivo footer.php de tu tema activo:

<?php if (function_exists('wp_corenavi')) wp_corenavi(); ?>

Guardas de nuevo los cambios y ya lo tienes. El HTML resultante de la función sería algo así:

<div class="navigation">
  <span class="pages">Página 7 de 27</span>
  <span class="removed_link" title="http://tusitio.es/page/6/">&laquo; Anterior</span>
  <span class="removed_link" title="http://tusitio.es/page/1/">1</span>
  <span class='page-numbers dots'>...</span>
  <span class="removed_link" title="http://tusitio.es/page/4/">4</span>
  <span class="removed_link" title="http://tusitio.es/page/5/">5</span>
  <span class="removed_link" title="http://tusitio.es/page/6/">6</span>
  <span class='page-numbers current'>7</span>
  <span class="removed_link" title="http://tusitio.es/page/8/">8</span>
  <span class="removed_link" title="http://tusitio.es/page/9/">9</span>
  <span class="removed_link" title="http://tusitio.es/page/10/">10</span>
  <span class='page-numbers dots'>...</span>
  <span class="removed_link" title="http://tusitio.es/page/27/">27</span>
  <span class="removed_link" title="http://tusitio.es/page/8/">Siguiente &raquo;</span>
</div>

Todo con los puntitos separadores y rebonito para que tu WordPress ofrezca una navegación útil y visualmente interesante.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(5 votos, promedio: 4.8)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

13 comentarios en “Navegación numerada sin plugin”

  1. Gustavo Varon U

    Pues si, muy bueno todo, pero como siempre a medias, dices: añade código a plugin de funciones, entre por el FilleZilla al blog y no encontré dicho plugin
    En otras explicaciones que haz dado pasa lo mismo no escribes la ruta completa, algunos somos novatos, o medianamente conocedores, sería bueno una explicación mas detallada y sobre todo con la ruta completa

  2. Buena referencia que voy a usar muy pronto, aunque trataré de modificarlo para usar una lista, que para accesibilidad es más agradecida.

    El tema de estilos es ya cosa de cada uno

  3. Saludos amigo, abra una opción similar para dividir una entrada en varias paginas?, he buscado bastante y las que he visto ya no funcionan!, agradecería todo tipo de apoyo, gracias!

  4. Hola
    Gracias por el código, me funciona muy bien. Lo puse en el tag, category, search y se ve perfecto.
    Pero lo puse en una página que hice como plantilla (template) donde muestro un listado con todos los posts de mi sitio por medio de un wp_query, y ahí no me funciona.
    ¿alguna idea de por qué ocurre eso?

  5. Hola aquí dejo un CSS para ésta función, espero que os ayude.

    /*paginacion*/

    .navigation{

    font-size: 1.5em;/*tamaño de fuente responsive en «em» en lugar de «px»*/

    font-family: inherit; /*family heredada para que tenga coherencia con tu página*/

    }

    .pages{

    color:#000;

    }

    a.prev.page-numbers,a.next.page-numbers{

    color:#FF6000;

    }

    a.prev.page-numbers:hover,a.next.page-numbers:hover{

    color:#820D97;

    }

    span.current{

    color:#013EBB;

    }

    .page-numbers{

    color:#457DF0;

    }

    .page-numbers:hover{

    color:#820D97;

    }

    /* fin

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido