No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Personalizar el Loop en la página principal

26/35
Recursos

¿Cómo crear una lista de productos en tu sitio web?

Crear una lista de productos bien estructurada en tu sitio web es esencial para mejorar la experiencia del usuario y aumentar las conversiones. En este artículo, explicaremos cómo generar un listado de productos utilizando WordPress, el sistema más usado para la gestión de contenido. Exploraremos el proceso desde la preparación de las imágenes del producto hasta la personalización de la visualización.

¿Cómo preparar los productos y imágenes?

El primer paso para listar productos en tu sitio es asegurar que toda la información de producto esté lista y ordenada en tu CMS preferido. Aquí los pasos:

  1. Añadir nuevos productos:

    • Es necesario que cada producto tenga su propio post en WordPress.
    • En la interfaz de administración de WordPress, crea un nuevo producto con su imagen destacada y contenido descriptivo.
  2. Definir una imagen predeterminada:

    • La imagen del producto es crucial. Asegúrate de elegir una imagen clara y representativa.
    • Puedes subir las imágenes desde la carpeta de archivos del sitio en WordPress.

¿Cómo mostrar los productos en la página principal?

Pasamos ahora al aspecto técnico de cómo mostrar tus productos en la página principal de tu sitio usando PHP y WordPress:

  1. Estructura la sección de productos:

    • Dentro del archivo front-page.php, inserta una nueva sección usando CSS clases para estilizar tu lista de productos.
    • Usa clases como product-list para dar un diseño coherente y estructurado.
  2. Programar el bucle personalizado:

    • Abre una etiqueta <?php y usa la clase WP_Query para manejar la visualización de productos.
    • Define los argumentos de la consulta, estableciendo parámetros como el número de productos a mostrar y su tipo de contenido.
    $args = array(
      'post_type' => 'productos',
      'posts_per_page' => -1
    );
    
    $productos = new WP_Query($args);
    
  3. Incorporar un ciclo para mostrar los productos:

    • Añade un condicional if para verificar que hay productos disponibles.
    • Utiliza un ciclo while para iterar sobre cada producto y desplegar sus datos.
    if ($productos->have_posts()):
      while ($productos->have_posts()): $productos->the_post();
      // Código para mostrar imagen y título aquí
      endwhile;
    endif;
    

¿Cómo estilizar y enlazar los productos?

Después de estructurar el listado de productos, es vital aplicar estilos y añadir enlaces a las páginas individuales de cada producto para mejorar la navegación.

  1. Estilos CSS y Bootstrap:

    • Usa clases Bootstrap para una disposición responsiva. Una fila y columnas (col-md-4) permiten una división equilibrada de la página en desktop.
    <div class="row">
      <div class="col-md-4">
        <!-- Código del producto -->
      </div>
    </div>
    
  2. Enlaces a productos individuales:

    • Genera enlaces dinámicos con la función the_permalink() de WordPress para redirigir a los usuarios a la página específica de cada producto al hacer clic en su título.
    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    

¿Cómo ordenar los productos correctamente?

La correcta ordenación de los productos mejora la usabilidad del sitio. WordPress ofrece parámetros como orderby y order para definir el criterio de orden.

  1. Parametrizando el orden:

    • Usa el parámetro orderby en tu consulta para definir el criterio de orden. Por ejemplo, puedes ordenar por el título para un listado alfabético.
    $args = array(
      'post_type' => 'productos',
      'orderby' => 'title',
      'order' => 'ASC'
    );
    

Inspiración y práctica

Ahora es tu turno. Siéntete libre de experimentar ordenando productos de diferentes maneras o creando diferentes secciones de productos según tus necesidades. Compártenos los resultados en la sección de comentarios y descubre cómo estas estrategias impulsan tu sitio.

Continuar aprendiendo y experimentando es clave para dominar WordPress y ofrecer experiencias excepcionales a tus usuarios. ¡Sigue así y no dudes en innovar!

Aportes 61

Preguntas 16

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Yo estoy usando Materialize como framework de css y así lo cuadré

