Introducción

Este artículo explica, paso a paso y con todos los detalles necesarios, cómo estilizar la plantilla de autor (author archive) en WordPress usando CSS Grid y una foto de autor circular. Incluye ejemplos listos para pegar en un tema hijo, consideraciones de accesibilidad y mejoras para pantallas retina y móviles.

Preparativos y buenas prácticas

• Usa un tema hijo para no perder los cambios al actualizar el tema padre.
• Haz copia de seguridad antes de editar archivos del tema.
• Versiones de WordPress: el código propuesto usa funciones compatibles con versiones recientes (WP 5.x). Ajusta si tu instalación es mucho más antigua.
• Archivos a modificar o crear: author.php (preferible) o archive.php si tu tema usa una plantilla general para archivos.

Estructura recomendada del template de autor

La idea es crear una estructura semántica clara: una sección con dos columnas en la que la primera columna contiene la foto circular y la segunda el nombre, biografía y enlaces relevantes. A continuación tienes un ejemplo de author.php simplificado y seguro (escapando datos).

ID
avatar_large  = get_avatar_url( user_id, array(size => 300) )
avatar_medium = get_avatar_url( user_id, array(size => 150) )
avatar_small  = get_avatar_url( user_id, array(size => 80) )

author_name = esc_html( curauth->display_name )
author_bio  = wp_kses_post( get_the_author_meta( description, user_id ) )
author_posts_url = get_author_posts_url( user_id )
?>
>
  

    

      
           srcset= 80w,  150w,  300w
           sizes=(max-width:600px) 80px, 150px
           alt= />
    

    

      

      

      
>Ver todos los artículos
    
  

Estilos CSS con Grid y foto circular

Coloca estos estilos en el archivo CSS del tema hijo (por ejemplo author-styles.css) o en style.css del tema hijo. El ejemplo incluye fallback con flexbox, soporte responsive, y propiedades para foto circular con object-fit para mantener el encuadre.

/ Fallback: flexbox para navegadores sin soporte completo /
.author-archive .author-grid{
  display: flex
  gap: 1rem
  align-items: center
  max-width: 1100px
  margin: 0 auto
  padding: 1.5rem
}

/ Usar grid si está soportado /
@supports (display: grid) {
  .author-archive .author-grid{
    display: grid
    grid-template-columns: auto 1fr
    grid-gap: 1rem 1.5rem
    align-items: center
  }
}

/ Avatar circular y responsivo /
.author-archive .author-avatar img{
  width: 120px
  height: 120px
  border-radius: 50%
  object-fit: cover
  display: block
  box-shadow: 0 6px 18px rgba(0,0,0,0.08)
  border: 3px solid #fff / opcional para contraste /
  background-color: #f4f4f4 / fallback si la imagen tarda en cargar /
}

/ Tipografía y espaciado /
.author-archive .author-name{
  margin: 0 0 .25rem
  font-size: 1.5rem
  line-height: 1.2
}
.author-archive .author-bio{
  margin: 0 0 .75rem
  color: #444
  line-height: 1.6
}
.author-archive .author-links a{
  color: #0073aa
  text-decoration: none
}
.author-archive .author-links a:focus,
.author-archive .author-links a:hover{
  color: #005177
  text-decoration: underline
}

/ Responsive: apilar contenido en pantallas pequeñas /
@media (max-width: 650px){
  .author-archive .author-grid{
    flex-direction: column
    text-align: center
  }
  @supports (display: grid) {
    .author-archive .author-grid{
      grid-template-columns: 1fr
    }
  }
  .author-archive .author-avatar{
    margin-bottom: .5rem
  }
  .author-archive .author-avatar img{
    width: 96px
    height: 96px
  }
}

Encolar el CSS desde functions.php (tema hijo)

Para mantener el estilo modular y fácil de controlar, encola el fichero CSS desde functions.php del tema hijo. Ejemplo:

// functions.php del tema hijo
function childtheme_enqueue_author_styles(){
    wp_enqueue_style( child-author-styles, get_stylesheet_directory_uri() . /author-styles.css, array(), 1.0 )
}
add_action( wp_enqueue_scripts, childtheme_enqueue_author_styles )

Mejoras y consideraciones avanzadas

• Imágenes retina: usa srcset (como en el ejemplo) para servir tamaños mayores en pantallas de alta densidad y mejorar nitidez.
• Fallback para avatares: si quieres usar una imagen local por defecto, crea una imagen en el tema hijo y úsala si get_avatar_url devuelve vacío. Ejemplo sencillo:

  avatar_medium = get_avatar_url( user_id, array(size => 150) )
  if ( ! avatar_medium ) {
    avatar_medium = get_stylesheet_directory_uri() . /assets/images/default-avatar-150.png
  }
      

• Accesibilidad: añade alt descriptivo y role/aria-label en la sección principal (ya incluido en el ejemplo). Comprueba contraste de colores en la biografía y enlaces.
• SEO / Datos estructurados: puedes añadir atributos itemscope/itemtype para Person o un JSON-LD con información del autor si lo consideras necesario.
• Compatibilidad RTL: usa propiedades que respondan automáticamente (margin/padding lógicos) o añade ajustes cuando detectes is_rtl() en PHP.
• Control desde el Personalizador: si quieres permitir al administrador cambiar tamaño del avatar o colores, registra controles en el Customizer y aplica valores CSS con variables.

Accesibilidad y buenas prácticas técnicas

1. Alt descriptivo para la imagen: no usar alt vacío si la imagen aporta información sobre el autor.
2. Enlaces contrastados y estados focus visibles para teclado.
3. Evitar información sensible: no mostrar email público sin consentimiento.
4. Validar HTML generado y probar con lectores de pantalla básicos.

Consejos de diseño y ajustes finos

• Si la foto tiene un borde blanco para separarla del fondo, ajusta el color del borde según el fondo del sitio.
• Usa box-shadow sutil y border-radius 50% para el círculo evita sombras muy intensas que distraigan.
• Si quieres un tamaño variable según el layout, usa una variable CSS:

  :root{
    --author-avatar-size: 120px
  }
  .author-archive .author-avatar img{
    width: var(--author-avatar-size)
    height: var(--author-avatar-size)
  }
      

• Para distribuir la información adicional (redes sociales, rol, localización) añade un bloque debajo de la bio y dale grid interno si necesitas varias columnas.

Pruebas y despliegue

Prueba en varios navegadores y dispositivos: móvil, tablet, escritorio y pantallas retina. Revisa comportamiento con autores sin bio y con nombres largos. Limpia cachés (object cache, plugin de cacheo y CDN) tras actualizar CSS o plantilla.

Resumen final

Con una plantilla author.php simple y unos estilos CSS basados en Grid (con fallback a flexbox), puedes lograr una presentación limpia y moderna del archivo de autor con una foto perfectamente circular, responsive y optimizada para pantallas de alta densidad. El ejemplo ofrecido cubre la mayor parte de necesidades comunes y es fácilmente extensible para añadir redes sociales, microdatos o controles en el Customizer.