La nueva versión de CoockieConsent de Orest Bida, en este caso la V3, que ofrece mayores funcionalidades y mayor capacidad de personalización.
La función de relaciones de Meta Box permite relacionar tipos de publicaciones, usuarios, páginas juntas. En esta práctica, compartiremos la forma de crear una relación bidireccional entre los tipos de publicaciones Cursos e Instructores, por ejemplo. Luego, mostraremos los instructores relacionados con un curso y viceversa, usando Meta Box y Oxygen.
Versión en video
Preparación
Tenemos cursos e instructores como dos tipos de publicaciones personalizadas separadas. Crearemos una relación bidireccional entre ellos. La relación mostrará que el curso es aportado por cuales instructores y el instructor contribuye a qué cursos. Este tipo de información se mostrará en la página de archivo y en la página singular de cada tipo de publicación.
Estas son las herramientas que necesitamos para esta práctica:
- Meta Box core plugin: para tener un marco para crear tipos de publicaciones personalizadas, campos personalizados y relaciones.
- MB Custom Post Types: para crear un tipo de post personalizado para los cursos y los instructores.
- Meta Box Builder: para tener una interfaz de usuario en el backend para crear campos y relaciones personalizadas fácilmente
- Relaciones MB: para crear relaciones entre estos tipos de publicaciones
- MB Admin Columns (opcional): para mostrar los cursos relacionados y los instructores relacionados en el panel.
- Oxygen: para construir las páginas. Debe usar su versión 3.9 o superior, que tiene integración nativa con Meta Box.
1 - Creación de los tipos de publicación
Ir a Meta Box > Tipos de publicación para crear un nuevo tipo de publicación para los instructores. Crear también uno nuevo para los cursos.
Luego, veremos nuevos menús que se muestran en el Panel de administración. Son los tipos de publicaciones.
2 - Creación de campos personalizados
Es posible que quieras añadir algunos campos personalizados para cada tipo de publicación para obtener información adicional de los cursos o de los instructores. Es opcional. Simplemente hay que ir a Meta Box > Custom Fields para crear campos como de costumbre. Crea también algunos para los cursos de la siguiente manera.
3 - Creación de relaciones
Vamos a crear relaciones entre los tipos de publicación Cursos e Instructores. Ir a Meta Box > Relationships para crear uno nuevo.
Tendremos la sección From y To de la siguiente manera. La relación es bidireccional, por lo que se pueden colocar los dos tipos de publicaciones en cualquier sección.
Dado que son tipos de post, recuerda establecer el tipo de objeto como Post en ambas secciones.
Establecer el tipo Post en la sección From como uno que queremos que esté en la relación. En este caso establezco Instructor, por lo que el resto en la sección To será el Curso.
Debido a que activamos la extensión MB Admin Column, tenemos esta opción en la configuración de la relación
Lo configuramos para mostrar los cursos e instructores relacionados en una columna.
En la pestaña Campo de ambas secciones, podemos establecer una etiqueta para la sección de relación en el editor de publicaciones.
Eso es todo para establecer la relación. Ahora ir al editor de publicaciones del tipo de publicación Curso, habrá un cuadro en la barra lateral derecha para elegir qué instructores están relacionados con la publicación actual. Además, habrá un cuadro en el editor de publicaciones del tipo de publicación Instructor para elegir qué cursos se relacionan con el instructor actual. Se muestra como un campo, esto tendrá sentido cuando tengamos publicaciones de este campo en el siguiente paso.
4 - Mostrar la relación
En esta parte, mostramos estas relaciones tanto en la página singular del tipo de publicación Curso como en el tipo de publicación Instructor, también en la página de archivo donde se enumeran todos los cursos.
4 .1 - Mostar la relación en una single-page
Vamos a mostrar las relaciones en la single-page del curso y los tipos de publicación del instructor.
Esta es la página para mostrar la información detallada sobre un instructor. Habrá una sección para mostrar todos los cursos en los que el instructor haya participado.
Vamos a Oxygen > Template > Add New Template como de costumbre.
No olvidarse de establecer la plantilla como Singular y elegir el nombre del tipo de publicación como Instructores y publicar.
Una vez hecho esto pasamos a editarlo con Oxygen
En la vista previa elegimos a un Instructor
Insertamos un componente de Section
Añadir un encabezado para mostrar el nombre del Instructor desde el título de la publicación.
También añadimos un componente Texto para mostrar la biografía del instructor, que se guarda en el contenido de la publicación.
Ahora, vamos a mostrar los cursos relacionados. Habrá varias publicaciones, así que tendremos que añadir un componente Repeater.
En su sección Query, elegir Adanced y añadir los parámetros de esta manera.
Allí, está el slug del tipo de publicación Cursos. Significa que obtendremos publicaciones de este tipo de publicación .course
A continuación, añadimos el segundo parámetro de la siguiente manera.
Para añadir el valor en el parámetro, se elige el campo Meta Box del rango y podremos ver el campo Cursos relacionados que nos permite elegir publicaciones relacionadas con un instructor.
Todos estos parámetros estipulan que solo se mostrarán las publicaciones que se enumeran en el campo Curso relacionado.
Dentro del componente Repeater, habrá un Div. Añadimos algunos componentes dentro de este Div para mostrar la información de los cursos.
Primero, añadir un componente de imagen e insertar los datos de la imagen destacada de la publicación.
Añadir un encabezado y luego insertar los datos del título de la publicación para el nombre del curso.
Puede ser que se muestren el nombre y la imagen incorrectos del curso, pero no hay que preocuparse por esto; seguiremos adelante y todo tomará su valor correcto
Seguimos añadiendo otros componentes, luego insertamos datos de campos personalizados de los cursos como de costumbre.
Después de obtener toda la información deseada para el curso, guardamos la plantilla y nos vamos a la página en la frontend. Veremos los cursos junto con su información mostrada correctamente.
Volviendo a la plantilla, la vista previa también se mostrará correctamente. Podemos cambiar la configuración de cada componente para obtener el aspecto deseado para la página.
Por otro lado, también podemos mostrar el nombre del instructor en la página singular del curso. Ya tenemos una página singular con una plantilla para mostrar la información detallada del curso. Mostraremos el instructor relacionado en este lugar.
Añadir un componente Div o simplemente duplicar uno de sus componentes Div creados anteriormente.
Cambie el texto en la sección Contenido del componente
A continuación, inserte datos del campo Instructor relacionado en el componente.
Si queremos mostrar el nombre del instructor junto con el enlace, elegimos la opción Post URL al insertar datos como este.
Luego, en la página que muestra los detalles del curso, se podrá ver el nombre del instructor relacionado de la siguiente manera.
4 .2 - Visualización de la relación en una página de archivo
Vamos a añadir instructores relacionados a la página de archivo de los cursos.
En la plantilla de la página, podemos tener un elemento Repeater para mostrar todas las publicaciones, ya que esta es una página de archivo.
Añadir un div y algunos componentes de texto dentro del repetidor.
Cambiar el contenido del primer componente Texto.
Insertamos los datos del campo Instructor relacionado en el segundo componente Texto.
Guardamos la plantilla y podremos verla en el frontend.
Como siempre esperamos tus comentarios y por supuesto si tienes alguna duda o necesitas ayuda puedes contactar por nuestro grupo de Telegram o dejando un comentario.
Nos vemos en la próxima. 👌
Suscribir
0 Comentarios
Viejos