JetEngine para Elementor: tipos de contenido, taxonomías y relaciones

Una tarjeta de curso muestra su título, imagen, temática y duración. El perfil de un instructor presenta únicamente sus cursos. Cambia una ficha de curso una sola vez y sus tarjetas dinámicas mostrarán la información actualizada allí donde aparezcan. Ese es el resultado que vamos a construir con JetEngine y Elementor.

Este ejemplo se basa en la documentación oficial y permite crear un catálogo de cursos; la matriculación, los cuestionarios y el pago necesitarían su propia implementación. Courses e Instructors tienen fichas independientes, Design y Development organizan el catálogo y una relación guardada conecta cada curso con su instructor. Puedes aplicar el mismo enfoque a inmuebles y agentes, proyectos y clientes, o eventos y ponentes.

JetEngine proporciona la estructura del contenido y los widgets dinámicos. Elementor se ocupa del diseño. La conexión entre ambos merece atención: una tarjeta bien diseñada puede mostrar los cursos equivocados si su consulta parte del objeto incorrecto.

Esta guía sigue un único modelo desde su registro hasta la presentación pública. Después explica cómo invertir la relación y diagnosticar listados vacíos o incorrectos. Los pasos conservan los nombres ingleses de las fichas, los listados y los controles para que puedas identificarlos.

Decide qué corresponde a un tipo de contenido, un campo, una taxonomía o una relación

Antes de abrir el constructor, anota la información que necesitas guardar. En este ejemplo, un curso tiene título, descripción, imagen destacada, duración y temática. Un instructor tiene nombre, biografía y retrato. Existe de forma independiente y puede impartir varios cursos.

Esta tabla te ayuda a colocar cada dato en su estructura adecuada:

WordPress distingue entre una taxonomía y sus términos: Topic es la taxonomía; Design y Development son sus términos. La documentación sobre taxonomías explica este modelo de clasificación.

Podrías guardar el nombre del instructor en un campo de texto, pero cada curso tendría entonces su propia copia. Un perfil reutilizable centraliza la biografía y el retrato, mientras que la relación determina con qué cursos se conecta. Del mismo modo, una temática no necesita una ficha de contenido independiente si solo sirve para clasificar cursos.

En este tutorial, cada curso tiene un instructor y cada instructor puede impartir muchos cursos. Por tanto, la relación es de uno a muchos. Si varios instructores pueden impartir un mismo curso, elige una relación de muchos a muchos. Decide esta regla a partir de tus criterios editoriales antes de crear las conexiones.

Prepara el contenido dinámico de WordPress con Elementor

Instala y activa JetEngine y Elementor. El tutorial de listados con Elementor de Crocoblock utiliza Elementor Free con JetEngine para construir la tarjeta reutilizable y mostrarla mediante Listing Grid.

Las plantillas personalizadas para páginas individuales y archivos son una dependencia distinta. Utiliza el Theme Builder de Elementor Pro o un sistema de plantillas compatible, como el plugin independiente JetThemeCore. Crocoblock documenta las plantillas individuales de JetThemeCore con Elementor Free y JetEngine. Si eliges Elementor, nuestro análisis de Elementor Pro explica las capacidades más generales del constructor.

Mantén claras estas funciones. Un listado diseña una tarjeta que se repite; una plantilla individual diseña la página de detalle. Registrar Courses no crea automáticamente ninguno de estos diseños.

Trabaja en un sitio de pruebas si el catálogo ya existe. Anota los identificadores técnicos que elijas, porque los campos, los listados y las consultas harán referencia a ellos. Utiliza otros identificadores si los propuestos ya existen en tu instalación.

Crea los tipos de contenido personalizados de JetEngine y los campos del curso

Abre JetEngine → Post Types → Add New. Crea Courses y repite el proceso para Instructors. La guía de creación de CPT de Crocoblock explica esta pantalla de registro.

Utiliza estos identificadores para el ejemplo:

Estos identificadores son distintos de las etiquetas legibles que ven quienes editan el contenido. WordPress limita los identificadores de tipos de contenido a 20 caracteres; un prefijo del proyecto ayuda a evitar colisiones. Consulta las indicaciones de registro de WordPress.

