En WPBeginner, hemos ayudado a innumerables lectores a personalizar sus sitios de WordPress para mejorar la experiencia del usuario, impulsar la marca y generar conversiones. Y hemos visto que, cuando se hace correctamente, un menú de navegación único puede ayudar a aumentar la participación y mantener a las personas en su sitio por más tiempo.
El problema es que todos los temas de WordPress tienen ubicaciones preestablecidas donde puedes mostrar un menú de navegación, por lo que cambiar esto puede ser complicado. Esto es especialmente cierto si eres principiante, ya que modificar los archivos del tema es un proceso delicado.
Cuando usas un tema de bloques, puedes hacerlo con el Editor de Sitio Completo. Pero, en nuestra experiencia, hay mejores opciones que funcionarán para todo tipo de temas.
Por ejemplo, si deseas personalizaciones avanzadas, puedes usar un potente constructor de páginas como SeedProd. O, si buscas una forma sencilla de usar código personalizado, WPCode es, con diferencia, la mejor opción.
En este artículo, te mostraremos cómo agregar un menú de navegación personalizado a cualquier área de tu tema de WordPress. Te guiaremos a través de 3 opciones diferentes para que puedas elegir el tutorial que sea adecuado para tus necesidades.
¿Por qué agregar menús de navegación personalizados en temas de WordPress?
Un menú de navegación es una lista de enlaces que apuntan a áreas importantes de tu sitio web. Hacen que sea fácil para los visitantes encontrar contenido interesante, lo que puede aumentar las visitas a la página y reducir la tasa de rebote en WordPress.
La ubicación exacta de tu menú variará según tu tema de WordPress. La mayoría de los temas tienen varias opciones, por lo que puedes crear diferentes menús y mostrarlos en distintas ubicaciones.
Para ver dónde puedes mostrar menús en tu tema actual de WordPress, simplemente dirígete a Apariencia » Menús y luego revisa la sección 'Ubicación de visualización'.
La siguiente imagen muestra las ubicaciones que soporta el tema de WordPress Astra.
A veces, es posible que desees mostrar un menú en un área que no esté listada como 'Ubicación de visualización' en tu tema.
Teniendo esto en cuenta, veamos cómo agregar un menú de navegación personalizado a cualquier área de tu tema de WordPress. Simplemente usa los enlaces rápidos a continuación para saltar al método que prefieras:
- Método 1: Usando el Editor de Sitio Completo (Solo Temas Basados en Bloques)
- Método 2: Usando un Plugin Constructor de Páginas (Funciona Con Todos los Temas)
- Method 3: Create a Custom Navigation Menu in WordPress Using Code (Advanced)
Método 1: Usando el Editor de Sitio Completo (Solo Temas Basados en Bloques)
Si estás usando un tema de bloques como ThemeIsle Hestia Pro, entonces puedes agregar un menú de navegación personalizado usando la Edición de Sitio Completo (FSE) y el editor de bloques.
Para más detalles, puedes ver nuestro artículo sobre los mejores temas de edición de sitio completo de WordPress.
Este método no funciona con todos los temas y no te permite personalizar cada parte del menú. Si deseas agregar un menú completamente personalizado a cualquier tema de WordPress, te recomendamos usar en su lugar un constructor de páginas.
Si estás usando un tema basado en bloques, dirígete a Apariencia » Editor.
Por defecto, el editor de sitio completo muestra la plantilla de inicio de tu tema, pero puedes agregar un menú de navegación a cualquier área.
Para ver todas las opciones disponibles, simplemente selecciona 'Plantillas', 'Patrones' o 'Páginas'.
Ahora puedes hacer clic en la plantilla, parte de plantilla o página donde deseas agregar un menú de navegación personalizado.
WordPress ahora mostrará una vista previa del diseño. Para editar esta plantilla, haz clic en el pequeño ícono del lápiz.
El siguiente paso es agregar un bloque de Navegación al área donde deseas mostrar tu menú.
En la esquina superior izquierda, haz clic en el botón azul con el símbolo ‘+’.
Ahora, escribe ‘Navegación’ en la barra de búsqueda.
Cuando aparezca el bloque ‘Navegación’, simplemente arrástralo y suéltalo en tu diseño.
A continuación, haz clic para seleccionar el bloque de Navegación.
Si ya creaste el menú que deseas mostrar, haz clic para seleccionar el bloque de Navegación. En el menú de la derecha, haz clic en el ícono de tres puntos junto a 'Menú'.
Luego puedes elegir un menú del menú desplegable.
Otra opción es crear un menú dentro del editor de sitio completo agregando páginas, entradas, enlaces personalizados y más. Para agregar elementos al nuevo menú, simplemente haz clic en el ícono '+'.
Esto abre una ventana emergente donde agregas cualquier entrada o página y decides si estos enlaces deben abrirse en una nueva pestaña.
También puedes agregar una barra de búsqueda al menú de WordPress, agregar íconos de redes sociales y más. En la ventana emergente, simplemente escribe el bloque que deseas agregar al menú y selecciona la opción correcta cuando aparezca.
Luego puedes configurar este bloque usando la configuración en la mini barra de herramientas y el menú de la derecha. Simplemente repite estos pasos para agregar más elementos al menú.
Cuando estés satisfecho con cómo se ve el menú, simplemente haz clic en el botón 'Guardar'.
Tu sitio ahora estará usando la nueva plantilla, y los visitantes podrán interactuar con tu menú de navegación personalizado.
Método 2: Usando un Plugin Constructor de Páginas (Funciona Con Todos los Temas)
El editor de sitio completo te permite agregar menús a temas basados en bloques. Sin embargo, si deseas agregar un menú avanzado y completamente personalizable a cualquier tema de WordPress, necesitarás un plugin de constructor de páginas.
SeedProd es el mejor plugin constructor de páginas de WordPress del mercado que te permite personalizar cada parte de tu menú de navegación.
Tenemos una amplia experiencia utilizando esta herramienta para crear menús de navegación personalizados, páginas de destino y mucho más. Para más detalles, consulta nuestra reseña completa de SeedProd.
En cuanto a páginas, SeedProd viene con más de 350 plantillas diseñadas profesionalmente que puedes usar como punto de partida. Después de elegir una plantilla, puedes agregar un menú de navegación personalizado a tu sitio usando el bloque Nav Menu listo para usar de SeedProd.
Primero, necesitas instalar y activar el plugin SeedProd. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Nota: También existe una versión gratuita de SeedProd que te permite crear menús de navegación personalizados sin escribir código. Sin embargo, en esta guía, usaremos SeedProd Pro ya que tiene el bloque Nav Menu, además de plantillas adicionales y funciones avanzadas.
Después de activar el plugin, SeedProd te pedirá tu clave de licencia.
Puedes encontrar esta información en tu cuenta en el sitio web de SeedProd. Después de ingresar la clave, haz clic en el botón ‘Verificar clave’.
Una vez que hayas hecho eso, ve a SeedProd » Páginas de destino y haz clic en el botón 'Agregar nueva página de destino'.
Ahora puedes elegir una plantilla para tu página personalizada.
Para ayudarte a encontrar el diseño adecuado, todas las plantillas de SeedProd están organizadas en diferentes tipos de campañas, como próximamente y campañas de captación de leads. Incluso puedes usar las plantillas de SeedProd para mejorar tu página 404.
Para ver de cerca cualquier diseño, simplemente pasa el cursor del ratón sobre esa plantilla y luego haz clic en el icono de la lupa.
Cuando encuentres un diseño que quieras usar, haz clic en ‘Elegir esta plantilla’.
Estamos usando la plantilla ‘Página de ventas Black Friday’ en todas nuestras imágenes, pero puedes usar la plantilla que desees.
Después de elegir una plantilla, escribe un nombre para esa página personalizada. SeedProd creará automáticamente una URL basada en el título de la página, pero puedes cambiar esta URL por lo que quieras.
Por ejemplo, podrías agregar palabras clave relevantes para ayudar a los motores de búsqueda a entender de qué trata la página. Esto puede mejorar tu SEO de WordPress y ayudar al motor de búsqueda a mostrar la página a personas que buscan contenido como el tuyo.
Después de ingresar esta información, haz clic en el botón ‘Guardar y empezar a editar la página’.
La mayoría de las plantillas ya contienen algunos bloques, que son los componentes principales de todos los diseños de página de SeedProd.
Para personalizar un bloque, simplemente haz clic para seleccionarlo en el editor de páginas.
La barra de herramientas de la izquierda ahora mostrará todas las configuraciones de ese bloque. Por ejemplo, en la imagen de abajo, estamos cambiando el texto dentro de un bloque de ‘Encabezado’.
Puedes formatear el texto, cambiar su alineación, agregar enlaces y más usando las configuraciones en el menú de la izquierda.
Si seleccionas la pestaña ‘Avanzado’, tendrás acceso a aún más configuraciones. Por ejemplo, puedes hacer que el bloque destaque realmente agregando sombras de caja y animaciones CSS.
Para agregar nuevos bloques a tu diseño, simplemente busca cualquier bloque en el menú de la izquierda y arrástralo a la página. Si quieres eliminar un bloque, haz clic para seleccionarlo y luego usa el ícono del bote de basura.
Como queremos crear un menú de navegación personalizado, arrastra un bloque de ‘Menú de Navegación’ a la página.
Esto crea un menú de navegación con un solo elemento predeterminado de ‘Acerca de’.
Ahora puedes crear un nuevo menú dentro del editor de SeedProd o elegir un menú que ya hayas creado en el panel de WordPress.
Para mostrar un menú que hayas creado previamente, haz clic en el botón ‘WordPress Menu’. Ahora puedes abrir el menú desplegable ‘Menus’ y elegir cualquier opción de la lista.
Después de eso, puedes cambiar el tamaño de fuente, la alineación del texto y más usando la configuración en el menú de la izquierda.
Si prefieres crear un nuevo menú dentro de SeedProd, selecciona el botón ‘Simple’.
Luego, haz clic para expandir el elemento ‘About’ que SeedProd crea por defecto.
Esto abre algunos controles donde puedes cambiar el texto y agregar la URL a la que se enlazará el elemento del menú.
Por defecto, el enlace será ‘dofollow’ y se abrirá en la misma ventana del navegador. Puedes cambiar estas configuraciones usando las casillas de verificación en la sección ‘URL Link’.
En la siguiente imagen, estamos creando un enlace ‘nofollow’ que se abrirá en una nueva ventana. Para más información sobre este tema, por favor consulta nuestra guía para principiantes sobre enlaces nofollow.
Para agregar más elementos al menú, simplemente haz clic en el botón ‘Add New Item’.
Luego puedes personalizar cada uno de estos elementos siguiendo el mismo proceso descrito anteriormente.
El menú de la izquierda también tiene configuraciones que cambian el tamaño de fuente y la alineación del texto.
Incluso puedes crear un divisor, que aparecerá entre cada elemento del menú.
Después de eso, ve y cambia a la pestaña ‘Advanced’. Aquí, puedes cambiar los colores, el espaciado, la tipografía y otras opciones avanzadas del menú.
A medida que realices cambios, la vista previa en vivo se actualizará automáticamente, para que puedas probar diferentes configuraciones y ver qué se ve bien en tu diseño.
Por defecto, SeedProd muestra el mismo menú en dispositivos móviles y de escritorio. Sin embargo, los dispositivos móviles suelen tener pantallas mucho más pequeñas en comparación con las computadoras de escritorio.
Teniendo esto en cuenta, es posible que desees crear un menú separado para mostrar en dispositivos móviles. Por ejemplo, podrías usar un diseño vertical para que los usuarios móviles no necesiten desplazarse horizontalmente. También podrías querer mostrar menos enlaces en teléfonos inteligentes y tabletas.
Para crear un menú listo para móviles, simplemente diseña el menú siguiendo el mismo proceso descrito anteriormente. Luego, selecciona la pestaña 'Avanzado' y haz clic para expandir la sección 'Visibilidad del dispositivo'.
Ahora puedes activar el control deslizante 'Ocultar en escritorio'.
Ahora, SeedProd solo mostrará este menú a los usuarios móviles.
Cuando estés contento con cómo se ve tu menú personalizado, es hora de publicarlo.
Simplemente haz clic en la flecha desplegable junto a 'Guardar' y luego selecciona 'Publicar'.
Ahora, si visitas tu blog de WordPress, verás el menú de navegación personalizado en acción.
Método 3: Crear un menú de navegación personalizado en WordPress usando código (Avanzado)
Si no quieres configurar un plugin de constructor de páginas, puedes agregar un menú de navegación personalizado usando código. A menudo encontrarás guías con instrucciones sobre cómo agregar fragmentos de código personalizados al archivo functions.php de tu tema.
Sin embargo, no recomendamos este método, ya que incluso un pequeño error en tu código podría causar una serie de errores comunes de WordPress o incluso romper tu sitio por completo. También perderás el código personalizado cuando actualices tu tema de WordPress.
Es por eso que recomendamos usar WPCode. Es la forma más fácil y segura de agregar código personalizado en WordPress sin tener que editar ningún archivo principal de WordPress.
Nota: Hay muchísimas formas diferentes en las que puedes usar WPCode para personalizar tu sitio de WordPress de forma segura. Tiene una biblioteca de fragmentos de código incorporada y admite todos los lenguajes de WordPress más importantes, incluidos PHP, JavaScript, CSS y HTML. Para obtener más información sobre el plugin, consulta nuestra reseña completa de WPCode.
Lo primero que necesitas hacer es instalar y activar el plugin gratuito WPCode. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Tras la activación, ve a Fragmentos de código » Agregar fragmento en tu panel de WordPress.
Aquí, verás todos los fragmentos prefabricados que puedes agregar a tu sitio. Estos incluyen un fragmento que te permite deshabilitar completamente los comentarios, cargar tipos de archivo que WordPress normalmente no admite, deshabilitar las páginas de adjuntos, y mucho más.
Para crear tu propio fragmento, coloca el cursor sobre ‘Agregar tu código personalizado (Nuevo fragmento)’ y luego haz clic en el botón ‘+ Agregar fragmento personalizado’.
A continuación, debes elegir un tipo de código de la lista de opciones que aparecen en la pantalla. Para este tutorial, selecciona ‘Fragmento PHP’ como tipo de código.
Ahora serás dirigido a la página Crear fragmento personalizado.
Para empezar, ingresa un título para el fragmento de código personalizado. Puede ser cualquier cosa que te ayude a identificar el fragmento en tu panel de WordPress.
Una vez que hayas hecho eso, simplemente pega el siguiente fragmento en el editor de código:
function wpb_custom_new_menu() {
register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );
Esto agregará una nueva ubicación de menú a tu tema llamada ‘Mi Menú Personalizado’. Para usar un nombre diferente, simplemente ajusta el fragmento de código.
Si deseas agregar más de un menú de navegación personalizado a tu tema, simplemente agrega una línea adicional al fragmento de código.
Por ejemplo, aquí estamos agregando dos nuevas ubicaciones de menú a nuestro tema, llamadas ‘Mi Menú Personalizado’ y ‘Menú Extra’:
function wpb_custom_new_menu() {
register_nav_menus(
array(
'my-custom-menu' => __( 'My Custom Menu' ),
'extra-menu' => __( 'Extra Menu' )
)
);
}
add_action( 'init', 'wpb_custom_new_menu' );
Después de eso, desplázate hasta las opciones de ‘Inserción’. Si no está seleccionado, elige el método ‘Insertar automáticamente’ para que WPCode inserte el fragmento en todo tu sitio.
Luego, abre el menú desplegable ‘Ubicación’ y haz clic en ‘Ejecutar en todas partes’.
Ahora, estás listo para desplazarte hasta la parte superior de la pantalla y hacer clic en el interruptor ‘Inactivo’ para que cambie a ‘Activo’.
Finalmente, haz clic en ‘Guardar’ para que este fragmento se active.
Después de eso, ve a Apariencia » Menús y mira el área de ‘Ubicación de visualización’.
Ahora deberías ver una nueva opción de ‘Mi Menú Personalizado’.
Ahora puedes proceder a agregar algunos elementos al menú en la nueva ubicación. Para más información, por favor consulta nuestra guía paso a paso sobre cómo agregar menús de navegación para principiantes.
Cuando estés satisfecho con tu menú, el siguiente paso es agregarlo a tu tema de WordPress.
La mayoría de los sitios web muestran el menú de navegación directamente debajo de la sección del encabezado. Esto significa que el menú es una de las primeras cosas que ven los visitantes, junto con el logo del sitio o el título.
Puedes agregar el menú de navegación personalizado a cualquier ubicación agregando algo de código al archivo de plantilla de tu tema.
En tu panel de WordPress, ve a Apariencia » Editor de archivos de tema.
En el menú de la derecha, elige la plantilla donde deseas agregar el menú. Por ejemplo, si deseas mostrar el menú de navegación personalizado en el encabezado de tu sitio web, entonces normalmente seleccionarás el archivo header.php.
Para obtener ayuda para encontrar el archivo de plantilla correcto, consulta nuestra guía sobre cómo encontrar qué archivos editar en tu tema de WordPress.
Después de seleccionar el archivo, deberás agregar una función wp_nav_menu y especificar el nombre de tu menú personalizado.
Por ejemplo, en el siguiente fragmento de código, estamos agregando 'Mi Menú Personalizado' al encabezado del tema:
wp_nav_menu( array( 'theme_location'=>'my-custom-menu', 'container_class'=>'custom-menu-class' ) );
Después de agregar el código, haz clic en el botón 'Actualizar archivo' para guardar tus cambios.
Ahora, si visitas tu sitio, verás el menú personalizado en acción.
Por defecto, tu menú aparecerá como una lista simple con viñetas.
Puedes estilizar el menú de navegación personalizado para que coincida mejor con tu tema de WordPress o la marca de tu empresa agregando código CSS personalizado a tu sitio.
Para hacer esto, ve a Apariencia » Personalizar.
En el personalizador de temas de WordPress, haz clic en 'CSS adicional'.
Esto abre un pequeño editor de código donde puedes escribir algo de CSS.
Ahora puedes estilizar tu menú usando la clase CSS que agregaste a la plantilla de tu tema. En nuestro ejemplo, esta es .custom_menu_class.
En el siguiente código, estamos agregando márgenes y relleno, estableciendo el color del texto en negro y organizando los elementos del menú en un diseño horizontal:
div.custom-menu-class ul {
margin:20px 0px 20px 0px;
list-style-type: none;
list-style: none;
list-style-image: none;
text-align:right;
display:inline-block;
}
div.custom-menu-class li {
padding: 0px 20px 0px 0px;
display: inline-block;
}
div.custom-menu-class a {
color:#000;
}
El personalizador de WordPress se actualizará automáticamente.
Ahora mostrará cómo se verá el menú con el nuevo estilo.
Si estás contento con cómo se ve el menú, haz clic en 'Publicar' para que tus cambios se hagan en vivo.
Para más información, por favor consulta nuestra guía sobre cómo estilizar menús de navegación de WordPress.
Guías de Expertos: Haz Más Con los Menús de Navegación de WordPress
Con WordPress, puedes crear todo tipo de menús útiles y atractivos. Teniendo esto en cuenta, aquí tienes algunas guías de expertos para ayudarte a sacar aún más provecho de tus menús de navegación:
- Cómo Agregar Iconos de Imagen Con Menús de Navegación en WordPress
- Cómo agregar lógica condicional a los menús en WordPress (paso a paso)
- Cómo agregar descripciones de menú en tus temas de WordPress
- Cómo agregar un menú adaptable de pantalla completa en WordPress
- Cómo agregar un menú mega en tu sitio de WordPress (paso a paso)
Esperamos que esta guía definitiva te haya ayudado a aprender cómo agregar un menú de navegación personalizado en WordPress. También puedes consultar nuestras guías sobre cómo agregar un botón en tu menú de encabezado de WordPress o cómo resaltar un elemento del menú en WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Jiří Vaněk
Siempre quise evitar los plugins primero para cosas como esta. Es por eso que siempre aprecio cuando también ofreces la opción de usar WP Code y snippets. Siempre los pruebo primero en un sitio de prueba y este funciona muy bien. Luego guardo tus snippets en mi propia tienda de código, a la que siempre puedo recurrir si es necesario. Gracias.
Soporte de WPBeginner
Glad to hear you found our code snippets helpful!
Administrador
Mike
Gracias por mostrar el código, tengo un problema, mi nuevo menú siempre muestra el mismo contenido que el menú principal después de que apliqué:
wp_nav_menu( array( ‘theme_location’=>’too-right-menu’, ‘container_class’=>’top-right-class’ ) );
Por favor, ayuden.
Soporte de WPBeginner
Es posible que estés usando el mismo nombre que un menú diferente que tu tema tiene activo. Si aún no lo has hecho, intenta con un nombre de ubicación diferente.
Administrador
Shubham Kumar
¿Cómo puedo hacer que ese menú sea fijo? Uso el primer método, es decir, pegar el código en el header.php del tema. Ahora me gustaría que ese elemento se fijara si el usuario se desplaza desde la ubicación de ese menú.
Amit Singh
Creé dos menús. Uno a la izquierda del logo y otro a la derecha. Ahora quiero agregar un submenú. Simplemente arrastro los menús debajo del padre, pero no funciona. ¿Tienes algún artículo que explique cómo podemos agregar un submenú personalizado?
Soporte de WPBeginner
Por el momento no, pero ciertamente lo tendremos en cuenta para futuros artículos.
Administrador
Mohit
Sigue haciendo un gran trabajo
Soporte de WPBeginner
Glad you continue to enjoy our content
Administrador
Saurabh
mi menú no se muestra en la cabecera. se muestra debajo del título de la página
Soporte de WPBeginner
Es posible que necesites modificar dónde se inserta el código en la plantilla, pero si te pones en contacto con el soporte de tu tema actual, deberían poder indicarte dónde se agrega la cabecera en su tema.
Administrador
ian
hola
¿por qué no puedo ver la página de menús de mi sitio web?
el diseño de los tutoriales no se parece en nada a mi pantalla
gracias
Soporte de WPBeginner
¿Es tu sitio un sitio de WordPress.com? https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
Administrador
krishna
hola
quiero agregar mi propio html para el encabezado
¿cómo puedo hacer eso?
Mukeshwar Singh
Hola, estoy usando Magazine Pro y ¡¡no hay opción de Menú Personalizado en el Área de Widgets!! Usé tu código para crear un Menú Personalizado, pero necesito ayuda porque no hay opción de Menú Personalizado en el área de Widgets, por lo que no puedo arrastrarlo y soltarlo en el área del pie de página... Por favor, ayúdame
Elle
¡Hola! Completé el tutorial y he podido agregar el menú en la ubicación deseada en mi sitio. Lo he estilizado y todo. PROBLEMA: El menú aparece por un momento al refrescar la página, ¡incluso puedo hacer clic en él! Sin embargo, rápidamente desaparece detrás de mi encabezado. No se puede hacer clic en él después de que desaparece. ¡Mi cerebro está explotando tratando de resolver esto!
Furqan
Hola
Primero creo el menú de agregar con un nombre mi menú personalizado y su obtención es perfectamente buena y correcta, y luego cambié su nombre a menú de pie de página después de cambiar su nombre a navegación personalizada, no se obtiene, ¿cuál es la razón?
Himanshu
Solo una pregunta: ¿qué debo hacer con la barra de navegación existente de WordPress? ¿Cómo eliminarla?
karima
Hola, una amiga tiene un problema, bueno varios, tiene la barra de navegación horizontal del encabezado pero también una vertical al lado que está oscureciendo el contenido de la página, aparece cuando empiezas a desplazarte en la página de inicio pero está fija en todas las páginas de contenido. ¿Alguien puede revisar por favor y aconsejar? También hay un aviso de error que no encontramos cómo eliminar, cualquier ayuda por favor se agradece.
sudhakar
cómo eliminar el slider predeterminado de cualquier tema y cómo agregar nuestro nuevo modelo de slider en la página de inicio
Imran
Tengo un encabezado personalizado creado para WordPress con elementos de menú codificados, ¿cómo puedo usar el menú de WordPress en el encabezado en lugar del menú codificado?
cheryl
Soy bastante nuevo en WordPress, sin embargo, me gustaría editar un menú personalizado que hemos creado, ya que algo parece estar mal dentro del menú.
¿Cómo hago esto?
Manu
Excellent tutorial! This was exactly what I needed right now. Within 5 minutes I was able to set up a footer menu in a theme that by default didn’t have any. Thank you so much
Munna Hossain
Artículo útil. Soy un usuario de WordPress y estos consejos me ayudarán a agregar menús de navegación personalizados. Gracias por compartir.
Daniel Keith
Hola,
Gran tutorial. ¿Cómo puedo aplicar CSS a este menú personalizado?
Aunque esta es una excelente manera de agregar varios menús, sin el CSS adecuado el sitio web se ve extraño.
Zaheer Abbas
Estoy creando mi tema de WordPress pero el menú y el widget no se muestran en el panel de administración ???
¿Son características integradas en WordPress o tengo que crear menús y widgets con código? Por favor, guíame.
Tabitha
¿Cómo puedo hacer que mi menú desplegable tenga columnas? Mi menú desplegable actual es demasiado largo.
Aakash Salunke
Soy un usuario un poco avanzado. Mi tema solo admite un menú. Pero quiero agregar un menú más. Lo he hecho, pero ¿cómo puedo agregarlo?
Soporte de WPBeginner
Primero, necesitarás registrar la ubicación del menú, luego necesitarás editar los archivos de tu tema para mostrar tu menú de navegación.
Administrador
bobit
funcionó, gracias por la gran publicación
Aijaz Ansari
Impresionante tutorial, realmente ayuda a un novato como yo.
Gracias.
Victoria
¡¡¡Gracias por el artículo!!! Creé mi nuevo menú.
Sin embargo, tengo un problema.
Mi sitio web tiene un ancho fijo y, cuando redimensiono la ventana, todo permanece en su lugar, excepto el nuevo menú. El ancho mínimo no es una opción porque no es exactamente el comportamiento que quiero.
¿Cómo puedo hacer que se comporte de la misma manera que el resto del contenido de la página?
¡Gracias!
Joey
¡GRACIAS! Estuve buscando esto mucho tiempo, nunca pensé que fuera tan simple.
Cory
Tengo un tema viejo y loco que no soportaba los menús de WP 3.0+. Este tutorial fue muy fácil. Me tomó 3 minutos actualizarlo un poco. Muchas gracias.
Jacques Goudreau
¡Gracias por el consejo! ¡Gran tutorial!
Emma
¿A dónde vas para hacer estos cambios? No veo ninguna de esas opciones en las pestañas Tema u Opciones del tema.
I use the Buenos Theme, but can’t find on the Buenos theme page does it support these changes? I want to put in an Archive menu with a list of all the recipes on my blog… should be easy but proving impossible
Personal editorial
La mayoría de los temas soportan esto. Mira Apariencia > Menús. Este artículo es para diseñadores de temas que quieren agregar esta función en sus temas para permitir a los usuarios agregar menús desde el backend.
Administrador
Zoe
He estado intentando agregar una clase personalizada a una URL personalizada singular (para cambiar el color de solo una URL) en la sección Menús de Navegación Superior, pero solo agrega mi clase como una extensión de la clase existente en el código fuente de salida y no sucede nada.
Aquí está mi código CSS y el código fuente que se genera en mi sitio:
.myCustomClass { color: #FFFF00; }
Un enlace de color único
¿Alguna sugerencia sobre cómo hacer que esto funcione?
Personal editorial
Sí, agrégalo como color: #ffff00 !important; en esa clase. Esto debería funcionar.
Administrador
Jeremy Johnson
Pude implementar estas modificaciones y el menú personalizado funciona. Sin embargo, el CSS de mi tema elegido no parece soportar submenús. El elemento del submenú siempre está visible, pasar el ratón sobre el elemento principal no hace nada, y el elemento del menú principal es tan ancho como el elemento hijo más ancho, lo que empuja los otros elementos del menú más a la derecha de lo que deberían estar. ¿Alguna sugerencia para hacer que el submenú actúe dinámicamente? Soy bastante nuevo en CSS.
Personal editorial
El mejor lugar para empezar sería tomar el tema predeterminado Twenty Eleven. Usa el CSS de navegación de allí y empieza a modificar.
Administrador
Cedric
Todavía buscando una solución para esto.
shaunling
¡Esto es simplemente genial!
digitfox
¡Sí! ¡Es un buen tutorial para mí! ¡Soy muy nuevo en WP! Gracias
PauloNeves
Necesito ayuda.
Sigue todos los pasos, pero en el Panel de Apariencia el menú de opciones no está habilitado.
Al seleccionar otro tema funciona.
¿Cómo habilito el menú de opciones?
Gracias.
Paulo Neves
wpbeginner
@PauloNeves Tienes que agregar esta línea en el archivo functions.php de tu tema: add_theme_support( ‘menus’ );
Brad
¡Gracias por esto! Me funcionó de maravilla y ayudó mucho a mi cliente. – aptdesign
eeebasic
Esto me es muy útil, aunque la versión 3.3 de WordPress fue lanzada hace unos días.
citydan
He seguido las instrucciones y esta publicación y la publicación aquí (https://www.wpbeginner.com/wp-tutorials/adding-a-second-menu-to-the-twenty-ten-theme/), y descubrí cómo hacer que mi CSS muestre el menú correctamente, pero los elementos secundarios (elementos del submenú) no aparecen. Los tengo configurados correctamente en el editor de menús, pero en el sitio no se muestran. No están ocultos por CSS porque no están en el código fuente de la página.
¿Alguna idea de por qué no se muestran los subelementos de mi menú?
GourabMalla
Hola,
He agregado el menú personalizado en la navegación superior, pero quiero saber cómo puedo activar la "Clase de página actual".
Estoy usando WordPress 3.2
Gracias
Gourab
DanFlynnDesign
¡Gracias! Me encanta que todo esto sea dinámico para que el cliente pueda editarlo si es necesario, además de poder indicar cuál es la página actual y aplicar un efecto de desplazamiento. ¡EXACTAMENTE lo que estaba buscando!
asharperrazor
Lo he intentado muchas veces. Tengo un tema antiguo de WordPress. Tan antiguo que ni siquiera estoy seguro de para qué versión de WordPress fue escrito. De todos modos, puedo hacer que la parte de funciones funcione. Puedo guardar el menú correcto. Puedo poner el código en otras partes de mi sitio web, digamos en el pie de página, aunque se muestra como una lista jerárquica y no horizontal.
No se mostrará en el menú de navegación superior. ¿Necesito un tema nuevo o es posible editar mi tema actual para permitir la nueva función del menú?
Gracias de antemano. El sitio web es http://www.asharperrazor.com
JamesGeorge
Implementé esto SIN problemas. ¡Gracias! Tomé el código del "menú de navegación" y lo coloqué en el div donde el tema de mi cliente estaba llamando a la lista de páginas. Básicamente, lo reemplacé con tu código de arriba y lo subí, y el CSS lo mantuvo con el mismo estilo. Se ve genial y funciona perfectamente. ¡INCREÍBLE!
ÁlvaroBenavides
Realmente necesito ayuda para implementar el CSS de las clases, ¡así que por favor avisa cuando termines!
Bec
¡Gran publicación, gracias!
Lo he implementado como se indica arriba y los elementos de mi menú se muestran en el sitio, ¡el único problema es que cada página está vacía?!
¿Alguna idea?
Personal editorial
Parece un error de PHP. Por favor, valida tu PHP para asegurarte de que no haya errores.
Administrador
Joseph McCullough
Rápido y sucio, ¡como me gustan mis fragmentos de código. Muchas gracias.
Paul
He creado menús de navegación personalizados un par de veces. Lo raro es que después de crearlos y guardarlos, aparecen por un tiempo y luego la barra de navegación vuelve a tener solo 2 pestañas, como si la configuración se sobrescribiera automáticamente. En sitios con la misma plantilla donde nunca creé una barra personalizada, se muestran correctamente.
¿Alguna idea?
Personal editorial
No, ni idea de por qué está haciendo eso.
Administrador
Narendra Choudhary
Puedes definir clases personalizadas para cada navegación y luego agregar una imagen de fondo. Incluso puedes usar la propiedad CSS (text-indent) para eliminar el texto del menú si lo deseas.
Responder
Ram
Tengo una pregunta sobre el menú de navegación,
¿hay alguna forma de agregar la imagen a la lista de menús de navegación?
Gracias,
Ram
Personal editorial
Puedes definir clases personalizadas para cada navegación y luego agregar una imagen de fondo. Incluso puedes usar la propiedad CSS (text-indent) para eliminar el texto del menú si lo deseas.
Administrador
Ram
thanks for your response but i need more clearly that custom menu image for the wordpress.
Im using wp_list_categories(‘exclude=4,7&title_li=’); to show the navigational menu so is it any possibility to add the different images to the different menu button. Im trying the CSS but it never works for me
Gracias,
Ram
Personal editorial
Sí, es posible agregar diferentes imágenes con el menú personalizado. El que estás usando no es el menú del que estamos hablando en este artículo.
Julie @ Inspired to Write
¿Puedes agregar código para que se vea más presentable (fuentes, botones, tamaño, etc.)? Si es así, ¿puedes darme un ejemplo y dónde poner este código? ¡Gracias!
Personal editorial
Esa es una pregunta relacionada con CSS. Tendrás que agregar el tamaño de fuente en las clases apropiadas en el archivo CSS. Pronto haremos una publicación sobre los estilos CSS.
Administrador
Chris
Pregunta sobre el manejo del menú.
Tengo un menú alineado a la derecha, por lo que los elementos del menú aparecen en orden inverso.
¿Hay alguna forma de ordenar `menu_order` en INVERSO?
entonces: `sort_column’ => ‘menu_order’` tendría algo agregado para invertir el orden.
¡Gracias!
Personal editorial
El simple hecho de que estén alineados a la derecha no debería hacer que aparezcan en orden inverso. Para solucionarlo, necesitas cambiar tu CSS en lugar de invertir el hook. Crea un div contenedor que esté alineado a la derecha y luego haz que las etiquetas de lista floten a la izquierda.
Administrador
Julie
He seguido las instrucciones, pero después de crear los menús y agregar las categorías apropiadas para usar, no los veo en mi barra de navegación. ¿Alguna idea de lo que hice mal?
Personal editorial
¿Has pegado los códigos en tu `header.php` o donde sea que deba aparecer ese menú?
Administrador