329 | Crea grids y filtros avanzados con WP Grid Builder

En el episodio 329 de WordPress Semanal hablamos de cómo tener un buen sistema para mostrar un listado de contenidos en tu web en el que se pueda buscar y filtrar de forma eficaz. Vamos allá. Hola, hola, soy Gonzalo Navarro y Bienvenidos al episodio 329 de WordPress Semanal, el podcast en el que aprendes a crear y gestionar web con WordPress en profundidad. Hoy te voy a hablar de un tema que es muy interesante y que seguramente te pueda servir de mucha utilidad, si no es para tu web de ahora, para webs futuras. Creo que es una solución que precisamente hace eso, solucionar algo que falta salvo que sepas código o salvo que tengas otro sistema ya muy bien engrasado. Y no es otra cosa que la posibilidad de mostrar un listado de contenidos, un grid como se suele decir, con la posibilidad de que sea filtrable y que además todo esto sea con el diseño que tú quieras, con los filtros que tú quieras y con muchísimo control. Y si puede ser de una forma sencilla sin tener que utilizar código, pues mejor. Entonces vamos a hablar de todo esto en un momentito, vamos a ver los conceptos clave porque creo que debemos definir algunos conceptos para que se pueda entender bien todo el episodio y después ya nos adentraremos en para qué sirve esto de los grids y los filtros, cómo los puedes crear dentro de WordPress y la mejor solución para mí, que ya te adelanto que es WP Grid Builder. Por último te daré mi opinión y cómo utilizo yo este plugin en mis proyectos. Fantástico. Todo esto en un momentito, pero antes, como siempre, novedades. ¿Qué está pasando en Gonzalo Navarro es esta semana? Pues tenemos dos grandes novedades. Por un lado nuevo vídeo de la zona código. Ya sabéis, todas las semanas tenéis un nuevo vídeo en el que os enseño a modificar el aspecto o el funcionamiento de vuestra web a través de código. Y lo mejor es que no tenéis que saber código. Veis el vídeo, veis el código que os dejo debajo, lo copiáis, lo pegáis y lo tenéis. Y en este caso aprendes a ocultar la fecha, la categoría o el autor en las entradas de WordPress. He hecho este vídeo porque me llegan bastantes consultas de Gonzalo cómo puedo hacer que en la página de blog no se muestre el nombre del autor o cómo puedo hacer para que en un artículo no salga la fecha o este tipo de cosas. Entonces en el vídeo os voy explicando cómo podéis hacer para vosotros, en vuestro caso, en vuestro tema, con lo que tengáis montado para ocultar de forma relativamente sencilla cualquiera de estas partes. Así que ya tenéis, si sois miembros de Gonzalo Navarro ES, pues ya lo tenéis disponible junto al resto de más de 280 vídeos con su código que acompaña, ya digo, para que solo tengáis que copiar y pegar. Y la segunda gran novedad es que tenemos como cada mes nuevo curso y en este caso, como te imaginarás es el curso de WP Grid Builder. Os enseño a utilizar este plugin que como hace algo tan avanzado, pues tiene una pequeña curva de aprendizaje, tiene muchas funcionalidades y dentro de que lo pone lo más fácil posible en cuanto a la configuración y al diseño, que ahora veremos que también podemos diseñar, pues tiene su aquel. A mí me llevó su tiempo también aprender a dominarlo. Así que vais a tener ya el curso completo para que podáis crear vuestros propios listados, vuestros propios grids o cuadrículas, creando distintos filtros y controlando cómo se va a mostrar el diseño de esos contenidos. Ahora hablaré en detalle de lo que ofrece GridBuilder a lo largo del episodio, pero que sepáis que ya tenéis este curso disponible y que se une a los otros 66 que ya hay publicados en la plataforma. Ya sabéis, tanto para dominar WordPress desde cero hasta niveles muy avanzados, incluso si te quieres dedicar a hacer webs para otros, como por supuesto cursos de servicios específicos, para hacer email marketing, para optimizar el rendimiento de carga de tu web, para vender productos online, para vender servicios, para vender cursos. Cualquier cosa que te imagines y que se pueda hacer con WordPress, seguramente ya esté y si no está, me lo pides y publicamos el curso. Ya sabes que puedes apuntarte a todo esto en Gonzalo Navarro ES. Es un único plan que incluye todo los cursos, los vídeos de la zona, código, el soporte conmigo y extras útiles como pueden ser descargas gratuitas o tutoriales avanzados. Perfecto. Una vez vistas las novedades, vámonos ahora con el plugin de la semana que se llama WPCafe. Este es un plugin que cada vez se está haciendo más popular porque es una solución que se vincula con WooCommerce y te permite crear una web muy completa de restaurante puedes crear el menú y que se muestre en la página web. Puedes habilitar, ya digo, vinculándolo con WooCommerce, pedidos a domicilio, pedidos para recoger y también tiene características para reserva de mesa, con lo cual sería, digamos, la solución completa para el que tiene un restaurante y quiere ofrecer todo este tipo de características. El plugin está activo en unas 5.000 webs con WordPress, así que digamos, no es mainstream, no lo usa todo el mundo, pero está muy bien, sobre todo si utilizas Elementor, porque te trae plantillas para que el diseño vaya en consonancia con lo que ofrece este plugin. Y también si tú no utilizas Elementor, pues tiene también bloques para el editor de Gutenberg, o sea que en este sentido no vas a tener problema. Sí que debes saber que la característica de recogida y envío a domicilio es de su parte Pro, pero bueno, el plugin en su versión gratuita es bastante completo, te trae la opción de eso, de mostrar menús en la web y de que se pueda reservar mesa. De nuevo se llama WPCafé, pero podéis ver el enlace directo en Gonzalo Navarro, es 329 y ahí tendréis también el enlace al resto de contenidos que he comentado, como el curso nuevo o el vídeo de la Zona Código. Fantástico. Pues ahora sí, vámonos al tema central de este Cómo crear grids y filtros avanzados con el plugin WP Grid Builder. Pero antes de ello vamos a definir conceptos, que quede todo claro porque al final voy a estar mencionando palabras como grid, tarjeta o facetas, que si no estás familiarizado pues puedes decir qué me estás contando. Entonces vamos a defin de primeras y comenzamos con grid. ¿Qué es un grid? Grid no es otra cosa que un listado que muestra contenidos. Un ejemplo claro es tu página de blog. Tu página de blog va mostrando los contenidos que tú publicas en entradas y la forma en la que lo muestra es lo que comúnmente se conoce como grid, que su traducción al español es cuadrícula, es decir, te lo muestra pues con columnas y con filas, eso es una cuadrícula. Lo que pasa que aunque no se muestra así, pues se suele llamar así, pero no es más que el listado de una serie de contenidos. Así que cuando hable de grid a lo largo de este episodio me refiero a un listado de contenidos. Y te puedes imaginar, ya digo, la página del blog. El siguiente concepto es el de tarjeta, que es básicamente cada uno de los elementos que se muestra en un grid, cada uno de los elementos que se muestra en ese listado, como por ejemplo el resumen de un artículo del blog, lo típico que se muestra la imagen destacada, el título, quizás la fecha y debajo un pequeño resumen y a lo mejor un botón para darle a leer más. Eso es una tarjeta, el elemento que se muestra en el listado. Y por último tenemos el concepto clave de faceta, que quizás es un poco el más raro, el que nos puede sonar más lejano y no es más que componentes que te permiten filtrar contenidos. Un ejemplo claro es un buscador. Otro ejemplo puede ser un desplegable en el que puedes elegir una categoría y al hacer esto estamos filtrando los contenidos de, por ejemplo el blog para que se muestren en función de esa información que le estamos diciendo. Por ejemplo, si utilizamos el buscador del blog y ponemos SEO, pues te van a aparecer los contenidos del blog que estén relacionados con el SEO. Si utilizamos un desplegable y seleccionamos una categoría determinada, nos van a mostrar solo los elementos de esa categoría. Pues las facetas permiten esto, permiten que filtremos los contenidos o que profundicemos para encontrar lo que buscamos. ¿Sí? Perfecto, ya tenemos los tres elementos, grid, tarjeta y facetas. Seguimos. ¿Para qué sirven esto de los grids y los filtros? ¿Por qué estoy publicando este episodio? ¿Por qué es importante? Bueno, estos son importantes en términos de que nosotros tengamos control sobre ellos. Cuando por ejemplo las páginas de archivo que trae tu tema se quedan cortas. Esto es muy muy muy habitual. Gente que me contacta, Gonzalo, ¿Cómo puedo editar mi página de blog? Que en la mayoría de casos no puedes, tu tema no te lo permite, incluso si utilizas Elementor, salvo que tengas la versión Pro, no lo puedes modificar, salvo que sepas código, no puedes darle estilos ni por CSS, ni tampoco puedes cambiar, que esto es lo más complejo, la estructura de cómo se muestran esos elementos, porque ahí ya tienes que meterte en el PHP y encima tienes que lidiar con las queries, que ahora hablaremos un poco más en profundidad de ello, pero es básicamente la forma en la que se recogen esos contenidos, es decir, son cosas bastante complejas y de ahí que no existan muchas soluciones para modificarlas o para editarlas. Por otro lado, tampoco es fácil añadir un buscador a medida, ni filtros a medida en una página que ya exista en un listado, en un grid, como por ejemplo en la página de blog que genere tu tema de WordPress de forma nativa. Entonces, si te encuentras en esta situación en la que quieres control sobre ello, o por ejemplo publicas un contenido nuevo que se llama cursos, y quieres control sobre cómo se muestra, cómo se filtra, cómo se busca, pues un plugin de grid y de filtros de te dará control sobre todo ello, de modo que vas a poder crear páginas totalmente personalizadas para mostrar contenidos, pues eso, del blog o de un tipo de contenido como ya he mencionado, como puede ser cursos, o como puede ser productos de WooCommerce, servicios que vendas, lo que sea. Y no sólo eso, sino que estás ofreciendo control de búsqueda y de filtro a tus visitantes, puedes decidir en base a qué van a buscar dentro de qué contenidos y con qué filtros. Y por si fuera poco, si utilizas un plugin como el que vamos a hablar más adelante, WP Grid Builder, pues también puedes controlar el diseño, no sólo del listado del grid, de cómo se muestran todos el conjunto de contenidos, sino también el diseño de cada una de las tarjetas, de cada uno de los elementos que se muestran ahí. Entonces, si todo esto es algo que necesitas, un plugin como este te va a venir de perlas. Seguimos con cómo podemos crear grids en WordPress, porque ya te he mencionado en varias ocasiones WP Grid Builder, que me voy a adentrar en sus características más adelante, pero no es la única opción, quizás en tu caso puedes utilizar otra porque no necesites tantas características, o solo necesitas una en concreto, o Tu presupuesto es cero, porque como veremos GridBuilder es de pago, aunque barato, pero hay más opciones y ya digo, dependiendo de tu caso. Entonces, partiendo de que dependiendo del control que busques y de tu presupuesto, puedes elegir una opción u otra, estas son las que existen. Por un lado tienes el bloque que ya trae Gutenberg para mostrar listados de contenidos, es el bloque de archivo, y esto ya viene de forma nativa con el editor de WordPress. ¿Qué es lo que ocurre? Que está limitadísimo en opciones, tanto en diseño como en filtro, incluso como en qué contenidos quieres mostrar cuando estás utilizando ese grid, está bastante limitado. Más opciones, puedes añadir un addon para Gutenberg, un addon especializado en mostrar grids, incluso en filtrar. Aquí normalmente, al menos yo, no he encontrado una solución muy completa. Normalmente también te vas a ver limitado en cuanto a filtro, en cuanto a diseño, pero tendrás más opciones que con el que trae Gutenberg de forma nativa. Pero ya digo, quizás es lo que necesitas, quizás no necesitas más. De hecho muchos suscriptores que me preguntan a veces les recomiendo que pongan Greet Gutenberg en la página de plugins de WordPress y encuentran alguno que les es útil, que les es suficiente. Más opciones. Imagínate que utilizas Elementor u otro constructor. Estos builders suelen traer ya opciones para mostrar una relación de contenidos, para que puedas crear tu propia página de archivo de un contenido personalizado o de las entradas del blog. Normalmente esto es en su versión de pago. Y también está limitado en cuanto a los filtros, porque los filtros son complejos, porque ya digo, hay que lidiar con la fuente que emite esos contenidos, con la query y esto es un poco complejo. Pero hay soluciones, por ejemplo, si utilizas Elementor, hay una extensión que se llama JetSmart Filters que precisamente hace eso, te añade la posibilidad, es un addon que funciona, ya digo, muy bien con Elementor y te añade la posibilidad de añadir filtros muy avanzados para tu página del blog, la que hayas creado con Elementor, o tu página de cursos que la hayas creado con Elementor o lo que sea. Entonces digamos que completa eso que le falta al aelementor, Si no me equivoco también funciona para el editor nativo, aunque no estoy muy seguro, esto comprobadlo. Y luego tenemos la opción de usar un plugin de grid y de filtros especializado, porque los hay, ya digo, separados. También hay uno muy popular que se llama Fase WP, que está pensado solo para la parte de filtros, es decir, para crear filtros para contenidos que ya existen. Este por ejemplo está muy bien, es muy popular, es de pago también, pero no es tan fácil de usar porque sí que hay que lidiar con un poquito de código. En este caso WP Grid Builder es la solución completa, porque te trae ya la posibilidad de crear, de diseñar, de estructurar los grids, los listados de contenido con sus filtros y con control sobre el diseño. Y todo esto sin tocar código, por eso me parece tan buena solución. Bien, esto es todo lo que tienes a tu disposición. No he entrado muy en detalle en cada una de ellas, si te interesa pues puedes preguntar, pero creo que el mapa de las opciones queda claro. Ahora vamos a desarrollar la que para mí es la mejor solución, WP Grid Builder, quizás no la mejor para todos los casos, pero la más completa para el que busque un poco controlar todo esto. Comenzamos con el precio. WP Grid builder empieza en 49 dólares al año, que esto es para una web, trae todas las funcionalidades, tiene un par de planes más, pero son para si lo quieres instalar en más webs, no te añaden funcionalidades extra, así que básicamente 49 dólares al año y la renovación es al 20% de descuento. A mí me parece, si es un plugin que vas a usar de verdad, me parece muy barato. Y como te comentaba, es una solución completa para consultar, diseñar y filtrar contenido en WordPress sin usar código. Al final es todo lo que necesitas en este sentido para o en un solo plugin, empaquetado en un solo plugin. Por ejemplo trae 20 tipos de formas de filtrar contenido por términos de una taxonomía, aunque sea taxonomías personalizadas por campos de WordPress, lo típico de filtrar por fecha, por usuario, metainformación que va asignada a los contenidos, pues también puedes filtrar por ese tipo de campos o incluso de campos personalizados. No sé si estás familiarizado con el concepto de campos personalizados, tienes un curso completo, pero si los usas te permite crear filtros en base a campos personalizados, lo cual es muy potente. Eso por un lado, la parte de los filtros. Por otra, puedes mostrar tus tipos de publicaciones, ya digo, ya sean entradas del blog o cualquier contenido que tú tengas creado o uno que ya exista a través de un plugin como uno de ecommerce por ejemplo. También puedes mostrar si quieres una relación de términos de una taxonomía, es decir, por ejemplo una relación de categorías, una relación de etiquetas, incluso puedes mostrar una relación de usuarios, podrías llegar a crear un grid, un listado de usuarios con este plugin. Y todo esto, tanto publicaciones como taxonomías como usuarios, los puedes mostrar en formato cuadrícula o en formato carrusel, y el formato carrusel también tienes mucho control, puedes hacer que con el dedo se mueva, puedes ponerle flechitas, puedes diseñarlo como quieras y funciona muy bien. Yo por ejemplo en mi página de inicio lo tengo así, muestro un poco pues los últimos cursos, los últimos vídeos, de la zona código y lo tengo puesto en formato carrusel, mientras que en la propia página de cursos los muestro hacia abajo y en la propia página de vídeos de la zona código los muestro hacia abajo. Y luego tiene ese constructor visual de tarjetas súper avanzado donde puedes diseñar la apariencia de los elementos que van a salir en tus cuadrículas o en tus carruseles con más de 20 tarjetas prediseñadas, que yo te aconsejo partir de una prediseñada y modificarla, porque tiene tantas opciones que hacerlo desde cero te puede resultar un poquito tedioso. Entonces a mí me gusta partir de un diseño que más o menos se asemeje a lo que quiero y luego voy mostrando. Y no sólo tienes control sobre el diseño, sino lo que se muestra en esa tarjeta. Por ejemplo, yo lo tengo puesto en mi web para que la típica descripción, imagínate los cursos, los cursos, pues yo muestro tres columnas y se van viendo todos los cursos y cada uno de los elementos tiene imagen destacada, debajo tiene el título, luego tiene una descripción y en esa descripción yo hago que recoja la información de la descripción que yo pongo en el plugin de SEO de Yoast, es decir, lo que uso para Google para que se muestre en los resultados de búsqueda de Google es lo que muestro ahí. Pero podrías hacer que se muestre el extracto, podrías hacer que se muestre cualquier otro tipo de campo personalizado, porque al final esto es un campo personalizado que pone el plugin de Yoast, para que veas un poco hasta qué punto tienes control en lo que se muestra de forma dinámica, de forma automática en cada una de las tarjetas. En las notas del episodio os voy a dejar el enlace para que vayáis, yo tengo enlace de afiliado, así que si vais a Gonzalo Navarro es WP Grid todo junto, pues vais directamente, ya sabéis, con la mejor oferta del momento. Bien, vamos a terminar con mi opinión personal sobre WP Grid Builder. Yo lo uso en mi web, ya digo, para mostrar mis cursos con el aspecto que yo quiero, el diseño que quiero en la tarjeta, con los contenidos que quiero en cada tarjeta, con un buscador que busca solo en los cursos y no busca en toda la web, como es el buscador nativo de WordPress y con filtros específicos en base a categorías personalizadas que yo he creado para mis cursos. Y lo mismo lo hago en la zona código, la zona código también muestra la relación de contenidos que te llevan a esos vídeos con el código debajo, donde te enseño a hacer modificaciones de tu web por código. Y también tengo creadas taxonomías, una taxonomía personalizada para este tipo de contenido. Y lo mismo, pues tengo un buscador y tengo ese filtro personalizado para buscar, sobre todo para filtrar por tipo de código, si buscas modificaciones por CSS, pues filtras por CSS o por HTML o por PHP o por plugins, modificación de plugins específicos por código. Y lo tengo todo así organizado, con mucho control. Y también control sobre el aspecto. Por ejemplo, cada contenido de la zona código no lo muestro con imagen destacada, lo muestro con un aspecto un poco más lean, un poco más limpio y con un diseño diferente al que muestro los cursos. Y luego, como te había comentado, tengo otro grid para cada uno creado, que muestro en la página de inicio, que es un poco la página de venta de la suscripción, donde los muestro en formato carrusel para que no me ocupen tanto en la pantalla y la gente pueda ir viendo todos sin que tengan que bajar un montón, que tenga que hacer mucho scroll. Y ya digo que este plugin tiene una pequeña curva de aprendizaje, pero es que para mí cubre una enorme necesidad. No sabéis cuánta gente me pregunta ¿Cómo puedo poner filtros, ¿Cómo puedo crear, personalizar mi página del blog, ¿Cómo puedo hacer todo esto? Y este plugin te trae todo, porque claro, para mí yo podría decir, pues mira, tienes que hacer esta modificación por código, tienes que lidiar con la query, tienes que hacer esto. Pero eso es muy complejo, ni siquiera yo me quiero meter en eso, habiendo una solución como WP GridBuilder que me facilita tanto todo esto. Así que ya digo, cubrir esa necesidad de tener control total sobre cómo se muestra y cómo se interactúa con los contenidos de tu web, ya sean personalizados o nativos, pues para mí es una maravilla. Y yo creo que WP Grid Builder es la mejor y más completa solución que he probado, al menos para crear grids filtrables, crear listados de contenidos filtrables, sí. Y ya sabes que si te interesa y quieres aprender a utilizarlo, ya tienes disponible el curso de Wallet Builder. Ahí vemos absolutamente todo, cómo instalarlo y hacer su configuración inicial. Por cierto, te dejo el plugin para que puedas instalarlo y probarlo antes de comprarlo, que será totalmente funcional ya cuando vayas a crear o publicarlo de forma definitiva yo siempre te recomiendo que compres la licencia para que puedas actualizarlo de forma segura y demás. Y luego como digo pues vamos viendo una clase para cada gran elemento, una clase para cómo crear un grid, una clase para cómo diseñar y crear las tarjetas, otra clase para cómo crear las facetas y los filtros, una clase donde te explico cómo puedes mostrar todo esto que has creado en la parte frontal de tu web, ya sea con shortcodes, con bloques de Gutenberg o con widgets que proporciona WP Grid Builder. Y por último en la última clase vemos un caso práctico en el que creo un grid y filtros para cursos, porque es una de las preguntas que más me hacéis, pero lo podéis aplicar para cualquier otro tipo de contenido, yo lo hago con un tipo de contenido personalizado llamado cursos, pero veréis en esa clase que es aplicable a cualquier tipo de contenido. Así que como digo ya lo tenéis disponible si estáis suscritos y si no Gonzalo Navarro es ahí tenéis toda la info para apuntaros. Como siempre muchísimas gracias por estar ahí escuchando. Nada más por este episodio, nos seguimos escuchando, adiós.