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

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

8/29
Recursos

¿Cómo diferenciar la interfaz de productos de novedades en WordPress?

En el mundo del desarrollo web, personalizar la interfaz puede marcar una gran diferencia en la experiencia de usuario. En este contenido, te guiaré paso a paso para crear un archivo en WordPress que permitirá diferenciar la interfaz de tus productos de la de tus novedades. ¡Prepárate para potenciar la experiencia visual de tu sitio web!

¿Cómo iniciamos este proceso?

Para empezar, ingresaremos al editor de código. La meta es copiar nuestro archivo single.php, que es el que WordPress toma por defecto para mostrar contenido individual en nuestro sitio. Vamos a guardarlo con un nuevo nombre para que sea específico de nuestros productos.

  1. Copiar y renombrar el archivo:
    • Copia el archivo single.php.
    • Guarda la copia como single-product.php. Esto se debe a que WordPress utiliza una jerarquía de plantillas y al nombrar el archivo de esta forma, automáticamente aplicará este diseño a los productos.

¿Cómo se verifica que estamos utilizando el nuevo archivo?

Una vez que hemos creado nuestro archivo single-product.php, debemos verificar que efectivamente está en uso al visualizar un producto en nuestro sitio web. Inicialmente, puede que no veas cambios visibles, ya que acabamos de copiar el archivo sin modificar.

¿Qué cambios realizamos para personalizar la interfaz?

Ahora, vamos a modificar el archivo nuevo para que visualmente se distinga de las novedades:

  1. Eliminar la navegación actual:

    • Queremos personalizar y, en este caso, eliminar el segmento de navegación entre productos. Esto ofrecerá un enfoque más limpio y específico para los productos.
  2. Incorporar un título distintivo:

    • Incluye un título en el archivo single-product.php que indique que estamos viendo un producto en particular. Implementa lo siguiente dentro del archivo para mostrar el nombre del producto de manera dinámica:
    <h1>Este producto es: <?php the_title(); ?></h1>
    
    • Al actualizar el sitio, debería aparecer el nombre del producto donde está aplicado este archivo.

Con estos pasos bien claros, habrás logrado diferenciar visualmente la sección de productos de otras partes del sitio web. Recuerda que la personalización es clave para una experiencia de usuario óptima. Sigue explorando las posibilidades de WordPress y, sobre todo, no temas experimentar con nuevas ideas. ¡Avancemos juntos en este apasionante proceso de desarrollo web!

Aportes 6

Preguntas 7

Ordenar por:

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

Asi voy avanzando en las entradas de cada producto

Mientras que aqui viene ser mis entradas para las novedades

Me encanto esta clase, ya que no sabia como hacer un campo para productos y novedades que se diferencien entre si. uwu

El enfoque de WordPress para renderizar páginas puede parecer complejo al principio. Sin embargo, en realidad es bastante eficiente. Si tuvieras una plantilla única para cada página de tu sitio web, la personalización sería una pesadilla. El enfoque modular de WordPress con respecto a las plantillas te permite realizar cambios en un solo archivo y usar ese elemento en todo tu sitio web dondequiera que lo necesites.

Comparto screen de como va mi proyecto:

VAMOS A IR AL EDITOR DE CÓDIGO, Y copiar el archivo single guardarlo con el nombre single-producto.php producto porque es el posttype que guardamos en functions.php (register_post_type(‘producto’, $args);

a) Eliminamos la navegación para diferenciar los archivos:
<?php get_template_part( ‘template-parts/post’, ‘navigation’ ) ?>

b) Incorporamos elemento al título para probar si es el archivo en uso:
<h1>Este producto es: <?php the_title() ?></h1>

Todo muy claro. Gracias

Aquí te dejo algunas herramientas y recursos en línea para generar tipos de contenido personalizados (Custom Post Types) en WordPress:

GenerateWP (https://generatewp.com/post-type/) - una herramienta en línea gratuita que te permite generar código para tipos de contenido personalizados, taxonomías, campos personalizados y más.

Custom Post Type UI (https://es.wordpress.org/plugins/custom-post-type-ui/) - un plugin gratuito para WordPress que te permite crear tipos de contenido personalizados y taxonomías mediante una interfaz de usuario amigable.

Pods (https://pods.io/) - un plugin gratuito para WordPress que te permite crear tipos de contenido personalizados, campos personalizados y taxonomías, y también ofrece herramientas de personalización avanzadas.

Advanced Custom Fields (https://www.advancedcustomfields.com/) - un plugin premium para WordPress que te permite crear campos personalizados para tipos de contenido personalizados y otros elementos de WordPress.

Toolset (https://toolset.com/) - un plugin premium para WordPress que te permite crear tipos de contenido personalizados, campos personalizados, taxonomías y plantillas personalizadas, todo a través de una interfaz de usuario amigable.