Comprender las bases y el punto de partida

1

Bienvenida y recomendaciones

2

¿Cómo es un entorno de desarrollo profesional en WordPress?

3

Presentación del proyecto y repaso del curso de fundamentos

Crear Post Types y Archivos

4

¿Cómo se crea y se personaliza una categoría en WordPress?

5

Creemos la UI de un archivo en la web

6

¿Por qué es importante la navegabilidad de la web y cómo se mejora?

7

¿Qué es un Post Type y cómo se pueden personalizar los diferentes tipos?

8

¿Cómo creamos la UI de un Post Type personalizado?

9

Construyamos un loop personalizado

10

¿Qué es una taxonomía y cómo se registra una nueva?

11

¿Qué es un page template y cómo se utiliza?

Utilizar AJAX

12

¿Cómo funcionan los emails en WordPress?

13

¿Cómo utilizar AJAX dentro de WordPress?

14

Empecemos a construir un filtro dinámico para la web

15

Completemos la función AJAX para darle vida a nuestro filtro

La REST-API de WordPress

16

¿Cómo se utiliza la REST-API de WordPress?

17

¿Qué son y cómo funcionan los endpoints?

18

Hagamos el primer llamado a la API

Utilizar Bloques

19

¿Qué es un bloque de Gutenberg?

20

Creando un bloque nativo con React

21

Optimicemos el bloque con componentes de WordPress

22

Creemos el primer bloque dinámico

23

Mejorando la experiencia del usuario en Gutenberg con SSR (Server Side Render)

24

Creando bloques con ACF Pro

25

Crea un bloque igual al de ACF pero de forma nativa

Deployment

26

¿Cómo se lleva un sitio a producción?

27

¿Cómo podemos optimizar la indexación y el SEO de nuestro sitio?

28

¿Cómo defiendo a mi sitio de ataques externos y lo hago más seguro?

Finalizar el Curso

29

Conclusiones

No tienes acceso a esta clase

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

Construyamos un loop personalizado

9/29
Recursos

Aportes 19

Preguntas 6

Ordenar por:

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

Hola. Comparto mi código para que el loop de los productos relacionados no muestre el producto que se está visualizando actualmente. Para lograrlo utilice el hook get_the_ID y una sentencia IF.

  <!-- Productos Relacionados -->
  <?php
    $ID_producto_actual = get_the_ID();
    $args = array(
      'post_type'       => 'producto',
      'posts_per_page'  => 6,
      'order'           => 'ASC',
      'orderby'         => 'title'
    );
    // En la siguiente variable se define el contenido
    // que vamos a solicitar a la base de datos, a través
    // del array de argumentos previamente definidos.
    // Ahora la variable $productos es un objeto con la configuración
    // necesaria para solicitar contenido.
    $productos = new WP_Query($args);
  ?>
  <!-- Ejecutar el loop con el objeto $productos -->
  <?php if($productos->have_posts()) { ?>
    <div class="row justify-content-center productos-relacionados">
      <div class="col-12">
        <h3 class="my-3 text-center">Productos relacionados</h3>
      </div>
      <?php while($productos->have_posts()) { ?>
        <?php $productos->the_post(); ?>
        <?php if(get_the_ID() != $ID_producto_actual) { ?>
          <div class="col-2 my-3 text-center">
            <?php the_post_thumbnail('thumbnail'); ?>
            <h4>
              <a href="<?php the_permalink(); ?>">
                <?php the_title(); ?>
              </a>
            </h4>
          </div>
        <?php } ?>
      <?php } ?>
    </div>
  <?php } ?>

Espero que les sea de utilidad. Saludos!

Comparto mi código, que resume lo que se hizo en la clase y las adecuaciones propuestas.

<?php get_header(); ?>
<main class="container">
    <h1><?php the_title(); ?></h1>

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

    <div class="row my-5">
        <div class="col-md-6 col-12">
            <?php the_post_thumbnail('large')?>
        </div>
        <div class="col-md-6 col-12">
            <?php the_content();?>
        </div>
    </div>
    <?php }
        } ?>
        <?php $ID_producto_actual = get_the_ID(); ?>
        <?php $args = array(
            'post_type' => 'producto',
            'posts_per_page' => -1,
            'post__not_in'   => array($ID_producto_actual),
            'order'     => 'ASC',
            'orderby' => 'title'
        );
        $productos = new WP_Query($args); ?>
        <?php if ($productos->have_posts()) { ?>
        <div class="row text-center justify-content-center productos-relacionados">
            <div class="col-12">
                <h3>Productos relacionados</h3>
            </div>
            <?php while($productos->have_posts()) { ?>
                <?php $productos->the_post(); ?>
                <div class="col-md-2 col-12 my-3 text-center">
                    <figure><?php the_post_thumbnail('thumbnail'); ?></figure>
                    <h4 class='my-2'>
                        <a href="<?php the_permalink();?>">
                            <?php the_title(); ?>
                        </a>
                    </h4>
                </div>
            <?php } ?>
        </div>
        <?php } ?>
