A veces, es posible que desee diferentes elementos de menú para aparecer en diferentes páginas de WordPress. O puede que desee un menú especial sólo para los usuarios conectados.
Por defecto, WordPress muestra el mismo menú en todos los temas. Este enfoque único no siempre es ideal.
En este artículo, le guiaremos sobre cómo añadir lógica condicional a sus menús. De esta manera, puede personalizar lo que ven los visitantes en función de condiciones específicas.
¿Por qué añadir lógica condicional a los menús de WordPress?
Los menús de navegación estructuran su sitio web WordPress y ayudan a los visitantes a encontrar lo que buscan. Por defecto, su sitio web WordPress mostrará el mismo menú de navegación a todos los usuarios y en todas las entradas y páginas.
Sin embargo, puede haber ocasiones en las que desee mostrar diferentes menús a diferentes usuarios o en diferentes páginas de su sitio web.
Sitios web como una tienda en línea, una comunidad de sitios de membresía en WordPress o una plataforma de aprendizaje en línea pueden beneficiarse de menús de navegación personalizados.
Utilizando la lógica condicional, puede añadir elementos / artículos adicionales en el menú para que los usuarios conectados puedan gestionar sus cuentas, renovar sus suscripciones o ver los cursos en línea que han comprado. Piense en ello como un control de acceso al menú de WordPress.
Con esto en mente, le mostraremos cómo añadir lógica condicional a los menús de WordPress. Estos son los debates que vamos a cubrir en este tutorial:
- Creating New Navigation Menus in WordPress
- Showing a Different Menu to Logged-In Users in WordPress
- Showing a Different WordPress Menu Depending on User Role
- Showing a Different Menu for Different Pages in WordPress
- Hiding the Navigation Menu on Landing Pages in WordPress
- Doing More With WordPress Navigation Menus
¿Preparados? Primeros pasos.
Crear nuevos menús de navegación en WordPress
El primer paso es crear los menús de navegación adicionales que desea mostrar en WordPress. Después de eso, puede utilizar la lógica condicional para decidir cuándo se mostrará cada menú.
A partir de aquí, le mostraremos cómo añadir menús condicionales a WordPress tanto para editores clásicos como de bloques.
Creación de nuevos menús de navegación en WordPress con el editor clásico
Este método funciona para los usuarios de temas clásicos.
Para crear nuevos menús de navegación, simplemente diríjase a la página Apariencia ” Menús en el escritorio de WordPress. Si ya tienes un menú de navegación que utilizas en tu sitio web para todos los usuarios, este puede ser tu menú por defecto.
A continuación, tendrá que enlazar el enlace “crear un nuevo menú” para crear un nuevo elemento / artículo de menú. Por ejemplo, puedes crear un menú para mostrarlo a los usuarios conectados y otro para mostrarlo en una determinada página o categoría de WordPress.
En la parte izquierda de la pantalla puede ver un anuncio / catálogo / páginas de su sitio web. Simplemente marque / compruebe la casilla siguiente a cualquier página que desee añadir a su menú y haga clic en el botón “Añadir al menú”.
También puede arrastrar y soltar los elementos del menú en la parte derecha de la pantalla para reorganizarlos.
Más abajo en la página, puede elegir una ubicación para mostrar su menú. Pero no necesitas asignar una ubicación a este menú ahora. Lo haremos en el siguiente paso.
No olvides hacer clic en el botón “Guardar menú” para guardar los cambios.
Para más detalles sobre la creación de menús, puede echar un vistazo a nuestra guía para principiantes sobre cómo añadir un menú de navegación en WordPress.
Creación de nuevos menús de navegación en WordPress con FSE
Para crear nuevos menús de navegación en un tema de bloque con la edición completa del sitio (FSE), tendrá que navegar primero a Apariencia ” Editor desde su escritorio de WordPress.
Una vez dentro, puedes hacer clic en la pestaña “Navegación” para expandirla. Si te lo estás preguntando, estamos usando el tema Twenty-Twenty Three para esta guía.
A continuación, haga clic en “Editar” junto a la etiqueta “Navegación”. Esto abrirá el editor completo del sitio en su pantalla.
A partir de aquí, sólo queda hacer clic en el icono “+” para añadir un elemento / artículo al menú de navegación. Aparecerá una indicación con un menú desplegable en el que podrá seleccionar una opción.
Para obtener instrucciones más detalladas, puede consultar nuestra guía sobre cómo añadir un menú de navegación en WordPress.
Mostrar un menú diferente a los usuarios conectados en WordPress
A menudo resulta útil mostrar diferentes menús de navegación a los usuarios en función de si han accedido a su sitio o no.
Por ejemplo, puede incluir enlaces de acceso y registro para los usuarios desconectados y añadir un enlace de salida al menú para los usuarios conectados.
Si tienes una tienda WooCommerce, entonces puedes incluir elementos para tus clientes que estén ocultos al público en general.
Mostrar un menú diferente a los usuarios conectados que utilizan el editor clásico
Para empezar, necesitas instalar y activar el plugin Conditional Menus. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Una vez activado, tendrás que ir a Apariencia ” Menús y cambiar a la pestaña “Gestionar ubicaciones”.
Desde aquí, verá la lista de ubicaciones de menú disponibles y los menús que se muestran actualmente. Estos variarán dependiendo del tema de WordPress que esté utilizando.
Por ejemplo, en nuestro sitio web de demostración, se muestra que nuestra ubicación ‘Menú principal’ está mostrando un menú de navegación titulado ‘Menú principal’.
Podemos indicar al plugin que muestre un menú diferente cuando se cumpla una determinada condición enlazando el enlace ‘+ Menú Condicional’ y seleccionando otro menú en el desplegable.
Para este tutorial, seleccionaremos ‘Menú Conectado’.
A continuación, deberá enlazar el enlace “+ Condiciones”.
Aparecerá una ventana emergente en la que podrás elegir entre varias condiciones.
Sólo tiene que marcar la casilla situada junto a la opción “Usuario conectado” y, a continuación, hacer clic en el botón “Guardar”.
Ahora puede visitar su sitio web para ver en acción el menú del usuario conectado. Puede salir de su sitio web para ver el menú de navegación que se muestra a todos los demás usuarios.
Para obtener instrucciones más detalladas y aprender a hacer esto utilizando código, eche un vistazo a nuestra guía sobre cómo mostrar diferentes menús para los usuarios conectados en WordPress.
Mostrar un menú diferente a los usuarios conectados mediante FSE
Si estás usando un tema de bloques, entonces necesitarás el plugin Conditional Blocks. Así que, instalemos y activemos el plugin primero. Si necesitas ayuda, entonces puedes ver nuestra guía sobre cómo instalar un plugin de WordPress.
Tras activarlo, puedes abrir la característica FSE navegando hasta Apariencia ” Editor. A continuación, haga clic en “Patrones” y luego en “Todas las partes de la plantilla”.
Ahora deberías ver todas las partes de tu plantilla, que pueden incluir un pie de página, cabecera y comentarios. Hagamos clic en los tres puntos de la sección “Cabecera” y seleccionemos “Editar”.
Esto le redirigirá al editor de bloques.
Ahora, tendrás que hacer clic en el menú de navegación al que quieras añadir condicionales. Después de eso, simplemente cambie a la pestaña ‘Bloquear’ en el panel lateral derecho para empezar a personalizar.
Si se desplaza por la pestaña “Bloque”, verá la sección “Bloques condicionales”. Basta con hacer clic para abrir las opciones de personalización.
A continuación, siga adelante y haga clic en el botón “Editar visibilidad”.
Aparecerá una ventana emergente en la que podrá establecer las condiciones del menú de navegación elegido.
Aquí puede abrir el menú desplegable “CONDICIÓN” y seleccionar la opción “Usuario conectado”.
Basta con cerrar la ventana haciendo clic en el botón “X” de la esquina superior derecha.
Debería ver una condición añadida a la sección “Bloques condicionales”. Siga adelante y haga clic en “Guardar” para actualizar sus menús de navegación.
Ahora, si usted visita su sitio web, esto es lo que podría parecer para los usuarios desconectados y conectados:
Mostrar un menú de WordPress diferente dependiendo del perfil del usuario
Una vez que un usuario ha accedido, también puede mostrar un menú de navegación diferente en función del perfil de usuario que le haya asignado.
Por ejemplo, podría incluir elementos de menú adicionales para un administrador y elementos más limitados para un colaborador. En un sitio de membresía, podría conceder diferentes niveles de acceso a los distintos niveles de membresía.
Mostrando un Menú de WordPress Diferente Dependiendo del Perfil del Usuario Usando el Editor Clásico
Al igual que en la sección anterior, tendrá que instalar y activar el plugin Conditional Menus.
A continuación, vaya a la página Apariencia ” Menús y cambie a la pestaña “Gestionar ubicaciones”.
Debe añadir el menú condicional apropiado para el perfil de usuario seleccionado. Para este tutorial, seleccionaremos el menú ‘Nav Menu Administrator’.
A continuación, puede enlazar el enlace “+ Condiciones” para elegir el perfil de usuario.
Deberá hacer clic en la pestaña “Funciones de usuario” para ver las casillas de verificación de cada función de usuario de su sitio web. Simplemente haga clic en los perfiles de usuario que verán este menú y, a continuación, haga clic en el botón “Guardar” para guardar los cambios.
Mostrando un Menú de WordPress Diferente Dependiendo del Perfil del Usuario Usando FSE
Para mostrar un menú diferente en función de los perfiles de usuario en FSE, utilizará el plugin de control de contenido. Si necesitas ayuda para instalarlo y activarlo, consulta nuestra guía sobre cómo instalar un plugin de WordPress.
Una vez activado, puedes ir a Apariencia ” Editor ” Patrones ” Todas las partes de la plantilla. A continuación, basta con hacer clic en los tres puntos de la sección “Cabecera” y seleccionar “Editar”.
En el editor, puede seleccionar un menú de navegación al que añadir condicionales.
Por ejemplo, vamos a hacer que nuestra página ‘Blog’ sea exclusiva solo para nuestros suscriptores. Para ello, haremos clic en “Blog” para abrir sus opciones de personalización.
Desde aquí, vamos al panel derecho y activamos el conmutador “Activar controles” en la sección “Bloquear controles”.
A continuación, desplácese hasta la sección “Reglas de usuario” para establecer las condiciones.
En primer lugar, basta con abrir el menú desplegable “QUIÉN PUEDE VER ESTE CONTENIDO” y elegir “Usuario conectado”.
Luego, en el desplegable ‘ROL DE USUARIO’, podemos elegir ‘Coincidencia’. Y en los ‘PERFILES ELEGIDOS’, seleccionemos ‘suscriptor’.
Una vez hecho esto, puedes seguir adelante y hacer clic en el botón “Guardar”.
Mostrar un menú diferente para diferentes páginas en WordPress
Puede mostrar un menú diferente para diferentes páginas en WordPress. Por ejemplo, puede mostrar elementos de menú adicionales en su página de política de privacidad, como un enlace a su aviso de cookies.
Mostrando un Menú Diferente para Páginas Diferentes en WordPress Usando el Editor Clásico
Para hacer esto, necesitas instalar y activar el plugin de Menús Condicionales. A continuación, tendrás que ir a Apariencia ” Menús “ Gestionar ubicaciones.
Tras elegir el menú de navegación adecuado, puede enlazar el enlace “+ Condiciones”. Esta vez, debe hacer clic en la pestaña ‘Páginas’. Verá un anuncio / catálogo / ficha de todas las páginas de su sitio web.
A continuación, deberá marcar cada una de las páginas en las que desee que aparezca el menú de navegación. Una vez hecho esto, haz clic en el botón “Guardar”.
Mostrar un menú diferente para diferentes páginas en WordPress usando FSE
Los usuarios del tema Block pueden usar el plugin Block Visibility. Si necesitas ayuda con la instalación, consulta nuestra guía sobre cómo instalar un plugin de WordPress.
Una vez activado, vamos a navegar a Apariencia ” Editor ” Patrones ” Todas las partes de la plantilla. Y tras abrir el editor de la cabecera, podemos dirigirnos a la sección “Visibilidad”.
Desde aquí, puedes abrir el desplegable y seleccionar ‘Ruta URL’.
A continuación, puede añadir la ruta URL de la página de Política de privacidad en el área “RUTA URL (CONTENER)”.
Una ruta URL es la parte de una dirección web que viene después del nombre del sitio web principal y muestra una página / artículo específico.
Por ejemplo, en la dirección https://example.com/about, la parte /acerca de es la ruta URL.
Si no sabe cuál es la ruta URL de su página de Política de privacidad, puede ir a Páginas ” Todas las páginas. A continuación, busque la página de Política de privacidad y pase el cursor sobre ella.
Basta con hacer clic en el botón “Edición rápida” para ver la sección “Slug”. La ruta URL debe ser el símbolo ‘/’ seguido del slug de la página.
O simplemente visite la página y copie y pegue la parte que aparece después del nombre de dominio.
Ya está. Haz clic en “Guardar” para almacenar los cambios.
Ocultar el menú de navegación en páginas de destino en WordPress
Puede que haya páginas de su sitio web en las que no desee mostrar ningún menú de navegación, como las páginas de destino.
Una página de destino está diseñada para aumentar las ofertas o generar clientes potenciales para una empresa. En estas páginas hay que minimizar las distracciones y ofrecer a los usuarios toda la información que necesitan para realizar una acción concreta.
En nuestra guía sobre cómo aumentar las conversiones de su página de destino en un 300%, le sugerimos que minimice las distracciones quitando / eliminando los menús de navegación y otros enlaces de la página.
Cómo ocultar el menú de navegación de las páginas de destino en WordPress con el editor clásico
Puedes hacerlo utilizando el plugin de menús condicionales. Esta vez, elegirás “Desactivar menú” en el menú desplegable al seleccionar el menú condicional.
A continuación, vamos a enlazar el enlace “+ Condiciones” para elegir cuándo mostrar el menú.
Haga clic en la pestaña “Páginas” y marque la opción “Mi página de destino”.
No olvides hacer clic en el botón “Guardar” para guardar y aplicar tus ajustes.
Cómo ocultar el menú de navegación de las páginas de destino en WordPress con FSE
Ahora, para los usuarios del tema de bloque, puede utilizar el plugin Block Visibility, pero esta vez, introducirá la ruta URL en el campo ‘URL Path (Does Not Contain)’.
Por lo tanto, vamos a instalar y activar el plugin. Si necesita ayuda, entonces no dude en ver nuestra guía sobre cómo instalar un plugin de WordPress.
Tras la activación, puede dirigirse a Apariencia ” Editor ” Patrones ” Todas las partes de la plantilla. Una vez dentro del editor de Encabezado, vamos a encontrar la sección ‘Visibilidad’.
Desde aquí, puede elegir “Ruta URL” e introducir la ruta de su página de destino en el campo “Ruta URL (No contiene)”.
Una vez hecho esto, simplemente haga clic en el botón “Guardar”.
Cómo hacer más con los menús de navegación de WordPress
Los menús de navegación son potentes herramientas de diseño web. Permiten dirigir a los usuarios a las secciones más importantes de su sitio web.
Ahora que muestra diferentes menús de navegación en diferentes páginas y para diferentes usuarios, puede que se pregunte cómo personalizarlos aún más.
Para mejorar la funcionalidad de tus menús de navegación, quizá quieras marcar / comprobar estos tutoriales. Te ayudarán a llevar tu sitio WordPress al siguiente nivel:
- Cómo añadir elementos personalizados a menús específicos de WordPress
- Cómo añadir menús de navegación personalizados en temas de WordPress
- Cómo añadir un menú adaptable a pantalla completa en WordPress
- Cómo crear un menú de navegación vertical en WordPress
- Cómo añadir un mega menú a su sitio WordPress
- Cómo dar estilo a los menús de navegación de WordPress
Esperamos que este tutorial te haya ayudado a aprender cómo añadir lógica condicional a los menús en WordPress. A continuación, puede que desee aprender cómo añadir títulos en el menú de WordPress sin enlazar a una página o cómo mostrar migas de pan enlaces de navegación en WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Bet Hannon
Be VERY careful with making menus different across your site. It’s not a problem to show different menus to logged in/out users, but to meet WCAG 2.0+ accessibility standards, main menus should be consistent page to page.
WPBeginner Support
Thank you for sharing that for those attempting to have those standards for their site.
Administrador
Kevin
I don’t see the “Enable conditional logic” under Appearance -> Menu. I’m using WordPress 5.7 as of March 16, 2021.
WPBeginner Support
The wording may have changed since this article but there should still be a checkbox for changing the visibility.
Administrador
Laurentiu
A small feature, but very missed when a programmer is asked to work in wordpress.
WPBeginner Support
Glad you found this recommendation helpful
Administrador
Richard Spatts
Thanks for this, it really helped
WPBeginner Support
You’re welcome, glad our guide helped
Administrador
Richard S.
BIG Thank you for this article, it’s awesome.
Your snippet of code was perfect for a project I was working on, as was this plugin which I’m now using.
Even in 2019 this is a handy page, it’s working well on WordPress 5.2.3 (Astra Pro theme) so still very applicable.
WPBeginner Support
You’re welcome, glad our recommendation is helpful
Administrador
Vasim Shaikh
I would like to ask I have added role for user Author and subscriber both then its should be display to author not subscriber. how to handle this?
WPBeginner Support
You could set it to show if the user is the role of Author
Administrador
Rudolf
Really simple and easy to use plugin. Fantastic! It did not only save me a lot of time but also an organizational advantage because instead of using widget logic with different menu widgets, I create now one 1 menu with conditions per item.
Jonathan P
Thank you,
I have only used this plugin for conditions for users that are logged in or not logged in, but it works great, it really has saved me hours of messing around with code.
Kiva
Could I set up this plugin so that I can set up different menu options for each different category?
Sphelele
There is no conditional logic feature on my menu.
David
Thank you guys for sharing this. However it will display a PHP Notice on conditioned menu items and the custom condition won’t be displayed among condition options, if you don’t specify the id parameter.
Paul
Hi, I added conditions (if a string matches the server name, a menu is hidden). Great! But I would like to add even more custom conditions. Could you show an example of the code you would use to add more than on name/condition pair the custom option?
name = “If the site is not www.”
condition = www is not in SERVER_NAME
name = “Paul site.”
condition = “paul is in SERVER_NAME”
etc.
Thanks!
Isuru
This Conflicts the WP User Manager Pro, and then user manager Pro plugin functions not working due to the confliction.
as an ex: Show password tick in user registration page doesn’t work, as well as login page also not functioning well.
can you please fix this
Mo
Yep, definitely broken.
Works great for the built in conditions, but when coding custom conditions it works once and then stops working.
jban
YES!!! After 90 minutes of trying to figure this out, this article made it work for me. THANK YOU!!!
Jesus Flores
Works great!!! Thank you
Mohi
Hello
I installed this plugin, but I am getting an warning as follows :
Warning: Missing argument 2 for custom_nav_edit_walker() in /var/www/equest/wp-content/themes/wp-questrian/framework/megamenu/mega-menu.php on line 42
How to solve this warning ? Please guide me.
WPBeginner Support
Seems like the plugin is not compatible with your theme’s mega menu functionality. Please contact your theme’s support.
Administrador
JMD
I have not used the If Menu plugn, but I tried the Nav Menu Roles plugin
It works but then conflicts with the Mega menu functionality of my theme.
I am hesitant to try the If Menu plugin mainly because it has not been updated in so long. It will be a matter of time before I have to remove it for sure.
Peter
Could not get this plugin to work. Not showing up i menu-items. Using: WP 4.3 / Nimwa theme.
Any suggestions on similar working plugin? Just want to hide some menu items while working on them…
Shafiq
Seems to work ok under WP 4.3.
Chuks Eke
Hi,
Could this be achieved with this plugin,
I want to have different menu for different pages or post. for example,
Home | About Us | Service | Contact
About Us [ History | Team | Career ]
Services [ Web Development | Window Application | Corporate ID ]
Is it possible with this plugin to show sub menu on side menu for About Us
Mike J
I found this plugin does not work with some themes
WPBeginner Support
Please report the themes to plugin using the support tab on the plugin page. May be they can help you with this.
Administrador
Dieter
Seems to be broken under WP 4.2.2.
WPBeginner Support
What seems to be the problem? Working fine at our end.
Administrador
Dieter
I stopped installation after reading WP Org PlugIn Page, there is the comment “1 person says it is broken” and in the support section is an open report which is not solved.
If I read something like this I don’t even try to install such plug in.
Jagabandhu
The plugin is not working. It’s not showing “enable conditional logic” and the plugin author is not responding from last 7 months.
Tried with disabling other plugins. But no result.
Is there any other plugin to do so!?
I need it.
WPBeginner Support
We just tested the plugin and it is working fine at our demo site. Can you test it by switching to a default theme with no other plugins activated?