Índice de contenidos
Creando nuestro gravatar
¿Qué es un Gravatar?. Gravatar es una abreviación para Globally Recognized Avatar en inglés, o avatar reconocido mundialmente, en español es un servicio que ofrece un avatar único globalmente.
Para crear nuestro Gravatar accederemos a http://es.gravatar.com/
Una vez nos registremos y verifiquemos nuestra cuenta de correo lo que deberemos realizar es asociar una imagen a la cuenta de correo del registro en el apartado my gravatars.
Crear el usuario en tu WordPress.
El siguiente paso será crear el usuario en nuestro WordPress. Para ello nos vamos a usuario/ añadir nuevo y rellenamos todo los campos, siendo esencial que la cuenta de correo debe ser la misma a la que hemos asociado la imagen del gravatar.
Una vez creado el usuario vuelve a entrar en el perfil y cumplimenta la sección de la información biográfica.
Cómo crear una caja de autor en WordPress sin plugins.
Esencial, cómo en cualquier personalización que realicemos a través de código y con el fin de evitar pérdidas cuando hay actualizaciones de la plantilla, trabajaremos con un child theme.
Si no sabes cómo crear uno en el post como crear un child theme en 3 minutos te lo explicamos. Después de crearlo recuerda activarlo.
Ahora vamos a editar el archivo functions.php del child theme. Esto lo puedes hacer de 3 formas: Mediante una conexión FTP, desde el administrador de archivos de tu servidor, o desde tu WordPress en apariencia/editor de temas.
Creamos una función en la que le decimos que nos pinte toda la información de nuestro perfil (Gravatar, nombre, información biográfica y todas las entrada del usuario). Para ello pegamos el siguiente código:
function autor(){
?>
<div class="autor">
<div class="imagen_autor">
<?php echo get_avatar(get_the_author_meta('ID'), 250); ?>
</div>
<div class="info_autor">
<h3>Sobre <?php echo get_the_author_meta( 'display_name'); ?></h3>
<?php echo wpautop(get_the_author_meta('description')); ?>
<a href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>">Ver todas las entradas de <?php the_author(); ?></a>
</div>
</div>
<?php
} 
Lo siguiente que haremos es crear una acción en la que ejecutaremos a función que acabamos de crear. Pero no sabemos donde la debe ejecutar. Aquí es donde entramos a trabajar con los Hooks de WordPress. Para comprender mejor el funcionamiento y las grande posibilidades que ofrece trabajar con hooks te invitamos a que le des un vistazo a nuestro post Cómo insertar shortcodes en los hooks de WordPress.
Si trabajas con la plantilla Astra pro el proceso se facilita ya que solo tiene que pegar todo el código PHP en el hook de astra que te interese. Te explicamos cómo hacerlo clicando aquí.
Nosotros, en nuestro caso trabajaremos con el hook comment_form_before que está antes de los comentarios de las entradas.
Añadimos la siguiente acción al archivo functions.php y guardamos los cambios.
add_action ('comment_form_before','autor');Si visitamos cualquiera de nuestra entrada ya veremos nuestra caja de autor. Si visitamos otra entrada de otro autor comprobaremos como en la caja de autor se muestran los datos de autor que lo ha escrito.
Lo siguiente que haremos será una personalización mínima con CSS. Para ello, desde tu backoffice de WordPress nos vamos a Apariencia/personalizar/ css adicional y pegamos el siguiente código CSS y guardamos los cambios:
.autor{
text-align:center;
}
.imagen_autor img{
width:110px;
height:110px;
border-radius:180px;
margin:20px 0;
}
Ya tenemos creada nuestra caja de autor sin utilizar plugins. Puedes revisar todos los pasos que hemos seguido en el vídeo que hay al final de la entrada.
Cómo crear una caja de autor con simple author box
El plugin simple author box lo encontraréis totalmente gratuito en el repositorio de WordPress.
Su funcionamiento es muy simple, seleccionar opciones de personalización. Demos un repaso a estas opciones. Nos vamos a Simple author box y en setting nos encontramos estos ajustes:
–Manually insert the Simple Author Box: Insertar la caja de autor manualmente con PHP o shortcode.
–Hide the author box if author description is empty: Ocultar la caja de autor si los datos biográficos están vacíos.
–Show author email: Mostrar el e-mail de usuario.
–Open social icon links in a new tab: Abrir los enlaces a redes sociales en una nueva ventana.
–Hide the social icons on author box: Ocultar los iconos de redes sociales.
–Hide the author box on archive:Ocultar la caja de autor en la página de archivos.
Seguimos a apariencia y estos son los ajustes que nos permite realizar:
–Top margin of author box y Bottom margin of author box: Definir los márgenes de la caja de autor.
–Padding top and bottom of author box y Padding left and right of author box: definir los rellenos de la caja de autor.
–Border Width: el grueso del borde la caja de autor.
–Author avatar image style: nos permite mostrar el gravatar en forma de cuadrado o círculo.
–Rotate effect on author avatar: Efecto al ponernos sobre la imagen del gravatar.
–Show author website: Mostrar la web del autor de la entrada.
-Social icons type: Nos permite definir que tipo de iconos sociales queremos.
En el apartado colors nos permite personalizar los colores de los elementos de la caja de autor: Fondo, títulos, enlaces, redes sociales, etc.
Para finalizar, en typhografy definiremos todo lo referente a las fuentes, tipo de fuentes, tamaño de fuentes y iconos.
Guardamos los cambios y ya tendremos nuestra caja de autor en las entradas de nuestro blog. Para definir los enlaces a redes sociales visita el perfil del autor en en apartado Usuarios del backoffice de tu WordPress.
Puedes repasar todos los pasos en el vídeo que hay al final de la entrada.
Cómo crear una caja de autor con Elementor pro.
Cómo último punto de este tutorial. vamos a explicar cómo crear una caja de autor en WordPress utilizando Elementor pro. Si aún no tienes tu licencia haz click en el botón.
Accedemos al maquetador de Elementor y insertamos el widget author box. Los ajustes que deberemos realizar son muy básicos. Practicamente todos los selectores son para definir qué queremos mostrar o ocultar, salvo la disposición de la imagen y los textos.
Una vez tengamos personalizada la caja de autor a nuestro gusto haremos click derecho en el contenedor donde hemos insertado el widget de caja de autor y la guardaremos como plantilla.
El siguiente paso será crear un child theme y editar el archivo functions.php. Si no sabes como hacerlo revisa en esta misma entrada el apartado cómo crear una caja de autor sin plugins.
Vamos a crear una funcion en la que diremos que pinte la plantilla que hemos guardado la caja de autor. Para ello vamos a pegar el siguiente código PHP en el archivo functios.php y insertaremos el shortcode de la plantilla de la caja de autor que hemos creado con Elementor (línea de color rojo)
function caja_de_autor(){
echo do_shortcode('');
}
Para averiguar el shortcode de nuestra plantilla accederemos a plantillas/plantillas guardadas.
Igual que nos pasaba cuando explicabamos como crear la caja de autor sin plugin tenemos creada una funcion que dice que pinte el shortcode de la plantilla pero no hemos definido donde. Y de igual forma vamos a trabajar con los hooks de WordPress.
Volvemos al archivo functions.php de nuestro child theme y pegamos este código php. El primer parámetro del action define en que hook se debe ejecutar y en el segundo que funcion se debe ejecutar.
add_action ('comment_form_before','caja_de_autor');
Hasta aquí llega este tutorial en el que os hemos explicado cómo crear una caja de autor en WordPress con y sin plugins. Esperamos que te haiga servido de ayuda. Te invitamos a que si tienes alguna duda/ pregunta los dejes en los comentarios de esta entrada.
