Personalizar el Loop en la página principal

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/

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