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

Modificar el aspecto del menú en pantallas pequeñas

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Un tema crucial en los menús es que se adapten a las pantallas pequeñas. En este vídeo dedicaremos nuestros esfuerzos en recolocar los elementos del menú que tenemos en el header para que se convierta en un menú vertical.

Transcripción

Mientras trabajamos con menús dentro de WordPress, tenemos que tener cuidado con las pantallas pequeñas, porque hay cosas que hace WordPress que pueden influir bastante en estos tamaños. Voy a poner las herramientas para desarrolladores. En concreto, voy a poner la vista en dispositivos móviles. Voy a hacer que sea una vista responsive y voy a ampliarla. Bien. Nos vamos a encontrar que para teléfonos móviles, vamos a tener un botón que se va a ocupar de mostrar o de ocultarme ese menú. Este menú debería de aparecer como una serie de filas y no como una serie de elementos separados. Vamos a ver cómo podemos trabajar con ello o cómo podemos modificarlo para que quede con un aspecto un poco más correcto. Bueno, pues me voy a volver a la programación. Y voy a buscar dónde puedo tener información sobre, en principio, cuándo aparece ese menú. Ese menú aparece cuando se encoge. Luego, se entiende que tiene que haber una media query en alguna parte. El sitio lógico donde buscar es irme a navegación y, dentro de navegación, buscar en los menús a ver qué media query hay. Y, efectivamente, aquí hay una. Aquí hay una que me está indicando cuándo tiene que cambiar, pero lo interesante es que, en realidad, me está diciendo cuál es el tamaño mínimo. Yo lo que quiero es que sea justo al revés. Quiero decir que esta media query salte cuando el tamaño sea menor que, no mayor que. Así que voy a volverme al header. Voy a añadir esta media query. Es bueno procurar que las media queries siempre sean las mismas, no utilizar 40 mil media queries diferentes. Bueno, pues entonces aquí voy a cambiarlo por un max-width. Y, en este punto, voy a modificar las clases asociadas con los diferentes elementos. Voy a empezar con los elementos de las listas. Quiero que todos esos elementos ocupen todo el ancho disponible y aparezcan unos encima de otros. Bueno, pues eso lo voy a conseguir fácilmente. Primero, les voy a quitar el margen, para que vayan todos seguidos y, después, voy a hacer que no floten. Eso va a hacer que ya aparezcan unos encima de otros, porque ya tienen un display bock asociado. Por otro lado, les voy a cambiar el padding para que se adapten mejor como botones que se colocan verticalmente. También voy a tener que trabajar sobre los estilos aplicados cuando hay un hover, o sea, cuando pasa el ratón por encima. En ese caso, entonces, bueno, pues tendré que hacer que el fondo sea transparente para que no me aparezcan marcados como azul claro y, por otro lado, también cambiaré el color. Voy de nuevo, otra vez, a la pantalla. Y aquí vemos cómo ya aparecen colocados unos encima de otros. Esto también puedo comprobarlo modificando aquí el tamaño, que así me da un poco más de flexibilidad. Y, bien, puedo ver cómo hace roll over y cómo me muestra los diferentes elementos. Se puede mejorar un poco más. Por ejemplo, pues que no quede tan pegado aquí y quede colocado más a la derecha. Bueno, pues para ello, puedo también utilizar clases específicas aplicadas, por un lado, al contenedor. O sea, yo en esta media query, puedo añadir estilos. Al ponerlos en esa media query directamente se van a aplicar sobre el site-navigation. Entonces, voy a definir que tenga un pequeño margen hacia la derecha por ejemplo; o, por ejemplo, también pues puedo hacer que aparezca un poco más separado de la parte de abajo. Ahora ya aparece un poco más separado y, bueno, pues queda un poquito mejor. Me quedaría aplicar unos últimos pequeños ajustes. Pues, por ejemplo, este interlineado no me gusta cómo está. Puedo volverme de nuevo al código y hacer modificaciones. Podría hacerlo dentro de la media query o podría hacerlo para todo el sitio. Bien, pues voy a buscar, en concreto, dónde tengo que hacer modificaciones en ello en el site-branding. En este h1, voy a poner que tenga solamente un 1.1 dm. Y, a cambio, voy a hacer que tenga un margin-bottom de, por ejemplo, de 10 píxeles. Volviendo de nuevo al sitio, ahora ya queda muchísimo mejor. Otra cosa que me gusta es que estos botones sean más anchos para que sean más fácil seleccionarlos. Bueno, pues puedo volverme de nuevo al código y modificar, en concreto, dentro del header site-navigation, la forma que tiene de alinear los ítems. Pero eso quiero hacerlo solamente en el caso de la media query, o sea, cuando la pantalla sea más estrecha, así que voy a copiar esto al align-items y lo voy a aplicar solamente dentro de la media query. Ahora lo que quiero es que cambie su valor. Así que lo voy a cambiar por inicial. Lo guardo. Abro de nuevo el navegador, y aquí vemos cómo ya tengo ese menú ampliado. Es mucho más cómodo y mucho más fácil de manejar. Bien, pues ya tengo el menú del header configurado.

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.