listar post por categorias en wordpress

Crear una página que liste los post por categoría – Genesis Framework

¿Alguna vez has querido crear una página en tu sitio de WordPress que muestre todas las categorías de tu sitio y liste sus publicaciones correspondientes debajo? Si es así, hoy es tu día de suerte.

Cuando empecé a trabajar con WordPress, me sentí frustrado al ver que no hay plantillas nativas que enumeren todas las categorías en un sitio con una lista como ésta:

post por categorias

Pero, por desgracia, si miras la jerarquía de plantillas de WordPress, una página que escupe automáticamente esa información no existe.

No es así como funciona WordPress. Afortunadamente, no es difícil de añadir como una personalización. Lo que sigue es un tutorial rápido sobre cómo añadir esta función en tu sitio web.

Cómo listar publicaciones por categoría en una página

Para obtener una página que muestre una lista de categorías (y los post que pertenecen a cada categoría), necesitamos hacer dos cosas:

  1. Crear una plantilla de página personalizada
  2. Asignar esa plantilla a una Página


El primer paso requiere un poco de esfuerzo. El segundo paso lo puedes no debería ni ser un paso, porque es directo. Ahora, puedes pensar que es una tontería molestarse con esto, ya que podrías simplemente crear una Página y escribir manualmente tus categorías y listar tus mensajes. Pero a medida que tu blog crece y tienes más contenido, esa es una manera horrible e ineficiente de mantener tus listas por categoría.

Así que, vamos a ello…

Crear una plantilla personalizada

Lo primero es lo primero. Abra su editor de código (a mi personalmente me gusta Brackets.io ) y cree un nuevo archivo dentro de su carpeta de childthemes o de tus “temas hijo” en Genesis. Nómbrala cómo quieras pero yo la llamaré: categorias-template.php porque es descriptivo y sigue la mejor práctica para nombrar un archivo de plantilla.

Puede utilizar el siguiente código para crear una plantilla para página personalizada. Primero publicaré el código y luego repasaré lo que hace.

<?php
/**
 * Template Name: Category Archives
 */
add_action( 'genesis_loop', 'custom_category_loop' );
/**
 * Custom loop that display a list of categories with corresponding posts.
 */
function custom_category_loop() {
 // Grab all the categories from the database that have posts.
 $categories = get_terms( 'category', 'orderby=name&order=ASC');
 // Loop through categories
 foreach ( $categories as $category ) {
 // Display category name
 echo '<h2 class="post-title">' . $category->name . '</h2>';
 echo '<div class="post-list">';
 // WP_Query arguments
 $args = array(
 'cat' => $category->term_id,
 'orderby' => 'term_order',
 );
 // The Query
 $query = new WP_Query( $args );
 // The Loop
 if ( $query->have_posts() ) {
 while ( $query->have_posts() ) {
 $query->the_post();
 ?>
 <p><a href="<?php the_permalink();?>"><?php the_title(); ?></a></p>
 <?php
 } // End while
 } // End if
 echo '</div>';
 // Restore original Post Data
 wp_reset_postdata();
 } // End foreach
}
// Start the engine.
genesis();

Empecemos con la línea 6. Lo único que estoy haciendo aquí es enganchar (hook) una función personalizada (custom_category_loop) al genesis_loop.

En la linea 10 es donde creamos nuestra función personalizada.

Las líneas 11-47 contienen las tripas de la función custom_category_loop.

Estamos haciendo un par de cosas dentro de la función:

  • Línea 13: Selecciona o coge todas las categorías usando la función get_terms() de WordPress y asignar esas categorías a una variable llamada $categories. Voy a usar esas categorías ordenadas por nombre. Revise la documentación get_terms() si desea especificar otros detalles sobre las categorías.
  • Línea 16: Iniciamos un bucle (no el Bucle) que hará un recorrido a través de cada categoría y hará algunas cosas más.
  • Líneas 19-20: Lo primero que hacemos es añadir una pequeña marcación HTML y dar salida al nombre de la categoría. Puede añadir cualquier marca de revisión HTML que desee o cualquier clase CSS que desee.
  • Líneas 22-26: Aquí estamos creando una matriz de argumentos que en breve pasaremos a WP_Query. Esos argumentos básicamente dicen que queremos usar una categoría específica (por su ID y ordenarla de cierta manera). Hay un montón de formas de personalizar el WP_Query, así que consulta el códice de WordPress para obtener más información.
  • Línea 29: Creamos una nueva instancia de WP_Query con los argumentos que acabamos de crear y la asignamos a una variable llamada $query.
  • Líneas 31-40: Aquí viene EL Bucle, el que recorre los posts. Es una declaración simple que dice HEY, SI HAY UN POST, ¡cógelo! Y luego en la línea 36 generamos un poco de HTML, el enlace permanente del mensaje y el nombre del mensaje. Hay muchos detalles que puedes devolver en el bucle, pero eso es todo lo que quería.
  • Línea 42: Cerramos nuestro etiquetado o markup.
  • Línea 45: Aquí estamos siendo buenos ciudadanos de WordPress y llamando a la función wp_reset_postdata(). Desde que agregamos un bucle personalizado, esa función básicamente dice, “Aquí esta todo hecho, sigue con lo que estabas haciendo”
  • Ya casi estamos.

El paso final es llamar a la función genesis() en la línea 51, que básicamente dice, HEY GENESIS FRAMEWORK, ¡Estamos listos para que sigas con tu bucle!

Guarda el archivo ( importantísimo), recuerda que estamos dentro del childtheme, es decir, dentro de nuestro tema no dentro de “Genesis” que sería el framework, esta carpeta no se toca nunca.

Es decir, el archivo categorias-template.php estaría a la misma “altura” que functions.php y style.css.

Asignar la plantilla a una página.

¡Te dije que esta era la parte fácil y no estaba mintiendo! Ve a crear una nueva Página en tu sitio de WordPress. Hay un metabox en la página llamado Atributos de página (normalmente en algún lugar del lado derecho de la pantalla cuando estás en el editor de páginas).

modificar atributos de pagina en wordpress

Verás la plantilla personalizada en el menú desplegable Plantilla. Selecciónelo.

Oh sí, ese nombre que ves en el desplegable viene de la Línea 3 de tu archivo de plantilla personalizado.

 * Template Name: Category Archives
Comparte directamente en redes sociales
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp

Deja una respuesta

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

¿Quieres aumentar las visitas a tu web?

Llevamos webs con miles de visitas mensuales y recibiendo contactos cada día. 

Sobre nosotros

Proyecto Alfa es una agencia de marketing digital en Málaga. En este blog es donde hablamos de marketing digital, WordPress, Desarrollo Web y algo más. Disfruta y siéntete libre de comentar e involucrarte.

Suscríbete a nuestro newsletter
Entradas recientes
Busca en nuestro blog
No perdamos el contacto.
Suscríbete a nuestra Newsletter!
Nada de SPAM ni de emails diarios, lo prometemos.