Más

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

    - Advertisement -

    ¿Desea agregar elementos 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 enlaces simples 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 generalmente se muestran en la parte superior de un sitio web. En los dispositivos móviles, a menudo se muestran cuando toca un icono de menú.

    ejemplo de menú de navegación

    Dado que esta es una ubicación destacada en el diseño típico de un sitio web de WordPress, es inteligente aprovecharla colocando elementos personalizados que no sean enlaces simples en el menú.

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

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

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

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

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

    Te mostraremos algunos de los ejemplos más comunes. Necesitará usar complementos para algunos de ellos, mientras que otros requerirán que agregue algún código.

    Si desea saltar a una sección determinada, puede usar esta tabla de contenido:

    Empecemos.

    1. Agregar una ventana emergente de búsqueda en el menú de WordPress

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

    Algunos temas de WordPress tienen una opción para agregar un cuadro de búsqueda a su área de menú principal. Pero si el tuyo no lo hace, puedes usar el método a continuación.

    Para esto, necesita instalar y activar elFormulario de búsqueda modal de SearchWPenchufar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

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

    El complemento es gratuito y también funcionará con la búsqueda predeterminada de WordPress. Sin embargo, recomendamos usarlo con SearchWP si desea mejorar su búsqueda de WordPress.

    Después de instalar el complemento, simplemente diríjase a la Apariencia » Menús página. En la columna ‘Agregar elementos de menú’, haga clic en la pestaña ‘SearchWP Modal Search Forms’ para expandirla.

    Agregar búsqueda al menú

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

    El complemento agregará la búsqueda a su menú de navegación. Haga clic en el ‘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 etiqueta de búsqueda

    No olvide hacer clic en el botón Guardar menú para almacenar sus cambios.

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

    Buscar en el menú de navegación

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

    2. Agregue iconos e imágenes personalizadas a menús específicos

    Otro elemento personalizado popular que los usuarios suelen querer agregar a un menú específico es una imagen o un icono.

    Para ello, deberá instalar y activar el Icono de imagen de menú enchufar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

    Tras la activación, vaya a la Apariencia » Menús página y mueva el 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 Imagen del menú para continuar.

    Esto abrirá una ventana emergente. Desde aquí, puede elegir una imagen o icono para que se muestre con ese elemento del menú.

    Elige imagen o icono

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

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

    Después de eso, puede visitar su sitio web para ver la imagen o el ícono personalizado en elementos de menú específicos.

    Iconos de menú

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

    3. Agregar enlaces de inicio/cierre de sesión al menú específico de WordPress

    Si está utilizando un complemento de membresía de WordPress o tiene 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 viene con una manera fácil de mostrar los enlaces de inicio y cierre de sesión en los menús de navegación.

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

    1. Agregar enlaces de inicio/cierre de sesión a los menús mediante un complemento

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

    En primer lugar, debe instalar y activar el Elemento de menú Iniciar o Cerrar sesión enchufar. Después de eso, debes visitar el Apariencia » Menú y haga clic en la pestaña Iniciar/Cerrar sesión para expandirla.

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

    Desde aquí, debe seleccionar el elemento ‘Iniciar sesión|Cerrar sesión’ y hacer clic en el botón Agregar al menú.

    No olvide hacer clic en el botón Guardar menú para almacenar sus cambios. Ahora puede visitar su sitio web para ver su enlace de cierre de sesión personalizado en acción.

    Vista previa del enlace de inicio y cierre de sesión

    El enlace cambiará dinámicamente para iniciar 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 de inicio y cierre de sesión en los menús de WordPress.

    2. Agregue enlaces de inicio/cierre de sesión usando un código personalizado

    Este método requiere que agregue código a su sitio web de WordPress. Si no lo ha hecho antes, eche un vistazo a nuestra guía sobre cómo agregar código personalizado en WordPress.

    Primero, debe averiguar 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 visitando el Apariencia » Menús página y llevar el mouse al área de ubicaciones del menú.

    Buscar el nombre de la ubicación del menú

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

    Tenga en cuenta el nombre utilizado para su ubicación de destino donde desea mostrar el enlace de inicio/cierre de sesión.

    A continuación, debe agregar el siguiente código al archivo functions.php de su tema o 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 .= '<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 de eso, puede visitar su sitio web y verá el enlace de inicio de sesión o cierre de sesión en su menú de navegación.

    Enlace de inicio de sesión agregado a través de un código personalizado

    Este enlace dinámico cambiará automáticamente a inicio de sesión o cierre de sesión según el estado de inicio de sesión del usuario.

    4. Agregar texto personalizado a su menú de navegación de WordPress

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

    Hay dos formas de hacerlo.

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

    Simplemente ve a la Apariencia » Menús página y agregue un enlace personalizado con el signo # como la URL y el texto que desea mostrar como su Texto de enlace.

    Agregar texto personalizado con 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

    No olvide hacer clic en el botón Guardar menú y obtener una vista previa de su sitio web. Notará que su texto personalizado aparece 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 a un menú de navegación usando código

    Para este método, agregará un fragmento de código a su sitio web. Primero, deberá averiguar el nombre de la ubicación de su tema como se describe anteriormente en el sección de enlace de inicio/cierre de sesión.

    Después de eso, debe agregar el siguiente código al archivo functions.php del tema o 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 .= '<li><a title="">Custom Text</a></li>';
        }
        return $items;
    }
    

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

    Ahora puede guardar sus cambios y visitar su sitio web para ver su texto personalizado agregado al final de su menú de navegación.

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

    5. Agregue la fecha actual en el menú de WordPress

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

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

    No olvide reemplazar ‘primario’ 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 el formato de la fecha a su gusto. Vea nuestro tutorial sobre cómo cambiar el formato de fecha y hora en WordPress.

    6. Mostrar nombre de usuario en el menú de 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, deberá agregar el siguiente código al archivo functions.php de su tema o 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 si ha agregado un elemento de menú con #profile_name# como texto de enlace. Después de eso, reemplaza ese elemento del menú con el nombre del usuario que ha iniciado sesión o un saludo genérico para los usuarios que no han iniciado sesión.

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

    Agregar una etiqueta especial a un elemento del menú

    No olvide hacer clic en el botón Guardar menú para almacenar sus cambios. Después de eso, puede visitar su sitio web para ver el nombre del usuario que inició sesión en el menú de WordPress.

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

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

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

    Por ejemplo, es posible que desee mostrar un menú solo para 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 varios menús y mostrarlos solo cuando se cumplen ciertas condiciones.

    En primer lugar, debe instalar y activar el Menús condicionales enchufar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

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

    Crear nuevo menú

    Una vez que haya creado el menú, cambie a la pestaña Administrar ubicaciones.

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

    Agregar un menú condicional

    Después de eso, debe seleccionar el menú que creó anteriormente en el menú desplegable.

    Luego, haga clic en el botón ‘+ Condiciones’ para continuar.

    Seleccione el menú que desea mostrar

    Esto abrirá una ventana emergente.

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

    elegir condiciones

    El complemento ofrece un montón 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 un menú diferente a los miembros existentes en un sitio web 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 consultar nuestra guía sobre cómo 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 a nuestro Canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Gorjeo y Facebook.

    La publicación Cómo agregar elementos personalizados a menús específicos de WordPress apareció por primera vez en AprenderWP.

    Populares

    Más de esta categoría

    DEJA UNA RESPUESTA

    Por favor ingrese su comentario!
    Por favor ingrese su nombre aquí

    This site uses Akismet to reduce spam. Learn how your comment data is processed.