Este tutorial explica paso a paso cómo diseñar e integrar en WordPress una caja de autor con fondo degradado y avatar circular. Incluye la estructura HTML (plantilla/shortcode), el código PHP para generar el contenido dinámico del autor, y los estilos CSS detallados y responsivos para conseguir un diseño moderno, accesible y fácilmente personalizable.
1. Consideraciones previas
Antes de tocar archivos del tema, crea un tema hijo o haz una copia de seguridad. La implementación que propongo usa un shortcode para facilitar su inserción en entradas o plantillas y además registra y carga una hoja de estilos específica para la caja de autor.
2. Estructura HTML (marcado generado por el PHP)
La estructura mínima y semántica que usaremos es una sección con clase .wp-author-box que contiene el avatar, nombre, meta y descripción. Aquí tienes un ejemplo del marcado final que generará el PHP:
ltaside class=wp-author-box itemscope itemtype=https://schema.org/Persongt
ltdiv class=wp-author-avatargt
lta href=lt?php echo esc_url( get_author_posts_url( author_id ) ) ?gtgt
lt!-- get_avatar() imprimirá un img con alt y clase --gt
lt?php echo get_avatar( author_id, 120, , get_the_author_meta( display_name, author_id ), array( class =gt wp-author-avatar-img ) ) ?gt
lt/agt
lt/divgt
ltdiv class=wp-author-metagt
lth3 class=wp-author-name itemprop=namegt
lta href=lt?php echo esc_url( get_author_posts_url( author_id ) ) ?gtgtlt?php echo esc_html( get_the_author_meta( display_name, author_id ) ) ?gtlt/agt
lt/h3gt
ltp class=wp-author-role itemprop=jobTitlegtlt?php echo esc_html( get_the_author_meta( description, author_id ) ? : ) ?gtlt/pgt
ltp class=wp-author-bio itemprop=descriptiongtlt?php echo wp_kses_post( get_the_author_meta( description, author_id ) ) ?gtlt/pgt
ltul class=wp-author-socialgt
lt?php if ( url = get_the_author_meta( user_url, author_id ) ) : ?gt
ltligtlta href=lt?php echo esc_url( url ) ?gt rel=nofollow target=_blankgtWeblt/agtlt/ligt
lt?php endif ?gt
lt?php if ( twitter = get_the_author_meta( twitter, author_id ) ) : ?gt
ltligtlta href=https://twitter.com/lt?php echo esc_attr( twitter ) ?gt target=_blank rel=nofollowgtTwitterlt/agtlt/ligt
lt?php endif ?gt
lt/ulgt
lt/divgt
lt/asidegt
3. Código PHP: Shortcode y carga de estilos
Coloca el siguiente código en el archivo functions.php de tu tema hijo o en un plugin específico del sitio. El shortcode se llama [wp_author_box]. El código obtiene los datos del autor del post actual o de un ID pasado como atributo.
lt?php
// Shortcode: [wp_author_box id=123]
function wp_author_box_shortcode( atts ) {
global post
atts = shortcode_atts( array(
id =gt 0,
), atts, wp_author_box )
// Si no se pasó id, usamos el autor del post actual
author_id = (int) atts[id] ? (int) atts[id] : ( post ? (int) post->post_author : 0 )
if ( ! author_id ) {
return
}
// Cargar estilos (si no están encolados)
wp_enqueue_style( wp-author-box-style )
ob_start()
?gt
ltaside class=wp-author-box itemscope itemtype=https://schema.org/Persongt
ltdiv class=wp-author-avatargt
lta href=lt?php echo esc_url( get_author_posts_url( author_id ) ) ?gtgt
lt?php echo get_avatar( author_id, 140, , get_the_author_meta( display_name, author_id ), array( class =gt wp-author-avatar-img ) ) ?gt
lt/agt
lt/divgt
ltdiv class=wp-author-metagt
lth3 class=wp-author-name itemprop=namegt
lta href=lt?php echo esc_url( get_author_posts_url( author_id ) ) ?gtgtlt?php echo esc_html( get_the_author_meta( display_name, author_id ) ) ?gtlt/agt
lt/h3gt
lt?php if ( bio = get_the_author_meta( description, author_id ) ) : ?gt
ltp class=wp-author-bio itemprop=descriptiongtlt?php echo wp_kses_post( bio ) ?gtlt/pgt
lt?php endif ?gt
ltul class=wp-author-socialgt
lt?php if ( url = get_the_author_meta( user_url, author_id ) ) : ?gt
ltligtlta href=lt?php echo esc_url( url ) ?gt rel=nofollow target=_blankgtWeblt/agtlt/ligt
lt?php endif ?gt
lt?php if ( twitter = get_the_author_meta( twitter, author_id ) ) : ?gt
ltligtlta href=https://twitter.com/lt?php echo esc_attr( twitter ) ?gt target=_blank rel=nofollowgtTwitterlt/agtlt/ligt
lt?php endif ?gt
lt/ulgt
lt/divgt
lt/asidegt
lt?php
return ob_get_clean()
}
add_shortcode( wp_author_box, wp_author_box_shortcode )
// Registrar y encolar estilos
function wp_author_box_enqueue_styles() {
wp_register_style( wp-author-box-style, get_stylesheet_directory_uri() . /css/wp-author-box.css, array(), 1.0 )
}
add_action( wp_enqueue_scripts, wp_author_box_enqueue_styles )
?gt
Cómo insertar la caja en plantillas
En single.php, page.php o cualquier plantilla PHP, puedes llamar el shortcode con:
lt?php echo do_shortcode( [wp_author_box] ) ?gt
O pasando un ID concreto:
lt?php echo do_shortcode( [wp_author_box id=42] ) ?gt
4. Estilos CSS (wp-author-box.css)
Crea el archivo css/wp-author-box.css en tu tema hijo y pega lo siguiente. El diseño incluye un fondo degradado, avatar circular, sombras suaves, transición en enlaces y diseño responsive con flexbox.
/ Caja del autor /
.wp-author-box {
display: flex
gap: 1rem
align-items: center
padding: 1rem
border-radius: 12px
/ Fondo degradado /
background: linear-gradient(135deg, #f5f7fa 0%, #e6eef8 40%, #dfeefc 100%)
box-shadow: 0 6px 18px rgba(22, 34, 60, 0.08)
color: #0f1724
overflow: hidden
}
/ Avatar: contenedor y la imagen circular /
.wp-author-avatar {
flex: 0 0 auto
width: 96px
height: 96px
border-radius: 50%
overflow: hidden
box-shadow: 0 6px 14px rgba(12, 20, 40, 0.12)
background: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0))
display: grid
place-items: center
}
/ Ajustes para la imagen dentro /
.wp-author-avatar-img {
width: 100%
height: 100%
object-fit: cover
display: block
border-radius: 50%
transition: transform .35s ease
}
/ Efecto hover ligero /
.wp-author-avatar a:hover .wp-author-avatar-img,
.wp-author-avatar a:focus .wp-author-avatar-img {
transform: scale(1.06)
}
/ Meta del autor: nombre, bio, enlaces /
.wp-author-meta {
flex: 1 1 auto
min-width: 0
}
/ Nombre y enlace /
.wp-author-name {
margin: 0
font-size: 1.05rem
line-height: 1.1
}
.wp-author-name a {
color: #071434
text-decoration: none
font-weight: 600
transition: color .2s ease
}
.wp-author-name a:hover,
.wp-author-name a:focus {
color: #0b6df2
text-decoration: underline
}
/ Bio breve /
.wp-author-bio {
margin: .35rem 0 0
color: rgba(7,20,52,0.8)
font-size: .95rem
}
/ Social / metas /
.wp-author-social {
list-style: none
padding: 0
margin: .5rem 0 0
display: flex
gap: .6rem
align-items: center
}
.wp-author-social li a {
font-size: .85rem
color: #0b6df2
text-decoration: none
padding: .25rem .45rem
border-radius: 6px
background: rgba(11,109,242,0.08)
transition: background .15s ease, transform .15s ease
}
.wp-author-social li a:hover,
.wp-author-social li a:focus {
transform: translateY(-2px)
background: rgba(11,109,242,0.12)
}
/ Responsive: apilar verticalmente en pantallas pequeñas /
@media (max-width: 560px) {
.wp-author-box {
flex-direction: column
align-items: center
text-align: center
}
.wp-author-meta {
margin-top: .6rem
}
.wp-author-avatar {
width: 110px
height: 110px
}
}
Explicación de puntos importantes en CSS
- Fondo degradado: linear-gradient con ángulo 135deg para efecto diagonal suave.
- Avatar circular: border-radius: 50% y overflow: hidden para recortar la imagen.
- Responsive: en pantallas pequeñas la caja se apila con flex-direction: column.
- Accesibilidad visual: contrastes en colores y tamaño de fuente adecuado.
5. Accesibilidad y SEO
Algunos consejos para mejorar la accesibilidad y el SEO de la caja de autor:
- Usa get_avatar() de WordPress, que ya incluye atributo alt con el nombre del autor. Si necesitas personalizarlo, pásalo como cuarto parámetro.
- Incluye microdatos de schema.org: en el ejemplo usamos itemtype=https://schema.org/Person y itemprop en nombre y descripción para indicar el autor como entidad.
- Enlaces que abran nuevas ventanas deben usar rel=noopener noreferrer si añades target=_blank. En el ejemplo usamos rel=nofollow para enlaces externos si corresponde.
- Comprueba contraste entre color de texto y fondo (puedes ajustar colores en el CSS si el contraste fuera insuficiente).
- Asegura que la caja sea navegable con teclado: los enlaces deben recibir foco visible (el navegador lo gestiona, pero puedes añadir outline personalizado si lo deseas).
6. Variantes y mejoras
- Degradado dinámico: Puedes generar degradados diferentes por autor usando metadata (por ejemplo, un color guardado en el perfil del autor) y aplicarlo inline o mediante clases específicas.
- Modo oscuro: Añade media query prefers-color-scheme para ajustar el fondo y colores en modo oscuro.
- Lazy-loading del avatar: WordPress 5.5 añade lazy loading por defecto en imágenes. Si quieres optimizar aún más, controla tamaños y srcset.
- Widget o bloque: Si prefieres, convierte la misma salida en un widget o bloque de Gutenberg en lugar de un shortcode.
7. Instalación paso a paso
- Haz una copia de seguridad de tu sitio o trabaja en un entorno de pruebas.
- Crea un tema hijo si aún no tienes uno.
- Crear el archivo CSS: añade css/wp-author-box.css con el contenido del apartado de estilos.
- Añade el código PHP del shortcode al functions.php de tu tema hijo o crea un plugin simple con ese código.
- Coloca el shortcode [wp_author_box] en la entrada o llama a do_shortcode() desde la plantilla.
- Prueba en diferentes resoluciones y ajusta colores/tamaños según tu diseño.
8. Ejemplo final de uso
Insertar la caja justo después del contenido de un post en single.php:
lt?php the_content() echo do_shortcode( [wp_author_box] ) ?gt
Con esto tendrás una caja de autor elegante, con avatar circular y fondo degradado, integrada correctamente en WordPress y lista para personalizar a tu gusto.
Leave a Reply