Introducción

Este tutorial explica con todo lujo de detalles cómo personalizar el bloque de avatar y nombre del autor en la vista single (entrada individual) de WordPress. Incluye varias estrategias —plantilla PHP, bloque dinámico en servidor, filtros y estilos CSS—, buenas prácticas de seguridad, accesibilidad y rendimiento, y ejemplos completos listos para copiar en un tema hijo o plugin.

Requisitos y buenas prácticas iniciales

• Trabaja siempre en un child theme o en un plugin personalizado para no perder cambios al actualizar el tema.
• Ten habilitado WP_DEBUG en desarrollo y acceso SFTP/FTP para subir archivos.
• Usa funciones de escape (esc_html, esc_url, esc_attr, wp_kses_post) y verifica permisos donde corresponda.
• Prueba tanto en temas clásicos (single.php / template-parts) como en temas basados en bloques (site editor). Aquí se muestran soluciones que funcionan en ambos contextos.

Enfoques disponibles (resumen)

1. Crear una plantilla parcial PHP (recommended para temas clásicos).
2. Registrar un bloque dinámico en servidor (compatible con editores de bloques y site editor).
3. Aplicar filtros (p. ej. modificar get_avatar o añadir markup con action hooks).

1) Plantilla parcial PHP: crear un bloque de autor personalizado

Paso a paso para crear un archivo template-parts/author-block.php en tu child theme y cargarlo desde single.php o content-single.php.

1.1 Archivo PHP del bloque de autor

Este ejemplo crea una estructura semántica, accesible y fácil de estilizar. Añade además enlaces a la página del autor y muestra rol/biografía y enlaces sociales guardados en los campos de usuario.

lt?php
// template-parts/author-block.php
if ( ! is_singular( post ) ) {
    return
}

author_id    = get_the_author_meta( ID )
display_name = get_the_author_meta( display_name, author_id )
bio          = get_the_author_meta( description, author_id )
role         = get_the_author_meta( role, author_id ) // campo personalizado opcional
avatar_size  = 96

// URL a archivo de autor
author_posts_url = esc_url( get_author_posts_url( author_id ) )

// Avatar (utiliza la API core)
avatar = get_avatar( author_id, avatar_size, , sprintf( esc_attr__( Avatar de %s, textdomain ), display_name ) )

// Recuperar redes sociales (ejemplo: meta keys twitter y linkedin)
twitter  = get_the_author_meta( twitter, author_id )
linkedin = get_the_author_meta( linkedin, author_id )
?gt

ltaside class=post-author aria-label=gt
    ltdiv class=post-author__avatargt
        lta href=lt?php echo author_posts_url ?gt rel=authorgt
            lt?php echo avatar ?gt
        lt/agt
    lt/divgt

    ltdiv class=post-author__metagt
        lth3 class=post-author__namegtlta href=lt?php echo author_posts_url ?gt rel=authorgtlt?php echo esc_html( display_name ) ?gtlt/agtlt/h3gt

        lt?php if ( role ) : ?gt
            ltdiv class=post-author__rolegtlt?php echo esc_html( role ) ?gtlt/divgt
        lt?php endif ?gt

        lt?php if ( bio ) : ?gt
            ltdiv class=post-author__biogtlt?php echo wp_kses_post( wpautop( bio ) ) ?gtlt/divgt
        lt?php endif ?gt

        ltul class=post-author__socialgt
            lt?php if ( twitter ) : ?gt
                ltligtlta href=lt?php echo esc_url( https://twitter.com/ . ltrim( twitter, @ ) ) ?gt target=_blank rel=noopener noreferrergtTwitterlt/agtlt/ligt
            lt?php endif ?gt

            lt?php if ( linkedin ) : ?gt
                ltligtlta href=lt?php echo esc_url( linkedin ) ?gt target=_blank rel=noopener noreferrergtLinkedInlt/agtlt/ligt
            lt?php endif ?gt
        lt/ulgt
    lt/divgt
lt/asidegt

1.2 Incluir la plantilla en single.php

Dentro de single.php o content-single.php, añade la llamada a get_template_part donde quieras que aparezca el bloque del autor (por ejemplo, después del contenido):

// En single.php o content-single.php (en el loop, tras the_content)
get_template_part( template-parts/author-block )

1.3 Estilos CSS recomendados

Ejemplo de CSS responsivo y accesible para presentar el avatar y texto junto. Ajusta variables y tamaños a tu diseño.

/ style.css (child theme) /
.post-author{
  display:flex
  gap:1rem
  align-items:flex-start
  padding:1rem
  border-top:1px solid rgba(0,0,0,.06)
  margin-top:2rem
}
.post-author__avatar img{
  width:96px
  height:96px
  border-radius:50%
  object-fit:cover
  display:block
}
.post-author__name{
  margin:0
  font-size:1.1rem
}
.post-author__bio{
  margin-top:.5rem
  color:#444
  font-size:.95rem
}
.post-author__social{
  margin-top:.6rem
  padding:0
  list-style:none
  display:flex
  gap:.5rem
}
@media (max-width:600px){
  .post-author{
    flex-direction:row
    gap:.75rem
  }
  .post-author__avatar img{
    width:72px
    height:72px
  }
}

2) Bloque dinámico (server-side) para Gutenberg / Site Editor

Registrar un bloque dinámico permite usar el bloque en el editor y que su salida sea generada por PHP en tiempo de carga, manteniendo compatibilidad con editores de bloques y temas basados en bloques.

