Clases css opcional wordpress

Inicio » Clases css opcional wordpress

Menú de WordPress añadir clase a una etiqueta

Deberías tener algo como la imagen de abajo. Añade tantos sub-elementos como necesites. Hemos utilizado enlaces personalizados, pero normalmente utilizarías páginas o entradas reales, o una combinación de páginas, entradas, categorías, etc.

Como ves estamos empezando a mostrar el mega menú para pantallas que tienen al menos 600px de ancho. No tiene sentido mostrarlo para pantallas más pequeñas. Utiliza tu estilo móvil por defecto para pantallas <600px. También estamos mostrando el mega menú al pasar el ratón por encima. Si su tema muestra los submenús al hacer clic, ajuste el código en consecuencia.

Es importante dar position:static; al elemento de menú de nivel superior. De esta manera, el submenú absolutamente posicionado abarcará el 100% del ancho del primer contenedor antecesor que tenga position:relative; . Así que asegúrate de dar position:relative a la cabecera del sitio o a cualquier otro contenedor que te convenga. Si el menú de nivel superior hubiera tenido position:relative; entonces el megamenú sólo sería tan ancho como el elemento de menú de nivel superior.

Esta línea grid-template-columns: repeat(auto-fit,minmax(50%, 1fr)); indica a .sub-menu (clase de sub-navegación de WP por defecto) que todos sus hijos inmediatos se mostrarán como 2 columnas de igual anchura en pantallas de más de 600px de ancho, como 3 columnas de igual anchura en pantallas de más de 992px de ancho, etc. Puede editar los puntos de ruptura para adaptarlos a sus necesidades.

WordPress html en el menú

WordPress nos da un control total sobre la presentación de nuestros sitios web. Especificamos qué clases y atributos usar en nuestros archivos de plantilla, y luego aplicamos CSS usando la hoja de estilos personalizada de nuestro tema. Entre bastidores, WordPress genera sus propias clases e IDs, y las aplica a elementos HTML específicos en los archivos de los temas y en el contenido de la base de datos. Tener estos ganchos por defecto disponibles hace que sea súper fácil personalizar el estilo de los bloques de tu tema, las imágenes de las publicaciones, los elementos de los widgets y mucho más.

Además de generar clases por defecto para las páginas del “front-end” (de cara al público) de tu sitio, WordPress también emplea un conjunto de atributos CSS por defecto para las páginas de administración, o “back-end”. Si alguna vez se ha adentrado en los enrevesados estilos CSS del Admin de WordPress, entenderá por qué nos centramos exclusivamente en los atributos del front-end en este artículo. El objetivo es incluir todas las clases e IDs generados para el contenido de la base de datos, los archivos de la plantilla del tema y los elementos del widget por defecto.

Afortunadamente, la mayor parte (si no todo) del trabajo de CSS de WP ocurre a nivel de “tema” o “post”. Y cuando necesitas dar estilo al Admin, normalmente es más fácil hacerlo en bloque a través de un plugin. También puedes hacerlo a la vieja usanza.

Menú de clases Css

Hemos facilitado la configuración de un mega menú básico dentro del propio tema mediante el uso de clases. En primer lugar, debes crear un nuevo menú. Ve a Dashboard > Appearance > Menus. Haz clic en Opciones de pantalla en la parte superior y asegúrate de que la opción Clases CSS está activada. Si no lo está, asegúrate de habilitarla. Baja y haz clic en crear un nuevo menú.

Ahora que tenemos nuestro elemento raíz configurado, vamos a añadir las cuatro columnas a nuestro menú. Sigue adelante y añade cuatro enlaces personalizados al menú. La URL debe ser # y el texto del enlace debe ser sugestivo – recuerde que estos se muestran en el tablero de instrumentos, pero no se muestran en la parte delantera del sitio, ya que son sólo envolturas. Voy a llamarlos col-1, col-2, col-3 y col-4.

Asegúrate de añadir la clase neve-mm-col a los cuatro, igual que hicimos con el elemento raíz. Y luego hazlos hijos bajo el elemento raíz del Menú. Si usted hizo esto correctamente, usted debe terminar con algo que se parece a la imagen de abajo.

Siga adelante y cree otros cuatro elementos de menú que actuarán como cabeceras: Asientos, Mesas, Gabinetes y Espejos.  Asegúrate de añadir neve-mm-heading en CSS Classes para cada uno de ellos y colócalos dentro de las columnas creadas anteriormente como hijos. Deberías ver algo como en la imagen de abajo.

WordPress añadir clase al elemento de menú una etiqueta

Como puedes ver, el nombre de mi clase personalizada es menu-link-red. Ahora, necesito añadir este CSS personalizado a mi sitio. Para este ejemplo, voy a utilizar una opción nativa de CSS personalizado pero también puedes utilizar un tema hijo para ello. Si no sabes cómo añadir un CSS personalizado a un sitio de WordPress entonces por favor revisa este artículo.

Ahora, es el momento de comprobar el sitio. Abajo, he añadido una captura de pantalla del menú antes y después, para que puedas ver la diferencia. Su menú puede tener un aspecto diferente debido a la utilización de diferentes temas. En general, usted debe ver el cambio.

Ir arriba