Tutorial WordPress: Diseñar un autor box al final del post sin plugins con HTML y CSS

Introducción

Este tutorial explica paso a paso cómo diseñar y añadir un autor box al final de cada entrada en WordPress sin usar plugins, únicamente con HTML, PHP y CSS. Incluye el marcado que debes añadir al template del tema, estilos CSS listos para pegar en style.css y recomendaciones de accesibilidad, SEO y compatibilidad con temas hijo.

Requisitos previos

Acceso al sistema de archivos del tema (FTP, SFTP o editor del tema en Apariencia → Editor).
Conocimientos básicos de PHP y CSS.
Se recomienda trabajar en un tema hijo para no perder cambios con actualizaciones.

Ubicación donde insertar el autor box

El autor box suele colocarse en el archivo single.php o en un template parcial como content-single.php, justo después del bucle (the_content()). Inserta el código PHP/HTML proporcionado en la sección de ejemplos en la localización deseada.

Marcado HTML/PHP para el autor box

El siguiente bloque genera un autor box simple pero completo con avatar, nombre enlazado al archivo del autor, biografía corta y enlaces sociales (si existen). Incluye microdatos básicos de Schema.org para mejorar el snippet en motores de búsqueda.

lt?php
// Coloca esto dentro del loop, después de the_content()
author_id   = get_the_author_meta(ID)
author_name = get_the_author()
author_url  = get_author_posts_url( author_id )
avatar      = get_avatar( author_id, 120 ) // tamaño del avatar en px
description = get_the_author_meta( description, author_id )
// Campos sociales (suponiendo que se han añadido a user_contactmethods)
twitter = get_the_author_meta( twitter, author_id )
facebook = get_the_author_meta( facebook, author_id )
linkedin = get_the_author_meta( linkedin, author_id )
?gt

ltarticle class=author-box itemscope itemtype=http://schema.org/Persongt
  ltdiv class=author-box__avatar itemprop=imagegt
    lt?php echo avatar ?gt
  lt/divgt

  ltdiv class=author-box__infogt
    lth3 class=author-box__namegt
      lta href=lt?php echo esc_url( author_url ) ?gt rel=author itemprop=urlgt
        ltspan itemprop=namegtlt?php echo esc_html( author_name ) ?gtlt/spangt
      lt/agt
    lt/h3gt

    ltdiv class=author-box__bio itemprop=descriptiongt
      lt?php echo wp_kses_post( wpautop( description ) ) ?gt
    lt/divgt

    ltul class=author-box__socialgt
      lt?php if ( twitter ) : ?gt
        ltligtlta href=https://twitter.com/lt?php echo esc_attr( ltrim( twitter, @ ) ) ?gt target=_blank rel=noopener noreferrergtTwitterlt/agtlt/ligt
      lt?php endif ?gt
      lt?php if ( facebook ) : ?gt
        ltligtlta href=lt?php echo esc_url( facebook ) ?gt target=_blank rel=noopener noreferrergtFacebooklt/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/articlegt

Estilos CSS recomendados

Pega el siguiente CSS en el archivo style.css de tu tema hijo o dentro del CSS adicional del personalizador. Ajusta colores, tipografías y tamaños según tu diseño.

/ Autor box: estilo base /
.author-box{
  display:flex
  align-items:flex-start
  gap:1rem
  margin-top:2.5rem
  padding:1rem
  border:1px solid rgba(0,0,0,0.06)
  background-color:#fff
  border-radius:8px
}

/ Avatar /
.author-box__avatar img{
  display:block
  width:120px
  height:120px
  object-fit:cover
  border-radius:50%
  border:2px solid rgba(0,0,0,0.05)
}

/ Info /
.author-box__info{
  flex:1
  min-width:0
}
.author-box__name{
  margin:0 0 0.25rem 0
  font-size:1.1rem
}
.author-box__name a{
  color:#222
  text-decoration:none
  font-weight:600
}
.author-box__bio{
  margin:0.25rem 0 0.75rem 0
  color:#444
  line-height:1.5
}

/ Social list simple /
.author-box__social{
  list-style:none
  padding:0
  margin:0
  display:flex
  gap:0.5rem
}
.author-box__social li a{
  display:inline-block
  padding:0.35rem 0.6rem
  background:#f2f2f2
  color:#222
  border-radius:6px
  font-size:0.875rem
  text-decoration:none
}

/ Responsive: apilar en pantallas pequeñas /
@media (max-width:600px){
  .author-box{
    flex-direction:column
    align-items:center
    text-align:center
  }
  .author-box__info{ width:100% }
  .author-box__name{ font-size:1.05rem }
  .author-box__bio{ text-align:left }
}

Añadir campos sociales al perfil de usuario (opcional)

Si tu instalación de WordPress no incluye los campos sociales que uses, puedes agregar campos sencillos mediante functions.php. Añade este snippet en functions.php del tema hijo para exponer campos como twitter, facebook y linkedin en el perfil de usuario.

lt?php
function mi_agregar_campos_usuario( contactmethods ) {
  // Añadir campos (clave => etiqueta)
  contactmethods[twitter]  = Twitter (usuario o URL)
  contactmethods = Facebook (URL)
  contactmethods[linkedin] = LinkedIn (URL)
  return contactmethods
}
add_filter( user_contactmethods, mi_agregar_campos_usuario )
?gt

Buenas prácticas y accesibilidad

Usa rel=author y schema.org Person para mejorar los datos estructurados.
Incluye texto alternativo en el avatar generado por get_avatar (WordPress lo hace automáticamente).
Respeta contrastes de color para accesibilidad y aumenta el tamaño del avatar para dispositivos táctiles si es necesario.
Evita abrir demasiados enlaces en nuevas pestañas usa target=_blank con rel=noopener noreferrer cuando sea externo.

Variantes y mejoras posibles

Mostrar número de publicaciones del autor: usa count_user_posts( author_id ).
Incluir botones de seguimiento (follow) o links a redes con iconos SVG (requiere insertar SVG en CSS o como background, y esto se haría dentro del código del tema).
Cachear consultas pesadas si tu author box añade datos derivados o llamadas externas.
Usar plantillas parciales: puedes mover el HTML a content-authorbox.php e incluirlo con get_template_part(content,authorbox) para mantener el código ordenado.

Pruebas y verificación

Inserta el PHP en el lugar deseado dentro del loop y guarda los cambios en un tema hijo.
Rellena la biografía y campos sociales en el perfil de autor (Usuarios → Tu perfil) y prueba con varias cuentas.
Verifica la apariencia en móvil y escritorio y ajusta el CSS si es necesario.
Comprueba el resultado con la herramienta de prueba de datos estructurados de Google para asegurarte de que el microdato Person es detectado correctamente.

Notas finales

Este autor box es ligero, adaptativo y evita la sobrecarga que añaden los plugins. Personalízalo en tipografías, colores y comportamiento para integrarlo con tu diseño. Si trabajas en un tema comercial, usa un tema hijo y documenta cualquier cambio para facilitar futuras actualizaciones.

SushiHost