Cómo añadir elementos personalizados a menús específicos de WordPress

¿Desea añadir elementos / artículos personalizados a menús específicos de WordPress?

Los menús de WordPress son menús de navegación que se muestran en la parte superior de la mayoría de los sitios web. A veces es posible que desee mostrar elementos personalizados que no sean simples enlaces en los menús de navegación.

En este artículo, le mostraremos cómo añadir fácilmente elementos personalizados a menús específicos de WordPress.

Por qué añadir elementos personalizados a los menús de WordPress

Los menús de WordPress son enlaces de navegación que suelen aparecer en la parte superior de un sitio web. En los dispositivos móviles, suelen aparecer al tocar un icono de menú.

Dado que se trata de un lugar prominente en la estructura / disposición / diseño / plantilla de un sitio web típico de WordPress, es inteligente aprovecharlo colocando en el menú elementos / artículos personalizados que no sean simples enlaces.

Por ejemplo, algunos usuarios pueden querer mostrar el formulario de búsqueda como hacemos en WPBeginner. Un sitio web de membresía puede querer mostrar enlaces para acceder / salir, o puede querer añadir iconos o imágenes a su menú.

Por defecto, los menús de navegación están diseñados para enlazar texto plano. Sin embargo, puede colocar elementos / artículos personalizados en los menús de WordPress.

Dicho esto, echemos un vistazo a cómo puede añadir elementos personalizados a menús específicos en WordPress manteniendo intacto el resto de su menú de navegación.

Añadir elementos personalizados a menús de navegación específicos en WordPress

Hay diferentes maneras de añadir elementos personalizados a un menú de navegación en WordPress. Depende del tipo de elemento / artículo personalizado que esté intentando añadir.

Le mostraremos algunos de los ejemplos más comunes. Para algunos de ellos tendrás que utilizar plugins, mientras que otros requerirán que añadas algún código.

Si desea omitir una sección determinada, puede utilizar este índice:

• Añadir una ventana emergente de búsqueda a su menú de WordPress
• Añadir iconos o imágenes a su menú
• Añadir enlaces de acceso / cierre de sesión a su menú
• Añadir texto personalizado a un menú de WordPress
• Añadir la fecha actual al menú
• Mostrar nombres de usuario en su menú
• Mostrar diferentes menús en diferentes páginas

Primeros pasos.

1. Adición de una ventana emergente de búsqueda en el menú de WordPress

Normalmente, puede añadir un formulario de búsqueda a su barra lateral de WordPress utilizando el widget o bloque de búsqueda por defecto. Sin embargo, no hay forma de añadir la búsqueda al menú de navegación por defecto.

Algunos temas de WordPress tienen una opción para añadir un cuadro de búsqueda a su área de menú principal. Pero si el tuyo no la tiene, puedes utilizar el método que se indica a continuación.

Para ello, necesitas instalar y activar el plugin SearchWP Modal Search Form. Para más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Este plugin es una extensión para SearchWP, que es el mejor plugin de búsqueda de WordPress en el mercado.

La extensión es gratuita y funcionará también con la búsqueda por defecto de WordPress. Sin embargo, le recomendamos que lo utilice con SearchWP si desea mejorar la búsqueda de WordPress.

Tras instalar la extensión, dirígete a la página Apariencia ” Menús. En la columna “Añadir elementos de menú”, haga clic en la pestaña “Formularios de búsqueda modal de SearchWP” para expandirla.

Seleccione su motor de búsqueda y haga clic en el botón Añadir al menú.

El plugin añadirá la búsqueda a tu menú de navegación. Haga clic en el ‘Formulario de búsqueda emergente’ debajo de sus elementos de menú para expandirlo y cambiar la etiqueta a Buscar o cualquier otra cosa que desee.

No olvides hacer clic en el botón Guardar del menú para guardar los cambios.

Ahora puede visitar su sitio web para ver la Búsqueda añadida a su menú de navegación. Al hacer clic se abrirá el formulario de búsqueda en una caja de luz emergente.

Para más detalles, consulte nuestra guía sobre cómo añadir un botón de búsqueda a un menú de WordPress.

2. Añadir iconos e imágenes personalizadas a menús específicos

Otro elemento / artículo personalizado muy popular que los usuarios suelen querer añadir a un menú específico es una imagen o un icono.

Para ello, tendrás que instalar y activar el plugin Menu Image Icon. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez activado, vaya a la página Apariencia ” Menús y pase el ratón por encima del elemento / artículo del menú en el que desee mostrar un icono o una imagen.

Haga clic en el botón azul Imagen de menú para continuar.

Aparecerá una ventana emergente. Desde aquí, puede elegir una imagen o icono que se mostrará con ese elemento / artículo del menú.

También puede elegir la posición de la imagen o el icono con respecto al elemento / artículo del menú. Por ejemplo, puede mostrar el icono justo antes del elemento del menú, como en el ejemplo siguiente, o incluso ocultar el título del menú para que solo aparezca el icono.