En los ajustes avanzados de cada CPT, configura Supports para las funciones de título, editor e imagen destacada. Para este catálogo público, activa Is Public, Publicly Queryable y Show Admin UI, de modo que las fichas puedan tener páginas públicas de detalle y un menú de edición. Activa Has Archive en Courses si quieres un archivo nativo de cursos. La referencia de ajustes de CPT distingue estos controles.

La imagen destacada también depende de que el tema la admita, como explica la referencia de WordPress sobre las funciones compatibles con los tipos de contenido.

Si quieres editar un curso o un instructor directamente en Elementor, habilita ese tipo de contenido en Elementor → Settings. Este ajuste controla la opción «Edit with Elementor»; es independiente de crear un listado reutilizable o aplicar una plantilla individual. Consulta la configuración del editor para CPT de Crocoblock.

Asigna identificadores estables a los atributos del curso

En la sección de campos meta del CPT Courses, añade un campo Duration de tipo Number. Utiliza un identificador como wpperk_duration_minutes y explica en su descripción que la duración se introduce en minutos, sin unidad. Guarda 90 y añade «min» en la plantilla de presentación.

Si el catálogo necesita un programa separado de la descripción principal, añade un campo WYSIWYG opcional llamado wpperk_syllabus. Si no lo necesita, utiliza el editor habitual para la descripción del curso y omite ese campo adicional.

JetEngine separa la etiqueta visible del campo de su Name/ID guardado. Comprueba ese identificador antes de guardar, sin confiar ciegamente en el nombre generado de forma automática. Su referencia de tipos de campo documenta Number, WYSIWYG y los ajustes disponibles.

Usa minutos en todas las fichas de este ejemplo. Introducir una duración con otra unidad haría que la etiqueta de la tarjeta resultara engañosa y que las comparaciones fueran poco fiables. Escribe «Duración en minutos» en las instrucciones de edición para que otra persona pueda seguir el criterio sin tener que adivinarlo.

Asocia una taxonomía Topic y añade las fichas

Abre JetEngine → Taxonomies → Add New. Llama Topic a la taxonomía, utiliza un identificador único como wpperk_topic y asígnala a Courses. Guárdala y añade los términos Design y Development desde el menú de la taxonomía situado bajo Courses.

Asigna un término a cada curso y guarda el curso. Crear la taxonomía registra el sistema de clasificación; no asigna términos a las fichas existentes. La guía de configuración de taxonomías de Crocoblock muestra ambas operaciones.

Utiliza una taxonomía sin jerarquía para estas dos temáticas. Si más adelante necesitas Design → Interface Design y Design → Graphic Design, una taxonomía jerárquica puede representar esa estructura. La jerarquía de términos es distinta de la relación entre un instructor y sus cursos.

Crea ahora tres fichas de instructores y tres fichas de cursos. Estos nombres y valores son ejemplos para comprobar la configuración:

Añade Maya Chen, Omar Ali y Lena Ortiz como Instructors. Introduce las descripciones e imágenes destacadas de los cursos, guarda sus duraciones numéricas y publica las fichas de ejemplo que quieras mostrar en el catálogo. Deja a Lena sin cursos para comprobar después el resultado vacío.

La definición de un campo sin un valor guardado no produce una duración útil. Una plantilla de listado sin fichas no tiene contenido que repetir. Completa este pequeño conjunto de datos antes de diseñar el catálogo.

Configura las relaciones JetEngine y conecta las fichas

Abre JetEngine → Relations → Add New. Crea una relación llamada Instructor Courses con Instructors como objeto padre, Courses como objeto hijo y uno a muchos como tipo.

Activa los controles de edición de ambos objetos para gestionar las conexiones desde las pantallas de instructores y cursos. La referencia de ajustes de Relations explica los controles disponibles y los tipos de relación.

«Padre» e «hijo» describen la dirección de esta conexión. No convierten las publicaciones de cursos en hijos nativos de WordPress de las publicaciones de instructores. Mantén esa distinción cuando construyas la consulta.

