En ocasiones necesitamos mostrar en nuestro sitio web un menú o quizá alguno de los elementos de un menú de forma condicional, es decir, que al visitante se le muestre el menú (o los elementos concretos que decidamos) dependiendo de en qué lugar de la web se encuentre o incluso dependiendo de sus privilegios (si es cliente con cuenta o no, si es administrador o colaborador de la web, etc).
Algo así como lo que veíamos hace unas semanas cuando hablaba de mostrar widgets de forma condicional, pero aplicado ahora a los menús.
Esto lo vamos a conseguir gracias a un plugin gratuito y muy útil, Menu Item Visibility Control.
Vamos a ver primero en un vídeo cómo funciona (que será mucho más fácil que explicado) y después te pondré toda clase de ejemplos de sus posibilidades y una lista más o menos exhaustiva de lo que se llaman los conditional tags, las funciones condicionales de WordPress mediante las que funciona este plugin. ¡Dentro vídeo!
Ya lo has visto. ¿Parece complicado? Pues ya verás con unos pocos ejemplos que no lo es.
Tabla de contenidos
Como has podido ver en el vídeo, el plugin hace uso de lo que WordPress llama los conditional tags, que son una serie de funciones que forman parte de WordPress y que sirven precisamente para establecer ciertos parámetros de forma condicional.
La lista completa está en el Códex de WordPress, concretamente aquí, pero a menos que sepas programar en PHP y conozcas las funciones propias de WordPress eso te va a resultar un follón.
Así que creo que lo mejor es ir viendo en este artículo la forma de utilizarlos para conseguir las cosas que más habitualmente se necesitan. Si no encuentras en el artículo solución a tu necesidad no dudes en preguntar en los comentarios o a través del formulario de contacto.
Como digo en el vídeo, los condicionales se aplican individualmente a cada elemento del menú. Si queremos que apliquen al menú completo deberemos incluir la condición en todos sus elementos.
No hay problema con esto ya que cada elemento puede admitir varias condiciones, como veremos más adelante en el artículo al hablar de los operadores lógicos.
Tags condicionales más útiles
Ahí van, te pongo lo que hace cada uno pero no te agobies si no lo entiendes, porque los veremos en los ejemplos.
- is_home (): si estamos en la página de entradas (la del blog)
- is_front_page (): si estamos en la página de inicio de la web
- is_single (): si estamos en una entrada individual (incluyendo custom post types, es decir, productos, portfolios, sliders…)
- is_page (): si estamos en una página
- is_singular (): igual que is_single (), pero incluyendo páginas y medios
- is_category (): si estamos en una página de categoría
- is_tag (): si estamos en una página de etiqueta
- is_archive (): si estamos en una página de archivo (categoría, etiqueta, archivo por fecha, tienda, blog…)
- is_404 (): si estamos en la página de error 404
- is_product (): si es un producto de WooCommerce
- is_product_category (): si es una categoría de WooCommerce
- is_user_logged_in (): si el usuario tiene cuenta y está logueado
Por supuesto que hay muchos más, pero con estos, aislados o en combinación unos con otros resolveremos el 90% de las situaciones. Además nos permiten hacer cosas como:
- is_category (): si estamos en una página de categoría cualquiera
- is_category (‘9’): si estamos en la categoría 9
- is_category (‘ropa-de-hombre’): si estamos en la categoría cuyo slug es «ropa-de-hombre»
- is_category (‘Ropa de hombre’): si estamos en la categoría llamada Ropa de hombre
Lo mismo se admite para las etiquetas, páginas, entradas individuales… Esto es muy potente a la hora de establecer condiciones para los elementos de los menús.
Pero basta de cháchara y vamos a empezar a ver ejemplos concretos. Intentaré evitar tecnicismos en la medida de lo posible, pero de nuevo te invito a preguntar si hay algo que no entiendas o no te ha quedado claro del todo.
Especificando dónde mostrar o dónde ocultar
Lo bueno de todo esto es que puedes especificar los condicionales de dos formas: indicando dónde debe mostrarse el elemento o bien indicando dónde debe ocultarse, simplemente incluyendo un signo. Por ejemplo:
- is_page (‘Contacto’): el elemento sólo se mostrará en la página titulada Contacto.
- !is_page (‘Contacto’): el elemento se mostrará en todas las páginas excepto en la que se titula Contacto.
¿Estás construyendo tu tienda online o eres implementador WordPress?
¿Necesitas plugins de calidad y con soporte para implementar funcionalidades concretas?
Consigue todos los plugins a la venta en la sección de plugins de esta web y todos los que siga añadiendo. Acceso a los 96 plugins (y subiendo) con soporte directo del desarrollador, actualizaciones y uso ilimitado: úsalos en tantas webs como lo necesites.
Menú condicional dependiendo de qué lugar de la web está viendo el usuario
Empecemos por mostrar elementos del menú en algunos lugares de la web. Digamos que tienes un comercio electrónico con un blog, y que utilizas los contenidos de ese blog para atraer clientes mediante marketing de contenidos.
Te interesará entonces que en todo el blog aparezca el enlace a la tienda online, pero no a la inversa, ya que no quieres que alguien que llegue directo a un producto se vaya a curiosear al blog y finalmente acabe olvidándose de ese producto que le interesaba.
Lo que queremos entonces es que el elemento «Blog» del menú de WordPress sólo se muestre en la esfera del blog, y no la de la tienda. Así a ese elemento podemos añadirle los siguientes condicionales:
- Que estemos en una entrada individual, pero no en un producto
- Que estemos en una de las páginas de archivo del blog
Después ya tendrás que afinar con cosas como si quieres que aparezca en las páginas o no, etcétera.
Menú condicional dependiendo de qué privilegios tiene el usuario
No sólo puedes utilizar condicionales que decidan si mostrar el elemento o no en función del lugar de la web, sino también en función de los privilegios que tenga el usuario. Como por ejemplo si tiene cuenta de cliente o no.
Por ejemplo, si quieres mostrar el elemento de WooCommerce «Mi cuenta». Ya sabes que ese enlace funciona para todo el mundo, esté dentro de su cuenta o no, aunque de forma distinta: si estás logueado te lleva a los detalles de tu cuenta, y si no a la página de registro.
Bueno, pues con este plugin podríamos afinar eso creando dos elementos en el menú, ambos iguales, pero con distintos nombres: «Mi cuenta» y «Registrarse». Y después mostrar uno u otro en función de si el visitante tiene cuenta (y está logueado) o no, con is_user_logged_in ().
Condiciones complejas: los operadores lógicos
Los tags condicionales no sólo pueden utilizarse así, sueltos, sino que también pueden combinarse entre ellos para crear condiciones más complejas:
- && para unir varias condiciones que deben cumplirse (si alguna de ellas no se cumple, el elemento no se muestra)
- || para unir varias condiciones en las que baste que una se cumpla para que el elemento se muestre
Si por ejemplo quiero que un elemento del menú se muestre sólo a los usuarios con cuenta que estén en una determinada categoría de la tienda:
is_user_logged_in () && is_product_category ('Muebles de cocina')
O, pongamos otro ejemplo, si queremos que cierto elemento del menú sólo sea visible desde las páginas de «Aviso legal», «Política de cookies» y «Condiciones de envío»:
is_page ('Aviso legal') || is_page ('Política de cookies') || is_page ('Condiciones de envío')
O, por último, si queremos que un elemento del menú aparezca sólo en las entradas cuyo autor sean o Pepe o Juan:
is single () && (is_author ('Pepe') || is_author ('Juan'))
Como ves, los paréntesis aumentan las posibilidades hasta el infinito.
Todo el control gracias a PHP
A decir verdad, este plugin admite como condicional no sólo cualquier tag condicional de WordPress, sino que en realidad admite cualquier función de PHP. Es decir, si sabes programar en PHP (y más aún, si programas para WordPress), no hay límites en lo que puedes hacer con esto: control total sobre el menú.
Así que ya sabes, si necesitas hacer alguna cosa en especial con tu WordPress (ya sea con los menús o con cualquier otra cosa) no dudes en contactarme. 😉
Erick dice
Excelente Post, te felicito por tu trabajo. Saludos!
Enrique J. Ros dice
Gracias Erick, me alegra que te haya sido útil.
Un saludo.
Erick dice
Hola Enrique,
He instalado el plugins que recomiendas en este post y me muestra este error:
Fatal error: Class ‘Walker_Nav_Menu_Edit’ not found in ../wp-content/plugins/menu-items-visibility-control/includes/walker-nav-menu-edit.php on line 7
Tienes alguna idea como se puede corregir ese error? He Instalado la última versión que muestra los plugins de WP. Si me puedes ayudar te lo agradezco, muchas gracias!
Enrique J. Ros dice
Hola Erick
En ese archivo está declarada la clase Boom_Walker_Nav_Menu_Edit que extiende la clase Walker_Nav_Menu_Edit, que es la que tu sistema no encuentra. Esta clase está declarada en WordPress, en el archivo /wp-admin/includes/class-walker-nav-menu-edit.php. Verifica que tienes ese archivo, seguramente falte o esté dañado. Si es así descarga el paquete de WordPress, descomprímelo, y sube ese archivo a tu instalación en su sitio.
Un saludo.
Erick dice
En la última versión de WP no se encuentra esa clase declarada «Boom_Walker_Nav_Menu_Edit» en ese archivo, lo que se me ocurre es descargar versiones anteriores de WP y verificar en cuál se encuentra declarada y sustituir ese archivo «class-walker-nav-menu-edit.php». No se que te parece mi idea. Tienes alguna sugerencia?
Agradecido con tu respuesta
Enrique J. Ros dice
Hola Erick
No, has entendido mal. La clase Boom_Walker_Nav_Menu_Edit la declara el plugin extendiendo la clase Walker_Nav_Menu_Edit, que es la que declara WordPress en el archivo class-walker-nav-menu-edit.php.
Un saludo.
Sergio dice
Fantástico post Enrique, muy util.
¿Se te ocurre alguna manera de esconder o mostrar todo el menu sin tener que ir item por item, aunque sea por código? Te explico, tengo que crear 4 menus que se mostraran en 4 categorías o CPTs distintos. Lo que quiero es crear un sitio web que albergue realmente a 4 proyectos.
Un saludo
Enrique Ros dice
Hola Sergio
Sí, cada menú tiene un ID específico, así que puedes hacerlo por CSS. El problema es que no vas a poder asignar los cuatro menús en el mismo lugar, ya que al seleccionar uno se deselecciona el que esté establecido, aunque por código se puede hacer.
Un saludo.
Enrique Caicedo dice
Gracias era justo lo que necesitaba.
Enrique J. Ros dice
Gracias por tu comentario, Enrique. Me alegra que te haya sido útil 🙂
Hugo dice
Hola Enrique, gracias por tu post ha funcionado muy bien. He insertado el código !is_archive (‘wordpress/tienda/’) para un CTA que quiero agregar en un página que aún estoy desarrollando, lo que deseo hacer es al momento que llegan a la tienda este CTA desaparezca y aparezca otro enlace personalizado, en principio funciona muy bien, pero cuando entro a un producto especifico me vuelve aparecer el CTA y no debería. Ya agregue condiciones complejas !is_archive (‘wordpress/tienda/’) && is_product (‘herramienta’) y no funciona, ya intenté … && is_single () pero sigue apareciendo… puedes darme una mano
Enrique J. Ros dice
Hola Hugo
No entiendo muy bien qué condicionales necesitas. Si no quieres que te aparezca en un determinado producto puedes usar !is_product(‘id o slug’)
Un saludo,
javiel dice
hola Enrique como muy bueno el poet. Tengo una duda si quiero preguntar si es un rol determinado y estas en una pagina determinada entonces redireccionar al loggin
Saludos y gracias de antemano
Sebastian Poblete dice
Te pasaste… fue de gran ayuda!!
Enrique J. Ros dice
Me alegra que te haya sido útil, Sebastián 🙂
Gracias por tu comentario, un saludo.
Sunbreeeeze dice
Es posible mezclar las opciones de mostrar y no mostrar, es decir, tengo una web con 6 páginas, las 4 primeras están en el menú y las otras no y quiero que cuando estemos en las páginas 3,4,5,6 se vea en el menú la 3 y la 4 y cuando estemos en la 1 y 2 se vean solo la 1 y la 2. Por ello he puesto dos condiciales:
– !is_page (1) || !is_page (2) para la primera condición en las páginas 3 y 4
– is_page (3) || is_page (4) para la segunda en las páginas 1 y 2
La primera condición funciona pero la segunda no, ¿tengo q poner !is_page en todas?
Enrique J. Ros dice
!is_page (1) || !is_page (2) es una condición que se cumple siempre, ya que le estás diciendo «si no es la página 1 o no es la página 2», y eso se cumple estés en la página que estés (en la 1 se cumple que no es la 2, en la 2 que no es la 1, y en las demás se cumplen ambas). Para las negaciones deberías usar un && en todo caso.
Octavio dice
Hola excelente tutorial, me gustaria saber para esta condicion is_page (‘Aviso legal’) || is_page (‘Política de cookies’) || is_page (‘Condiciones de envío’) que sea Nofollow, teniendo en cuenta que son articulos recientes, como podria realizarlo gracias.
Enrique J. Ros dice
Hola Octavio
Echa un vistazo a esta entrada, te será de utilidad
Un saludo