</main>
<?php get_footer(); ?>```

una mejor manera de hacer la parte del loop es el siguiente:

<?php if(have_posts()): ?>
        <?php while(have_posts()): the_post(); ?>
            <h1 class="my-3"><?php the_title();?></h1>

            <p class=""><?php the_content();?></p>
        <?php endwhile;?>
    <?php endif; ?>

es más fácil de leer, se comprende y no se te pierden las llaves de apertura y cierre de php.

Se le pueden pasar unos cuantos argumentos al construcctor de WP_Query

Les comparto el código ya integrando la opción que Carlos Betancourt dió:

<?php get_header(); ?>

<main class='container'>
        <h1> <?php the_title(); ?> </h1>

        <?php if (have_posts()) {
          while (have_posts()) {
            the_post(); ?>
        <div class="row my-5">
          <div class="col-md-6 col-12">
            <?php the_post_thumbnail('large'); ?>
          </div>
          <div class="col-md-6 col-12">
            <?php the_content(); ?>
          </div>
        </div>
        <?php
    $ID_producto_actual = get_the_ID();
    $args = array(
      'post_type'       => 'producto',
      'posts_per_page'  => 3,
      'order'           => 'ASC',
      'orderby'         => 'title'
    );
    // En la siguiente variable se define el contenido
    // que vamos a solicitar a la base de datos, a través
    // del array de argumentos previamente definidos.
    // Ahora la variable $productos es un objeto con la configuración
    // necesaria para solicitar contenido.
    $productos = new WP_Query($args);
  ?>
  <!-- Ejecutar el loop con el objeto $productos -->
  <?php if($productos->have_posts()) { ?>
    <div class="row text-center justify-content-center productos-relacionados">
      <div class="col-12">
        <h3 class="my-3 text-center">Producto relacionado</h3>
      </div>
      <?php while($productos->have_posts()) { ?>
        <?php $productos->the_post(); ?>
        <?php if(get_the_ID() != $ID_producto_actual) { ?>
          <div class="col-4 my-3 text-center">
            <?php the_post_thumbnail('thumbnail'); ?>
            <h4>
              <a href="<?php the_permalink(); ?>">
                <?php the_title(); ?>
              </a>
            </h4>
          </div>
        <?php } ?>
      <?php } ?>
    </div>
  <?php } ?>

      <?php } ?>
    <?php } ?>
</main>

<?php get_footer(); ?>```

Porque hacemos tantas etiquetas de php?? si todo es codigo php? Gracias!

Hola. Noté que en los productos relacionados también aparece el producto que se está visualizando en ese momento, creo que no debería mostrarse el mismo producto como relacionado de sí mismo.

Para solucionarlo utilice el hook get_the_ID(), el cual lo almacené en la variable $ID_producto_actual; para obtener el ID del producto que se está visualizando actualmente.

Después dentro del while del loop de los productos relacionados; mediante un if pregunto si el ID del producto que se está visualizando es diferente que el ID de todos los productos del post type productos, si es diferente sigue ejecutándose el código, si el ID es igual sale y continúa con los siguientes productos.

Aquí el código:

  <!-- Productos Relacionados -->
  <?php
    $ID_producto_actual = get_the_ID();
    $args = array(
      'post_type'       => 'producto',
      'posts_per_page'  => 6,
      'order'           => 'ASC',
      'orderby'         => 'title'
    );
    // En la siguiente variable se define el contenido
    // que vamos a solicitar a la base de datos, a través
    // del array de argumentos previamente definidos.
    // Ahora la variable $productos es un objeto con la configuración
    // necesaria para solicitar contenido.
    $productos = new WP_Query($args);
  ?>
  <!-- Ejecutar el loop con el objeto $productos -->
  <?php if($productos->have_posts()) { ?>
    <div class="row justify-content-center productos-relacionados">
      <div class="col-12">
        <h3 class="my-3 text-center">Productos relacionados</h3>
      </div>
      <?php while($productos->have_posts()) { ?>
        <?php $productos->the_post(); ?>
        <?php if(get_the_ID() != $ID_producto_actual) { ?>
          <div class="col-2 my-3 text-center">
            <?php the_post_thumbnail('thumbnail'); ?>
            <h4>
              <a href="<?php the_permalink(); ?>">
                <?php the_title(); ?>
              </a>
            </h4>
          </div>
        <?php } ?>
      <?php } ?>
    </div>
  <?php } ?>

Espero les sea útil. Saludos!!!

No es una mala práctica poner un loop dentro de otro loop? ademas ni siquiera se usó la función wp_reset_query creo que puede terminar dando resultados extraños en un template más complejo

que bueno poder mostrar los productos relacionados, hasta ahora nada nuevo en este curso vs el de curso practico de wp

Cuando se trata de elegir qué plantillas usar para cada página, lo primero que hará WordPress es verificar qué tema estás usando. Cada tema incluye su propio conjunto de archivos de plantilla que tendrá prioridad sobre todos los demás. Eso es parte de lo que llamamos la «jerarquía de plantillas» (en inglés, WordPress Hierarchy) de WordPress en acción, que es algo que vamos a explorar en la siguiente sección.

