Marketing

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

¿Quiere agregar elementos personalizados a menús específicos de WordPress?

Los menús de WordPress son menús de navegación que aparecen en la parte superior de la mayoría de los sitios web. En ocasiones, 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 agregar fácilmente elementos personalizados a menús específicos de WordPress.

¿Por qué agregar 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, a menudo aparecen cuando toca un ícono de menú.

Ejemplo de menú de navegación

Dado que este es un lugar destacado en el diseño típico de un sitio de WordPress, es una buena idea aprovecharlo colocando elementos personalizados que no sean simples enlaces de menú.

Por ejemplo, algunos usuarios pueden querer mostrar el formulario de búsqueda, como lo hacemos en AprenderWP. Es posible que un sitio web de membresía quiera mostrar enlaces de registro y cierre de sesión, o puede que desee agregar íconos o imágenes a su menú.

De forma predeterminada, los menús de navegación están diseñados para mostrar enlaces en texto sin formato. Sin embargo, aún puede colocar elementos personalizados en los menús de WordPress.

Veamos cómo puede agregar elementos personalizados a menús específicos en WordPress, dejando intacto el resto de su menú de navegación.

Agregue elementos personalizados a menús de navegación específicos de WordPress

Hay varias formas de agregar elementos personalizados a un menú de navegación de WordPress. Depende del tipo de elemento personalizado que desee agregar.

Estos son algunos de los ejemplos más comunes. Algunos requieren que use complementos, mientras que otros requieren que agregue algún código.

Si quieres ir a una sección específica, puedes usar este contenido:

Empecemos.

Por lo general, puede agregar un formulario de búsqueda a la barra lateral de WordPress utilizando la herramienta de búsqueda predeterminada o el bloque. Sin embargo, no hay forma de agregar una búsqueda al menú de navegación predeterminado.

Algunos temas de WordPress tienen la opción de agregar un cuadro de búsqueda al área del menú principal. Pero si este no es tu caso, puedes usar el siguiente método.

Para hacer esto, necesita instalarlo y activarlo. SearchWP Formulario de búsqueda modal enchufar. Consulte nuestra guía paso a paso para instalar el complemento de WordPress para obtener más detalles.

Este complemento es un complemento para BuscarWPque es el mejor complemento de búsqueda de WordPress en el mercado.

El complemento es gratuito y también funciona con la búsqueda predeterminada de WordPress. Sin embargo, le recomendamos que lo use con SearchWP si desea mejorar su búsqueda de WordPress.

Una vez que instale el complemento, simplemente vaya a Apariencia »Menús Eliminar. En la columna Agregar elementos de menú, haga clic en la pestaña Formularios de búsqueda modal de SearchWP para expandirla.

Agregar una búsqueda al menú

Seleccione su motor de búsqueda y luego haga clic en el botón Agregar al menú.

El complemento agrega una búsqueda a su menú de navegación. Haga clic en ‘Formulario de búsqueda modal’ debajo de los elementos de su menú para expandirlo y cambiar la etiqueta a ‘Buscar’ o cualquier otra cosa que desee.

Cambiar la etiqueta de búsqueda

Asegúrese de hacer clic en el botón Guardar menú para guardar los cambios.

Ahora puede visitar su sitio para ver cómo se agrega la búsqueda a su menú de navegación. Al hacer clic en él, se abre el formulario de búsqueda en una ventana de luz emergente.

Buscar en el menú de navegación

Para obtener más detalles, consulte nuestra guía para agregar un botón de búsqueda a un menú de WordPress.

Otro elemento personalizado popular que los usuarios a menudo quieren agregar a un menú en particular es una imagen o un ícono.

Para hacer esto, necesita instalarlo y activarlo. Icono con imagen de menú enchufar. Consulte nuestra guía paso a paso para instalar el complemento de WordPress para obtener más detalles.

Después de la activación, vaya a Apariencia »Menús Paginar y mantener el cursor del mouse sobre el elemento del menú donde desea mostrar un icono o una imagen.

Botón de imagen del menú.

Haga clic en el botón azul en la imagen del menú para continuar.

Esto abre una ventana emergente. Desde aquí puede seleccionar una imagen o un icono de visualización con este elemento de menú.

Seleccione una foto o icono

