Cómo personalizar los menús de WordPress

El tema que ha elegido representar a su sitio a menudo tiene pedidos en la personalización de WordPress, lo que le permite crear el menú principal y el encabezado a voluntad. Pero a veces estos comandos no ofrecen todo lo que necesita para que su menú se destaque. Aquí hay algunos consejos y trucos para implementar para que el menú principal se vea increíble. Muestra la jerarquía con un menú vertical que muestra el menú en un formato desplegable tradicional es una función incorporada con WordPress. Casi todos los temas serán compatibles con la función desplegable, lo que le permitirá dar a los usuarios finales un sistema de navegación fácil de entender, lo que les ayuda a encontrar lo que están buscando.
En el fondo de WordPress, en términos de> menús, puede agregar las páginas seleccionadas a la izquierda al menú principal a la derecha. Para que las páginas seleccionadas aparezcan en un menú desplegable en otra página seleccionada, simplemente mueva esa página tirándola y colocándola ligeramente debajo del elemento seleccionado.

Puede hacer su menú de caída agregando otro elemento en el primer menú de caída, sangrando este elemento, para aumentar la jerarquía. El ejemplo anterior se vería así en el sitio en vivo:

Pasando con el mouse sobre los recursos, va al siguiente conjunto de elementos de menú, y pasar sobre el primer elemento muestra el siguiente conjunto de elementos a la izquierda.
** Nota: La forma en que se muestra su menú de caída depende del tema. ** Agregue iconos a su menú Agregar iconos increíbles a su menú es fácil de hacer y hace que su menú se destaque.

Primero, descargue y active los menús del complemento de código corto en su administrador de complementos.

Luego descargue y active el complemento Font Awesome.

Ahora es el momento de buscar los iconos que desea aparecer en su menú Acceda al sitio web Font Awesome y busque un icono apropiado.

Haga clic en el icono que desee y tenga en cuenta el nombre de este icono. Ahora, vuelva a la configuración del menú, agregue el código corto del increíble icono del complemento de fuentes a la etiqueta de navegación para cualquier elemento de menú.

Puede agregar el código corto antes o por nombre del elemento del menú. Reemplace el código a continuación con el nombre de la página y el nombre del icono. [icon name = “your-icon-name-nere”] ¡No olvides guardar! Haga del menú pegajoso un menú pegajoso se adhiere a la parte superior de las páginas a medida que se ejecuta el usuario final. Esto mantiene el manejo del usuario. Muchos temas proporcionarán un encabezado pegajoso como opción, pero si esa opción no está disponible, puede hacer el menú pegajoso con algunos CSS personalizados. En el tablero, vaya a la apariencia> Personalización. Haga clic en “CSS adicional” y agregue el siguiente código:
#Main-Menu {Z-Index: 199; margen: 0 coche; Border-Bottom: 1px Solid #000000; Ancho: 100%; Posición: fijo; Arriba: 0; Izquierda: 0; Derecha: 0; } con el mouse sobre el menú y haciendo clic derecho en “Inspeccionar”. Si prefiere no ocuparse de CSS, simplemente puede instalar mi complemento de menú adhesivo para una opción ligera y jugada para crear un menú Stick. Mostrar/ocultar los elementos del menú De acuerdo con el usuario, el ejemplo más común a este respecto sería mostrar una conexión y/o unirse ahora en el menú para usuarios no conectados y una pestaña desconectada para usuarios conectados, mientras que todas las pestañas de conexión o unión ahora están ocultos para los conectados. -En el usuario. En el administrador de complementos del tablero, descargue y active los menús del usuario -visibilidad del menú NAV.

De vuelta en la configuración del menú, puede crear sus botones de conexión, unión y botones de desconexión. Es posible que tenga una página separada para autenticar un usuario y el acceso. Para un botón de desconexión, cree un elemento de menú utilizando la selección “Enlaces personalizados”.

El enlace de desconexión de WordPress Universal para agregar es: http://yourdomain.com/wp-login.php?action=ligout Asegúrese de usar el dominio y la versión correctos (http vs https).

Una vez que haya creado estas pestañas, puede ocultar o mostrar de acuerdo con la condición del usuario. En “¿Quién puede ver este enlace?”, Elija un usuario conectado o desconectado.
Los sitios de membresía pueden ocultar o mostrar elementos del menú de acuerdo con el papel del usuario para opciones de visibilidad adicionales. Agregue los efectos de flotar un efecto de desplazamiento puede cambiar el texto de la pestaña del elemento de menú o el color de fondo, ¡o ambos! Todo lo que tiene que hacer es agregar algunos CSS personalizados en Look> Personalizado> CSS personalizado. Aquí hay un ejemplo: #Main-Menu Li.MiTem A: Hover {Background-Color: #ffe6f2; Color:#CC0066; Border-Radius: 5px; Borde: 1px Solid #CC0066; Top-top: 20px; Bottom: 20px; Right de relleno: 10px; ROLDE-LEFUNTO: 10px; Margen de fondo: 10px; } Reemplazar #Menu principal con la clase CSS de su menú de navegación, que diferirá dependiendo de su tema. Puede encontrar la clase pasando con el mouse sobre el menú y haciendo clic en “Inspeccionar”. El ejemplo produciría este efecto de desplazamiento Cuando pasa con el mouse sobre la pestaña de cartera.


Personalice un elemento de menú único, puede crear fácilmente CSS personalizado para un solo elemento de menú asignando a ese elemento de menú una clase CSS. En la configuración del menú, haga clic en las opciones de pantalla en la parte superior derecha de la pantalla.
Marque la casilla para las clases CSS, que se desinfla de forma predeterminada. Luego guarde la configuración del menú.

Ahora habrá un nuevo cuadro de texto en cada elemento de menú. Aquí, puede asignar una clase CSS diferente para cada elemento de menú. En este ejemplo, agregué la clase “Menu de servicios” al elemento de menú “Servicios”.

Ahora puede agregar CSS personalizado al aspecto de la sección> Personalización> CSS personalizado.Puedo usar el mismo CSS arriba usando esta clase.** Nota: no debe agregar li.nement como identificador, porque ya ha asignado una clase individual.Color:#CC0066;Border-Radius: 5px;Borde: 1px Solid #CC0066;Top-top: 20px;Bottom: 20px;Right de relleno: 10px;ROLDE-LEFUNTO: 10px;Margen de fondo: 10px;} Esto produce el mismo resultado que el anterior, pero solo para este elemento de menú. Gendes finales esperamos que le guste esta compilación de consejos y trucos únicos para personalizar su menú de WordPress.¿Has probado algunas de estas ideas?¿Tienes otros trucos favoritos que te gusta usar?¡Cuéntanos en los comentarios a continuación!