No olvide hacer clic en el botón Guardar cambios para establecer los ajustes. Repita el proceso si necesita añadir iconos o imágenes a otros elementos del menú.

Después, podrá visitar su sitio web para ver la imagen o el icono personalizados en determinados elementos del menú.

Para obtener instrucciones más detalladas, consulte nuestro tutorial sobre cómo añadir imágenes en los menús de WordPress.

3. Añadir enlaces de acceso / cierre de sesión al menú específico de WordPress

Si utiliza un plugin de membresía de WordPress o tiene una tienda en línea, es posible que desee permitir a los usuarios acceder fácilmente a sus cuentas.

Por defecto, WordPress no viene con una forma sencilla de enlazar el acceso / cierre de sesión en los menús de navegación.

Le mostraremos cómo añadirlos utilizando un plugin o un fragmento de código.

1. Añadir enlaces de acceso / cierre de sesión a los menús utilizando un plugin

Este método es más sencillo y recomendable para todos los usuarios.

En primer lugar, debe instalar y activar el plugin Login or Logout Menu Item. Después de eso, usted tiene que visitar la página Apariencia ” Menú y haga clic en la pestaña de inicio de sesión / cierre de sesión para expandirlo.

Desde aquí, debe seleccionar el elemento “Conectado|Desconectado” y hacer clic en el botón Añadir al menú.

No olvide hacer clic en el botón Guardar menú para guardar los cambios. Ahora puede visitar su sitio web para ver su enlace personalizado de acceso / salida en acción.

El enlace cambiará dinámicamente para acceder / desconectarse en función del estado de conexión del usuario.

Obtenga más información en nuestra guía práctica sobre cómo añadir enlaces de acceso / cierre de sesión en los menús de WordPress.

2. Añadir enlaces de acceso / cierre de sesión mediante código personalizado

Este método requiere que añadas código a tu sitio web WordPress. Si no lo ha hecho antes, eche un vistazo a nuestra guía sobre cómo añadir código personalizado en WordPress.

En primer lugar, debe averiguar el nombre que su tema de WordPress utiliza para la ubicación específica del menú de navegación.

La forma más fácil de encontrarlo es visitando la página Apariencia ” Menús y llevando el ratón a la zona de ubicaciones de los menús.

Haga clic con el botón derecho para seleccionar la herramienta Inspeccionar y, a continuación, verá el nombre de la ubicación en el código fuente. Por ejemplo, nuestro tema de demostración utiliza principal, pie de página y barra superior-menú.

Tenga en cuenta el nombre utilizado para la ubicación de destino en la que desea mostrar el enlace de acceso / cierre de sesión.

A continuación, debe añadir el siguiente código al archivo functions. php de su tema o a un plugin específico del sitio.

add_filter( 'wp_nav_menu_items', 'add_loginout_link', 10, 2 );
function add_loginout_link( $items, $args ) {
    if (is_user_logged_in() && $args->theme_location == 'primary') {
        $items .= '<li><a href="'. wp_logout_url() .'">Log Out</a></li>';
    }
    elseif (!is_user_logged_in() && $args->theme_location == 'primary') {
        $items .= '<li><a href="'. site_url('wp-login.php') .'">Log In</a></li>';
    }
    return $items;
}

Después, puede visitar su sitio web y verá el enlace acceder / desconectarse en su menú de navegación.

Este enlace dinámico cambiará automáticamente a acceder / cerrar sesión en función del estado de acceso del usuario.

4. Cómo añadir texto personalizado al menú de navegación de WordPress

¿Y si sólo quiere añadir texto y no un enlace a su menú de navegación?

Hay dos formas de hacerlo.

1. Añadir texto personalizado a un menú específico (Fácil)

Simplemente vaya a la página Apariencia ” Menús y añada un enlace personalizado con el signo # como URL, y el texto que desee mostrar como Texto del enlace.

Haga clic en el botón Añadir al menú para continuar.

WordPress añadirá tu texto personalizado como un elemento / artículo del menú en la columna de la izquierda. Ahora, haz clic para expandirlo y borra el signo #.

No olvides hacer clic en el botón Guardar menú y obtener una vista previa de tu sitio web. Verás que tu texto personalizado aparece en el menú de navegación.

Sigue siendo un enlace, pero al hacer clic en él el usuario no hace nada.

2. Añadir texto personalizado a un menú de navegación mediante código

Para este método, añadirá un fragmento de código a su sitio web. En primer lugar, tendrá que averiguar el nombre de la ubicación de su tema como se describe anteriormente en la sección de enlace de acceso / cierre de sesión.

A continuación, debe añadir el siguiente código al archivo functions. php del tema o a un plugin específico del sitio.

add_filter( 'wp_nav_menu_items', 'your_custom_menu_item', 10, 2 );
function your_custom_menu_item ( $items, $args ) {
    if ( $args->theme_location == 'primary') {
        $items .= '<li><a title="">Custom Text</a></li>';
    }
    return $items;
}

