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

Estilos CSS de los metadatos del post

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Con los metadatos ya estructurados dentro de las plantillas, podemos pasar a añadirles los estilos que les den aspecto. Este trabajo va a servir de base a la forma de tratar el resto de enlaces del sitio, así que es un buen ejercicio de uso de SASS.

Transcripción

La información de categorías, etiquetas y publicación ya está colocada en la parte superior del post. Voy ahora a darle un poco de forma. Voy trabajar un poco sobre él. ¿Dónde tendré que hacer las modificaciones? Bueno, hay varias estrategias distintas para elegirlo. Por un lado, se trata de ver cómo estoy generando el Template y a partir de ese Template ir añadiendo diferentes estilos o diferentes necesidades. Otra posibilidad también es observar el código que se está generando y, sobre ese código, elegir exactamente qué elemento es el que tengo que modificar. Por ejemplo, este artículo no está bien colocado. Bueno pues, podría hacer que me lo colocase de otra manera mejor. Me cabe otra posibilidad y es añadir clases concretas que me sirvan para... Bueno pues, aplicar formas distintas de mostrar información. Voy a trabajar un poco sobre las tres partes. Por ejemplo, en el caso del artículo, este artículo que yo he editado, yo he creado en SCSS específico para él pero realmente la información de margen está siendo pisada por la clase hentry. Gracias a los source maps yo puedo encontrar fácilmente dónde está esa información en posts-and-pages. Bueno pues, voy a irme a la carpeta sass. Dentro de la carpeta sass me voy a mover hasta site, primary y aquí tengo posts-and-pages. Efectivamente tengo esta clase hentry, y voy a comentar este código. Volviendo de nuevo atrás, aquí tenemos, efectivamente, cómo ya me está tratando de otra manera esa entrada, además esto se va a aplicar a todos los artículos, con lo cual ya tengo los listados de elementos separados. Es una forma bastante más atractiva de mostrar las entradas del post. Pero esta es una sola de las maneras. Otra de las formas también, es el añadir elementos dentro de la estructura de los templates que me sirva para jugar con ellos. Así que voy a volver de nuevo al código, voy a moverme hasta el template-tags y aquí voy a envolver con un contenedor estos elementos. De hecho, quiero que me envuelva con un contenedor estos dos elementos y también el posted_on. Para hacerlo, puedo utilizar el método print, la función print de php, y con él envolver todo con un div. Un div al que le voy a aplicar además una clase específica, y esa clase especifica luego me servirá... --voy a copiarlo y voy a pegarlo--, me servirá, como decía, para darle formato. Bien, ya tengo un contenedor que me coloca estos elementos. Además de ese contenedor, también puedo añadir nuevas clases a las distintas etiquetas. Voy a moverme de nuevo al navegador. Yo quiero que cuando se acaban los tags, me ponga una barra vertical y me separe eso de etiquetas, y me aparezca otra barra vertical y me separe eso de Edit. Bueno pues, para hacerlo, puedo añadir una clase que vaya a utilizar en todos los elementos donde quiero que me ponga esa barra intermedia y luego simplemente aplicarle estilos. Estos estilos tendré que ponerlos en algún sitio. Dentro de elements he creado un archivo article.scss, en el cual estaba añadiendo las etiquetas relacionadas con estos bloques. Podría hacerlo en cualquier otro sitio, podría crear un archivo específico para content, por ejemplo, pero bueno, voy a reutilizar este. Y, dentro de él, por un lado, voy a crear un selector para la clase para esos elementos meta y, por otro lado, o sea, para los enlaces de categorías y de tags y de etiquetas. Y, por otro lado, voy a crear una segunda clase para el contenedor. Voy a empezar con el separador entre el bloque de categorías y el bloque de tags. Bien, para poder aplicar cualquier modificación sobre esta clase en concreto, puedo utilizar &, eso va a ser el equivalente... ...a en este caso, crear la clase .bloque-metas:after. O sea, el & lo que va a hacer es ponerme seguido del selector que estoy creando. Bien y dentro de él bueno pues, voy a pedir que tenga un content con esa barra vertical, y le voy a aplicar a ese content que tenga un margen. Vertical ninguno y cinco píxels de separación. Voy a guardarlo, recargo en el navegador la nueva estructura y aquí vemos cómo aparecen ya estos elementos separando de categorías, de etiquetas y de Edit. Bueno pues, en este bloque de contenedor de metas, Voy a añadir el selector A, o sea que todos los enlaces que haya metidos dentro de este bloque, no tengan línea en la parte de abajo, tengan un posible color... Este color voy a copiarlo y voy a crear una variable. Voy a abrir colors, y voy a crear una variable específica para este color. Así ahora ya voy a poder utilizar este color, es un color rojo obscuro. Por otro lado, voy a pedirle al texto que aparezca en mayúsculas y voy a hacer que ese texto salga un poco más grande. A mí, en realidad, todos los textos que aparezcan en este contenedor quiero que sean un poco más pequeñitos. Así que, a parte de esos estilos que estoy aplicando sobre la etiqueta A, también voy a aplicar estilos que modifiquen el tamaño de la fuente. Voy a hacer que esa fuente sea un poco más pequeña, y así consigo que el publicado, categorías, tags salga pequeño pero, sin embargo, luego el enlace es algo un poco más grande. Y, aparte de eso, también voy a hacer que se note dónde está la información de las metas. Entonces, voy a hacer que tenga una caja clara sobre la que se vaya a ver esa información. Bueno ya podemos ver el resultado cómo saldrían los enlaces formateados de otra manera y además todo esto montado sobre una pequeña caja blanca. Si ahora quiero que este publicado salga también dentro de ese bloque, tendré que trabajar un poco sobre la estructura, sobre el HTML. Dentro del apartado de content estoy preguntando si el tipo de post es post, y, en ese caso, pues, que me ponga toda esta ficha de publicación. Pero, en realidad, ahora voy a trabajar de dos maneras distintas, voy a trabaja diferente. Si este post es single o si es múltiple. Así que, voy a meter todo esto dentro de una sentencia condicional y voy a hacer que este código en concreto me lo ejecute solamente en el caso de que esta entrada no sea single. O sea, solamente para los listados. El resultado de poner esta condicional es que ahora cuando recargue la página, --voy a recargarla--, si es single ya no me está poniendo ese contenido fuera de todo este bloque. Sin embargo, cuando vuelvo atrás, sí que me lo está añadiendo. Y, ahora, el siguiente paso es que quiero que me lo añada en esta parte de arriba. Bien pues, para ello puedo copiar todo el bloque que me genera ese contenido, puedo irme al template-tags y añadirlo debajo de todo este bloque. O sea, meterlo dentro de la envolvente que tengo con este div contenedor-metas. Bien, pues, podría añadir todo este código aquí. Para separarlo del código anterior, bueno pues, puedo añadir otro print, por ejemplo, pero que en vez de ser un div sea simplemente un br. Tengo que tener cuidado cuando copie contenidos desde un template hasta un php que tiene trozos de funciones porque en este template en realidad yo tengo código HTML como este header o este entry-meta que he copiado y que he pegado aquí dentro. Y este entry-meta, en realidad, no debería de pintarlo sin más, debería de imprimirlo, o sea esto debería de venir metido dentro de un print, puesto entre comillas. Tendría que añadir aquí un segundo print. Voy a quitar comentarios. Y, luego, por otro lado, no necesito utilizar esta función de php metida dentro de código php, la puedo poner directamente aquí y el final del if puedo ponerlo simplemente cerrando... Abriendo y cerrando llaves. Bien, ahora ya tengo este código reformateado para que funcione dentro de este template-tags. Lo guardo, voy a recargar a ver si todo está correcto y aquí podemos verlo, tiene el mismo formato que tienen los enlaces de arriba, sale exactamente igual y metido dentro de este bloque. Para poderlo ver a pantalla completa, pues aquí vemos el efecto que hemos conseguido ya de formateo de la información básica. Y, como digo, además de esta información la hemos aplicado solamente sobre los elementos únicos. Esta información aquí, pues ahora puedo formatearla de otra manera distinta pero ya va a ser un poco de la misma manera que lo que hemos hecho aquí, con lo cual, por no hacerlo más repetitivo esta parte la voy a saltar.

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.