Añadir la biografía del autor donde tú quieras

Tiempo estimado de lectura: 3 minutos

 

Cómo puedes añadir la biografía del autor del artículo donde quieras

Esta semana veremos cómo podemos añadir la biografía del autor donde tú quieras, dentro de la página web.

Este artículo completa la serie de mostrar publicaciones en la barra lateral y mostrar los artículos más comentados.

Código que vamos a utilizar para añadir la biografía del autor

Como viene siendo habitual desde hace tiempo, utilizaremos un código sencillo del que explicaremos qué significa y dónde debemos colocarlo.

Este es el código que vamos a usar en este ejemplo:

<?php global $post; ?>
<?php $author_id = $post->post_author; ?>
<?php if (get_the_author_meta('description', $author_id)) : ?>
<div class="author-box">
<div class="author-img"><?php echo get_avatar(get_the_author_meta('user_email', $author_id)); ?></div>
<h3 class="author-name"><?php the_author_meta('display_name', $author_id); ?></h3>
<p class="author-description"><?php the_author_meta('description', $author_id); ?></p>
</div>
<?php endif; ?>

En este código se crea la variable author que contendrá la información del autor del artículo (post_author). A continuación, se establece que si un artículo es de un autor, se cree una caja (un div) que contenga la información de ese autor concreto, y con una información concreta (descripción, imagen de avatar, nombre del autor y descripción).

¿Dónde tenemos que colocar este código?

Una vez que ya sabemos qué hace este código, tenemos que saber dónde debemos colocarlo. En este caso, tenemos que colocarlo en el archivo single.php de tu tema activo, por lo que te aconsejo que crees un child theme.

Presentar bien esta información

Con todo lo anterior, ha se mostraría la información del autor, pero ¿no estaría bien que se mostrara de una forma más bonita y con un poco de diseño?.

Podemos utilizar un poquito de código CSS para mostrar esa información más atractiva. Te propongo el siguiente código:

.author-box .author-name {
display: inline;
clear: none;
font-weight: bold;
}
.author-box {
display: inline-block;
width: inherit;
background-color: #3c3c3c;
margin: 0 0 40px;
padding: 20px;
}
.author-box .author-img {
margin-right: 20px;
margin-bottom: 20px;
float: left;
}
.author-box .author-img img {
border-radius: 50%;
}

Con este código se crea una caja de un color gris claro, con la información del autor del artículo y con su imagen (avatar) redonda.

 


¿Te ha servido este artículo?, DALE A LA VIDA LOCA. 0


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja una respuesta

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros, salvo por imperativo legal.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *