No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Listando nuestros productos

11/13
Recursos

Aportes 16

Preguntas 7

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Tienen este curso como 鈥渂谩sico鈥 pero no es tan b谩sico. Se necesita conocimiento en PHP para que la clase no sea tan complicada

Mi avance.

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.

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 (鈥榤iniatura鈥); // Miniatura (150 x 150 recortada)

  • the_post_thumbnail (鈥榤edio鈥); // Resoluci贸n media (300 x 300 altura m谩xima 300px)

  • the_post_thumbnail (鈥榤ediana_grande鈥); // Resoluci贸n mediana grande (agregada en WP 4.4) (768 x 0 altura infinita)

  • the_post_thumbnail (鈥榞rande鈥); // Gran resoluci贸n (1024 x 1024 altura m谩xima 1024px)

  • the_post_thumbnail (鈥榗ompleto鈥); // Resoluci贸n completa (tama帽o original subido)

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

ha este curso le falta mas explicaciones, se enreda hasta el profesor. este curso es muy acelerado para aprender a realizar un tema, falta muchas otras cosas que aqui no se aclaran. yo recomiendo primero empezar entendiendo programacion basica, html y css, javascript, faltan muchos conceptos en este curso, para mi este curso va dejar mas enredado a la gente que recien comienza en el mundo de wordpress y a crear un tema.
les falta mucho en los cursos que he visto aqui el por que se hacen las cosas, y por que de cada instruccion, o no se maneja bien el profesor o le dan a la cundidora no mas. para mi es perdida de tiempo y plata en una suscripcion.

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?

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

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_title,聽the_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 鈥淕uardar 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_title,聽the_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

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(); ?>

D贸nde puedo ver las opciones de bootstrap?