También puede seleccionar la posición de la imagen o el icono en relación con el elemento del menú. Por ejemplo, puede mostrar el ícono justo en frente del elemento del menú, como en nuestro ejemplo a continuación, o incluso ocultar el título del menú para que solo se vea el ícono.

Asegúrese de hacer clic en el botón Guardar cambios para guardar su configuración. Repita el proceso si necesita agregar iconos o imágenes a otros elementos del menú.

Luego puede visitar su sitio web para mostrar la imagen o el ícono personalizado en ciertos elementos del menú.

iconos de menú

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

Si usa el complemento de membresía de WordPress o ejecuta una tienda en línea, es posible que desee permitir que los usuarios inicien sesión fácilmente en sus cuentas.

De forma predeterminada, WordPress no proporciona una forma fácil de mostrar enlaces de entrada y salida en los menús de navegación.

Le mostraremos cómo agregarlos usando un complemento o un fragmento de código.

1. Agregue enlaces de suscripción / cancelación de suscripción a los menús usando un complemento

Este método es más fácil y se recomienda para todos los usuarios.

Primero debes instalarlo y activarlo Opción de menú «Iniciar sesión» o «Cerrar sesión». enchufar. Entonces tienes que visitar Apariencia »Menú y haga clic en la pestaña Iniciar sesión/Salir para expandirla.

Agregue un inicio de sesión o un enlace de inicio de sesión a un menú específico de WordPress

Desde aquí tienes que seleccionar «Iniciar sesión | Seleccione Salir y haga clic en el botón Agregar al menú.

Asegúrese de hacer clic en el botón Guardar menú para guardar los cambios. Ahora puede visitar su sitio web para ver su enlace de activación personalizado.

Visualización de enlaces de suscripción y cancelación de suscripción

La conexión cambia dinámicamente a «Iniciar sesión» o «Cerrar sesión» según el estado de inicio de sesión del usuario.

Obtenga más información en nuestro tutorial sobre cómo agregar enlaces para iniciar y cerrar sesión en los menús de WordPress.

2. Agregue enlaces de suscripción / cancelación de suscripción con un código personalizado

Este método requiere que agregue código a su sitio web de WordPress. Si aún no lo ha hecho, consulte nuestra guía para agregar código personalizado a WordPress.

Primero debe comprender el nombre que usa su tema de WordPress para la ubicación específica del menú de navegación.

La forma más fácil de encontrar esto es visitar Apariencia »Menús Pase y mantenga el cursor del mouse sobre el área de ubicación del menú.

Encuentra el nombre del elemento del menú.

Haga clic derecho para seleccionar la herramienta de verificación y verá el nombre del sitio en el código fuente a continuación. Por ejemplo, nuestro tema de demostración utiliza un menú principal, un pie de página y un encabezado.

Ingrese el nombre utilizado para su destino donde desea que se muestre el enlace de inicio/salida.

