Cómo agregar elementos personalizados a ciertos menús de WordPress

¿Le gustaría agregar elementos personalizados a ciertos menús de WordPress? Los menús de WordPress están navegando por menús que se muestran en la parte superior de la mayoría de los sitios web. A veces es posible que desee mostrar elementos personalizados, aparte de los enlaces simples en los menús de navegación. En este artículo, le mostraremos cómo agregar fácilmente elementos personalizados a ciertos menús de WordPress.

¿Por qué agregar elementos personalizados a los menús de WordPress WordPress Menus están navegando por enlaces que generalmente se muestran en la parte superior de un sitio web? En los dispositivos móviles, a menudo se muestran al tocar un icono de menú.

Debido a que esta es una ubicación destacada en un aspecto regular del sitio de WordPress, es inteligente aprovecharla colocando otros elementos personalizados que los simples enlaces de menú. Por ejemplo, algunos usuarios pueden querer mostrar el formulario de búsqueda como lo hacemos en WPBeginner. Un sitio web de membresía puede mostrar la conexión y desconectar los enlaces o es posible que desee agregar iconos o imágenes al menú. Por defecto, los menús de navegación están diseñados para mostrar enlaces de texto simples. Sin embargo, puede continuar colocando elementos personalizados en los menús de WordPress.
Dicho esto, echemos un vistazo a cómo puede agregar elementos personalizados a ciertos menús de WordPress, mientras mantiene el resto del menú de navegación intacto. Agregar elementos personalizados a los menús de navegación específicos de WordPress Hay diferentes formas de agregar elementos personalizados a un menú de navegación de WordPress. Depende del tipo de elemento personalizado que esté tratando de agregar. Le mostraremos algunos de los ejemplos más comunes. Deberá usar complementos para algunos de ellos, mientras que otros le pedirán que agregue un código. Si desea moverse a una sección en particular, puede usar este contenido:
Agregue una ventana de búsqueda a su menú de WordPress
Agregar iconos o imágenes al menú
Agregar enlaces de conexión/desconexión al menú
Agregar texto personalizado a un menú de WordPress
Agregue la fecha actual al menú
Mostrar nombre de usuario en su menú
Mostrar diferentes menús en diferentes páginas
Vamos a empezar. 1. Agregue una ventana emergente de búsqueda al menú de WordPress normalmente, puede agregar un formulario de búsqueda a la barra lateral de WordPress usando el bloque o bloque de búsqueda predeterminado. Sin embargo, no hay forma de agregar búsqueda al menú de navegación de forma predeterminada.
Algunos temas de WordPress tienen la opción de agregar un cuadro de búsqueda al área del menú principal. Pero si no lo hace, puede usar el método a continuación. Para esto, debe instalar y activar el formulario de búsqueda modal SECHWP. Para obtener más detalles, consulte nuestra guía paso por paso sobre cómo instalar un complemento de WordPress. Este complemento es un suplemento para SearchWP, que es el mejor complemento de búsqueda de WordPress en el mercado. El suplemento es gratuito y funcionará con la búsqueda predeterminada de WordPress. Sin embargo, le recomendamos que lo use con SearchWP si desea mejorar su búsqueda de WordPress. Después de instalar el suplemento, simplemente vaya a la página de la página »Menús. En la columna “Agregar elementos de menú”, haga clic en los “Formularios de búsqueda modal SearchWP” para expandirlo.
Seleccione su motor de búsqueda y luego haga clic en el botón Agregar al menú. El complemento agregará la búsqueda al menú de navegación. Haga clic en el “formulario de búsqueda modal” de los elementos del menú para expandirlo y cambiar la etiqueta en la búsqueda o lo que desee.
Recuerde hacer clic en el botón Guardar menú para almacenar sus cambios. Ahora puede visitar su sitio web para ver la búsqueda agregada al menú de navegación. Al hacer clic en él, el formulario de búsqueda se abrirá en un cuadro emergente de Lightbox.

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 personalizados a ciertos menús Otro elemento personalizado popular que los usuarios a menudo desean agregar a un determinado menú es una imagen o icono. Para hacer esto, deberá instalar y activar el complemento para el icono de la imagen del menú. Para obtener más detalles, consulte nuestra guía paso por paso sobre cómo instalar un complemento de WordPress. Después de la activación, acceda a la página de la página »Menús y mueva el mouse sobre el elemento del menú en el que desea mostrar un icono o imagen. Haga clic en el botón Azul Menú Imagen para continuar. Esto mostrará una ventana emergente. Desde aquí, puede elegir una imagen o icono que se mostrará con ese elemento de menú.

