Blog de Estudios Media

wordpress paginación en custom post type2 min de lectura

Antes de comenzar a modificar el loop dentro de nuestra página o template, tenemos que tener en cuenta un punto fundamental y que a muchos nos ha hecho renegar por un buen tiempo si no hemos revisado la configuración de nuestro custom post_type.

Configuración

Si hemos utilizado un plugin como Types para la creación de nuestro custom post type debemos verificar que la casilla de REWRITE se encuentra destildada (false). De esta manera evitamos la reescritura de nuestra url, dado que sino, nos transformaría nuestro enlace Ej: /proyecto&paged=2 por /proyecto/paged/2 devolviéndonos un error 404 de página no encontrada.

opciones-custom-post-types
como hacer paginación en custom post type

 

Ahora sí, pasamos a modificar nuestro loop php

En la página que hará referencia a nuestro custom post type Ej: page-trabajos.php

Podemos encontrar un loop para mostrar los post similar a este que es el básico que trae worpdress.

<?php
get_header();

//LOOP
if (have_posts()) :
   while (have_posts()) :
      the_post();
      the_content();
   endwhile;
endif;
//FIN LOOP
get_sidebar();
get_footer(); 
?>

Lo primero que vamos a realizar es la creación de un objeto que guardará los post para ser procesados. En mi ejemplo mi custom post type se llama «trabajos» y quiero que se muestren 18 post por página solamente.

<?php   
         $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
            $args=array(
            'post_type' => 'trabajos',
            'posts_per_page'=> 18,
            $tax => $category,
            'post_status' => 'publish',
            'paged' => $paged);

        $my_query = null;
        $my_query = new WP_Query($args);

Luego modificamos el loop. Nota: La estructura de como se muestra el post está con las clases de Boostrap 3, usted debe adecuar la misma según su plantilla.

//LOOP
while ($my_query->have_posts()) : $my_query->the_post(); ?>

    <div class="col-2-12"> 
        <div class="grid-block fade">
            <a href="<?php the_permalink(); ?>">
                <div class="caption" style="display: none;">
                    <i class="fa fa-plus"></i>
                </div>
            </a>
            <?php the_post_thumbnail( 'large', array( 'class' => 'project-img' ) ); ?>
        </div>
    </div> 

<?php endwhile; ?> 
//FIN LOOP

Por último debemos colocar los botones Anterior y Siguiente para realizar el paginado.

<div class="grid grid-pad" style="text-align: center;">
          <div class="btnAlbum"><?php previous_posts_link('« Siguientes', $my_query->max_num_pages); ?></div>
          <div class="btnAlbum"><?php next_posts_link('Anteriores »', $my_query->max_num_pages); ?></div>
</div>

 

 

Mauro L. Chius
Mauro L. Chius

Especialista en comercio electrónico y estratégias digitales.