En esta ocasión, lo que vamos a intentar hacer es replicar la página de artículos de Trinchera WordPress. En la clase anterior, vimos cómo hacer la home, pero en esta clase nos centraremos en replicar la página de artículos.
Vamos a ir a Páginas y hacer clic en Añadir nueva. Llamamos a esta página "Artículos".
No la vamos a configurar como la página principal de los artículos, sino que la vamos a crear desde cero. Lo primero es agregar un encabezado con el título "Artículos" (usando una etiqueta h1
).
A continuación, insertamos una cuadrícula de entradas para mostrar los últimos posts. Seleccionamos el bloque Spectra y ya tenemos las últimas entradas. Guardamos los cambios.
Ahora vamos a añadir algunos artículos:
Creamos categorías como WordCamp y Comunidad.
Luego, vamos a Entradas y seleccionamos Añadir nueva para agregar el contenido de los artículos. Por ejemplo, el primer artículo tendrá un resumen, extracto e imagen destacada.
Publicamos los artículos y les asignamos las categorías correspondientes.
Vamos a la página de Artículos y centramos el título.
Modificamos la tipografía y el espaciado inferior para darle más estilo.
Agregamos un borde gris a cada artículo y configuramos su radio a 6 píxeles.
El fondo de los artículos debe ser blanco, y el borde debe volverse verde cuando pasamos el cursor por encima.
Mostrar extracto: Activamos la opción de mostrar el extracto de cada artículo.
Mostrar fecha y taxonomía: Ajustamos la visualización de la fecha y la taxonomía en cada artículo.
Meta de autor: Desactivamos la opción de mostrar el autor y el número de comentarios.
Tipografía y tamaño del título: Ajustamos la tipografía del título de los artículos con un peso de 500
y un tamaño de 16px
.
La anchura de la cuadrícula de entradas se ajusta a 992px creando un contenedor y configurando su tamaño personalizado.
Eliminamos el espacio interior del contenedor para que el contenido ocupe todo el espacio disponible.
Hemos creado una página de artículos bastante similar a la de Trinchera WordPress utilizando Astra y Spectra. Aunque no es una réplica exacta, hemos logrado algo muy cercano. Este desarrollo puede necesitar ajustes adicionales según otros diseños o estructuras, pero en este caso ha funcionado muy bien.
¡Espero que te haya parecido interesante esta clase! Nos vemos en la siguiente.