También puede elegir la posición de la imagen o icono en relación con el elemento de menú. Por ejemplo, puede mostrar el icono justo antes del elemento de menú, como en nuestro ejemplo a continuación, o incluso puede ocultar el título del menú, de modo que solo aparezca el icono. Recuerde hacer clic en Guardar los 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 icono personalizado en ciertos elementos del menú.

Para obtener instrucciones más detalladas, consulte nuestro tutorial sobre cómo agregar imágenes en los menús de WordPress. 3. Agregue enlaces de conexión / desconexión al menú específico de WordPress si utiliza un complemento de suscripción de WordPress o posee una tienda en línea, luego le recomendamos que permita que los usuarios se conecten fácilmente a sus cuentas. Por defecto, WordPress no presenta una manera fácil de mostrar enlaces de conexión y desconexión en los menús de navegación. Mostraremos cómo agregarlos usando un complemento o usando un fragmento de código. 1. Agregue enlaces de conexión/desconexión a los menús utilizando un complemento Este método es más fácil y recomendado a todos los usuarios. Primero, debe instalar y activar la conexión del elemento del menú del complemento o desconectar. Después de eso, debe visitar la página de la página »Menú y hacer clic en la pestaña Conexión/desconexión para expandirla.

Desde aquí, debe seleccionar el elemento “Iniciar sesión | Iniciar sesión” y hacer clic en el botón Agregar menú. Recuerde hacer clic en el botón Guardar menú para almacenar sus cambios. Ahora puede visitar su sitio web para ver el enlace de desconexión personalizado en acción.
El enlace cambiará dinámicamente para la autenticación o la desconexión, dependiendo del estado de conexión del usuario. Obtenga más información en nuestro tutorial sobre cómo agregar enlaces de conexión y desconexión a los menús de WordPress. 2. Agregue enlaces de conexión/desconexión utilizando el código personalizado Este método requiere agregar código a su sitio de WordPress. Si no ha hecho esto antes, eche un vistazo a nuestra guía sobre cómo agregar código personalizado a WordPress. En primer lugar, debe averiguar el nombre que utiliza 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 acceder a la página de apariencia »Menús y tomar el mouse en el área del menú. Haga clic derecho para seleccionar la herramienta de inspección y luego verá el nombre de ubicación en el código fuente a continuación. Por ejemplo, nuestro tema demostrativo utiliza el menú principal, el sótano y la barra superior. Tenga en cuenta el nombre utilizado para su ubicación de destino donde desea mostrar el enlace de inicio de sesión / desconexión. Luego debe agregar el siguiente código al archivo Functions.php de la base o un complemento específico para el Sitio.

