Cómo crear una caja de autor en Wordpress

Cómo crear una caja de autor en WordPress con y sin plugins

Share on facebook
Facebook
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp
Share on twitter
Twitter
En este tutorial te vamos a explicar 3 formas sobre cómo crear una caja de autor en WordPress. Los 2 plugins que vamos a utilizar para explicar cómo crear las caja de autor son Elementor Pro y Simple author box.

Í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.

Cómo crear un gravatar en WordPress

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.

cómo crear un author box sin plugins

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;
	
}
Caja de autor WordPress

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.

simple author box plugin

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.

simple author box configuracion

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.

Cómo crear una caja de autor con Elementor

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.

caja de autor WordPress Elementor

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'); 
caja de autor shortcodes hooks WordPress
Y ya tenemos creada nuestra caja de autor con Elementor en todas las entradas de nuestro blog. Puedes revisar todos los pasos en el siguiente vídeo.

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.

Compártenos en tu red social favorita
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on whatsapp
Mejorar imágenes para Wordpress

Cómo optimizar imágenes para tu página web

Un elemento que da mucho valor a nuestras paginas o entradas de blog son las imágenes. Hacer uso de una buena imagen en nuestras publicaciones incorpora un número de características que le añaden un valor añadido: Mejoran el SEO: Mediante el uso de las etiquetas

Mantenimiento de páginas web Vilanova i la Geltrú

Mantenimiento de páginas web, porque es necesario

Arrancas tu web y el susto es importante, te duele el bolsillo: comprar dominio, hosting, plantillas y plugins de pago, quizás algún servicio externo, las horas del diseñador, el trabajo del creador de contenido. Finaliza tu proyecto y tras todo esto ¿mantenimiento de  página web?

Tablas de contenidos para Wordpress con elementor

Cómo crear tablas de contenidos con Elementor

Entre las novedades más destacables que ofrece la versión 2.8 de Elementor resalta la de un nuevo widget para poder crear tablas de contenidos. Simplifica considerablemente que el contenido más sea accesible, permitiendo a los usuarios  escanearlo y tener una idea de la estructura del

Suscríbete a nuestro blog

Responsable:Carlos Jiménez Mendez
Finalidad:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
Legitimación:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
Destinatarios:No se ceden datos a terceros, salvo obligación legal.
Personas físicas o jurídicas directamente relacionadas con el Responsable
Encargados de Tratamiento adheridos al Privacy Shield
Derechos:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
Información adicional:Se puede consultar la política de privacidad de forma más detallada aquí.

Deja un comentario

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

He leido y acepto nuestra política de privacidad. *

Responsable:Carlos Jiménez Mendez
Finalidad:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
Legitimación:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
Destinatarios:No se ceden datos a terceros, salvo obligación legal.
Personas físicas o jurídicas directamente relacionadas con el Responsable
Encargados de Tratamiento adheridos al Privacy Shield
Derechos:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
Información adicional:Se puede consultar la política de privacidad de forma más detallada aquí.
Ir arriba