Abre la ficha de Maya, localiza la zona de hijos relacionados, selecciona los dos cursos Design existentes y guarda. Conecta a Omar con WordPress Development Basics. También puedes gestionar la conexión con el padre desde una ficha de curso si sus controles de relación están activos. Crocoblock documenta la edición de los elementos realmente relacionados por separado del registro de la relación.

Comprueba después un curso para confirmar que está conectado al instructor previsto. Compartir nombres, términos de taxonomía o autores de publicaciones de WordPress no establece esta relación. La establece la conexión guardada entre las dos fichas.

Conserva la biografía en el instructor y la duración en el curso. Si más adelante permites que varios instructores impartan un curso y necesitas un rol diferente para cada pareja instructor-curso, ese rol pertenece a la conexión. JetEngine admite metadatos de relación y su presentación dinámica.

Diseña una tarjeta de curso y repítela con Listing Grid

En JetEngine → Listings/Components, añade un listado con Posts como fuente, Courses como tipo de contenido y Elementor como vista. Llámalo Course Card. La referencia de plantillas de listado describe estos ajustes de origen.

Añade un Dynamic Image con Post thumbnail como fuente. Añade un Dynamic Field que utilice Post/Term/User/Object Data y el campo de objeto Title, seguido de un Dynamic Link con Permalink. Estos widgets de JetEngine deben leer la ficha del curso activo en lugar de contener texto copiado del primer curso de ejemplo.

Añade otro Dynamic Field para la duración: elige los metadatos como fuente y selecciona wpperk_duration_minutes. Activa Customize field output e introduce %s min, donde el marcador representa el valor guardado. Para los valores opcionales, decide si el widget debe desaparecer o mostrar un valor alternativo útil. La referencia de Dynamic Field explica el formato y los controles para valores vacíos.

Muestra Topic con el widget Dynamic Terms de JetEngine, seleccionando tu taxonomía Topic. La etiqueta de temática y la duración proceden ahora de fuentes diferentes, aunque tengan un aspecto similar en la tarjeta.

Mantén la tarjeta concisa: imagen, título, temática, duración y un enlace de detalle claro. Coloca la descripción completa y el programa opcional en la página individual del curso. Utiliza un nivel de encabezado adecuado para la página que contiene la tarjeta y comprueba los títulos largos en una pantalla móvil.

Guarda el listado. En una página normal de Elementor, añade Listing Grid y selecciona Course Card para inspeccionar el catálogo básico. Confirma que los distintos cursos producen títulos, imágenes y duraciones diferentes antes de aplicar una consulta de relación. Así separas los errores de conexión de los campos de los errores al seleccionar fichas.

Muestra solo los cursos del instructor actual

La tarjeta determina el aspecto. La consulta determina qué fichas aparecen. Para un listado basado únicamente en la relación, crea una Relations Query directa en JetEngine → Query Builder → Add New y llámala Courses for Current Instructor.

Establece Relations Query como tipo de consulta, selecciona Instructor Courses, solicita los hijos de un padre concreto y usa el objeto actual como punto de partida. Estos son los controles exactos:

Guarda la consulta y crea la plantilla Instructor Single mediante el sistema de plantillas elegido. Con JetThemeCore, abre Crocoblock → Theme Builder, crea una plantilla de página y establece la condición Include → Singular → Instructors → All. Crea una plantilla Elementor para su contenido principal. Con Elementor Pro, crea una plantilla Single Post y establece sus condiciones de visualización para Instructors.

Utiliza widgets dinámicos para mostrar el título del instructor, su retrato destacado y su biografía desde el contenido de la publicación. Debajo del perfil, añade Listing Grid, selecciona Course Card, activa Use Custom Query en la sección Custom Query y selecciona Courses for Current Instructor. Guarda la plantilla y confirma que sus condiciones se aplican a las fichas de instructores.

En la URL real de un instructor, la consulta parte de su ID y recupera los ID de los cursos conectados. La referencia de Relations Query de Crocoblock documenta la dirección y las opciones del objeto inicial.