Luego, debe agregar el siguiente código al archivo functions.php de su tema o a un complemento 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 .= '
  • Log Out
  • '; } elseif (!is_user_logged_in() && $args->theme_location == 'primary') { $items .= '
  • Log In
  • '; } return $items; }

    Luego puede visitar su sitio web y ver el enlace de inicio o cierre de sesión en su menú de navegación.

    Se agregó un enlace de inicio de sesión a través de un código personalizado

    Esta conexión dinámica cambia automáticamente para iniciar o cerrar sesión según el estado de inicio de sesión del usuario.

    ¿Qué sucede si solo desea agregar texto en lugar de un enlace a su menú de navegación?

    Hay dos maneras de hacer esto.

    1. Agregue texto personalizado a un menú específico (método fácil)

    solo ve a Apariencia »Menús Página y agregue un enlace personalizado usando el signo # como la URL y el texto que desea mostrar como texto de vínculo.

    Agregar texto personalizado con un enlace ficticio

    Haga clic en el botón Agregar al menú para continuar.

    WordPress agregará su texto personalizado como un elemento de menú en la columna izquierda. Ahora haga clic para expandirlo y elimine el signo #.

    Remover enlace

    Asegúrese de hacer clic en el botón Guardar menú y navegar por su sitio. Notará que su texto personalizado aparecerá en el menú de navegación.

    Todavía es un enlace, pero hacer clic en él no hace nada para el usuario.

    texto personalizado en el menú de navegación

    2. Agregue texto personalizado al menú de navegación usando un código

    Este método agrega un fragmento de código a su sitio web. Primero debe comprender el nombre de la ubicación de su tema, como se describe anteriormente en la sección Enlace de inicio/cierre de sesión.

    Luego, debe agregar el siguiente código al archivo functions.php del tema o a un complemento 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 .= '
  • Custom Text
  • '; } return $items; }

    Simplemente reemplace el lugar donde dice «Texto personalizado» con su propio texto.

    Ahora puede guardar sus cambios y visitar su sitio para ver su texto personalizado agregado en la parte inferior de su menú de navegación.

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

    ¿Quiere mostrar la fecha actual en un menú de navegación de WordPress? Este truco es útil si mantiene un blog o un sitio web de noticias actualizado con frecuencia.

    Simplemente agregue el siguiente código al archivo functions.php de su tema o a un complemento 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 .=  '
  • ' . $todaysdate . '
  • '; } return $items; }

    No olvide reemplazar «básico» con la ubicación de su menú.

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

    Fecha actual en el menú de WordPress

    También puede cambiar la forma de la fecha a su gusto. Vea nuestro tutorial sobre cómo cambiar el formato de fecha y hora en WordPress.

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

    Primero, debe agregar el siguiente código al archivo functions.php de su tema o a un complemento 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 verifica que haya agregado un elemento de menú con # ProfileName # como texto de enlace. Este elemento del menú se reemplaza luego con el nombre de usuario de inicio de sesión o el saludo general para los usuarios que no han iniciado sesión.

    Luego debe ir a la página Apariencia »Menús y agregar un nuevo enlace personalizado a #profile_name# como texto de enlace.

    Agregar un marcador especial a un elemento del menú

    Asegúrese de hacer clic en el botón Guardar menú para guardar los cambios. Luego puede visitar su sitio web para ver el nombre del usuario que ingresó al menú de WordPress.

    Nombre de usuario en el menú de navegación de WordPress

    Hasta ahora, le hemos mostrado cómo agregar diferentes tipos de elementos personalizados a menús específicos de WordPress. Sin embargo, es posible que a veces necesite mostrar dinámicamente diferentes elementos de menú a los usuarios.

    Por ejemplo, es posible que desee mostrar el menú solo a los usuarios registrados. Otro escenario es cuando desea que el menú cambie según la página que esté viendo el usuario.

    Este método le permite crear múltiples menús y mostrarlos solo cuando se cumplen ciertas condiciones.

    Primero debes instalarlo y activarlo menús condicionales enchufar. Consulte nuestra guía paso a paso para instalar el complemento de WordPress para obtener más detalles.

    Después de la activación, debe visitar Apariencia »Menús Eliminar. Desde aquí, debe crear un nuevo menú que desee mostrar. Por ejemplo, en este ejemplo, creamos un nuevo menú solo para usuarios registrados.

    Crear un nuevo menú

    Después de crear el menú, cambie a la pestaña Administración de ubicación.

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

    Agregar un menú condicional

    Después Para ello, debe seleccionar el menú creado previamente en el menú desplegable.

    Luego haga clic en el botón «+ Términos» para continuar.

    Seleccione el menú de visualización

    Esto abre una ventana emergente.

    Desde aquí puede seleccionar las condiciones que se deben cumplir para ver este menú.

    seleccionar condiciones

    El complemento ofrece una serie de condiciones para elegir. Por ejemplo, puede mostrar el menú según una página específica, categoría, tipo de publicación, taxonomía y más.

    También puede mostrar diferentes menús según las funciones de los usuarios y el estado de inicio de sesión. Por ejemplo, puede mostrar a los miembros existentes un menú diferente en un sitio de membresía.

    Esperamos que este artículo le haya ayudado a aprender cómo agregar elementos personalizados a menús específicos de WordPress. También puede leer nuestra guía para elegir el mejor software de diseño web o nuestra comparación experta del mejor software de chat en vivo para pequeñas empresas.

    Si te ha gustado este artículo, suscríbete al nuestro. canal de Youtube para videos tutoriales para WordPress. También puedes encontrarnos en Closermarketing.es y Facebook.

    .

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada.