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

Aplicar estilos al área de Widgets

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Vamos a ver lo fácil que es hacer que nuestro sidebar se recoloque en su sitio correcto. También veremos cómo se hace para mostrar sidebars en las plantillas y aplicaremos estilos para dejar nuestro sidebar con un aspecto atractivo.

Transcripción

Quiero dar forma ya a todo este sidebar que aparece aquí debajo. Todos estos contenidos deberían aparecer colocados aquí en la parte de la izquierda. ¿Cómo lo voy a hacer? Bueno, va a ser de una manera muy curiosa. Es un poco distinto a todo lo que hemos hecho hasta ahora. Básicamente se trata de aplicar nuevos estilos de SCSS. Y es que en realidad está planteado ya cómo se puede añadir un sidebar, pero no está implementado. Dentro de las carpetas de sass, en concreto tenemos una carpeta layout, y dentro de esa carpeta layout tenemos el archivo _content-sidebar.scss y el archivo _sidebar-content.scss. Puede parecer curioso que se llamen de una manera y de otra, pero en realidad tiene lógica. Son dos planteamientos distintos. El primero es, yo quiero que tenga el contenido colocado a la izquierda y el sidebar a la derecha, por eso, _content-sidebar. Y en este, en cambio, yo lo que quiero es que el sidebar esté colocado a la izquierda y el content esté colocado a la derecha. Por eso se llaman de estas dos maneras. El código en realidad es muy similar. La única diferencia está en que tengo un float:left para el .content-area y un float:right para el .widget-area. Y en el otro archivo tengo lo contrario. Pero aparte de eso, el resto es más o menos el mismo contenido. ¿Cuál de los dos voy a utilizar? Bueno, pues, yo quiero mi widget-area, o sea, mi sidebar lo quiero a la derecha, así que necesito que se aplique este contenido. Y para poder aplicar ese contenido lo que puedo es copiar su nombre, irme a style.scss, y añadir la importación para este elemento, para este archivo. @import "content-sidebar" Pero este content-sidebar lo voy a sacar de la carpeta layout. Voy a copiar también el comentario para no tener que escribirlo. Bueno, y si ahora vuelvo al navegador, y aquí efectivamente me aparece ya ese sidebar colocado en la parte de la derecha. O sea, que es tan fácil como añadir un nuevo archivo dentro de lo que es los estilos SCSS y, gracias a eso, bueno, pues ya tenemos ese sidebar. Sobre este sidebar tengo, de todas formas, que configurar varias cosas. Voy a volverme de nuevo al index.php y vemos, bueno, que todas las entradas y, efectivamente, tenemos este sidebar. Para trabajar sobre el sidebar tengo diferentes opciones, una de ellas va a ser el... Puedo ya cerrar este archivo y este archivo. Y es crear dentro de la carpeta site una nueva carpeta que se llame sidebar; dentro de esa carpeta, crear un nuevo archivo .sass; y dentro de este nuevo archivo añadir las clases que vaya a necesitar. Para que este sea importado necesito añadir una línea más, sidebar, "/sidebar" Bien, ya tengo preparado el archivo, ahora sobre él necesito añadirle clases. Pero ¿qué clases son necesarias? Una está bastante clara, y es que yo tengo, dentro de esta plantilla, la clase widget-area. Esa clase widget-area tendré que aplicársela sobre, efectivamente... Voy a volverme otra vez aquí, voy a seleccionar cualquiera de estos elementos para inspeccionarlo. Bien, pues decía, esta widget-area la puedo aplicar sobre todo el aside. Bueno, pues, vuelvo de nuevo al código, puedo cerrar ya este archivo y, entonces, aquí añadiré ese .widget-area, y dentro de él ya voy a añadir todo lo que necesito. Voy a hacer que no esté tan pegado a la derecha, ni tan pegado arriba. Bueno, pues le añado un poco de margen y un poco de padding. Y aquí vemos ya aparece separado con esos 20 píxeles, pero sigue estando pegado en la parte de la derecha. Voy a necesitar, entonces, añadir más cosas. Si le doy suficiente espacio, sí que tiene sitio y entonces sí que tiene aquí este pequeño margen, pero en cuanto ese espacio se reduce, entonces ya no tiene sitio suficiente. En realidad, el ancho que tiene este... Voy a seleccionar este article. El ancho que tiene, quería decir, está definido en alguna parte, y en concreto, en el mismo sitio que acabamos de cargar, en este _content-sidebar. Aquí está diciendo que tiene un ancho, aquí que lo podemos ver, width del $size__site-main. Podría irme a las variables que lo controlan, que son las variables que están guardadas en el archivo estructura. Y aquí tengo el tamaño para el main y el tamaño para el sidebar. Voy a poner, entonces, que este tamaño para el sidebar sea de un 30 %; lo voy a guardar. Y, ahora, de nuevo cuando lo cargue ya tengo más espacio. Ahora ya sí parece un sidebar un poco más decente. Pero todavía le tengo que añadir más cosas. Voy a irme de nuevo a _sidebar.scss y, por ejemplo, voy a necesitar trabajar con cada uno de los listados que tenía. No es problema, yo puedo ir añadiendo etiquetas que sirvan para trabajar con esos listados. Por ejemplo, con el ul. Y es que, de hecho, aquí este aspecto que tienen es el aspecto del listado que había especificado, que había añadido, básicamente, esto mismo, pero aplicado sobre el widget, porque en realidad estos widgets se basan en etiquetas <ul. Para evitar que eso ocurra lo que puedo es definir el ul específico dentro de ese widget-area. Entonces le digo que tenga fondo transparente, que no tenga padding, que el padding a la derecha de todas formas sea de 20px, aunque no necesitaría añadirlo si no quiero; y un margen de 0. Por otro lado, para que el ul vaya un poco más pegado al h2, lo que estoy haciendo es hacer que no tenga ese margen en la parte de abajo. Y, así, ya aparece este widget-area un poco más decente, más bonito. Este texto es un poco grande. Bueno, pues también puedo modificar eso. Para hacerlo puedo cambiar el tipo de letra de todos los elementos que tenga metidos dentro de este widget-area. Con eso el texto va a aparecer un poquito más pequeño. Aquí se puede ver. Y por último, el botón de Buscar tampoco me gusta como queda. Lo suyo, en realidad, debería de ser que ese botón de Buscar ocupase, por ejemplo, el ancho completo de la columna. De hecho, a mí me gusta mucho esa forma de implementarlo, porque así es muy fácil hacer selecciones sobre esos botones. Bueno, pues para poder hacer eso, yo tengo una clase en concreto que es la que voy a utilizar. Esta clase, en realidad no es que me la sepa de memoria, es que esta clase simplemente puedo buscarla. Todos los widgets tienen, dentro del contenedor de cada uno de esos widget, de la etiqueta <section, tienen un identificador, pero sobre todo tienen dos clases, la clase widget y la clase widget_search. Esta clase widget_search es distinto a la siguiente sección que tiene la clase widget_recent_entries y que tiene otra clase distinta al resto de cada uno de esos widgets. Así que yo puedo utilizar esta clase para aplicar estilos concretos a un widget en definitiva que es de lo que se trata. Porque yo lo que quiero es cambiar los estilos aplicados sobre ese campo y sobre el botón. Bueno, pues añado entonces esos estilos nuevos. Voy a hacer que para el campo, el ancho sea el 100%, o sea que ocupe todo el ancho del que disponga, que tenga una fuente un poquito distinta y que tenga un poco de margen abajo, porque después en el botón lo que estoy definiendo es que ocupe de lado a lado. Al hacer esto, vamos a ver cómo quedan, un poco más pequeños. Aquí lo vemos, y quedan muchísimo más bonitos. Quedan muy bien uno colocado encima del otro. Así que ya tenemos el sidebar configurado y con un aspecto muy agradable. Da igual que lo mire desde un listado de elementos o desde una página. Claro, ahora tendría que elegir también qué widgets son los que quiero que aparezcan porque, bueno, si tengo todo esto, la verdad que es un poco excesivo. No hay problema si me voy a Personalizar. Dentro de Personalizar, en Widgets, puedo añadir y eliminar widgets. Entonces, puedo pedirle que me elimine Meta, Categorías, y que me elimine Comentarios. Guardar y publicar. Y ahora sí tengo ya, bueno, pues un sidebar un poco más pequeño y un poco más decente.

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.