![](

No se si con el tiempo cambio, pero a mi solo me mostraba un producto por mas que cambiaba el numero de “post_per_page”. Después de tanto buscar, me dio resultado con “posts_per_page”.

Lo comento para ayudar a alguien si le pasa lo mismo.

Excelente contenido, les dejo el código por aqui

<div class="lista-productos my-5">
            <h2 class="text-center">PRODUCTOS</h2>
            <div class="row">
                <?php
                $args = array(
                    'post_type' => 'producto',
                    'post_per_page' => -1,
                    'order' => 'ASC', 
                    'orderby' => 'title',
                );

                $productos = new WP_Query($args);

                if($productos->have_posts()){
                    while($productos->have_posts()){
                        $productos->the_post();
                        ?>

                        <div class="col-4">
                            <figure>
                                <?php the_post_thumbnail('large')?>
                            </figure>
                            <h4 class="my-3 text-center">
                                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                            </h4>
                        </div>
                    <?php }  
                }
                ?>
            </div>
        </div>

Quedo así maestro…

Aquí esta el reto

ya casi!

El curso objetivamente es malísimo. Más que curso debería llamarse tutorial porque no explica absolutamente n ada de lo que está haciendo. Él simplemente escribe, tú copias y listo. Me da la sensación de que Platzi está sacando ‘cursos’ por un tubo sin importar la calidad, simplemente por cubrir materia. Por ahora la ruta de WP está siendo desastrosa. Yo ya se hacer webs en WP pero pensaba que la parte avanzada de la ruta iba a aportar algo interesante y resulta que sigue siendo igual de simple que el resto. Muy mal.

El mo quedo asi

tengo un bug, no me aparece las imagenes con the_post_thumbnail(‘large’) ?

Aquí el link de todos los argumentos que podemos usar el WP_Query()
https://developer.wordpress.org/reference/classes/wp_query/

Así voy… Se ve muy lindo

Las funciones have_posts() y the post() serán métodos de nuestra instacia WP_Query, porque la instancia del objeto $productos tiene definidos en su argumento todos los datos que necesitamos traer.

Hola!! No se si es la mejor manera pero encontré este plugin que nos da la opción de clonar el producto para no tener que hacerlo desde 0. Dejo la info https://ayudawp.com/duplicar-clonar-cualquier-tipo-contenido-wordpress/

<h4>PERSONALIZAR EL LOOP DE LA PAGINA PRINCIPAL</h4>

Añadir nuevo producto>Añadir titulo > Añadir description >Añadir imagen destacada>Publicar

Front-page.php debajo de lo que hicimos antes del cierre de la etiqueta main crear una seccion para la lista de productos

 <div class="lista-productos my-5">
        <h2 class='text-center'>PRODUCTOS</h2>
        <div class="row">
        <?php
        $args = array(
            'post_type' => 'producto',
            'post_per_page' => -1, 
            'order'         => 'ASC',
            'orderby'       => 'title'
        );

        $productos = new WP_Query($args);

        if($productos->have_posts()){
            while($productos->have_posts()){
                $productos->the_post();
                ?>

                <div class="col-4">
                    <figure>
                        <?php the_post_thumbnail('large'); ?>
                    </figure>
                    <h4 class='my-3 text-center'>
                        <a href="<?php the_permalink(); ?>">
                            <?php the_title();?>
                        </a>
                    </h4>
                </div>

           <?php }
        }

        ?>
      </div>
    </div>
</main>

Hola! Alguien me puede ayudar? Quiero colocar una imagen destacada pero no me aparece donde… jajajaja

Así va el mío:

Wow , el proyecto con cada clase va tomando forma. Me encanta el curso.

Aquí mi reto:

(

Cards de Bootstrap.

Después de tanto padecer con cosas que no comprendía, después de haber tenido que repetir todo dos veces, por fin he logrado no solamente avanzar sino también añadir nuevas cosas a mi proyecto, es muy similar, pero estoy tratando de darle mi toque. Y aquí está el resultado.

😀

Muy bueno ! super claro todo.

Hace un año aprendí a hacer plugins, wp_query era en lo que más sufría, teniendo en cuenta también que en ese entonces rercién estaba empezando a progamar en wordpress. No me gustó y al año lo estoy volviendo a aprender con un curso donde me están explicando las bases del porque sucden las cosas. Me está gustando el curso

Challenge accepted:

Super simple, además agregué que al darle clic a la imagen te manda a la página del producto, también quiero agregar un precio para mostrar desde afuera, pero primero quería compartirlo así 😃

front-page.php

<?php get_header(); ?>

<main class="container">
    <?php if(have_posts()){
        while(have_posts()){
            the_post(); ?>
            <h1 class="my-3"><?php the_title(); ?>!!</h1>
            
            <div class="d-flex justify-content-center"><?php the_content(); ?></div>

        <?php }
    } ?>

    <div class="lista-productos my-5">
        <h2 class="text-center">PRODUCTOS</h2>
        <div class="row">
            <?php
                //args para WP_Query(): https://developer.wordpress.org/reference/functions/register_post_type/
                $args = array(
                    'post_type'=> 'producto',
                    'post_per_page' => -1, //esto hace que nos traiga todos
                    'order' => 'DESC',
                    'order_by' => 'title'
                );

                $productos = new WP_Query($args);

                if($productos->have_posts()){
                    while($productos->have_posts()){
                        $productos->the_post(); 
                        ?>

                        <div class="col-4">
                            <div class="card bg-color-primario mb-3">
                                <figure> 
                                    <a href="<?php the_permalink(); ?>"> <?php the_post_thumbnail('large'); ?> </a> </figure>
                                <h4 class="my-3 text-center">
                                    <a class="text-white" href="<?php the_permalink(); ?>">
                                        <?php the_title(); ?>
                                    </a>
                                </h4>
                                <h3 class="text-center text-white">$$$$</h3>
                            </div>
                        </div>

                    <?php }
                }
            ?>
        </div>
    </div>

</main>

<?php get_footer(); ?>

También agregué una clase al css: .bg-color-primario y agregué algunas propiedades que me parecían detalles que afectaban a mi TOC, como el text-decoration en los <a>
CSS:

a,
h1,
h2,
h3,
h4,
li,
p,
span,
ul {
  font-family: Montserrat;
}
.attachment-large {
  max-width: 100%;
  height: auto !important;
}
h1 {
  margin: 50px 0;
  font-weight: 900;
}
ul {
  margin-bottom: 0px;
}
header {
  background-color: #1c3643;
}
header nav li {
  list-style: none;
  display: inline-block;
  padding: 0 15px;
}
header nav li a {
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
}
header nav li a:hover {
  color: #fff;
}
footer {
  background-color: #1c3643;
  padding: 10px 0;
}
footer {
  color: white;
}
footer p {
  margin: 0;
  color: #fff;
}
.lista-productos h2 {
  font-weight: 900;
}
.lista-productos h4 {
  font-weight: 400;
}
.lista-productos h4 a {
  color: #000;
  text-decoration: none;
}
.bg-color-primario {
  background-color: #1c3643;
}

Asi me quedaron los productos.

Buen aporte.

para agregar un botón de compra o de añadir al carrito usé el siguiente bootstrap:
<h2 class=“text-center”><button type=“button” class=“btn btn-primary”>Añadir al carrito</button></h2>

Creo que esto es mucho más fácil en Drupal, se crea una vista por la interfaz y puedo filtrar por el tipo de contenido que quiera y agregar los campos que quiera del tipo de contenido, todo eso sin tocar código

Me ha gustado mucho este curso, no me gustaba wordpress porque sentía muchas limitaciones pero en este curso muestra demasiado la flexibilidad que tiene a través del código y si se aprovecha las ventajas de seo mucho mejor.

Se utilizó la función the_permalink() para los custom post types y para las pages.php internas?

https:gwst.eu

Asi me quedo!!
Imagen

Genial, el proyecto toma más sentido

Genial!! Una pregunta: Cómo se puede agregar paginación?

¿Como puedo hacer que la info que cargue de los productos, aparezcan en ventanas modales ?

Buenas, por algún motivo no me está dejando cargar imagen predeterminada en la taza… alguien sabe si cambió la configuración Wordpress en estos últimos meses? O será error mío?
Gracias!

avanzanda ando… y corrigiendo detalles…

Gracias por la clase. Todo clarísimo.

https:gwst.eu

https:gwst.eu

https:gwst.eu

https:gwst.eu

https:gwst.eu

https:gwst.eu

https:gwst.eu

https:gwst.eu

https:gwst.eu

https:gwst.eu

https:gwst.eu

https:gwst.eu

https:gwst.eu

https:gwst.eu

https:gwst.eu

https:gwst.eu