Simplemente sustituya donde dice ‘Texto personalizado’ por su propio texto.

Ahora puede guardar los cambios y visitar su sitio web para ver el texto personalizado añadido al final del menú de navegación.

Este método de código puede ser útil si desea añadir mediante programación elementos dinámicos a un menú específico de WordPress.

5. Añadir fecha actual en el menú de WordPress

¿Quieres mostrar la fecha actual dentro de un menú de navegación en WordPress? Este truco es muy útil si tienes un blog que se actualiza con frecuencia o un sitio web de noticias.

Simplemente añada el siguiente código al archivo functions. php de su tema o a un plugin específico del sitio.

add_filter('wp_nav_menu_items','add_todaysdate_in_menu', 10, 2);
function add_todaysdate_in_menu( $items, $args ) {
    if( $args->theme_location == 'primary')  {
         
        $todaysdate = date('l jS F Y');
        $items .=  '<li><a>' . $todaysdate .  '</a></li>';
 
    }
    return $items;
}

No olvide sustituir “principal” por la ubicación de su menú.

Ahora puede visitar su sitio web para ver la fecha actual en su menú de WordPress.

También puede cambiar el formato de la fecha a su gusto. Consulta nuestra guía práctica sobre cómo cambiar el formato de fecha y hora en WordPress.

6. Mostrar nombre de usuario en el menú de WordPress

¿Quiere añadir un poco más de personalización a su menú de navegación? Puede saludar a los usuarios conectados por su nombre en el menú de navegación.

En primer lugar, tendrás que añadir el siguiente código al archivo functions. php de tu tema o a un plugin específico del sitio.

add_filter( 'wp_nav_menu_objects', 'username_in_menu_items' );
function username_in_menu_items( $menu_items ) {
    foreach ( $menu_items as $menu_item ) {
        if ( strpos($menu_item->title, '#profile_name#') !== false) {
			 if ( is_user_logged_in() )     {
				$current_user = wp_get_current_user();
				 $user_public_name = $current_user->display_name;
                $menu_item->title =  str_replace("#profile_name#",  " Hey, ". $user_public_name, $menu_item->title . "!");
			 } else { 
			 $menu_item->title =  str_replace("#profile_name#",  " Welcome!", $menu_item->title . "!");
			 }
        }
    }

    return $menu_items;
} 

Este código primero comprueba si has añadido un elemento / artículo con #nombre_de_perfil# como texto enlazado. Después, reemplaza ese elemento / artículo con el nombre del usuario conectado o un saludo genérico para los usuarios no conectados.

A continuación, debe ir a la página Apariencia ” Menús y añadir un nuevo enlace personalizado con el #nombre_de_perfil# como texto de enlace.

No olvide hacer clic en el botón Guardar menú para guardar los cambios. Después, puede visitar su sitio web para ver el nombre del usuario conectado en el menú de WordPress.

7. Mostrar dinámicamente menús condicionales en WordPress

Hasta ahora le hemos mostrado cómo añadir diferentes tipos de elementos personalizados a menús específicos de WordPress. Sin embargo, a veces puede necesitar mostrar dinámicamente diferentes elementos de menú a los usuarios.

Por ejemplo, puede querer mostrar un menú solo a los usuarios conectados. Otra posibilidad es que el menú cambie en función de la página que esté viendo el usuario.

Este método permite crear varios menús y mostrarlos solo cuando se cumplen determinadas condiciones.

En primer lugar, debe instalar y activar el plugin Conditional Menus. Para más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez activado, debe visitar la página Apariencia ” Menús. Desde aquí debe crear un nuevo menú que desee mostrar. Por ejemplo, en este ejemplo hemos creado un nuevo menú solo para usuarios conectados.

Una vez creado el menú, pase a la pestaña Gestionar ubicaciones.

Desde aquí, debe hacer clic en el enlace Menús condicionales situado a continuación de la ubicación del menú.

A continuación, seleccione en el menú desplegable el menú que ha creado anteriormente.

A continuación, haga clic en el botón “+ Condiciones” para continuar.

Aparecerá una ventana emergente.

Desde aquí, puede seleccionar las condiciones que deben cumplirse para que aparezca este menú.

El plugin ofrece un montón de condiciones para elegir. Por ejemplo, puede mostrar el menú basado en la página específica, categoría, tipo de contenido, taxonomía, y más.

También puede mostrar menús diferentes en función de los perfiles de los usuarios y del estado de los conectados. Por ejemplo, puede mostrar un menú diferente a los miembros existentes en un sitio web de membresía.

Esperamos que este artículo te haya ayudado a aprender cómo añadir elementos / artículos personalizados a menús específicos de WordPress. Puede que también quieras ver nuestra guía sobre cómo elegir el mejor software de diseño web, o nuestra comparativa de expertos sobre el mejor software de chat en vivo para pequeñas empresas.

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.