¿Quiere diseñar sus menús de navegación de WordPress para cambiar sus colores o apariencia? Si bien su tema de WordPress administra el aspecto de sus menús de navegación, puede personalizarlo fácilmente usando CSS para satisfacer sus necesidades. En este artículo, le mostraremos cómo diseñar los menús de navegación de WordPress en su sitio.
Mostraremos dos métodos diferentes. El primer método está destinado a principiantes, ya que utiliza un complemento y no requiere ningún conocimiento de código. El segundo método es para usuarios de bricolaje intermedios que prefieren usar código CSS en lugar de un complemento.
Contents
Su tema de WordPress utiliza CSS para diseñar los menús de navegación. Muchos novatos no se sienten cómodos editando archivos de temas o escribiendo código CSS por su cuenta. Aquí es cuando un complemento de estilo de WordPress resulta útil. Esto le evita modificar archivos de tema o escribir código. Primero debe instalar y activar el complemento CSS Hero. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress. CSS Hero es un complemento premium de WordPress que le permite diseñar su propio tema de WordPress sin escribir una sola línea de código (no se requiere HTML o CSS). Consulte nuestra revisión de CSS Hero para obtener más información. Los usuarios de MundoCMS pueden usar este cupón CSS Hero para obtener un 34% de descuento en su compra. Tras la activación, se le redirigirá para obtener su clave de licencia CSS Hero. Simplemente siga las instrucciones en pantalla y será llevado a su sitio con solo unos pocos clics. A continuación, debe hacer clic en el botón CSS Hero en la barra de herramientas de administración de WordPress.
CSS Hero ofrece un editor WYSIWYG (Lo que ves es lo que obtienes). Haga clic en el botón para ir a su sitio web con una barra de herramientas flotante CSS Hero visible en la pantalla.
Debe hacer clic en el icono azul en la parte superior para comenzar a editar. Después de hacer clic en el ícono azul, coloque el mouse sobre el menú de navegación y CSS Hero lo resaltará mostrando los bordes a su alrededor. Cuando hace clic en el menú de navegación resaltado, le mostrará los elementos que puede cambiar.
En la captura de pantalla anterior, nos muestra el contenedor del menú de navegación superior. Supongamos que queremos cambiar el color de fondo de nuestro menú de navegación. En este caso, seleccionaremos la navegación superior que afecta a todo nuestro menú. CSS Hero ahora le mostrará diferentes propiedades que puede cambiar como texto, fondo, borde, márgenes, relleno, etc.
Puede hacer clic en cualquier propiedad que desee editar. CSS Hero te mostrará una interfaz simple donde puedes realizar tus cambios.
En la captura de pantalla anterior, seleccionamos el fondo y nos mostró una interfaz agradable para seleccionar el color de fondo, degradado, imagen, etc. A medida que realice cambios, podrá verlos en vivo en la vista previa del tema.
Una vez que esté satisfecho con los cambios, haga clic en el botón Guardar en la barra de herramientas CSS Hero para guardar sus cambios. Lo mejor de utilizar este método es que puede deshacer fácilmente los cambios que realice. CSS Hero mantiene un historial completo de todos sus cambios, y puede ir y venir entre esos cambios.
Este método requiere que agregue manualmente CSS personalizado y está destinado a usuarios intermedios. Los menús de navegación de WordPress se muestran en una lista desordenada (lista con viñetas). Normalmente, si utiliza la etiqueta de menú predeterminada de WordPress, mostrará una lista sin una clase CSS asociada.
Su lista desordenada tendría el nombre de clase «menú» y cada elemento de la lista tendría su propia clase CSS. Esto puede funcionar si solo tiene una ubicación de menú. Sin embargo, la mayoría de los temas tienen varias ubicaciones donde puede mostrar menús de navegación. Usar solo la clase CSS predeterminada puede causar conflictos con los menús de otras ubicaciones. Es por eso que también debe definir la clase CSS y la ubicación del menú. Lo más probable es que su tema de WordPress ya esté haciendo esto al agregar los menús de navegación usando un código como este:
‘primario’, ‘menu_class’ = ‘menú-primario’,)); ? Este código le dice a WordPress que aquí es donde el tema muestra el menú principal. También agrega un menú principal de clase CSS al menú de navegación. Ahora puede diseñar su menú de navegación usando esta estructura CSS. // clase de contenedor #header .primary-menu {} // clase de contenedor primera lista desordenada #header .primary-menu ul {} // lista desordenada en lista desordenada #header .primary-menu ul ul {} // cada elemento de navegación #header .primary-menu li {} // cada ancla de elemento de navegación #header .primary-menu li tiene {} // lista desordenada si hay #header desplegables. primary-menu li ul {} // cada elemento de navegación desplegable #header .primary-menu li li {} // cada elemento de navegación desplegado ancla #header .primary-menu li li a {} Necesitará reemplazar # header por la clase CSS contenedora usada por su menú de navegación. Esta estructura le ayudará a cambiar completamente el aspecto de su menú de navegación. Sin embargo, hay otras clases de CSS generadas por WordPress que se agregan automáticamente a cada menú y elemento de menú. Estas clases le permiten personalizar aún más su menú de navegación. // Clase para la página actual .current_page_item {} // Clase para la categoría actual .current-cat {} // Clase para cualquier otro elemento del menú actual .current-menu-item {} // Clase para una categoría .menu – item- type-taxonomy {} // Clase para tipos de elementos .menu-item-type-post_type {} // Clase para todos los enlaces personalizados .menu-item-type-custom {} // Clase para el enlace de inicio .menu-item – home {} WordPress también le permite agregar sus propias clases CSS personalizadas a elementos de menú individuales. Puede usar esta función para diseñar elementos de menú, como agregar íconos de imagen con sus menús o simplemente cambiar colores para resaltar un elemento de menú. Dirigirse a Apariencia »Menús página en su administrador de WordPress y haga clic en el botón Opciones de pantalla.
Una vez que haya marcado esta casilla, verá que se agrega un campo adicional cuando vaya a editar cada elemento individual del menú.
Ahora puede usar esta clase de CSS en su hoja de estilo para agregar su CSS personalizado. Esto solo afectará al elemento del menú con la clase CSS que agregó.
Los diferentes temas de WordPress pueden usar diferentes opciones de estilo, clases de CSS e incluso JavaScript para crear menús de navegación. Esto le brinda muchas opciones para cambiar estos estilos y personalizar sus menús de navegación para satisfacer sus propias necesidades. La herramienta de inspección de su navegador web será su mejor amigo para determinar qué clases de CSS modificar. Si nunca lo ha usado antes, consulte nuestra guía sobre cómo usar la herramienta de inspección para personalizar los temas de WordPress. Básicamente, todo lo que necesita hacer es apuntar el cursor al elemento que desea cambiar, hacer clic derecho y luego seleccionar la herramienta Inspeccionar en el menú del navegador.
Dicho esto, echemos un vistazo a algunos ejemplos reales de estilos de menú de navegación en WordPress.
Este es el ejemplo de CSS personalizado que puede agregar a su tema para cambiar el color de fuente de los menús de navegación. # top-menu li.menu-item a {color: # ff0000; } En este ejemplo, el # menú superior es el ID asignado a la lista desordenada que muestra nuestro menú de navegación. Deberá utilizar la herramienta de inspección para averiguar el ID utilizado por su tema.
Primero debe encontrar la ID de CSS o la clase que usa su tema para el menú de navegación que rodea el contenedor.
Después de eso, puede usar el siguiente CSS personalizado para cambiar el color de fondo de la barra de menú de navegación. .navigation-top {color de fondo: # 000; } Así es como se veía en nuestro sitio de demostración.
Es posible que haya notado que muchos sitios web utilizan un color de fondo diferente para los enlaces más importantes en su menú de navegación. Este enlace puede ser un botón de inicio de sesión, registro, contacto o compra. Al darle un color diferente, hace que el enlace sea más visible. Para hacer esto, vamos a agregar una clase CSS personalizada al elemento del menú que queremos resaltar con un color de fondo diferente. Dirigirse a Apariencia »Menús y haga clic en el botón Opciones de pantalla en la esquina superior derecha de la pantalla. Esto abrirá un menú desplegable donde debe marcar la casilla junto a la opción «Clases CSS».
Después de eso, debe desplazarse hasta el elemento del menú que desea cambiar y hacer clic para expandirlo. Notará una nueva opción para agregar su clase CSS personalizada.
Ahora puede usar esta clase CSS para diseñar este elemento de menú en particular de manera diferente. .contact-us {color de fondo: # ff0099; radio del borde: 5px; } Así es como se veía en nuestro sitio de prueba.
¿Quiere que los elementos de su menú cambien de color al pasar el mouse por encima? Este truco CSS particular hace que sus menús de navegación sean más interactivos. Simplemente agregue el siguiente CSS personalizado a su tema. # top-menu li.menu-item a: hover {background-color: #fff; color: # 666; radio del borde: 5px; } …
){kind=link}