Listing grid con Query Builder – JetEngine

Listing grid con Query Builder – JetEngine

Tabla de contenido

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::

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»

meta boxes jet engine

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.

meta box jet engine settings

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.
meta fields jet engine

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
Categorias con color

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»

Listing grid JetEngine

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»
creación listing grid

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.

widget dynamic terms

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.

Configuración listing terms

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».

etiquetas dinamicas jet engine

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»

custom field

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»

Query Builder

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.
Configuración new query

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
terms query taxonomy

Ahora vamos a la pestaña «Include/Exclude y en donde dice «Include» vamos a especificar la opción «Current terms»

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»

macros taxonomy

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
listing grid post

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»

listing grid tipo post

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.

listing grid

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.
Configuración listing grid

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.

query personalizada

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.

listing grid en home

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.

Comparte este artículo

¿Que tal te pareció este artículo?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información base sobre privacidad:
Responsable: Sebastián Echeverri (portafolio@sebasweb.net)
Fin del tratamiento: Moderación de comentarios para evitar spam
Legitimación: Tu consentimiento
Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
Derechos: Acceso, rectificación, portabilidad, olvido

Recomiendo:

También te podría interesar ver estos artículos

Campos repeater en JetTabs (tabs o acordeón) usando Jet Engine y Dynamic data addon

En este video tutorial usaremos Dynamic data addon para aprender a usar los campos repeater en las tabs...

Ejemplos de JetTricks – plugin de Crocoblock

Agrega tooltips sobre cualquier tipo de contenido Hola soy un título Widget de título Widget editor de texto...

Algunas plataformas con las que trabajo

No te vayas sin tu regalo!

Apúntate a la newsletter y recibirás GRATIS un pack exclusivo de plantillas para Elementor PRO

Apúntate GRATIS a la newsletter y llévate de regalo un pack de plantillas exclusivas para Elementor!

SUSCRÍBETE

No te pierdas los artículos y trucos relacionados con WordPress, Elementor y diseño y desarrollo web en general.