2.1 Registrar el bloque en functions.php o en un plugin

// functions.php (child theme) o plugin personalizado
function mytheme_register_author_block() {
    register_block_type( mytheme/author-block, array(
        render_callback => mytheme_render_author_block,
        attributes      => array(
            showBio => array( type => boolean, default => true ),
            avatarSize => array( type => number, default => 96 ),
        ),
    ) )
}
add_action( init, mytheme_register_author_block )

function mytheme_render_author_block( attributes ) {
    if ( ! is_singular( post ) ) {
        return 
    }

    author_id    = get_the_author_meta( ID )
    display_name = get_the_author_meta( display_name, author_id )
    bio          = get_the_author_meta( description, author_id )
    avatar_size  = isset( attributes[avatarSize] ) ? (int) attributes[avatarSize] : 96
    avatar       = get_avatar( author_id, avatar_size, , esc_attr( display_name ) )
    author_posts_url = esc_url( get_author_posts_url( author_id ) )

    ob_start() ?>
    ltaside class=post-author-blockgt
        ltdiv class=post-author-block__avatargtlta href= rel=authorgtlt/agtlt/divgt
        ltdiv class=post-author-block__infogt
            lth3gtlta href= rel=authorgtlt/agtlt/h3gt
            lt?php if ( ! empty( bio )  ! empty( attributes[showBio] ) ) : ?gt
                ltdiv class=post-author-block__biogtlt/divgt
            lt?php endif ?gt
        lt/divgt
    lt/asidegt
    
Si quieres que el editor muestre una vista previa, añade un script JavaScript para el bloque y estilos de editor, pero el render_callback ya garantiza la salida en el front.
3) Modificar get_avatar o usar filtros
Si tu tema o plugins ya muestran el avatar y quieres simplemente alterar su estructura o añadir clases, puedes usar el filtro get_avatar. Ten cuidado: se aplica globalmente, así que filtra sólo cuando corresponda.
// functions.php: añadir clase personalizada al avatar solo en single post author
function mytheme_custom_get_avatar( avatar, id_or_email, size, default, alt ) {
    if ( is_singular( post )  in_the_loop() ) {
        // Añadir envoltorio o clase
        avatar = str_replace( class=avatar, class=avatar post-author__avatar-img, avatar )
    }
    return avatar
}
add_filter( get_avatar, mytheme_custom_get_avatar, 10, 5 )

Rendimiento y caché

Si vas a mostrar datos derivados de consultas múltiples, usa transients para cachear la salida y reducir consultas de usuario.
get_avatar genera una imagen para cargas más optimizadas usa lazy-loading (si tu tema aún no lo aplica) o entrega imágenes responsive mediante srcset si trabajas con attachment images.
Evita consultas por cada post si muestras bloques en listas: limita la ejecución usando condicionales (is_singular).

Ejemplo: cache simple con transient
// Cache sencillo de la salida del author block
function mytheme_render_author_block_cached() {
    if ( ! is_singular( post ) ) return 

    post_id = get_the_ID()
    transient_key = author_block_ . post_id
    cached = get_transient( transient_key )
    if ( cached ) {
        return cached
    }

    // Genera la salida (puedes llamar a la función anterior que construye el markup)
    ob_start()
    get_template_part( template-parts/author-block )
    html = ob_get_clean()

    // Guardar 1 hora
    set_transient( transient_key, html, HOUR_IN_SECONDS )

    return html
}

Accesibilidad (a11y) y SEO

Proporciona texto alternativo significativo para el avatar (get_avatar tiene parámetro alt).
Usa enlances rel=author para mayor claridad semántica y enlaces a la página del autor.
Asegura contraste suficiente entre texto y fondo y tamaño de hit area para enlaces.
Si muestras iconos sociales, añade aria-label a cada enlace y evita usar solo color para transmitir significado.

Compatibilidad con temas basados en bloques
En un theme.json/site editor, puedes registrar estilos globales o un pattern que incluya el bloque dinámico (mytheme/author-block). Para temas que usan template-parts declarativos, crea un block template part que incluya el bloque registrado. Así, el editor de sitio podrá posicionarlo y el PHP renderizará siempre la salida correcta.
Validación y pruebas

Prueba en distintos tamaños de pantalla y con autores sin avatar o sin biografía (fallbacks claros).
Comprueba marcado HTML con validator.w3.org si integras cambios significativos.
Usa Query Monitor para ver cuántas consultas extra genera tu bloque y optimízalas si es necesario.
Prueba en listado de entradas, single y en páginas de autor para evitar duplicidad o errores.

Checklist de despliegue

Hecho en child theme o plugin.
Escapado y sanitizado correctamente (esc_html, esc_url, wp_kses_post).
Accesibilidad (alt, aria-label, roles si aplica).
Responsive y estilos adaptativos.
Cache opcional para mejorar rendimiento.
Pruebas en distintos navegadores y tamaños.

Resumen final
Personalizar el bloque de avatar y nombre del autor en single puede ser tan simple como crear una plantilla parcial en el tema o tan flexible como registrar un bloque dinámico que funcione en el editor de bloques y en el front. Prioriza la seguridad, la accesibilidad y el rendimiento. Usa las plantillas y ejemplos de este artículo como punto de partida y adáptalos a tu estructura de tema y diseño.