En este artículo vamos a aprender a crear una consulta personalizada con el «Query Builder» de JetEngine
Objetivo: ver un listado de post y cada uno de ellos con su imagen destacada, titulo, frase personalizada y sus categorías (cada una con su respectivo color).
Resumen de lo que vamos a hacer::
- Crear una metabox con el campo dinámico «color» asociado a la taxonomía categorías del CPT entradas.
- Crear categorías y asignaremos un color a cada una con el colorpicker del campo dinámico.
- Crear un listing grid asociado a las taxonomías para poder ver el color asignado.
- Crear un tipo de consulta personalizado con «Query Builder»
- Crear un listing grid de post y en él, vamos a poner el listing grid de categorías para poder visualizar a que categorías corresponde cada post y poder ver sus respectivos colores.
- Finalmente vamos crear un listing grid asociado a post para mostrar el listing grid tipo post que hemos creado en la página home
Para poder hacer este tutorial debes estar usando JetEngine de Crocoblock.
¿Qué es Query Builder en Jet Engine?
Query Builder es una herramienta que nos ayuda a crear listas de elementos, seleccionados de la matriz general de nuestro proyecto de acuerdo a algunas condiciones. Nos permite consultar publicaciones, taxonomías, usuarios, comentarios, información de la base de datos de la tablas SQL, elementos recibidos a través de la funcionalidad REST API y elementos de tipo de contenido personalizado.
Su funcionamiento se basa en establecer unas condiciones de consulta para la posterior creación de un listing personalizado que posteriormente se podrá mostrar en cualquier parte del sitio web a través de un listing grid.
Paso a paso de la creación de una consulta personalizada con Query Builder
En este paso a paso te enseñaré a crear una consulta personalizada aplicada a un listing grid tipo taxonomía para mostrar las categorías con colores dinámicos (suena un poco raro, pero vas a ver que es fácil).
Creación de campos dinámicos con «Metaboxes»
Vamos a crear los campos dinámicos asociados a la taxonomía del CTP entradas (esto es para el ejemplo, pero recuerda que puedes elegir el CPT que quieras)
Para ello, vamos a la pestaña de metaboxes en JetEngine y hacemos clic en «Add New»
Y procedemos con la configuración:
En la pestaña General Settings vamos a poner un nombre para reconocer nuestros campos dinámicos
- Meta Box Title: Nombre dinámicos para las categorías
- Meta Box for: elegimos Taxonomy
En la pestaña Visibility Conditions vamos a especificar en donde dice «Enable por taxonomies» la taxonomía «categorías» que corresponde al CPT «entradas» del sitio web.
Una vez hemos especificado donde queremos ver esta caja de campos dinámicos, vamos a crear el campo que queremos agregar y para ello entonces vamos a ir a la pestaña «Meta fields» y configuramos los siguientes campos:
- En la etiqueta Label: el nombre que prefieras para reconocer tu campo dinámico (en mi caso lo voy a llamar «Color fondo Categoría».
- Name/ID: se pondrá automáticamente al poner el nombre. Lo puedes editar si quieres, pero ten en cuenta que no puedes poner tildes, caracteres especiales o dejar espacios.
- Fyeld Type: En este caso vamos a elegir Colorpicker para poder seleccionar el color que queremos que corresponda a cada una de las categorías.
Finalmente termina haciendo clic en el botón azul «Add Meta box»
Este paso fue muy fácil. En resumen, simplemente creamos una caja de campos dinámicos con un único campo de color para asignarle colores a las categorías.
Configurar el color de las categorías
A continuación vamos a la pestaña categorías de nuestras entradas y allí creamos las categorías que vamos a usar en nuestro blog. En mi caso he creado 3 categorías y ahora a cada una le puedo asignar su correspondiente color
- Digital: azul
- Marketing: magenta
- Inteligencia artificial: verde
Este paso fue realmente sencillo
Creación de listing grid asociado a taxonomías
Ahora vamos a crear el diseño nuestro listing grid asociado a las taxonomías para poder darle a cada categoría el color que ya hemos elegido previamente. Para ello, vamos a la pestaña de JetEngine, elegimos la opción «Listings» y hacemos clic en «Add New»
Una vez le demos clic, vamos a ver que se nos abre una ventana con algunas opciones que debemos configurar para configurar nuestro listing de taxonomías:
- Listing source: aquí vamos a elegir la opción «terms» que nos permite consultar nuestras taxonomías
- From taxonomy: vamos a elegir «categorías» de nuestro CPT entradas
- Listing item name: aquí te sugiero darle un nombre que te permita reconocer facilmente a que diseño se refiere ese listing que estás creando. En mi caso lo he llamado «Listing categorías (color)»
- Finalmente en listing view lo puedes dejar como está y termina haciendo clic en «Create listing item»
Una vez entremos en nuestra interfaz de Elementor vamos a buscar el widget «Dynamic terms» que nos va a permitir filtrar las categorías creadas.
Con el widget seleccionado, vamos a configurarlo para poder visualizar las categorías que corresponden:
En la pestaña «Content»
- From taxonomy: vamos a elegir «Categorías»
- Show All items: yo desactivo esta opción para mostrar sólo una categoría.
- Link terms: yo dejo esta opción activa para permitirle al usuario hacer clic y ver los artículos que corresponden a la categoría en su respectivo archive.
Ahora puedes ver como automáticamente te va a mostrar una de las categorías que hayas creado.
Ahora vamos configurar el color de fondo de nuestra categoría y para ello vamos a buscar la etiqueta dinámica que previamente habiamos creado.
Nos vamos a la pestaña «Estilo» y en la opción «Labels» vamos a hacer clic en donde dice «tipo de fondo» para activar el color y en la opción donde podemos cambiar el color, buscamos el icono de etiquetas dinámicas, hacemos clic en él y elegimos la opción «custom field».
Una vez elegido, vas a ver que se activa un ícono de llave inglesa al lado izquierdo de la palabra «Custom field». haz clic en el y en el campo «field» elige la etiqueta dinámica que previamente creamos con el nombre «Color fondo categoría»
Al darle clic verás que automáticamente el fondo de tu categoría tendrá el color que previamente elegimos cuando creamos las categorías.
Ahora, lo único que falta es darle un poquito de estilo al widget. En mi caso he hecho las siguientes configuraciones:
- Padding: 2px por arriba y por debajo y 20px por los lados
- Radio del borde de las esquinas: 100px por todos lados
- Color del texto: blanco #ffffff
Y listo, con esto tenemos nuestro primer listing grid asociado a las categorías, vamos muy bien 👏🏻
Creamos nuestra propia consulta con Query builder
Es posible que este sea el paso más importante de este artículo, pues es aquí donde tenemos que crear la query personalizada que nos va a permitir mostrar las taxonomías que corresponden al post.
Para ello vamos a nuestro plugin de «jetEngine» en la pestaña «Query Builder» y hacemos clic en el botón «Add New»
A continuación vamos a configurar el nombre y el tipo de Query que necesitamos
En general settings vamos a poner lo siguiente:
- Name: ponle un nombre para reconocer nuestra propia consulta, que también nos va a servir para elegirla luego en el listing grid, en mi caso la he llamado «Consulta categorías entradas»
- Description: Aquí puedes poner una descripción para saber donde lo estas poniendo y demás (no es necesario para que funcione).
- Query Type: aquí vas a elegir desde donde vas a «hacer la consulta del contenido» por lo que en este caso vamos a elegir «Terms» Query» que corresponde a las taxonomías.
Una vez hemos elegido la opción de Terms Query, vamos a ver que nos cambia la siguiente pestaña de opciones y allí tendremos que configurar lo siguiente
En Terms Query vamos a la pestaña general:
- Taxonomy: Aquí vamos a elegir «Categorías» (recuerda que están pertenecen al CPT entradas)
- El resto de las opciones no son «necesarias» para que funcione correctamente la query personalizada
Ahora vamos a la pestaña «Include/Exclude y en donde dice «Include» vamos a especificar la opción «Current terms»
A continuación donde dice «Taxonomy» vas a elegir la opción «Categorías» y terminas haciendo clic en «Apply» y posteriormente en «Add Query»
Listo, hemos creado satisfactoriamente nuestra «consulta personaliza» con Query builder, ahora nos falta menos 💪🏼
Creación de Listing grid asociado a los post
Ahora necesitamos crear un listing grid que nos permita hacer el diseño de cómo queremos que se vea uno de los post en el listado de nuestro blog.
Para ello, volvemos al menú de nuestra interfaz de WordPress, en la pestaña JetEngine > listings hacemos clic en el botón «Add new» y configuramos lo siguiente:
- Listing Source: Posts
- From post type: Entradas
- Listing item name: Ponle el nombre que puedas reconocer con facilidad
Una vez hacemos en el botón «Create listing item» vamos a tener la posibilidad de diseñar como se va a ver un sólo post de nuestro listado.
En mi caso, voy a poner la imagen destacada, el titulo, una pequeña reseña generada automáticamente con el widget de «Dynamic fields»
Ahora sólo nos falta «mezclar» lo que hemos hecho previamente en un sólo widget. 👇🏼
Listing grid de taxonomia con query builder personalizada.
Ahora sólo necesitamos incluir nuestro widget de listing grid de taxonomía, dentro del listing que estamos creando. Puedes ponerlo donde quieras, es la ventaja de crear diseños personalizados. Yo lo pondré encima del titulo.
Ahora vamos a configurar algunas cosas para su correcta visualización en la pestaña general:
- Listing: vamos a buscar el listing grid asociado a taxonomías, en mi caso lo he llamado «Listing categorías (color)»
- Columns number: vamos a poner 1
- Post Number: lo he dejado por defecto, en este caso 6, por si un post tuviera más de una categoría.
Ahora vamos a la pestaña «custom query» activamos la opción «use custom query» y en el selector «Custom «Query» elegimos la consulta personalizada que previamente creamos. En mi caso yo la he llamado «Consulta categorías entradas» y ¡listo! deberíamos ver el listado de las categorías que corresponden al post de muestra.
Listado de entradas de post
Finalmente, vamos a crear nuestro listado de post en donde lo necesitemos. Las opciones donde se suele crear es en el home para un pequeño listado de post y por supuesto en la página de blog, donde vamos a listar todos nuestros artículos, pero es obvio que lo puedes poner donde quieras.
Basta con poner nuestro listing grid y elegir el listing tipo post para que muestre el diseño que acabamos de realizar y queden cargados todos los post, con sus respectivas categorías.
JetEngine es posiblemente el plugin más completo que conozco para crear mis sitios web, pues me permite hacer cualquier tipo de diseño y hacer cualquier tipo diseño y de consulta.
