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
Comenzando nuestro theme
Presentación del curso
Instalando WordPress de forma local
Estructura de Theme de WordPress
Armar estructura del Theme
Armando los archivos de nuestro Theme
Hooks
Agregando de funcionalidades de WordPress a nuestro theme
Asignando theme supports
Registrar y mostrar menúes
Registrando sidebars para nuestros Widgets
Personalizar el Loop de WordPress
Creando un Custom Post Type
Listando nuestros productos
Refactorizando nuestro código
Cierre del curso
Cierre del curso
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 20
Preguntas 8
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.
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:
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?
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.
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.
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.
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.
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.
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
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
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.
 ?>
<?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?
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?