Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Personalizar el Loop en la página principal

26/34
Recursos

Aportes 54

Preguntas 13

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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>

Aquí esta el reto

Quedo así maestro…

ya casi!

El mo quedo asi

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

Así voy… Se ve muy lindo

<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:

(

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

😀

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?

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/

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