Abre los perfiles públicos de Maya, Omar y Lena. Maya debe mostrar dos tarjetas de curso; Omar, una; y Lena, ninguna. Diseña el estado vacío de forma que los visitantes entiendan que todavía no se han listado cursos.

Utiliza una Posts Query cuando necesites condiciones explícitas sobre las publicaciones

Una Relations Query directa resulta práctica para seleccionar elementos conectados. Si necesitas mostrar expresamente solo los cursos publicados, ordenarlos o añadir condiciones de taxonomía y metadatos, crea una Posts Query independiente.

Selecciona Courses como tipo de contenido y Published como estado de publicación. En Post & Page → Post In, utiliza la macro Related Items. Elige Instructor Courses, solicita Child Object y toma el ID inicial de Current Object ID. Guarda la consulta y selecciónala como consulta personalizada de Listing Grid. El tutorial de relaciones entre publicaciones de Crocoblock muestra esta opción.

Abre los ajustes avanzados de esa macro y establece el campo Fallback en un ID de publicación cuya inexistencia hayas comprobado en tu instalación. Una macro de inclusión vacía puede dejar la consulta devolviendo todos los elementos, como explica la guía de macros de Query Builder. No des por hecho que un número de ejemplo está libre en tu sitio.

Comprueba de nuevo el perfil de Lena. Después conecta un curso en borrador y confirma que la consulta limitada a publicaciones publicadas lo excluye. Son comprobaciones que debes realizar; las vistas previas del editor no demuestran por sí solas el comportamiento público final.

Invierte la dirección en una página de curso

Crea un listado Instructor Card a partir de Instructors. En una plantilla Course Single, utiliza una segunda Relations Query que solicite los padres de un hijo concreto. El curso pasa a ser el objeto inicial.

En nuestro modelo de uno a muchos, cada curso tiene un instructor conectado. Un modelo de muchos a muchos puede devolver varios. Cambiar la dirección de presentación no modifica esa regla de fondo.

Elige conscientemente el contexto del objeto actual

Dentro de un listado de instructores, el objeto actual puede ser la tarjeta del instructor que se está mostrando. Dentro de un listado de cursos anidado, puede pasar a ser el curso. Usa Default WordPress Object (for current page) cuando necesites deliberadamente el objeto de la página individual exterior, independientemente del elemento activo del listado.

Ese objeto global sigue teniendo que ser un instructor para una consulta que solicita sus cursos. En una página de destino normal, es la propia página de destino. La guía del contexto de las relaciones explica esta diferencia. Evita fijar el ID de Maya en una plantilla que debe funcionar para todos los instructores.

Diagnostica los datos antes de cambiar el diseño

Si el listado muestra un resultado incorrecto, revisa primero las fichas guardadas y la consulta de selección:

No sustituyas la relación JetEngine por Post Parent ID. Este control corresponde a la jerarquía nativa de WordPress; en la opción con macro, los ID de las publicaciones relacionadas deben ir en Post In. Consulta los ajustes de Posts Query.

Desconecta un curso de Maya y verifica que desaparece de su cuadrícula sin dejar de existir como ficha de curso. Actualiza su duración y comprueba el nuevo valor allí donde aparezca su tarjeta. Revisa también la página del curso con la relación inversa, el diseño móvil y los enlaces de detalle.

Cuando estas comprobaciones funcionen, añade filtros para los visitantes solo si el catálogo los necesita. El flujo de filtrado de Listing Grid de Crocoblock utiliza el plugin independiente JetSmartFilters. Para el envío de contenido desde la interfaz pública, JetFormBuilder puede asignar campos de formulario a publicaciones y utilizar su acción Connect Relation Items con JetEngine. Es una configuración de formulario independiente; una relación creada en la administración no genera por sí sola el proceso editorial.

Empieza por los tres cursos de ejemplo y confirma el modelo, las conexiones y ambas direcciones de consulta. Después amplía el catálogo mediante los mismos campos de edición. El siguiente curso debería necesitar una nueva ficha, su temática y una conexión con un instructor; el diseño reutilizable de Elementor ya estará preparado para mostrarlo.