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

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

El sidebar en dispositivos móviles

¡Prueba gratis durante 10 días

nuestros 1289 cursos !

Prueba gratis Mostrar modalidades de suscripción
Aplicaremos, para finalizar, técnicas simples de Responsive Design para modificar el layout del tema y hacer que, en pantallas pequeñas, el sidebar se recoloque al final de las páginas, y también le aplicaremos un poco de estilo.

Transcripción

He explicado ya previamente que el concepto de sidebar debería de cambiar y ser más bien un widget area. Para ilustrarlo, puedo abrir las herramientas de desarrollador y poner la vista de responsive design. Esta sirve, bueno, pues para simular diferentes tamaños de dispositivos y ver cómo cambia la página. Aquí estoy viendo que efectivamente, según voy cambiando ese tamaño, toda esta columna está haciéndose un poco demasiado estrecha y, de hecho, los contenidos empiezan a ser tambíen demasiado estrechos. Cuando estamos desarrollando el tema, tenemos que tener cuidado con esto. Tenemos que buscar, en principio, el punto en que nuestro diseño deja de funcionar completamente. Por ejemplo, en mi caso, pues debería de hacer que quizá tenga un poco más de distancia entre el branding y el botón de sacar el nuevo menú o, por ejemplo, si es muy estrecho, pues me encuentro con que los listados de elementos se salen de la columna central. Eso sería lo que se consideran errores. En realidad, en este diseño hay pocos errores ya, porque, bueno, está bastante pensado en términos de responsive design. Por ejemplo, este campo y este botón están pensados para que al ocupar el ancho de su columna, bueno, pues cuando tengamos pantallas pequeñas se vean bien, o, por ejemplo, también los botones de navegación de la parte de abajo, están pensados para que no ocupen más de un tanto por ciento concreto de su espacio disponible y, de ese modo, pues que no lleguen a pisarse nunca. Pero de todas formas también, incluso, aunque no hubiese errores, hay que pensar que la página puede llegar a ser incómoda de leer, porque la columna sea demasiado estrecha. De hecho, cuando me voy moviendo cada vez a tamaños más estrechos, se ve que efectivamente esta columna es un poco estrecha, pero, sobre todo, los contenidos son molestos de leer. Entonces, voy a buscar la forma de evitar esto. Tengo que elegir, lo primero de todo, la media query que tenga un punto de corte concreto que sea el que me interesa, o sea, elegir cuándo tiene que cambiar el diseño para ser otro diferente. En mi caso, voy a decidirme por los 650 pixeles. Parece que en este tamaño todavía se puede leer. Bueno, realmente las tablas quedan un poco mal. Las tablas son muy especiales cuando estamos trabajando con responsive design. Así que, como decía, en principio, como estoy trabajando sobre layout y, en concreto, sobre el widget area, voy a decidirme por un ancho de 650 píxeles para cambiar la forma de montar este diseño. A partir de este momento, el sidebar ya no debería de ser un sidebar, debería de ser el widget area que se coloque debajo de todos los contenidos. Bien, pues me voy a ir al código, y voy a añadir una media query. ¿Dónde la tengo que añadir? Si yo ya tengo toda la configuración del layout montado sobre el archivo content_sidebar, los suyos que la media query también la añada aquí. Añado para que afecte a todas las pantallas que sean menores de 650 pixeles, poniendo la propiedad max_width. Y, a partir de ahí, ¿qué es lo que tengo que modificar? Bueno, pues el hecho de que se coloquen los elementos a la izquierda y a la derecha es debido a esta propiedad float: left y float: right. Así que lo primero que debería hacer es atacar a estas clases, content-area, y site-content, widget-area. Bien, pues añadiremos, entonces, por un lado, ese content-area poniéndole un float: none para que no se vaya a la izquierda ni a la derecha; y luego le voy a aplicar un ancho del 100 %. En el caso del site-content widget-area, pues haré exactamente lo mismo. Cuando ahora guarde ese archivo, me encontraré con que, más o menos funciona. Tengo una sola columna, y una sola columna, pero bueno, esto hay que dejarlo mejor. Ahora ya se trata de ir un poco viendo elemento por elemento. Por ejemplo, en el caso de esta columna central, sí que tiene el ancho que yo le estoy pidiendo del 100 %, pero también es cierto que tiene un margen aplicado del 30 %. Entonces, ese margen aplicado a la derecha, es el que hace que no se vea entero. Si me vuelvo al código, en realidad eso está aquí. Dentro del site-main , este margen está recuperándome un margen sacado desde una variable. Bueno, pues tendré que añadir, entonces, en mi media query un site-main, y dentro de él, decirle que no tenga ningún tipo de margen. Conseguiré que el contenido esté correctamente maquetado, aquí lo vemos. Y ahora ya me queda trabajar sobre la parte del widget-area. Hay diferentes estrategias para montar esto. Yo voy a optar por hacer que aparezcan los contenidos más o menos centrados y que, además, que aparezcan en varias columnas para ocupar bien el tamaño disponible. Así que, primero que todo, necesito trabajar sobre esos widgets que están metidos dentro del widget-area. Añadiré que se coloquen centrados. Para ello, voy a darle un ancho del 90 % del total de la página, y le voy a poner un poco de margen al widget-area arriba y abajo, y voy a hacer que aparezca centrado utilizando esa propiedad auto. Y, luego, cómo decía, pues efectivamente voy a añadir este widget dentro del site-content widget-area. Y dentro de él, pues le voy a pedir que cada uno de esos widgets, que se coloque junto al siguiente, con el display: inline-block, que estén alineados todos verticalmente al top para que aparezcan todos colcados desde arriba hacia abajo, aunque tengan diferentes altos. Les voy a poner un poco de margen para separarlos; por otro lado, les voy a poner una pequeña línea en la parte superior para que así se vea el espacio que ocupan y para que queden un poco mejor montados dentro del diseño total; y, por último, para que esa línea no salga muy pegada al resto del contenido, pues le voy a poner un poco de padding-top. Por otro lado, me interesa hacer que tengan un poco de ancho fijo, quiero decir, que si la pantalla es muy estrecha, pues que de todas formas mantengan un determinado ancho. Con ese 45 % estoy consiguiendo que todos ellos tengan como mínimo ese ancho fijo. Cómo estoy diciendo y, entonces, van a quedar un poco mejor englobados. Como podemos ver, este diseño ya es bastante agradable, teniendo en cuenta que tengo poco espacio. Incluso, además es interesante moverlo y ver que efectivamente, cuando tengo menos espacio todavía, bueno, pues ya me coloca cada uno de esos widgets seguidos hasta que llega un momento en el que ya pueden colocarse juntos.

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.