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

Personalizar el footer con WordPress

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Ya tenemos el tema casi listo, pero aún nos queda modificar estilos en el footer. Esto va a ser un buen ejercicio para definir selectores en SASS que afecten solo a los elementos que queremos y no al resto de los footers.

Transcripción

Mi Tema está prácticamente completo, me quedan muy pequeños detalles que modificar. En concreto, me falla todavía bastante el footer así que voy a trabajar en este vídeo sobre este footer. Voy a irme al código, bueno, esta controlado desde la plantilla footer.php que está en la raíz y dentro de él se está cargando, por un lado, la información del sitio y luego, por otro lado, está cargando un menú que añadí yo adrede previamente. Aquí, en realidad, me sobran cosas, yo no quiero que aparezca toda esta información de sitio, solamente quiero el menú. Bueno, pues entonces, elimino todo ese trozo de información, lo guardo, y de entrada, ya habré avanzado un poco en el diseño de este footer. Para verlo tendré que recargarlo y vemos que ya está un poquito mejor. Pero debería de darle un aspecto que se parezca más al resto del sitio. Dentro se la carpeta sass, en la carpeta site creé un archivo footer y dentro de él tengo los estilos aplicados a este footer, entonces, sobre esos estilos es donde voy a ir haciendo cambios. Por ejemplo, quiero que el texto del footer sea más pequeño, me gustan los textos pequeños y más aún cuando sirven para pequeños enlaces como los del footer. Bueno, pues añado que tenga un tamaño menor con 0,8em. Por otro lado, quiero que tenga otro color de fondo distinto. Ese color de fondo que me interesa lo puedo aplicar en diferentes partes, podría aplicarlo sobre todo el footer, por ejemplo, con eso conseguiría que si añado cualquier otro contenido pues, inmediatamente, me use ese contenido. Si añado otro contenido me respete el color de fondo para todo el contenido que añado. Para utilizar ese color de fondo voy a usar variables y, en concreto, voy a utilizar la variable que estoy aplicando a lo largo de todo el sitio que es este color_skin. Así que, aquí voy a aplicar esa variable color_skin. Voy a ver un poco cómo se va transformando. El problema que tengo aplicándolo en este punto, podemos ver que me lo va a poner a todos los footers que tengo en todos los contenidos, con lo cual, esta estrategia no es correcta. ¿Cómo consigo evitar ese problema? Bueno, pues, puedo irme a la plantilla, y veo que en este footer se ha añadido site-footer. Esta clase me puede servir, entonces, para identificar todos estos cambios que estoy haciendo directamente, Así que utilizo el & y luego la clase para aplicar sobre esa etiqueta footer, esta clase. Corto este contenido. Lo pego. Lo guardo. y el resultado ahora, ya es mejor. Lo que pasa es que todavía hay pequeños problemas, vemos que aquí en las esquinas sí que me está poniendo ese color azul pero, sin embargo, tengo un color gris encima, eso es debido a que en las listas de elementos, en los uls he añadido un color de fondo gris con los bordes redondeados así que, tendré que trabajar sobre estos uls. Voy a quitar de aquí esa etiqueta ul y la voy a añadir un poco más abajo y entonces, en ella voy a definir varias cosas, por ejemplo, voy a hacer que tenga un poco de margen en la parte superior, pero que no tenga ningún margen en el resto de elementos, así va a quedar pegado abajo, va a quedar bien, y, sin embargo, no va a quedar completamente pegado en la parte superior. Este margen, en realidad, también podía habérselo añadido dentro del site-footer, no pasa nada. Por otro lado, necesito que no tenga ese fondo gris, así que, voy a utilizar ese background: transparent. Y, aparte, le voy a poner un poco de padding para que no quede tan estrecho, tan pequeño, así que voy a añadirle un poco de padding, le voy a poner 10 píxeles arriba y abajo y "0" a la izquierda o a la derecha. Como estoy utilizando este color de fondo, que es oscuro, va a pasar que no se va a ver el texto, así que, voy a añadir también, dentro de las etiquetas de este footer el color blanco. Pero claro, ese color blanco debería de aplicarse solamente al site-footer así que lo voy a meter dentro de él. Aquí, entonces, le voy a pedir que el color sea blanco. Hay que tener cuidado con estos pequeños detalles porque la herencia de WordPress va a hacer que, según voy añadiendo estilos, vayan aplicándose a muchos elementos alguno de los cuales no sean los que yo quiero. Bueno, pues aquí tengo ya un footer que ya parece mucho más un footer. Si quiero que quede perfectamente, porque, de hecho, bueno pues me parece que... voy a inspeccionarlo, es un poco excesivamente alto. Voy a cambiar, como comentaba, este margen del ul lo voy a cortar y lo voy a pegar dentro de ese site-footer. Volviendo de nuevo a la página, ahora ya tengo esa página un poco mejor montada, pero ¿qué ocurre en esta parte? ¿qué ocurre ahora por debajo? Pues que en el fondo no dejo de estar heredando todavía el margen que recibo de los listados de elementos, así que, necesitaré añadir un margen "0" a ese ul y, ahora sí, ya me queda el footer perfecto. De hecho, bueno, puedo probarlo en diferentes páginas y ver cómo en todas ellas me quedaría correctamente. En este punto de la creación del Tema ya tenemos la página estructurada correctamente. Ahora se pueden hacer más cambios, se puede trabajar sobre los comentarios, se pueden hacer pequeñas modificaciones para determinados tipos de elementos pero ya hemos repasado todas la opciones necesarias para dar aspecto a nuestro sitio web. Ya conocemos cómo utilizar funciones propias de nuestro Tema, cómo utilizar también, funciones propias de WordPress. O sea, que ya estamos preparados para crear un Tema que esté completo, que sea atractivo y que quede bein.

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.