Vamos a actualizar nuestra Política de privacidad próximamente. Te recomendamos consultar el avance.

WordPress práctico: Creación básica de temas

Organización de menús horizontales

¡Prueba gratis durante 10 días

nuestros 1291 cursos !

Prueba gratis Mostrar modalidades de suscripción
En el header hemos decidido añadir un menú con estructura horizontal y vamos ahora a añadir los estilos que le den este aspecto. Trabajaremos desde SASS para que las etiquetas li del menú se coloquen correctamente, y les daremos un poco de interactividad.

Transcripción

Hay muchas maneras de configurar un menú como este. Yo he optado por una que es bastante simple. Voy a empezar planteándome un poco qué necesidades tengo. Voy a poner Inspeccionar. Bueno, pues veremos que si la pantalla no es lo bastante ancha o si yo tengo muchos elementos, estos elementos van a colocarse en dos líneas, con lo cual esto lo voy a tener que tener en cuenta. Por otro lado, es tos elementos están muy pegados deberían de aparecer separados. Además, también voy a tener menús secundarios e incluso voy a tener niveles de herencia dentro de estos menús. Así que eso también tendré que tenerlo en cuenta. Por último, obviamente, yo quiero que lo que vaya a modificar afecte solamente a esta zona y que no afecte a ningún otro menú posible que pudiese tener en otra parte distinta y, mucho menos, a los listados de elementos que vaya a tener, como, por ejemplo, los de estas páginas. Bien, pues vamos a empezar a trabajar. Podría plantearme trabajar directamente sobre le archivo menus.scss, que es el archivo que tengo dentro de la carpeta de navegación. De todas formas, por no complicarlo y por trabajar en el menú en la zona donde voy a trabajar, prefiero utilizar este header.scss. Son dos planteamientos distintos: el organizar los archivos por su utilización, que sería este caso, u organizar los archivos por la zona en la que va a aparecer dentro de la estructura de las páginas. Bien, pues continuando con ello, lo primero que tengo que encontrar es la forma de hacer modificaciones sobre los estilos que generan ese menú. Si me voy al header, realmente, me encuentro con que no tengo ninguna información sobre cómo se está construyendo ese menú, porque, básicamente, lo único que tengo es la función wp_nav_menu. Así que tendré que buscar otra forma de hacerlo, y esa va a ser metiéndome dentro del código. Y, de hecho, el código va a ser bastante claro y me ofrece unas cuantas posibilidades muy interesantes. De entrada, yo voy a tener un identificador que puedo utilizar para definir cómo se va a ver ese menú unívocamente, o sea, solamente voy a tener estilos aplicados a ese menú y a ninguno más. Por otro lado, podemos ver que todos los elementos del menú aparecen con la clase page_item. Este page_item sirve, precisamente, para eso, para saber qué elementos li son, en realidad, elementos de menú, así que esto lo voy a tener que utilizar, ese page_item. Incluso, también, me voy a encontrar otra cosa y es que hay algunos de estos elementos que tienen la clase page_item_has_children, que significa que tiene elementos hijos, o sea, que esa clase también me puede servir para, en un momento dado, por ejemplo, añadir una línea blanca debajo indicando que es un desplegable o añadir, por ejemplo, una pequeña flecha en la parte de su derecha. Eso también me sirve para otra cosa, y es para distinguir los submenús. Pero esto estos submenús, en realidad, ya tienen una clase, que es la clase children, o sea, que cualquier menú que va a aparecer cuando hago rollover sobre un menú principal va a tener esa clase children, que también voy a poder utilizar. Así que, con todo esto en mente voy a empezar, entonces, a trabajar dentro del código. Y voy a empezar haciendo que los elementos no queden demasiado pegados. Bueno, pues voy a añadir dentro del site-navigation, que es de donde, realmente, voy a tener ese menú, voy a pedir que todos los elementos page_item tengan una cierta separación entre ellos. Si vuelvo de nuevo al navegador, veremos que ya aparecen esos elementos separados unos de otros, o sea, que de entrada, ya he avanzado algo. Voy a volver atrás. Quiero hacer ahora que todos estos elementos, además, tengan un poco más de espaciado, y que cuando yo pase por encima de ellos esos elementos cambien de color, así que, de entrada, le añado, por un lado, un selector para la etiqueta a y, por otro lado, un selector para la etiqueta a con un hover, o sea, cuando se pasa por encima. Le estoy aplicando, por un lado, un padding para conseguir, que luego cuando tenga color de fondo, tenga un espaciado alrededor del texto, que no quede demasiado pegado. Además, también le estoy aplicando que tenga un cierto radio. Por otro lado, le este cambiando el color al texto, para que sea gris; y luego, por último, le estoy pidiendo que no tenga ningún tipo de decoración. Esto, en realidad está sustituyendo a este selector que ya tenía previamente, ese a, así que, puedo eliminarlo porque no lo voy a necesitar. De hecho, también tengo ese a con un hover que tampoco lo voy a utilizar, así que lo puedo eliminar perfectamente. El color que voy a utilizar para el texto cuando estoy pasando por encima, cuando estoy haciendo rollover es el color_skin, que está definido aquí dentro de colors. Voy a copiarlo. Voy a pegarlo. Estaba escrito distinto. Bien, pues ahora, si recargo en el navegador... Bueno, no hace falta recargar, porque ya tengo la tarea que lo hace, ...podemos observar como funciona perfectamente. Tengo ya ese efecto y sobre ese efecto todavía puedo hacer más cosas. En principio, bueno, pues me está haciendo también el mismo efecto dentro de los desplegables, podría se deseable, pero yo, en concreto, prefiero que no lo haga. ¿Cómo podemos, entonces, conseguir controlar que en este menú principal haga una serie de cosas y en los menús secundarios no? Bueno, pues gracias a las clases de las que he hablado previamente. Teníamos la clase children, que se ocupaba de dejar claro cuáles eran los elementos de los menús que eran elementos hijos. Esto se aplica sobre el ul. Eso quiere decir que el ul, que tiene todos los elementos hijos va a llevar la clase children. Así que, aplicando este .children a todos los hijos, pues puedo hacer que estos tengan el fondo transparente, que tengan un padding distinto, más pequeño, para que no sean tan grandes, que tengan el color que deberían de tener, y que cuando se pase por encima de ellos salgan con color blanco. Es tan fácil como eso. Ahora vuelvo de nuevo al navegador, y aquí vemos cómo efectivamente me está aplicando ese color blanco sobre ellos. Esto lo está aplicando, además, sobre el resto de los elementos del menú del header

WordPress práctico: Creación básica de temas

Aprende a dar un nuevo aspecto a tu página de WordPress, creando un tema desde cero usando como base las plantillas Underscore y dándole aspecto a nuestro gusto.

4:16 horas (48 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:11/08/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.