¿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. A veces es posible que desees mostrar elementos personalizados además de simples enlaces en tus 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 normalmente se muestran en la parte superior de un sitio web. En los dispositivos móviles, suelen aparecer cuando tocas un ícono de menú.
Dado que esta es una ubicación destacada en el diseño típico de un sitio web de WordPress, es inteligente aprovecharla incluyendo elementos personalizados además de simples enlaces en el menú.
Por ejemplo, es posible que algunos usuarios quieran mostrar el formulario de búsqueda como lo hacemos nosotros en WPBeginner. Es posible que un sitio web de membresía desee mostrar enlaces de inicio y cierre de sesión, o 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 de texto sin formato. Sin embargo, aún puedes insertar elementos personalizados en tus menús de WordPress.
Dicho esto, echemos un vistazo a cómo agregar elementos personalizados a menús específicos en WordPress manteniendo intacto el resto del menú de navegación.
Agregar elementos personalizados a menús de navegación específicos en WordPress
Hay varias formas de agregar elementos personalizados a un menú de navegación en WordPress. Depende del tipo de elemento personalizado que esté intentando agregar.
Le mostraremos algunos de los ejemplos más comunes. Para algunos de ellos tendrás que usar complementos, mientras que para otros tendrás que agregar código.
Si desea saltar directamente a una sección determinada, puede utilizar este resumen:
Vamos a empezar.
Normalmente, puede agregar un formulario de búsqueda a su barra lateral de WordPress usando el widget o bloque de búsqueda predeterminado. Sin embargo, no puede 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 el tuyo no lo hace, puedes utilizar el siguiente método.
Para esto necesitas instalar y activar el archivo. Módulo de búsqueda modal SearchWP conectar. 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 complemento 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 en WordPress.
Después de instalar el complemento, simplemente navegue hasta el archivo Apariencia » Menú página. En la columna «Agregar 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 luego haga clic en el botón Agregar al menú.
El complemento agregará búsqueda a su menú de navegación. Haga clic en el «Formulario de búsqueda modal» debajo de los elementos del menú para expandirlo y cambiar la etiqueta a Buscar o lo que desee.
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 agregada al menú de navegación. Al hacer clic en él, se abrirá el formulario de búsqueda en una ventana emergente de luz.
Para obtener más detalles, consulte nuestra guía sobre cómo agregar un botón de búsqueda a un menú de WordPress.
Otro elemento personalizado popular que los usuarios suelen querer agregar a un menú específico es una imagen o ícono.
Para ello tendrás que instalar y activar el archivo. Icono de imagen del menú conectar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.
Después de la activación, vaya a Apariencia » Menú página y mueva el mouse sobre el elemento del menú donde desea mostrar un ícono o imagen.
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 mostrar con ese elemento del menú.
También puede elegir la posición de la imagen o icono en relación con el 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 íconos o imágenes a otros elementos del menú.
A continuación, puede visitar su sitio web para ver la imagen o el ícono personalizado en elementos de menú específicos.
Para obtener instrucciones más detalladas, consulte nuestro tutorial sobre cómo agregar imágenes a los menús de WordPress.
Si utiliza un 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 ofrece una manera fácil de mostrar enlaces de inicio y cierre de sesión en los menús de navegación.
Le mostraremos cómo agregarlos usando un complemento o usando el fragmento de código.
1. Agregue enlaces de inicio/cierre de sesión a los menús usando un complemento
Este método es más sencillo y recomendado para todos los usuarios.
Primero necesitas instalar y activar el archivo. Elemento de menú Iniciar sesión o cerrar sesión conectar. Después de eso, debes visitar el Apariencia » Menú y haga clic en la pestaña Iniciar sesión/Cerrar sesión para expandirla.
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 personalizado de inicio y cierre de sesión en acción.
El enlace cambiará dinámicamente para 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 de inicio y cierre de sesión en los menús de WordPress.
2. Agregue enlaces de inicio de sesión/cierre de sesión usando un código personalizado
Este método requiere agregar código a su sitio web de WordPress. Si nunca ha hecho esto antes, consulte nuestra guía sobre cómo agregar código personalizado en WordPress.
Primero, 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 sencilla de encontrarlo es visitar el Apariencia » Menú página y moviendo el mouse sobre el área de ubicaciones del menú.
Haga clic derecho para seleccionar la herramienta Inspeccionar y 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 el menú de la barra superior.
Anote el nombre utilizado para la ubicación de destino donde desea que aparezca 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 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 .= 'Después de eso, puede visitar su sitio web y verá el enlace de inicio de sesión y cierre de sesión en el menú de navegación.
Este enlace dinámico iniciará o cerrará sesión automáticamente según el estado de inicio de sesión del usuario.
¿Qué pasa si solo desea agregar texto y no un enlace al menú de navegación?
Hay dos maneras de hacer esto.
1. Agregue texto personalizado a un menú específico (manera fácil)
solo ve a Apariencia » Menú página y agregue un enlace personalizado con el signo como URL y el texto que desea mostrar como texto del enlace.
Haga clic en el botón Agregar al menú para continuar.
WordPress agregará su texto personalizado como un elemento de menú en la columna de la izquierda. Ahora haga clic para expandirlo y eliminar el signo .
No olvide hacer clic en el botón Guardar menú y obtener una vista previa de su sitio web. Notarás que tu texto personalizado aparece en el menú de navegación.
Sigue siendo un enlace, pero hacer clic en él no aporta nada al usuario.
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 del tema como se describe arriba en el archivo sección de enlaces de inicio de sesión/cierre de sesión.
A continuación, 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', 'your_custom_menu_item', 10, 2 );
function your_custom_menu_item ( $items, $args ) {
if ( $args->theme_location == 'primary') {
$items .= 'Simplemente reemplace «Texto personalizado» con su propio texto.
Ahora puede guardar sus cambios y visitar su sitio web para ver el texto personalizado agregado en la parte inferior del menú de navegación.
Este método de código puede resultar útil si desea agregar mediante programación elementos dinámicos a menús específicos de WordPress.
¿Quiere mostrar la fecha actual dentro de un menú de navegación en WordPress? Este truco es útil si ejecuta un blog o un sitio web de noticias que se actualiza 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 .= 'No olvide reemplazar «primario» con la ubicación de su menú.
Ahora puede visitar su sitio web para ver la fecha actual en el menú de WordPress.
También puedes cambiar el formato de fecha a tu gusto. Consulte 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 el menú de navegación.
Primero, deberá 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 si ha agregado un elemento de menú con nombre_perfil como texto del enlace. A continuación, reemplaza el elemento del menú con el nombre del usuario que inició sesión o un saludo genérico para los usuarios que no iniciaron sesión.
A continuación, debe ir a la página Apariencia »Menú y agregar un nuevo enlace personalizado con nombre_perfil como texto del enlace.
No olvide hacer clic en el botón Guardar menú para almacenar sus cambios. A continuación, puede visitar su sitio web para ver el nombre del usuario que inició sesión en el menú de 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 necesites mostrar dinámicamente diferentes elementos del menú a los usuarios.
Por ejemplo, es posible que desee mostrar un menú sólo a los usuarios que hayan iniciado sesión. 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.
Primero necesitas instalar y activar el archivo. Menús condicionales conectar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.
Después de la activación, debe visitar Apariencia » Menú 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.
Una vez que haya creado su 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ú.
A continuación, debe seleccionar el menú creado anteriormente en el menú desplegable.
Luego, haga clic en el botón «+ Condiciones» para continuar.
Esto abrirá una ventana emergente.
Desde aquí podrás seleccionar las condiciones que se deben cumplir para que aparezca este menú.
El complemento ofrece una serie de condiciones para elegir. Por ejemplo, puede mostrar el menú según una página, categoría, tipo de publicación, taxonomía y más específicos.
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. Quizás también quieras 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.
