• 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

Mostrar el avatar del autor bajo el título de las entradas en Genesis Framework

Aprende en este tutorial cómo mostrar el avatar del autor en las entradas o posts de un child theme de Genesis mediante código.

En anteriores tutoriales te expliqué como puedes modificar la información que se muestras debajo del título de las entradas.

Además, a partir de Genesis 2.9 puedes controlar los metadatos que se muestran desde el personalizador de WordPress, en Ajustes de tema > Contenido individual.

Pero todavía no te había explicado cómo mostrar el avatar del autor de una entrada justo debajo del título. El resultado puede ser algo así:

Pero puedes ajustarlo tu tema. Vamos a ver cómo.

Pasos para mostrar el avatar del autor debajo del título

1. «Engancha» el avatar a un hook de Genesis

Añade el siguiente snippet al fichero functions.php:

Para ver este código y los otros 1867 snippets de esta web,
identifícate o suscríbete aquí.

Con este fragmento aprovechas el filtro genesis_before_entry_content y la etiqueta condicional is_single para colocar la imagen del autor justo antes del contenido de las entradas.

Además, utilizas la función get_avatar y en el segundo parámetro indicas el tamaño de la imagen. En este caso es de 72 píxeles, pero puedes modificarlo a tu gusto.

Para que se muestre solo el nombre del autor puedes hacerlo desde el personalizador de WordPress, en Ajustes de tema > Contenido individual o utilizar este snippet de código:

Para ver este código y los otros 1867 snippets de esta web,
identifícate o suscríbete aquí.

Ya tienes la parte estructural resuelta, ahora vamos a por el diseño. 😉

2. Personaliza los estilos del avatar

Una vez añadido, necesitas editar el CSS para que el nuevo campo se muestre de forma correcta en todos los dispositivos.

Para ello, añade el siguiente snippet al final del fichero style.css:

Para ver este código y los otros 1867 snippets de esta web,
identifícate o suscríbete aquí.

Dependiendo del child themes de Genesis que estes usando (en este caso está basado en Genesis Sample) es posible que necesitas ajustar un poco el CSS.

Conclusiones

Si quieres mostrar el avatar del autor debajo del título de las entradas de un child theme de Genesis ahora ya sabes cómo hacerlo con un poco de código.

¿Prefieres que lo adapte a alguno de ellos en particular? Envíame la propuesta a través del formulario de contacto y prepararé un tutorial a medida.

Ventajas de ser suscriptor. 😉

CSS Genesis Framework Información meta superior PHP

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?