Hosting - Cyberneticos.com

Paginador para WordPress

En internet podemos encontrar muchos plugins que nos podrán crear un paginador perfecto para nuestro sitio creado con WordPress, pero iréis viendo que la idea en este blog es utilizar la mínima cantidad de plugins posible, y hacer todo con código propio.

De esta manera podremos controlar nuestro WordPress mucho mejor y no depender tanto de terceros ni de actualizaciones que puedan quedarse obsoletas por culpa de plugins olvidados por los programadores de los mismos, así que hoy veremos como crear nuestro propio paginador para WordPress con unas pocas lineas de código.

Lo primero que debemos hacer es localizar y abrir nuestro archivo funtions.php con nuestro ID de programación favorito, en el copiaremos y pegaremos el siguiente código.




<?php
//paginador
function fs_paginate($the_query NULL){
    global 
$wp_query;
    
$the_query = (!isset($the_query)) ? $wp_query $the_query;
    
$big 999999999// need an unlikely integer
    
$pagination paginate_links( array(
        
'base' =&amp;gtstr_replace$big'%#%'get_pagenum_link$big ) ),
        
'format' =&amp;gt'?paged=%#%',
        
'current' =&amp;gtmax1get_query_var('paged') ),
        
'total' =&amp;gt$the_query-&amp;gt;max_num_pages,
        
'prev_text'    =&amp;gt__'Previous''tu_theme' ),
        
'next_text'    =&amp;gt__'Next''tu_theme' )
    ) );
    if(
$the_query-&amp;gt;max_num_pages &amp;gt1) echo '&amp;lt;div class="pagination"&amp;gt;'.$pagination.'&amp;lt;/div&amp;gt;';
}
?>

Como podéis ver el código es corto y nos crea una query donde nos cuenta las paginas creadas y las totales para poder paginar las, así mismo nos crea un DIV donde añadirá el código del propio paginador que ahora veremos como darle un poco de estilo para que no se vea tan feo y simple.

Para darle unos estilos simples al paginador utilizaremos el estilo que le he dado yo mismo en este blog, a partir de el podéis ir jugando y darle vuestro propio estilo, cambiando colores y añadiendo mas efectos, con CSS todo es posible.

Lo primero que debemos hacer es localizar nuestro archivo style.css y abrirlo con nuestro ID de programación, luego copiamos y pegamos el siguiente código.




.pagination{
    display:block;
    overflow:hidden;
    width:100%;
    margin:30px 0 30px 0;
}
.pagination .prev,
.pagination .next,
.pagination .current{
    color:#CC0C00 !important;
}
.pagination .prev:hover,
.pagination .next:hover,
.pagination .current:hover{
    color:#000 !important;
}
.pagination .page-numbers{
    color:#000;
    font-size:1.4em;
}

Como podéis ver le damos un ancho y un margen al DIV principal y unos colores a los enlaces con un efecto HOVER para que cambie de color al pasar con el ratón por encima, es algo simple pero que queda resultón.

Y con este poco código hemos creado nuestro propio paginador para WordPress en unos pocos minutos, y lo mejor de todo es que nos hemos ahorrado un plugin y hemos aprendido algo más.


Si quieres puedes dejar tu comentario para Ricardo aquí.

  1. abel dice:

    Buenas, y que hago para que el texto no me salga en ingles, mi blog esta hecho en español y quiero los textos tambien en español, muchas gracias

    1. ricard dice:

      Buenas Abel, lo único que tienes que hacer es modificar los textos “previus” y “next” que encuentras en las lineas 11 y 12 de la función que os hemos dejado arriba, la que copias en el archivo funtions.php, esos textos los puedes personalizar a tu gusto sin ningún tipo de problema.

      Un saludo

Deja un comentario

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