WordPress es un gestor de contenido que por definición permite crear y listar el contenido en forma de publicaciones. Esta característica, junto con su sencillez de uso, han hecho de WordPress el sistema ideal para publicar contenido y mostrarlo como uno quiera. Y de eso vamos a hablar hoy: ¿Cómo mostrar una lista organizada de publicaciones creadas en wordpress?.
¿Para qué puedo necesitar listar mis publicaciones en WordPress?
WordPress ya viene configurado para listar publicaciones que vayamos creando. En realidad WordPress es un gestor de contenido pensado para la creación y mantenimiento de blogs. Los blogs se componen de publicaciones –entradas– que creamos a través del menú de administración de WordPress. La gracia del asunto es que además, WordPress me permite crear entradas personalizadas para otros fines, por ejemplo: Clientes, Menús, Reservas, … y todo lo que podamos imaginar. Llegados a este punto, en WordPress debemos diferenciar entre las publicaciones normales – posts – y las publicaciones personalidas – custom post types –.
Aunque WordPress fue creado inicialmente como un gestor de contenido para blogs, la mayoría de la gente lo usa para publicar páginas y otros tipos de contenido. Por ejemplo, un restaurante usa WordPress para mostrar su carta digital, una clínica para mostrar su sistema de reservas, una inmobiliaria para mostrar sus propiedades en venta, y así con todo…
Luego respondiendo a la pregunta de para que necesito mostrar mis publicaciones en WordPress y sabiendo que las publicaciones pueden ser personalizadas, está claro que si soy una empresa llegará un día en que quiera que mis clientes encuentren la información que publique. Para entenderlo mejor, vamos a suponer que somos un restaurante y necesitamos mostrar nuestra carta digital a través de WordPress.
Mostrar carta digital a través de WordPress
Listar publicaciones en wordpress consta de 3 partes, que se resumen a continuación:
En primer lugar, empezamos por crearnos nuestro custom post type, a partir de ahora CPT, que se llamará menu. Lo podemos hacer de manera manual, es decir por código, pero para no complicarnos mucho utilizaré el plugin Custom Post Type UI.
Por otra parte, cada plato del menú tendrá: un nombre, una imagen representativa del plato, una descripción, un precio y una lista de alérgenos. Para configurar todo esto utilizamos el plugin Advanced Custom Fields.
Por último, necesitamos crear las páginas necesarias para listar nuestros platos en forma de menús, y esto se hace mediante el sistema de plantillas que ofrece WordPress.
Crear Custom Post Type: menu en WordPress
En primer lugar descargamos e instalamos el plugin Custom Post Type UI. En la pantalla de configuración del plugin indicamos el slug escrito en minusculas y un nombre en plural y otro en singular.
Picamos en el enlace «Relleno automático de las etiquetas» para no tener que rellenar el resto de los campos. Hacemos scroll hasta abajo. El campo «Has Archive» lo ponemos a verdadero y marcamos la casilla «Categorías»
Haciendo todos los cambios, nos aparecerá nuestro CPT en el menú de administración de WordPress.
Crear custom fields para los menus
Al igual que antes descargamos e instalamos el plugin Advanced Custom Fields. Hecho esto, creamos dos grupos de campos. Los grupos de campos definen las reglas donde vamos a mostrar nuestros custom fields. El grupo de las categorías definen las imágenes que muestra cada categoría y el grupo platos definen: el precio, la lista de alérgenos y la foto del plato.
GRUPO DE LAS CATEGORÍAS
El campo imagen, queda definido como un array y un nombre de campo «imagen_destacada». Es importante no olvidarse de indicar que el grupo de campos se mostrara en aquellas taxonomías que sean categorías.
Grupo de los platos
Se definen el precio, la lista de alérgenos y una foto del plato. Al igual que antes indicamos que esta configuración se aplique en los posts del tipo menu.
Definimos el campo precio como texto y el campo foto como imagen que se devuelve en forma de array. El campo Lista de alérgenos es de tipo grupo y dentro metemos otro campo «Alérgenos» que es de tipo checkbox con la lista de opciones disponibles.
Recapitulando, con los dos grupos que hemos creado conseguimos personalizar nuestros custom post types usando los custom fields.
Configuración de las plantillas de WordPress para el listado de entradas
Para mostrar nuestro resultado en la web necesitamos definir dos pantallas de navegación. En la primera pantalla, el usuario accede a una lista de categorías.
De la lista de categorías el usuario accede a la lista de platos de la categoría seleccionada.
Configuración del archivo Archive.php
Este archivo, por defecto, es el responsable de mostrar la lista de todos los platos que hayamos publicado en el menú. Pero queremos cambiarlo para que cuando tecleemos: http://nuestrodominio.com/menu, nos muestre una lista de todas las categorías, es decir: bebidas, carnes, pescados, etc… Para que el cambio de su configuración solo afecte a la lista de menús, cambiamos el nombre por archive-menu.php, donde menu es el slug del CPT. Si no lo hacemos, los cambios que hagamos en el archivo repercutirán en las entradas del blog y/o cualquier otro contenido que tengamos definido en WordPress.
Seleccionamos el término de la categoría actual.
// Obtenemos el id del término de la categoría actual
$term = get_queried_object();
$term_id = ( isset( $term->term_id ) ) ? (int) $term->term_id : 0;
Definimos el tipo de taxonomía que vamos a filtrar
$categories = get_categories( array(
'taxonomy' => 'category', // Definimos el típo de taxonomía, en nuestro caso es 'category'
'orderby' => 'name', //Ordenamos por nombre
'parent' => 0,
'hide_empty' => 0, // Cambia a 1 parar ocultar categorías que no tengan ningun post
) );
Mostramos las categorías
foreach ( $categories as $category )
{
$cat_ID = (int) $category->term_id;
$category_name = $category->name;
// Cuando se visualice una categoria le aplicamos una clase
$cat_class = ( $cat_ID == $term_id ) ? 'active' : 'not-active';
// No mostramos la categoría 'uncategorized'
if ( strtolower( $category_name ) != 'uncategorized' )
{
?>
<div class="col-md-4">
<figure class="figure card <?php echo $cat_class; ?>" style="width: 18rem;">
<figcaption class="figure-caption card-body" >
<?php
$image_category = get_field('imagen_destacada', $category->taxonomy . '_' . $category->term_id );
?>
<img class="card-img-top" src="<?php echo $image_category['url']; ?>" alt="<?php echo $image_category['alt']; ?>">
<h2 class="card-title"><?php echo $category->name; ?></h2>
<p class="card-text"><?php echo $category->description; ?></p>
<a href="<?php echo esc_url( get_category_link( $category->term_id ) ); ?>" class="btn btn-primary stretched-link"><?php echo $category->name; ?></a>
</figcaption>
</figure>
</div>
<?php
}
}
En el código de arriba, la línea 17 muestra el custom field «imagen_destacada» a través de la función get_field(). El código completo quedaría así:
<?php
/**
* The template for displaying category list.
* Template Name: Category page
*
* @link https://codex.wordpress.org/Template_Hierarchy
*
* @package Restaurant_and_Cafe
*/
get_header(); ?>
<?php
// Obtenemos el id del término de la categoría actual
$term = get_queried_object();
$term_id = ( isset( $term->term_id ) ) ? (int) $term->term_id : 0;
$categories = get_categories( array(
'taxonomy' => 'category', // Definimos el típo de taxonomía, en nuestro caso es 'category'
'orderby' => 'name', //Ordenamos por nombre
'parent' => 0,
'hide_empty' => 0, // Cambia a 1 parar ocultar categorías que no tengan ningun post
) );
?>
<?php
foreach ( $categories as $category )
{
$cat_ID = (int) $category->term_id;
$category_name = $category->name;
// Cuando se visualice una categoria le aplicamos una clase
$cat_class = ( $cat_ID == $term_id ) ? 'active' : 'not-active';
// no mostramos la categoría 'uncategorized'
if ( strtolower( $category_name ) != 'uncategorized' )
{
?>
<div class="col-md-4">
<figure class="figure card <?php echo $cat_class; ?>" style="width: 18rem;">
<figcaption class="figure-caption card-body" >
<?php
$image_category = get_field('imagen_destacada', $category->taxonomy . '_' . $category->term_id );
?>
<img class="card-img-top" src="<?php echo $image_category['url']; ?>" alt="<?php echo $image_category['alt']; ?>">
<h2 class="card-title"><?php echo $category->name; ?></h2>
<p class="card-text"><?php echo $category->description; ?></p>
<a href="<?php echo esc_url( get_category_link( $category->term_id ) ); ?>" class="btn btn-primary stretched-link"><?php echo $category->name; ?></a>
</figcaption>
</figure>
</div>
<?php
}
}
wp_reset_postdata();
?>
<!-- #primary -->
<?php
get_footer();
Configuración del archivo category.php
Este archivo es el responsable de mostrar todos los elementos que hay dentro de una categoría. Como en este caso, el listado de las entradas para diferentes categorías es idéntico, no es necesario cambiar el nombre del archivo como hicimos en el caso anterior.
<?php
/**
* The template for displaying category list.
* Category Template: Menu
* @link https://codex.wordpress.org/Template_Hierarchy
*
* @package Restaurant_and_Cafe
*/
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="container">
<div class="row">
<div class="col-12">
<?php
//Almacenamos la categoría seleccionada
$term = get_term_by('name', single_cat_title('',false), 'category');
//Creamos la consulta
$args = array(
'post_type' => 'menu',// Este es tu custom post type,
'orderby' => 'post_date',
'order' => 'DESC',
'category_name' => $term->slug,
);
$the_query = new WP_Query($args);
//Mostramos los resultados
if($the_query->have_posts()):
while($the_query->have_posts()): $the_query->the_post();
//<?php echo the_permalink(); --> Esto va en el enlace ?>
<a href="<?php echo the_permalink();?>">
<figure class="figure">
<?php
//Mostramos la imagen destacada
the_post_thumbnail( 'medium',array('class' => 'figure-img img-fluid rounded') );
?>
<figcaption class="figure-caption">
<h2><?php the_title(); ?></h2>
<p><?php the_content(); ?></p>
<hr>
<!-- Mostramos los custom fields relativos a las entradas -->
<p style="text-align: right;">Precio: <?php the_field('precio'); ?></p>
<?php
$alergenos = get_field('lista_de_alergenos');
if( $alergenos ): ?>
<ul class="lista">
<?php
if( $alergenos['alergenos'] && in_array('Contiene gluten', $alergenos['alergenos']) ) {
// Do something.
?>
<li><img src="http://localhost/restaurante/wp-content/uploads/2020/05/gluten.png"></li>
<?php
}
if( $alergenos['alergenos'] && in_array('Crustaceos', $alergenos['alergenos']) ) {
// Do something.
?>
<li><img src="http://localhost/restaurante/wp-content/uploads/2020/05/crustaceos.png"></li>
<?php
}
if( $alergenos['alergenos'] && in_array('Huevos', $alergenos['alergenos']) ) {
// Do something.
?>
<li><img src="http://localhost/restaurante/wp-content/uploads/2020/05/huevos.png"></li>
<?php
}
if( $alergenos['alergenos'] && in_array('Pescados', $alergenos['alergenos']) ) {
// Do something.
?>
<li><img src="http://localhost/restaurante/wp-content/uploads/2020/05/pescado.png"></li>
<?php
}
if( $alergenos['alergenos'] && in_array('cacahuetes', $alergenos['alergenos']) ) {
// Do something.
?>
<li><img src="http://localhost/restaurante/wp-content/uploads/2020/05/cacahuetes.png"></li>
<?php
}
if( $alergenos['alergenos'] && in_array('Soja', $alergenos['alergenos']) ) {
// Do something.
?>
<li><img src="http://localhost/restaurante/wp-content/uploads/2020/05/soja.png"></li>
<?php
}
if( $alergenos['alergenos'] && in_array('Lácteos', $alergenos['alergenos']) ) {
// Do something.
?>
<li><img src="http://localhost/restaurante/wp-content/uploads/2020/05/lacteos.png"></li>
<?php
}
if( $alergenos['alergenos'] && in_array('Frutos de cascara', $alergenos['alergenos']) ) {
// Do something.
?>
<li><img src="http://localhost/restaurante/wp-content/uploads/2020/05/frutos-cascara.png"></li>
<?php
}
if( $alergenos['alergenos'] && in_array('Apio', $alergenos['alergenos']) ) {
// Do something.
?>
<li><img src="http://localhost/restaurante/wp-content/uploads/2020/05/apio.png"></li>
<?php
}
if( $alergenos['alergenos'] && in_array('Mostaza', $alergenos['alergenos']) ) {
// Do something.
?>
<li><img src="http://localhost/restaurante/wp-content/uploads/2020/05/mostaza.png"></li>
<?php
}
if( $alergenos['alergenos'] && in_array('Sesamo', $alergenos['alergenos']) ) {
// Do something.
?>
<li><img src="http://localhost/restaurante/wp-content/uploads/2020/05/sesamo.png"></li>
<?php
}
if( $alergenos['alergenos'] && in_array('Molúscos', $alergenos['alergenos']) ) {
// Do something.
?>
<li><img src="http://localhost/restaurante/wp-content/uploads/2020/05/moluscos.png"></li>
<?php
}
if( $alergenos['alergenos'] && in_array('Altramuces', $alergenos['alergenos']) ) {
// Do something.
?>
<li><img src="http://localhost/restaurante/wp-content/uploads/2020/05/altramuces.png"></li>
<?php
}
if( $alergenos['alergenos'] && in_array('Sulfitos', $alergenos['alergenos']) ) {
// Do something.
?>
<li><img src="http://localhost/restaurante/wp-content/uploads/2020/05/sulfitos.png"></li>
<?php
}
?>
</ul>
<?php endif; ?>
</figcaption>
</figure>
</a>
<?php
endwhile;
endif;
wp_reset_postdata();
?>
</div>
</div>
</div>
</main><!-- #main -->
</div><!-- #primary -->
<?php
get_footer();
Página de presentación del plato.
Esta página se configura a través del archivo page.php, pero como no queremos que las modificaciones se apliquen a todas las páginas de nuestro sitio web, podemos crear una plantilla específica o generica. En mi caso se ha creado sobre una plantilla genérica indicándolo en el comentario del archivo con la linea Template Name: Nombre-de-la-plantilla. Su configuración es como la de cualquier otro archivo relativo a nuestro tema.
Con todo esto, he intentado describir los pasos necesarios para aprender listar publicaciones en wordpress. Es un proceso largo y no descarto que haya cometido errores al escribirlo, por lo que os invito a que comentéis esta publicación en caso de duda o corrección. Y si necesitáis contactar conmigo estoy a vuestra entera disposición.
Un saludo a todos y …
Happy coding