Cómo crear un tema Full Site Editing (FSE) desde cero. Parte 5
En las partes anteriores de esta serie hemos creado un tema Full Site Editing (FSE) desde cero completamente funcional. Ya disponemos de las principales plantillas del tema y de una página de blog dinámica basada en el bloque Bucle de consulta (Query Loop). A partir de esta base, vamos a personalizar el blog en WordPress para mejorar su aspecto visual.
Ahora ha llegado el momento de mejorar su aspecto visual. En esta quinta parte utilizaremos CSS para personalizar el blog en WordPress, dando estilo a las entradas, la imagen destacada, los títulos, los enlaces y otros elementos que harán que nuestro tema tenga una apariencia mucho más profesional.
Al finalizar este capítulo, el blog contará con un diseño moderno, limpio y responsive, listo para reutilizarse en el resto de plantillas del tema.
Personalizando las tarjetas del blog
Hasta este momento, WordPress muestra las entradas del blog utilizando el aspecto predeterminado de los bloques. Aunque el resultado es completamente funcional, podemos personalizar el blog en WordPress aplicando algunos estilos CSS para mejorar notablemente su apariencia.
Nuestro objetivo será convertir cada entrada en una tarjeta visualmente más atractiva, mejorando la separación entre publicaciones, la presentación de la imagen destacada, la tipografía y la interacción con el usuario.
Para apreciar mejor los cambios que iremos realizando a lo largo de este capítulo, he añadido varias entradas de ejemplo al blog. Te recomiendo hacer lo mismo para comprobar cómo afectan los estilos al conjunto de publicaciones.
Antes de aplicar ningún estilo, el blog presenta el siguiente aspecto
Para mejorar su apariencia, añadiremos las siguientes reglas a nuestro archivo style.css:
/* =======================
TARJETAS DEL BLOG
========================== */
.wp-block-post {
padding: 20px;
border: 1px solid #cc454e;
border-radius: 50px;
}
Tras aplicar estos estilos, cada entrada queda delimitada mediante un borde con esquinas redondeadas, facilitando la separación visual entre las distintas publicaciones.
Personalizando la imagen destacada
La imagen destacada suele ser el primer elemento que capta la atención del usuario al acceder al blog. Por este motivo, conviene integrarla visualmente con el resto de la tarjeta y asegurarnos de que se adapte correctamente a cualquier tamaño de pantalla.
Para conseguirlo, redondearemos sus esquinas superiores y evitaremos que la imagen sobresalga del contenedor cuando, más adelante, añadamos efectos de animación.
Añade las siguientes reglas a style.css:
/* =======================
IMAGEN DESTACADA
========================== */
.wp-block-post-featured-image {
overflow: hidden;
border-radius: 30px 30px 0 0;
}
.wp-block-post-featured-image img {
display: block;
width: 100%;
height: auto;
}
¿Qué hace este código?
- overflow: hidden impide que la imagen sobresalga del contenedor cuando apliquemos efectos visuales.
- border-radius redondea únicamente las esquinas superiores para integrarlas con el diseño de la tarjeta.
- display: block elimina el pequeño espacio que los navegadores dejan bajo las imágenes por defecto.
- width: 100% hace que la imagen ocupe todo el ancho disponible.
- height: auto mantiene sus proporciones originales.
Añadiendo un efecto hover a las imágenes
Una forma sencilla de mejorar la experiencia del usuario consiste en añadir una pequeña animación cuando el cursor se sitúa sobre una entrada del blog. Este tipo de efectos ayudan a destacar los elementos interactivos y aportan una sensación de mayor dinamismo sin resultar excesivos.
En este ejemplo ampliaremos ligeramente la imagen destacada al pasar el ratón sobre la tarjeta.
Añade el siguiente código al archivo style.css:
/* ========================
ANIMACIÓN DE LA IMAGEN
=========================== */
.wp-block-post-featured-image img {
transition: transform .3s ease;
}
.wp-block-post:hover .wp-block-post-featured-image img {
transform: scale(1.05);
}
¿Qué hace este código?
- transition crea una transición suave entre el estado normal y el estado ampliado de la imagen.
- transform: scale(1.05) aumenta el tamaño de la imagen un 5 % cuando el cursor se sitúa sobre la tarjeta.
- Gracias a la propiedad overflow: hidden, añadida en el apartado anterior, la imagen permanece dentro de los límites de la tarjeta y el efecto resulta mucho más limpio.
Personalizando el título de la entrada
El título es uno de los elementos más importantes de cada tarjeta del blog, ya que será el principal punto de acceso al contenido de la entrada. Por este motivo, conviene darle un mayor protagonismo y diferenciar claramente su comportamiento cuando el usuario interactúa con él.
En este apartado ajustaremos su tamaño, eliminaremos el subrayado predeterminado de los enlaces y añadiremos un cambio de color al pasar el cursor sobre el título.
Añade las siguientes reglas al archivo style.css:
/* ======================
TÍTULO DE LA ENTRADA
========================= */
.wp-block-post-title {
margin: 15px 0;
font-size: 2rem;
line-height: 1.3;
}
.wp-block-post-title a {
color: inherit;
text-decoration: none;
transition: color .3s ease;
}
.wp-block-post:hover
.wp-block-post-title a {
color: #cc454e;
}
¿Qué hace este código?
- margin crea una separación respecto a la fecha y al resto del contenido de la tarjeta.
- font-size aumenta el tamaño del título para convertirlo en el elemento principal de cada publicación.
- line-height mejora la legibilidad cuando el título ocupa varias líneas.
- color: inherit hace que el enlace utilice el mismo color que el texto del título.
- text-decotation: none elimina el subrayado predeterminado.
- transition suaviza el cambio de color al pasar el cursor.
- :hover cambia el color del título utilizando el color principal del tema.
Personalizando la fecha de publicación
La fecha de publicación proporciona información útil al lector, especialmente en un blog donde el contenido se actualiza con frecuencia. Sin embargo, al tratarse de un elemento secundario, conviene darle un estilo discreto para que no reste protagonismo al título de la entrada.
En este apartado modificaremos su color y tamaño para integrarla mejor en el diseño de la tarjeta.
Añade el siguiente código al archivo style.css:
/* ====================
FECHA DE PUBLICACIÓN
======================= */
.wp-block-post-date {
font-size: .9rem;
color: #666;
margin-top: 20px;
}
Puedes ampliar conocimientos visitando:
Bloque de título de la publicación
Bloque de fecha de publicación
Bloque de extracto
Imagen destacada
Transiciones de CSS
Transformaciones en CSS