Yo estoy usando Materialize como framework de css y así lo cuadré
;
$productos = new WP_Query($args);
Incorporar un ciclo para mostrar los productos:
if
para verificar que hay productos disponibles.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;
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.
Estilos CSS y Bootstrap:
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>
Enlaces a productos individuales:
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>
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.
Parametrizando el orden:
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'
);
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
Yo estoy usando Materialize como framework de css y así lo cuadré
;
$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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?