505 | Visibilidad condicional en WordPress (casos de uso muy útiles)

En el episodio 505 de WordPress semanal te cuento cómo sacar partido al plugin Block Visibility, uno de los complementos más flexibles que existen para el editor. Veremos casos de uso muy prácticos para mostrar u ocultar bloques exactamente dónde y cuando quieras. Vamos allá. Hola, hola, soy Gonzalo Navarro y Bienvenidos al episodio 505 de WordPress Semanal, el podcast en el que aprendes a crear y gestionar tus propias webs con WordPress en profundidad. Hoy hablamos de la visibilidad condicional y además voy a intentar darte ejemplos y casos para que puedas hacerte una muy buena mejor idea de lo que puedes llegar a conseguir. Ahora nos vamos a adentrar en todo ello, pero en esencia lo que te voy a explicar es cómo puedes mostrar u ocultar contenidos de páginas, entradas, blog, tienda, lo que sea en función de reglas. Y todo ello sin necesidad de código y sin instalar constructores. Aparte, vamos a ver que las posibilidades son enormes. Pero antes, como siempre, novedades. ¿Qué está pasando en Gonzalo Navarro es esta semana? Pues tenemos nuevo vídeo de la zona Código y en él aprendes a crear un saludo flotante para los clientes que hayan iniciado sesión en tu tienda online con WooCommerce. Esto es a raíz de algo que hice con un cliente hace tiempo y quería tener una especie de plaquita que saliese. En nuestro caso lo hicimos en la parte alta de la web, en la esquina superior derecha, porque es donde más sentido tenía para su web. Pero para este ejemplo os lo he puesto en la esquina inferior derecha y también os he explicado cómo podéis hacerlo si queréis moverlo a la izquierda. ¿Por qué? Porque en la mayoría de casos en la parte superior va a molestar porque se va a poner encima de algún elemento de navegación o lo que sea. Pero bueno, básicamente lo que os enseño es a recoger de forma automática el nombre del cliente que ha iniciado sesión en WooCommerce y además le puedes poner el texto que tú quieras y enviarle a su página de cuenta. De esta forma le haces muy sencillo la navegación por esa parte de tu web y además lo haces más personalizado. Como siempre, la zona Código es para no desarrolladores, así que lo único que tienes que hacer es ver el vídeo, copiar el código que hay debajo y pegarlo en tu web. Esta y el resto de novedades las tienes en las notas del episodio a las que puedes acceder de forma rápida y sencilla escribiendo en tu navegador GonzaloNabarro es 505, que es el número de este episodio. Así funciona con todos los episodios. ¿Qué más novedades? Pues tenemos el curso de Blog Visibility, que es el plugin del que te voy a hablar en este episodio, así que no me voy a adentrar demasiado, simplemente decirte que es, como siempre, un curso 100% práctico, con un vídeo para cada control, para que solo vayas a lo que necesites. Por supuesto, sí que te recomiendo ver las dos primeras clases, donde te hago una demostración de lo que puedes lograr con el plugin. Lo instalamos, hacemos un repaso general, en la segunda configuramos todos los ajustes y a partir de la tercera clase es donde empezamos a ver cada uno de los controles de visibilidad, uno por clase, uno por vídeo, para que ya digo, solo vayas a lo que necesitas. Algún control es tan sencillo que en cinco minutos nos despachamos. Otros son un poquito más complejos y os doy ejemplos útiles para que lo apliquéis en vuestras webs. Y puede 10 minutitos o algo más. Ya digo, lo tenéis en las notas del episodio. Y por último os dejo el enlace a la newsletter de WordPress Semanal, donde comparto cosas que descubro cuando trabajo con clientes trabajando con mi propia web. Ahora tengo una estructura nueva de la newsletter que está gustando mucho, donde hablo del tema de la semana, que puede ser como una especie de tutorial de algo relacionado con la gestión y creación de webs con WordPress. Luego hablo de noticias que suelen estar relacionadas no 100 % con WordPress, aunque algunos casos sí, sino también con tecnología, con cómo herramientas de inteligencia artificial te pueden ayudar también en tu día a día de la gestión de webs. Y luego tengo off topics donde hablo a veces de marrones que me pasan en el trabajo, que no tienen por qué ser así, haces esto en una web, sino que pueden ser historias con las que a lo mejor te puedas sentir relacionado, incluso puedas aprender de ellas. En fin, un poco también una sección para contar mis historias. Si te gusta WordPress, si te gusta este podcast, estoy seguro de que la newsletter también te va a encantar. En Gonzalo es lista, te apuntas y si no, en las notas del episodio tienes un enlace directo. Perfecto. Pues una vez vistas las novedades Vámonos ahora con el plugin de la semana que se llama Disable XML. Este nombre tan raro simplemente te explica lo que hace el plugin y es que desactiva precisamente esa funcionalidad, la de XMLR PC, que es una potencial puerta de entrada muy utilizada en ataques automatizados y ataques de fuerza bruta. Y al activar este plugin desactivas ese acceso, mejorando potencialmente la seguridad y reduciendo un poquito, tampoco va a ser un gran impacto la carga en el servidor de tu web. ¿Por qué recomiendo este plugin? Porque sé que hay gente que no utiliza un gran plugin de seguridad y los grandes plugins de seguridad ya traen una característica que te permiten desactivar esto. Pero si tú lo que vas haciendo es, por un lado tienes un plugin para limitar los intentos de login, luego por código pones otras cosas y luego te llega el caso en el que quieres desactivar esto, pues este es el plugin, si no el más popular, uno de los más útiles para esta característica tan típica de la optimización de la seguridad de una web. Venga, pues ahora sí, vámonos con el tema central del visibilidad condicional en WordPress con casos de uso útiles. Pero vamos a comenzar definiendo qué es Block Visibility y por qué puede mejorar muchísimo tu forma de trabajar en WordPress. Bueno, este es un plugin que te permite controlar cuándo, cómo y a quién vas a mostrar cada bloque o grupo de bloques dentro del editor de tu web. Es decir, aquí estamos hablando del editor nativo de WordPress, antes conocido como Gutenberg, y este es uno de los mejores plugins para ello. De hecho me extraña mucho que solo tenga 40.000 descargas, es decir, solo está activo en 40.000 webs con WordPress cuando es una pasada. Es cierto que algunas de sus características vienen en los típicos plugins que extienden los bloques, pero son las más básicas. Este plugin tiene unas funcionalidades increíbles y además está muy bien pensado, solo digamos que tienes visible lo que vas a utilizar. A mí la verdad que es un plugin que me encanta, si pudiese resumir su utilidad, digamos, pues básicamente te va a evitar duplicar páginas desde una sola página, puedes tener un contenido dirigido o a distintas personas o distintos objetivos, te permite personalizar el contenido de una web sin liarla mucho con el diseño, te da muchísimo control sin necesidad de programar, sin necesidad de desarrollo y además es ligero y se integra directamente con el editor nativo de WordPress. Porque estas características, algunas de ellas, no todas, están incluidas en builders como Elementor y demás y mucha gente las echa de menos al pasarse al editor de bloques o al usarlo, porque mucha gente los usa de forma indistinta según el proyecto. Pero ¿Qué controles me ofrece este plugin? Vamos a entrar ya en detalle y ver lo que tenemos. Bueno, lo voy a dividir entre controles básicos y algunos controles un poquito más avanzados, No voy a decir todos porque son muchísimos, pero entre los controles básicos tenemos cosas que yo creo que todo el mundo necesita en algún momento y es por ejemplo la posibilidad de mostrar de forma condicional según el dispositivo, es decir, si es un móvil, si es un sobremesa o incluso si es un bot. También puedes detectar si es un bot, que los bots no tienen por qué ser malos, puede ser el robot de Google que se pasa por las webs para luego indexarlas o puede ser un bot malicioso que quiera hacer de las suyas, pero en este caso tú vas a poder decidir que se muestre o no ciertas partes de tu web en función de esto. También tenemos controles en función de fecha y hora. Yo esto lo he utilizado ahora en la campaña de Black Friday, porque tuve un pre Black Friday, entonces yo creé una única landing, que es lo que hice, como casi todo el contenido iba a ser igual, porque yo estoy promocionando mi membresía con acceso anual con un descuento, pero en pre Black Friday había bonos, entonces yo los tuve explicados en la landing, pero los tuve explicados solo hasta el viernes, que es cuando empezaba Black Friday normal. Entonces yo eso dije, solo quiero que se muestre desde, no me acuerdo cuando lance la campaña, pero desde el día que la lancé hasta el viernes o el jueves a las 23.59 que es como lo puse, y después deja de mostrarse, con lo cual me evita tener que estar pendiente o tener dos landings distintas y es muy útil. Y no solo esa parte, luego tenía las preguntas frecuentes, por ejemplo, tenía algunas preguntas relacionadas con los bonos que estaba dando yo en el pre Black Friday. Claro, no mola mucho que si alguien llega después en el Black Friday normal que se vayan las preguntas frecuentes y que diga uy, qué pasa que aquí hay bonos. Lo podría haber dejado porque al final lo que estaba haciendo era premiar a los que se adelantaban a ese Black Friday, pero bueno, en mi caso yo quería dejarlo bastante bien diferenciado, incluso el título era distinto porque en el pre hablaba de los bonos y en el siguiente no. En fin, muy útil. Más pues tienes controles también según el tamaño de pantalla, que esto es muy útil para ajustar diseños sin tener que tocar CSS ni jugar con los media queries. Y esto es una característica que sí suele venir en otros players, pero que aquí ya digo, son de los básicos y que puedes decir pues esto no quiero que se muestre en móvil, esto no quiero que se muestre en tablet o lo que sea. En general yo no soy muy partidario de pasarte usando esto, pero hay veces en las que sí que es útil, sobre todo cuando juegas con columnas y a lo mejor quieres tener cuatro columnas en pantalla grande y luego en móvil quieres mantener, imagínate dos columnas y no quieres que se te vaya simplemente a una cosa debajo de otra. Pues aquí podrías jugar y podrías crear dos estructuras distintas, una con cuatro columnas y decir que solo se muestre en pantalla grande, en escritorio o a lo mejor también en tablet, y luego otra con dos secciones de dos columnas y decirle que solo se muestre en móvil, digamos el mismo contenido pero con dos estructuras. Ya digo que no soy muy partidario de abusar de esto porque puedes llegar a crear una página con demasiados elementos, pero en algunos casos puede ser súper útil. Otro control bastante esencial puede ser por el estado del usuario o más cosas relacionadas con el usuario. Por ejemplo, mostrar un contenido si el usuario ha iniciado sesión o si no ha iniciado sesión. Si no ha iniciado sesión le puedes poner un mensaje inicia sesión aquí y solo lo va a ver los que no estén logueados, sin embargo cuando inicien sesión no van a ver ese bloque y van a ver otro que tú le has puesto que solo van a ver los conectados, que puede ser un contenido solo para usuarios que han iniciado sesión. Pero más allá de esto, puedes hacer dentro de este mismo control ajustes súper potentes. Podrías llegar a decir que ese contenido en concreto solo quieres que lo vea el usuario llamado Agustín o los usuarios llamados Agustín y Javier y serían usuarios de tu web. Es decir, puedes controlar a nivel de usuario concreto los que ven un contenido o no. También lo podrías hacer por perfil de usuario, que solo los que tengan el rol de usuario clientes vean este contenido, que solo los que tengan el rol de usuario suscriptor, vean este contenido. Controles, ya digo, súper útiles, sobre todo, pues eso, si tienes una web en las que hay usuarios. Venga, vamos a ver algunos casos de uso prácticos. Ya te he mencionado algunos así a modo de ejemplo, pero que pueden llegar a ser necesarios en un montón de casos y además así te queda un poco más claro lo que puedes hacer. Bueno, uno lo hemos mencionado ya, que es básicamente mostrar un CTA distinto para usuarios no registrados y aquí puedes ir un poco más allá, porque tú imagínate que como es mi caso, tienes algo en tu web que ofreces de forma gratuita y que requiere un registro, pero no un pago, Entonces a lo mejor, pues al registro, la gente que se registra tiene el perfil o el rol suscriptor, sin embargo cuando compra tiene cliente, pues entonces tú podrías llegar a crear un CTA, una zona de regístrate, compra esto, lo que sea, que solo se muestre a usuarios que han iniciado sesión, es decir, estaríamos asumiendo que son suscriptores o incluso usuarios suscriptores por ser más certeros, pero que no tienen el rol de cliente, con lo cual podrías crear un mensaje mucho más personalizado y decirle algo así como si te gusta el curso gratuito, apúntate ahora a la membresía donde vas a tener además de todos los cursos avanzados, seguimiento personalizado y tal, tal, tal. Sin embargo, si la persona no está conectada, a lo mejor no queremos mostrarle la parte de pago aún, simplemente queremos mostrarle la parte de que se apunten al curso gratuito para que vean un poquito cómo es por dentro y demás. Entonces con esto, con tanto control que tenemos de forma condicional en la visibilidad de los contenidos, podemos personalizar la experiencia mucho más de nuestros visitantes y en última instancia mejorar también nuestros números, nuestras ventas, etc. Más opciones, cambiar la cabecera o el menú según el dispositivo. Realmente esto lo vas a poder hacer si utilizas un tema basado en bloques, porque como aquí estamos utilizando el editor nativo de WordPress, tienes que poder tener acceso a él para aplicar las características de Block Visibility. Entonces si usas un, ya digo, tema basado en bloques, entonces sí vas a poder aplicar esto en el curso, te enseño cómo porque hay que activar una funcionalidad, pero si no, pues no. Si no tendrás que utilizar las características del tema que sea o del constructor que sea. Después tenemos la posibilidad de ocultar una sección durante ciertas horas o días. Imagínate, y esto lo vemos en una clase del curso, que tú quieres tener la posibilidad de que te llamen por teléfono, pero no quieres que ese botón o ese enlace esté disponible en las horas en las que tú no estás en la oficina, pues lo podrías llegar a hacer. Pones un botón llámame con el típico HTML para la llamada, que simplemente poner tel, dos puntos y el número de teléfono y ya si están en móvil, que de hecho podrías combinar, puedes decir vale, este botón solo quiero que se muestre cuando están en móvil y de lunes a viernes de 8 a 3. Eso lo puedes hacer incluso de lunes a viernes de 8 a 3 y de lunes a jueves además de 8 a 3, de 4 a 6 porque hay turno partido o lo que sea, pues lo puedes hacer, o para mostrar mensajes solo en época de promociones y tenerlo ya listo, pues en Black Friday, que siempre sabes que lo hay, pues lo pones en Navidad, lo que sea. Que una vez a la semana haces algo, pues lo puedes dejar programado e incluso como vemos en el curso, en zonas estructurales, es decir, en plantillas de página, en pies de página, en cabeceras, en fin, las posibilidades son enormes. Vamos a ir un paso más allá, vamos a ver algunos casos de uso avanzado, cosas que normalmente solo vamos a poder hacer por código y que además resultan un poco complejas por el tipo de condicionalidad. Por ejemplo, Blog Visibility nos permite mostrar contenidos o no en función de la ruta. ¿Esto qué quiere decir? Pues que imagínate que tú tienes cuatro categorías en tu blog, tienes el blog normal y luego tienes aparte cuatro categorías. Cada categoría tiene su página de archivo, es decir, una página donde se muestran los contenidos asociados a esa categoría. Entonces pongamos que tengo un blog sobre fitness y alimentación y una categoría es nutrición, otra es entrenamiento, otra es descanso y ya está. Entonces tú imagínate que dentro de la página de archivo de nutrición, es decir, donde se muestran todas las entradas o todos los artículos de nutrición, tú quieres poner un banner o una especie de llamada a la acción que lleve a la gente a apuntarse a tu curso de nutrición gratuito o a tu newsletter específica sobre nutrición o lo que sea. Sin embargo, en la de entrenamiento quieres que se descarguen el checklist de los 10 mandamientos para hacer un buen entrenamiento de fuerza. Claro, las páginas de categoría, las páginas de archivo, las páginas de blog no se pueden editar una a una, es decir, yo no puedo editar la página de categoría de entrenamiento y luego la página de categoría de nutrición, salvo que yo las cree aparte y no sean páginas de archivo reales, sino que sean creadas un poco manualmente. Pero si son las que muestran los contenidos de forma automática y queremos poner llamadas a la acción como esta, estamos un poco vendidos, salvo que usemos código. Pues bien, con este plugin yo me puedo ir a editar, siempre y cuando utilice un tema basado en bloques, me puedo ir a editar la página de archivo general, es decir, la que se va a usar para mostrar, ya digo, la página general de blog, la página de una categoría específica, la página de otra categoría, y puedo poner por ejemplo el CTA de la parte de nutrición, darle el control de visibilidad por ruta y decirle este bloque solo se va a mostrar cuando se detecte en la ruta de la URL que pone categoría nutrición. Y luego creo otro CTA en esa misma página, le añado la condición de visibilidad y le digo esto sólo se va a mostrar en categoría entrenamiento. De modo que si tú te vas a cualquiera de esas páginas específicas, solo vas a ver SCTA, y si te vas a otra página que está tirando también de esa plantilla de archivo, como puede ser la página de blog o la otra página de categoría a la que no le ha asignado nada, la vas a ver normal sin esos CTA. Entonces eso te da un control brutal. En esta misma línea, otro control que tenemos es la fuente de referencia. Con este control de visibilidad tú vas a poder decir muéstrame este contenido, puede ser un texto, puede ser un vídeo, puede ser lo que tú quieras, todo lo que puedas meter desde el editor lo vas a poder mostrar de forma condicional o no, pues tú le puedes decir si viene de Google Ads, muéstrale este mensaje o no le muestres este bloque, si viene de Instagram, muéstrale esto o no le muestres esto, si viene de Substack, que a lo mejor tú tienes la newsletter ahí, pues muéstrale esto o no le muestres esto. Entonces el control es brutal. Y hay otro muy relacionado con esto, que es el control de visibilidad por parámetros. Y los parámetros también son muy útiles, Esto lo has visto mil veces, muchas veces te vas a Google, por ejemplo, pulsas en un resultado de búsqueda, imagínate que buscas freelance, WordPress, pulsas en un resultado de búsqueda y la URL es larguísima. ¿Por qué? Porque tiene un montón de metainformación que son parámetros y estos empiezan siempre con una interrogación y a lo mejor pone UTM source, Google Ads. Entonces estas URLs las crean muchas veces los propios marketers cuando hacen una campaña de publicidad para tener controlado todo y ver desde dónde viene la gente y demás. Otras veces lo hace el propio programa. Pues tú vas a poder aprovechar esto para mostrar o no ciertos bloques y ciertos contenidos de tu web en función de estos parámetros. Bueno, los casos son, ya digo, infinitos y dedico a cada uno de estos controles dedico un vídeo en el curso. Luego también lo bueno de este plugin es que se integra con algunos otros plugins muy populares como pueden ser WooCommerce, Easy Digital Downloads o Advanced Custom Fields, que para este último, el de Advanced Custom Fields, puedes hacer cosas muy chulas, como por ejemplo en función de campos que tú has creado, imagínate un campo en el que tú marcas una casilla y en función de esa casilla se va a mostrar un contenido en esa página o no se va a mostrar. Esto lo vemos, vemos un ejemplo en el curso y la integración entre ambos es una pasada. Pero luego, como digo, también tenemos con edd o con WooCommerce, donde tú puedes mostrar contenido según el estado de la compra, según si hay productos visibles en el carrito o no, según la categoría de producto que sea, o en IDD, pues solo mostrar un contenido a los que han comprado un producto concreto. En fin, básicamente todas estas partes que hemos visto de visibilidad pero enfocadas a estos plugins. Así que en líneas generales este plugin te permite crear variantes de una landing o de contenidos dentro de la misma URL, te permite mostrar versiones distintas de bloques sin tener que duplicar una página, que muchas veces hacemos esto. Te permite utilizar lógica condicional sin PHP, sin que te tengas que ir al código. Vas a poder gestionar redirecciones visuales con bloques alternativos dentro de la misma página, lo típico de tener un bloque de registro, un bloque de login y un bloque de bienvenida. Tenerlos en el mismo lugar y mostrarlos en función de las condiciones de visibilidad. Y luego crear personalizaciones increíbles según roles, según dispositivos, según campañas. Es decir, para muchísimos proyectos. Yo creo que este plugin es uno de los que tienes que tener en tu arsenal. Pero antes de que te emociones a tope. Vamos a intentar poner también un poco los pies en la tierra y que no se nos vaya a la cabeza. Porque ¿Qué te puede pasar con una herramienta como esta? Que abuses. Que abuses de las condiciones y que empieces a crear páginas que ya no sabes ni qué has puesto para que vea uno ni que has puesto para que vea otro. Entonces, como siempre, te recomiendo simplificar, preguntarte si realmente necesitas eso que estás poniendo. Si lo necesitas, yo te diría que lo documentes de alguna manera, que tengas notas. El propio plugin te avisa cuando tú tienes un control de visibilidad, te pone un iconito y además cada icono representa un control distinto, con lo cual en este sentido lo hace también súper bien. Y luego además, como vemos en las primeras clases, tú puedes decidir qué controles quieres tener visibles y cuáles no. De modo que también te puede facilitar mucho la vida. Si tú jamás vas a utilizar el control de parámetros, pues quítatelo, así tienes como menos opciones. Luego hay una parte de la que no te he hablado, pero tú puedes crear configuraciones predefinidas y luego simplemente asignárselas a los bloques. Eso es algo que te recomiendo porque también puedes caer en el error de crear demasiadas versiones de un mismo bloque con siempre el mismo control o el mismo ajuste de visibilidad, cuando lo puedes crear en un ajuste global que se guarda y que luego simplemente lo asignas. Los preajustes se llaman, y esto lo vemos por supuesto también en el curso. Y luego también evita usar esto para tapar problemas de estructura y digamos, poner parches cuando tú sabes que realmente lo que tendrías que haber hecho es estructurar bien ese contenido. Por ejemplo, lo que he comentado antes de las columnas puede ser un caso muy concreto, pero en la mayoría de ocasiones lo que vamos a tener que hacer es crear un sistema bien de columnas y que luego quede bien. También en móvil esto se ve mucho con constructores visuales tipo Elementor, que ves que alguien ha creado una página prácticamente dos veces dentro del mismo contenido que tiene oculta, una en un tamaño de pantalla y otra en otro tamaño de pantalla, cuando lo ideal es hacer que eso se adapte bien a dispositivos móviles. Que hay una parte que sí, que sí necesitas que sea distinta, pues la pones, pero no toda la página, porque al final eso es un desastre, sobre todo si lo empiezas a hacer en muchas URLs distintas. Así que la clave es usarlo con intención, con los bloques justos, con pocas reglas y con la lógica muy clara. Fantástico, pues espero que te haya gustado el episodio. Recuerda que tienes todas las notas en GonzaloNabarro es 505, incluido el enlace directo al curso de Blog Visibility. Nada más, nos seguimos escuchando. Adiós.