Si intentas cargar la página de una hipotética categoría de hosting, por ejemplo, esto es lo que sucede en segundo plano:

  • WordPress buscará un archivo de plantilla llamado category-hosting.php en el directorio de tu tema actual.

  • Si no hay un archivo category-hosting.php, WordPress buscará uno que use la ID de la categoría en su lugar, como category-2.php.

  • Si WordPress no encuentra ninguna de esas opciones, buscará un archivo genérico category.php en su lugar.

  • Si no encuentra un archivo llamado category.php, WordPress volverá a intentar y buscará la plantilla archive.php.

  • Finalmente, si todo lo demás falla, la plataforma cargará el archivo index.php de tu tema y lo usará como la plantilla de la página.

Aquí les dejo mi nota personal con todos los argumentos que he utilizado, capas encuentras el que necesitas para tu proyecto:

$args = [ //array con los parámetros de Wordpress
	'post_type' => 'post', // nompre del tipo de post 	'post_mime_type' => '', // si el post_type es attachment, en este campo se puede filtrar un tipo de imagen por su mimetype	// Caso multiple array('post', 'page')
	'posts_per_page' => 5, // Cantidad de post que va a mostrar
	'offset' => 0, // De los primeros cuantos va a omitir
	'category' => '', // elegir categoría por id
	'category_name' => '', // elegir categoria por nombre
    'tax_query' => [ // Elegir por termino de una categoria
        'relation' => 'or', // solo requerido si es múltiple        
        [
            'taxonomy' => 'my_custom_taxonomy',
            'terms' => 7,
            'include_children' => false // Remove if you need posts from term 7 child terms
        ],
        [
            'taxonomy' => 'my_custom_taxonomy_2',
            'terms' => 8,
            'include_children' => false // Remove if you need posts from term 7 child terms
        ],        
    ],
	'date_query' => [
		'column' => 'post_date',
		'after' => '2012-04-01',
		'before' => '2012-04-30' 
	], // Filtro por entre fechas de publicación del posts
	'orderby' => 'menu_order', // ordenar segun algo https://developer.wordpress.org/reference/classes/wp_query/#order-orderby-parameters
	'order' => 'desc', // ordenar de forma desc o asc
	'include' => '', // incluir por id cualquier post que no cumplan con el filtro
	'exclude' => '996, 665', // excluir por id
	'meta_key' => '', // filtra por el campo personalizado
	'meta_value' => '', // filtra por el campo personalizado
	'post_parent' => '', // id del post padre
	'author' => '', // filtrar por el id del autor
	'author_name' => '', // filtrar por el nombre del autor
	'post_statusf' => 'publish', // solo las que están publicadas
	'suppress_filters' => true // activa los filtros de correcciones que hace Wordpress de forma automática
];

$myposts = get_posts( $args ); // Agarra toda la informacion de los post

Buenos días, ¿cómo logro que mis otras páginas lean las entradas (categorías)? No logro que las lea

Lucio, estoy pegada en un loop de mis productos y llevo un par de horas buscando el bug ¿me puedes ayudar?

<?php get_header(); ?>
<main class="container">
<h1>Este producto es: <?php the_title(); ?></h1>

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

    <div class="row my-5">
        <div class="col-md-6 col-12">
            <?php the_post_thumbnail('large')?>
        </div>
        <div class="col-md-6 col-12">
            <?php the_content();?>
        </div>
    </div>

    <?php $args = array(
        'post_type' => 'producto',
        'posts_per_page' => 6,
        'order' => 'ASC',
        'orderby' => 'title'
    );
    $productos = new WP_Query($args); ?>
    <?php if($productos->have_posts()){ ?>
        <div class="row justify-content-productos-relacionados">
            <?php while ($productos->have_posts()){ ?>
                <?php $productos->the_posts(); ?>
                <div class="col-2 my-3">
                <?php the_post_thumbnail('thumbnail'); ?>
                </div> 
            <?php } //Cierre while have_post ?>
        </div> 
    <?php } //Cierre del if have_post ?>

    <?php //Cierre del while 
        }
     } //Cierre del if ?>
</main>
<?php get_footer(); ?>```

Todo perfectamente claro. Gracias

Para evitar que se muestre el producto que se está visualizando, lo hice de esta forma más simple:

<?php $ID_producto_actual = get_the_ID(); ?> // Añadí esta linea
                <?php $args = array(
                    'post_type'         => 'producto',
                    'posts_per_page'    => 6,
                    'post__not_in'      => array($ID_producto_actual), // Y aquí un array
                    'order'             => 'ASC',
                    'orderby'           => 'title'
                );

Excelente clase!!

```js <main class="container">

Este producto es:

'producto', 'posts_per_page' => 6, 'order' => 'ASC', 'orderby' => 'title' ); $productos = new WP_Query($args); ?> have_posts()) { ?>
have_posts()) { ?> the_post(); ?>
</main> ```