No tienes acceso a esta clase

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

Listando nuestros productos

11/13
Recursos

Aportes 20

Preguntas 8

Ordenar por:

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

Tienen este curso como “básico” pero no es tan básico. Se necesita conocimiento en PHP para que la clase no sea tan complicada

La verdad me ha costado mucho este curso, incluso habiendo cursado previamente los de PHP. El profesor hace una cantidad de acciones que no explica por que o para que, al igual que varias funcionalidades.

Mi avance.

11. Listando nuestros productos

En este clase aprendimos cómo listar nuestros productos desde la página de index.php:

<?php get_header(); ?>

<?php if (have_posts()) { ?>
    <?php while (have_posts()) { the_post(); ?>
        <?php the_content(); ?>
    <?php } ?>
<?php } ?>

<?php

$args = array(
    "post_type" => array("producto"),
    //-1 significa infinitos posts, es decir, todos
    "posts_per_page" => -1,
);

$productos = new WP_Query($args);
?>

<div class="productos__container">
    <?php if($productos->have_posts()){ ?>
        <?php while($productos->have_posts()){ $productos->the_post();?>
    <div class="productos__card">
        <?php the_post_thumbnail("post-thumbnail")?>
        <div class="producto__caption">
            <div class="productos__desc">
                <a class="producto__link" href="<?php the_permalink(); ?>">
                    <h4 class="productos__titulo"><?php the_title()?></h4>
                </a>
            </div>
        </div>
    </div>
    <?php }?>
    <?php }?>
</div>

<?php get_footer(); ?>

Además hicimos un nuevo archivo php llamado single.php, el cual será llamado toda vez que se abra una nueva página de un producto:

<?php get_header(); ?>

<?php if (have_posts()) { ?>
    <?php while (have_posts()) { the_post(); ?>
        <div class="container">
            <div class="row">
                <div class="col-12 col-md-6">
                    <?php the_content(); ?>
                </div>
                <div class="col-12 col-md-6">
                    <?php the_post_thumbnail("large"); ?>
                </div>
            </div>
        </div>
    <?php } ?>
<?php } ?>

<?php get_footer(); ?>

Nota:

En esta clase también se tocó Boostrap la cual es una librería de CSS, lo cual es un conjunto de funcionalidades listas para usar de CSS, en este caso pueden leer más al respecto aquí con este video tutorial de Youtube o sino con la Documentación oficial de Boostrap.


Referencias documentación WordPress:

https://developer.wordpress.org/reference/classes/wp_query/

Estas son las medidas de las imágenes que tenemos a disposición utilizando la función the_post_thumbnail():

  • the_post_thumbnail (‘miniatura’); // Miniatura (150 x 150 recortada)

  • the_post_thumbnail (‘medio’); // Resolución media (300 x 300 altura máxima 300px)

  • the_post_thumbnail (‘mediana_grande’); // Resolución mediana grande (agregada en WP 4.4) (768 x 0 altura infinita)

  • the_post_thumbnail (‘grande’); // Gran resolución (1024 x 1024 altura máxima 1024px)

  • the_post_thumbnail (‘completo’); // Resolución completa (tamaño original subido)

Tomado de: https://developer.wordpress.org/reference/functions/the_post_thumbnail/

Tengo una duda, puede parecer tonta pero nunca habia usado esto antes. Si quiero hacer distintas páginas con distintos estilos, ¿en dónde se agregan los estilos para otras páginas?

Apuntes

Listando nuestros productos en WordPress

Una vez que se ha creado un Custom Post Type en WordPress, es necesario mostrar los productos en el sitio web. A continuación, se explican los pasos para listar los productos en un tema de WordPress.

Creando una consulta de productos

Para listar los productos en WordPress, se utiliza la clase WP_Query. En el archivo archive-producto.php, se puede crear una consulta personalizada para obtener los productos.

<?php
    $productos = new WP_Query( array(
        'post_type' => 'producto',
        'posts_per_page' => -1,
    ) );

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

En este ejemplo, se crea una consulta personalizada de productos utilizando la clase WP_Query. Se especifica el tipo de contenido (post_type) como producto y se establece el número de publicaciones por página (posts_per_page) en -1 para obtener todos los productos.

Mostrando la información del producto

Una vez que se ha creado la consulta personalizada, se puede mostrar la información de cada producto utilizando las funciones de WordPress, como the_titlethe_post_thumbnail y the_permalink.

<div class="producto">
    <a href="<?php the_permalink(); ?>">
        <?php the_post_thumbnail( 'thumbnail' ); ?>
        <h2 class="producto-titulo"><?php the_title(); ?></h2>
    </a>
</div>

En este ejemplo, se crea un contenedor HTML para cada producto. Se utiliza the_permalink para agregar un enlace a la página individual del producto, the_post_thumbnail para mostrar la imagen destacada del producto en tamaño de miniatura y the_title para mostrar el título del producto como un encabezado de nivel 2.

Refrescando los enlaces permanentes

Después de crear un nuevo Custom Post Type, es posible que sea necesario refrescar los enlaces permanentes para que los productos aparezcan correctamente en el sitio web. Para hacer esto, es necesario ir al panel de administración de WordPress y navegar a Configuración > Enlaces permanentes. Una vez allí, simplemente haga clic en el botón “Guardar cambios” para actualizar los enlaces permanentes.

Mostrando la página individual del producto

Para mostrar la página individual del producto, se puede crear un archivo single-producto.php. Utilice la función the_single para mostrar el contenido de la página individual del producto.

<?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
?>
<div class="producto-single">
    <?php the_post_thumbnail( 'large' ); ?>
    <h1 class="producto-titulo"><?php the_title(); ?></h1>
    <div class="producto-contenido">
        <?php the_content(); ?>
    </div>
