Diseño páginas de categoría, autor y blog en WordPress

Play

¡Muy buenas! Con este video llegamos a la mitad de nuestro curso. Hoy, vamos a diseñar las páginas que muestran el resumen de los artículos del blog. Esta clase es muy práctica en la cual conseguiremos un diseño vistoso y fácil de hacer. ¡Empecemos!

Antes recuerda que puedes suscribirte gratis al blog.
Si te suscribes puedes proponer artículos y cursos. También te envío un email semanal con todas las novedades que publico en el blog.

Te dejo el resumen de la clase que hacemos en el video para conseguir este diseño tan chulo para presentar el resumen de todos las entradas del blog independientemente de la manera que se filtre, ya sea por categoría, etiqueta o autor.

Para poder trabajar con múltiples artículos, instalaremos el plugin «Duplicate Post» que nos permitirá duplicar artículos rápidamente. Esto es útil para simular un blog con más contenido durante el proceso de diseño.

Instalamos el plugin.

• Ve a «Plugins» y luego a «Añadir nuevo».
• Busca «Duplicate Post» e instálalo.
• Activa el plugin y duplica varios artículos para tener contenido con el que trabajar.

Personalización diseño del blog.

• Ve a «Apariencia» y luego a «Personalizar».
• Selecciona «Blog» y «Blog y archivo».
• Configura la página para que no tenga una caja alrededor y elige el diseño de tu preferencia.
• Define cuántas entradas mostrar por página y oculta los metadatos si lo prefieres.
• Añade CSS para bordes redondeados y espaciado adecuado.

Optimización SEO páginas de archivo.

• Edita las categorías y añade descripciones para ayudar a Google a entender de qué trata cada página.
• Añade una meta descripción adecuada.

Añadimos una nueva entrada.

• Ve a «Entradas» y «Añadir nueva».
• Escribe un artículo y asigna la categoría correspondiente.
• Añade una imagen destacada con texto alternativo para SEO.
• Completa el extracto para resumir el contenido del artículo.

Personalizamos el contenido de la entrada.

• Utiliza encabezados (H2, H3) y otros bloques para estructurar tu contenido.
• Añade meta etiquetas y ajusta el diseño según sea necesario.

Editamos el menú principal.

• Ve a «Apariencia» y «Personalizar».
• Edita el menú del header, añadiendo y quitando elementos según sea necesario.
• Ordena el menú para mejorar la navegación.

Añadir páginas de categorías al menú.

• Crea una nueva página llamada «Blog».
• Configura esta página como la página de entradas en «Ajustes de la página de inicio».

Editar la página de autor.

• La página de autor muestra todos los artículos de un usuario.
• Personaliza esta página desde el personalizador o utilizando CSS para ajustar la imagen del autor y otros detalles.

Aquí tienes el código CSS que utilizamos en la lección, lo puedes copiar y pegar directamente en el editor de CSS del personalizador tal y cómo te muestro en el video.

/*PÁGINAS ARCHIVO*/

.archive .site-main{
	margin-top:4em!important;
}
.archive .ast-article-inner{
	margin-bottom:2em;
	box-shadow:none;
}
.archive .entry-title{
	text-align:left;
	margin-top:20px;
}
.ast-excerpt-container{
	margin-top:10px;
}
body.archive .ast-archive-description {
	  padding-top: 0em;
    padding-left: 0em;
}
.wp-post-image{
	border-radius: 24px;
}
.ast-author-avatar{
	display:none;
}

En esta clase, hemos diseñado las páginas de resumen de artículos por categoría y personalizado la página de autor. Ahora, te animo a que pruebes y dejes tus páginas de blog y archivo terminadas. En la próxima lección, personalizaremos la página de inicio, añadiendo bloques y trucos para mostrar tus entradas más recientes, testimonios, y más.

Tienes a tu disposición el formulario de la página de contacto por si tienes alguna duda hacérmela llegar. Espero que disfrutes del curso tanto como yo haciéndolo. ¡Nos vemos en la siguiente lección!