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

Archivos que controlan el header

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Empezamos este capítulo explicando qué archivos son los que utilizará el tema para definir el aspecto del header, y crearemos también nuestros propios archivos SASS para añadir en ellos los estilos necesarios.

Transcripción

Voy a empezar a dar forma al tema, y voy a comenzar, en concreto, con la parte del header, con el encabezamiento de la página. Todas las páginas van a compartir un header común dentro de la estructura que teníamos de jerarquía de plantillas dentro de WordPress, veíamos que los distintos tipos de plantilla, page o single, por ejemplo, todos ellos cargaban este header.php, así que trabajaré sobre él. Este header.php, en realidad, no es solamente el header. Aquí vamos a encontrarnos más cosas, no hay más que ver el código. Tenemos, dentro de la estructura HTML, lo primero la etiqueta html. Sobre esa etiqueta también tiene toda la parte de head, o sea, lo que es la carga de datos necesarios para que el navegador sepa cómo interpretar nuestra página. Y a partir de ahí, tenemos también la etiqueta body, abierta, y luego ya, efectivamente, una etiqueta page, y por fin llegamos al header, ese header que llega a terminar, y aquí añadimos una etiqueta content. Esto lo que viene a decir es que me va a crear un poco la parte de arriba de todo el código HTML de esa página. A partir de aquí, dinámicamente, se van a ir cargando el resto de contenidos. En cualquier caso, yo voy a trabajar solamente con la parte del header, con esta etiqueta de aquí, así que, sobre ella voy a editar sus contenidos. En concreto, vemos que tenemos dos bloques. Por un lado, el site-branding, y por otro lado, tenemos el site-navigation. Esto explicado sobre la misma página sería toda esta zona, o sea, lo que es el título y el lema sería el site-branding y, luego, la navegación principal es todo ese listado de elementos li. Y esto, en lo que respecta a la parte de plantillas. También vamos a tener sass, estilos CSS que se apliquen sobre ese header. Pero también aquí hay una parte interesante, y es que, según la estructura que genera underscores, tenemos muchos elementos, pero no tenemos un elemento header a mano sobre el que trabajar. Así que, si yo lo que quiero es añadir muchos estilos distintos sobre un elemento que voy a personalizar, lo suyo es crear un nuevo archivo, en el cual añada toda esa información. El sitio ideal para hacerlo, aunque esto es algo muy subjetivo, pero según mi forma de verlo sería en site. Así que, dentro de site, voy a crear una nueva carpeta. A esa carpeta la voy a llamar header. Y ahora, dentro de esta carpeta, voy a crear un nuevo archivo sass, al que voy a llamar header también, pero con el guión bajo delante, para que me lo detecte automáticamente. Ya tengo este archivo. No obstante, este archivo ahora mismo no se está cargando en ningún sitio. Hay importaciones en todas partes. La primera idea suele ser pensar, bueno, pues si tengo las importaciones en style.scss, cargarlo aquí, pero no es buena idea. No es buena idea, porque ya los contenidos están organizados en carpetas, y lo suyo es respetar esa organización de carpetas también en las importaciones. Lo que en este caso significa que yo tengo un archivo site.scss al que puedo añadir esa importación. Puedo copiar el código que tengo, añadir aquí header, y sustituir este header... ...por los otros dos en la importación. Esto estaría guardado. Y ahora, aquí en este header, pues podría hacer cambios. En concreto, yo más adelante estoy interesado en hacer que encima de lo que es todo ese header, todo esto de aquí, se pueda añadir una fotografía que vaya de lado a lado en la página. Entonces, para hacer todo esto mucho más fácil, lo que voy es a añadir un div, que envuelva estos dos elementos que ya teníamos, A este div le voy a aplicar... ...la clase header-content. Esta clase la he inventado yo, quiero decir, podría haberle puesto cualquier otro nombre. Lo voy a guardar. Y ahora, dentro de header, voy a utilizarlo. Aquí hay otra cosa que también es muy interesante, y es aplicar sass a lo que estoy haciendo, quiero decir, utilizar las características que me ofrece sass para sacarle más partido. Estoy trabajando sobre el header y todos los contenidos que voy a crear realmente van a ir aplicados a ese header. Entonces, aquí, lo suyo, es añadir una etiqueta header, y dentro de esa etiqueta header, añadir ahora todos los selectores que yo quiera. O sea, voy a crear un ámbito, un name-space header, que va a servir para apuntar mucho mejor las modificaciones que yo vaya a hacer sobre los distintos posibles elementos. Aquí podría poner esa clase header-content que acabo de crear. Estoy utilizando live-reload para que me recargue los estilos css según los voy modificando, pero cuando hago cambios en las plantillas esto no lo estoy buscando, así que voy a tener que hacer una recarga, y voy a ver ahora cómo está organizado todo este header. Lo voy a seleccionar. Y, efectivamente, vemos que se ha creado un header-content. Aquí lo podemos ver. Y si yo ahora añado cualquier clase, por ejemplo, yo sé que este header-content voy a pedirle que tenga un display flex, pues se genera automáticamente el css. Vemos cómo se está creando la clase específica de la etiqueta header, ese header-content. Funciona todo correctamente. A partir de este punto, voy a hacer que estos elementos que están con este flex se organicen correctamente dentro de este área.

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.