</div>
<?php
        endwhile;
    endif;
?>

En este ejemplo, se crea una plantilla para la página individual del producto. Se utiliza the_post_thumbnail para mostrar la imagen destacada del producto en tamaño grande, the_title para mostrar el título del producto como un encabezado de nivel 1 y the_content para mostrar el contenido del producto.

Conclusión

Listar los productos en WordPress es una tarea sencilla que se puede realizar utilizando la clase WP_Query y las funciones de WordPress como the_titlethe_post_thumbnail y the_permalink. Al agregar el código correspondiente en el archivo archive-producto.php y single-producto.php, se puede mostrar la información del producto en el sitio web. Al utilizar Custom Post Types y plantillas personalizadas, se pueden crear fácilmente páginas de producto personalizadas en el sitio web de WordPress.

LikeDislikeShare

Listando Post type

Para listar por ejemplo una lista de productos creados por post type, se requiere remplazar el contenido estático por un ciclo que presente los productos

para ellos se hace uso de un objeto el cual a partir de un Query se puede traer información de páginas, entradas, post type, etc. index.php

	<?php
	
	$args = array(
	    "post_type" => array("producto"),
	    //Mostrar todos los post disponibles
	    "posts_per_page" => -1,
	);
	
	$productos = new WP_Query($args);
?>

Crear ciclo mostrando los productos contenidos en el objeto con php y html.

<div class="productos__container">
  <?php if($productos->have_posts()){
      while($productos->have_posts()){ $productos->the_post();?>
          <div class="productos__card">
              <?php the_post_thumbnail("post-thumbnail")?>
              <div class="producto__caption">
                  <div class="productos__desc">
                      <a class="producto__link" href="<?php the_permalink(); ?>">
                          <h4 class="productos__titulo"><?php the_title()?></h4>
                      </a>
                  </div>
              </div>
          </div>
      <?php }
  } ?>
</div>

Por último se debe configurar su visualización como post individual en un archivo single.php

<?php get_header() ?>

<?php if (have_posts()) { ?>
    <?php while (have_posts()) { the_post(); ?>
        <br>
        <div class="container">
            <div class="row">
                <div class="col-12 col-md-6">
                    <?php the_content(); ?>
                </div>
                <div class="col-12 col-md-6">
                    <?php the_post_thumbnail("large"); ?>
                </div>
            </div>
        </div>
    <?php } ?>
<?php } ?>

<?php get_footer(); ?>

Referencias: WP_Query | Class | WordPress Developer Resources

Lo mas recomendable es ir por un curso basico de php para tener siempre la logica como funciona esta logica de programación.
Realice los cursos de PHP basicos, fundamentales y de integracion con HML, pero wow... que curso tan horrible es este. Literalmente lo repeti 3 veces y pffff no se si yo estuve mas lento que la computadora del profesor pero nha... no aguanta.
hay vamos ![](https://static.platzi.com/media/user_upload/image-79810ffa-903c-407f-a024-3240ee298412.jpg)

OLA AMI ME DAN SUBRAYADO EL ARCHIVO FUNCTION PHP .LO DE ADENTRO (CODIGO)
OSEA VISUAL ESTUDIO ME SUBRAYA EN ROJO CASI TODO
SOLUCION?

Crear una Single Page

Visualizar la card de manera dinámica

Imprimir los post type

Llamar a los Post Type

A mí no me funcionaba el tamaño miniatura, que debe ser 150x150px debido a que el profesor puso

<?php the_post_thumbnail("post-thumbnail") ?>

según la documentación tiene que ser

<?php the_post_thumbnail('thumbnail'); ?>

Documentación
PD: aunque la documentación dice que sin parámetro es thumbnail no me funciono

Hasta aquí el avance, hay mucho código que se va sustituyendo de forma estatica a dinamica, mi recomendacion seria que agregue una pequeña nota de que es lo que hace cada pieza de código para que se puedan acordar facilmente despues.

![Home page](

![Producto](

index.php

<!-- Conectar archivo header.php con la pagina principal -->
<?php get_header() ?>

<?php if(have_posts()){ ?>
<?php while(have_posts()){ the_post(); ?>
<?php the_content(); ?>
<?php } ?>
<?php } ?>


<?php 

    $args = array(
        "post_type" => array("producto"),
        "posts_per_page" => -1
    );

    $productos = new WP_Query($args);
?>

<div class="productos__container">
    <?php if($productos->have_posts()){ ?>
        <?php while($productos->have_posts()){ $productos->the_post();?>
        <div class="productos__card">
            <?php the_post_thumbnail("post-thumbnail") ?>
            <div class="producto__caption">
                <div class="productos__desc">
                    <a class="producto__link" href="<?php the_permalink();?>">
                        <h4 class="productos__titulo"><?php the_title(); ?></h4>
                    </a>
                </div>
            </div>
        </div>
        <?php } ?>
    <?php } ?>
</div>

<!-- Conectar archivo footer.php con la pagina principal -->
<?php get_footer() ?>

productos - single.php

<?php get_header() ?>

<?php if(have_posts()){ ?>
<?php while(have_posts()){ the_post(); ?>
    <div class="container">
        <div class="row">
            <h1 class="productos__titulo"> <?php the_title();?> </h1>
            <div class="col-12 col-md-6">
                <?php the_content(); ?>
            </div>
            <div class="col-12 col-md-6">
                <?php the_post_thumbnail("large"); ?>
            </div>
        </div>
    </div>
<?php } ?>
<?php } ?>

<?php get_footer(); ?>

mi avance

Dónde puedo ver las opciones de bootstrap?