• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Crear una caja de autor usando bloques en WordPress

Descubre con este tutorial cómo crear una caja de autor usando los bloques nativos de WordPress.

Mostrar la caja de autor al final de las entradas puede ser una estrategia interesante si quieres que los visitantes esporádicos se «queden con tu cara».

Muchos temas, incluidos los temas hijo de Genesis Framework, ofrecen añadir este cajas de autor al final de las entradas. Pero ya sabes que soy muy partidario de aprovechar las novedades que incluye WordPress.

Y ahora mismo (en WordPress 6.2) ya tenemos 3 bloques que permiten crear una caja de autor, de forma sencilla:

  • Avatar
  • Nombre del autor de la entrada
  • Biografía del autor de la entrada

Lo bueno es que puedes personalizar el diseño directamente desde el editor de bloques. Por ejemplo, usando un bloque de columnas se puede conseguir algo como esto:

¿Te interesa hacer lo mismo? Aquí tienes como:

Pasos para crear una caja de autor con bloques de WordPress

En primer lugar añade un bloque de columnas con un diseño de 30-70% para que la columna de la derecha sea más ancha.

Luego añade el bloque de avatar en la columna de la izquierda y el nombre y biografía en la derecha.

La estructura quedaría así:

A continuación, personaliza a tu gusto los bloques, te dejo los ajustes que usé para este ejemplo:

Te dejo el HTML, por si quieres copiar/pegar:

<!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"0","left":"0"},"padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"}},"border":{"radius":"3px","style":"solid","width":"2px"}},"borderColor":"secondary","backgroundColor":"tertiary","className":"author-box"} -->
<div class="wp-block-columns author-box has-border-color has-secondary-border-color has-tertiary-background-color has-background" style="border-style:solid;border-width:2px;border-radius:3px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:avatar {"size":150,"isLink":true} /--></div>
<!-- /wp:column -->

<!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:post-author-name {"isLink":true,"fontSize":"large"} /-->

<!-- wp:post-author-biography /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

Lo bueno es que los datos se toman de forma dinámica de la información del autor (que se puede rellenar desde el perfil).

En el siguiente tutorial te explicaré cómo puedes mostrarla de forma condicional.

Conclusiones

Ahora ya sabes crear una caja de autor con bloques nativos de WordPress.

¿Alguna duda? Te leo en los comentarios.

Y si quieres darme una sugerencia para próximos tutoriales, déjamela en el formulario de contacto. Ventajas de ser suscriptor. 😉

Caja de autor Editor de bloques WordPress

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes identificarte o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?