add_filter (‘wp_nav_men_items’, ‘add_loginout_link’, 10, 2);
función add_loginout_link ($ ittems, $ args) {

if (is_user_logged_in () && $ args-> thema_location == ‘Primy’) {

$ ittems. = ‘
cierre la sesión
‘;

}

Elseif (! Is_user_logged_in () && $ args-> thema_location == ‘primy’) {
$ ittems. = ‘
iniciar sesión ;
}
devolver $ ittems;
}
Después de eso, puede visitar su sitio web y ver el enlace de autenticación en su menú de navegación. Esta conexión dinámica irá automáticamente a la conexión o desconectará de acuerdo con el estado de conexión del usuario. 4. Agregar texto personalizado a su menú de navegación de WordPress ¿Qué pasa si solo desea agregar texto y no un enlace a su menú de navegación? hay dos maneras de hacer esto. 1. Agregue texto personalizado a un menú en particular (manera fácil) simplemente acceda a la página de la página »Menús y agregue un enlace personalizado con el # como URL y el texto que desea mostrar como texto de enlace.
Haga clic en el botón Agregar al menú para continuar. WordPress agregará texto personalizado como elemento de menú en la columna izquierda. Ahora haga clic para expandirlo y eliminar el #sign.
Recuerde hacer clic en el botón Guardar del menú y obtener una vista previa de su sitio. Notará que su texto personalizado aparece en el menú de navegación. Todavía es un enlace, pero al hacer clic en no hace nada para el usuario.
2. Agregue texto personalizado a un menú de navegación utilizando el código para este método, agregará un fragmento de código a su sitio web. En primer lugar, deberá averiguar el nombre de la ubicación de su tema, como se describe anteriormente, en la sección Conexión/desconexión. Después de eso, debe agregar el siguiente código al archivo Functions.php del tema o un complemento específico para el Sitio.
add_filter (‘wp_nav_men_items’, ‘your_custom_men_item’, 10, 2);
Funcionar your_custom_men_item ($ ittems, $ args) {

if ($ args-> thema_location == ‘primario’) {

$ ittems. = ‘
texto personalizado
‘;

}

devolver $ ittems;}
Simplemente reemplace el lugar donde escribe “texto personalizado” con su propio texto. Ahora puede guardar sus cambios y visitar su sitio web para ver el texto personalizado agregado al final del menú de navegación. Este método de código puede ser útil si desea programar los elementos dinámicos específicos en el menú de WordPress específico. 5. Agregue la fecha actual al menú de WordPress ¿Le gustaría mostrar la fecha actual en un menú de navegación de WordPress? Este truco es útil si ejecuta un blog o sitio de noticias actualizado frecuente. Simplemente agregue el siguiente código al archivo Functions.php de la base o en un complemento específico para el Sitio.
add_filter (‘wp_nav_men_items’, ‘add_todaysdate_in_men’, 10, 2);
Función add_todaysdate_in_menu ($ ittems, $ args) {
if ($ args-> thema_location == ‘primario’) {
$ TodaySdate = data (‘l js f y’);
$ ittems. = ‘
‘. $ Todaysdate. ‘
‘;
}
devolver $ ittems;
}
Recuerde reemplazar la “principal” con 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 como desee. 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 ¿Le gustaría agregar un poco más de personalización a su menú de navegación? Puede saludar a los usuarios autenticados por su nombre en su menú de navegación. Primero, deberá agregar el siguiente código al archivo Functions.php del tema o un complemento específico para el Sitio.
add_filter (‘wp_nav_men_objects’, ‘username_in_men_items’);
Función username_in_menu_items ($ menú_items) {
Foreach ($ menú_items como $ menú_item) {if (strpos ($ menú_item-> title, ‘#perfil_name#’)! == falso) {
if (is_user_logged_in ()) {
$ current_user = wp_get_current_user ();
$ user_public_name = $ current_user-> display_name;

$ menú_item-> title = str_replace (“#perfil_name#”, “hey”. $ user_public_name, $ menú_item-> title “!”);
} más {
$ menú_item-> title = str_replace (“#perfil_name#”, “¡Bienvenido!”, $ menú_item-> title. “!”);
}
}
}
devolver $ menú_items;
}
Este código primero verifica si ha agregado un elemento de menú con # perfil_name # como enlace de texto. Después de eso, reemplaza ese elemento de menú con el nombre de usuario conectado o un saludo genérico para usuarios no usados. Luego debe acceder a la página de la página »Menús y agregar un nuevo enlace personalizado con # perfil_name # como enlace de texto.
Recuerde 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 conectado al menú de WordPress.
7. Muestra dinámicamente los menús condicionados en WordPress hasta ahora, le he mostrado cómo agregar diferentes tipos de elementos personalizados a ciertos menús de WordPress. Sin embargo, a veces puede ser necesario mostrar dinámicamente diferentes elementos de menú para los usuarios. Por ejemplo, es posible que desee mostrar un menú solo para usuarios conectados. Otro escenario es cuando desea que el menú cambie de acuerdo con la página que ve el usuario. Este método le permite crear más menús y mostrarlos solo cuando se cumplen ciertas condiciones. Primero, debe instalar y activar el complemento acondicionado. Para obtener más detalles, consulte nuestra guía paso por paso sobre cómo instalar un complemento de WordPress. Al activar, debe visitar la página de la página »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. Después de haber creado el menú, vaya a la pestaña del ventilador. Desde aquí, debe hacer clic en el enlace de menús acondicionados cerca de la ubicación del menú.
Después de eso, debe seleccionar el menú creado anteriormente en el menú Drop -down. Luego haga clic en el botón “+ Condiciones” para continuar.
Esto mostrará una ventana emergente. Desde aquí, puede seleccionar las condiciones que se cumplirán para mostrar este menú.