Mostrar datos del usuario en cualquier lugar de la web con WordPress

Personalizar los datos mostrados en la web es una buena forma de mejorar la experiencia de usuario, ya que a nadie le gusta que le traten de forma impersonal. Si te llamo por tu nombre es inevitable que te sientas más cercano a mí. Y eso es algo muy poderoso cuando se trata de marketing. Al fin y al cabo, el marketing es psicología.

Supongo que por eso me llegan consultas de forma regular preguntándome como mostrar el nombre del cliente en este o aquel lugar de la tienda o de la web. Como obviamente no puedo dar una respuesta detallada a cada persona que me lo pregunta, voy a tratar de extenderme aquí con todos los detalles sobre cómo mostrar el nombre u otros datos del usuario en la tienda o la web.

Personalizar el contenido con el nombre del cliente

A todos nos gusta que nos llamen por nuestro nombre, ¿verdad ?

Cuando se hace, de pronto uno se siente más cercano al emisor del mensaje y, por tanto, más receptivo y predispuesto. Si has hecho alguna vez campañas de email marketing lo sabrás bien, y es rara la plataforma que no permite personalizar el mensaje con el nombre del receptor.

Pero no sólo se trata de eso: también es importante poner las cosas fáciles a nuestros usuarios. Si tienes cuenta en mi web (por ejemplo, si eres suscriptor de mis plugins) habrás notado que te he llamado por tu nombre en el primer párrafo de este apartado, pero eso no es todo.

Si vas a cualquiera de los formularios de mi web (por ejemplo, el formulario de contacto) verás que tu nombre y dirección de correo electrónico ya están rellenos. Este tipo de detalles, aunque pequeños, siempre se agradecen por parte de los usuarios.

Recuperar y mostrar datos del cliente

Tanto WordPress como WooCommerce tienen, por supuesto, funciones que permiten hacer estas cosas, así que vamos a ver cómo usarlas y aprovecharlas en nuestra tienda o sitio web. Si eres de los que el código les da repelús, no temas: voy a procurar darlo todo ya bien mascado.

Porque vamos a utilizar esas funciones para recuperar el dato que nos interesa, y usaremos un shortcode (que nosotros mismos crearemos) para mostrarlo donde queramos en nuestra web. Te aconsejo, para sentar bases, echar un vistazo a esta otra entrada:

WooCommerce: la clase WC_Customer

WooCommerce tiene una clase específica que nos permite trabajar con el cliente; no sólo recuperar sus datos (incluyendo datos personales, de envío, de facturación, de impuestos, pedidos, etcétera), sino también modificarlos o hacer con ellos mil cosas: la clase WC_Customer.

La clase tiene muchos métodos, pero hay algunos de ellos especialmente interesantes para el tema de esta entrada: las clases get_first_name, get_username, get_display_name, get_email y get_avatar_url, que nos permiten obtener, respectivamente, su nombre de pila, nombre de usuario, nombre a mostrar, dirección de correo electrónico y URL del avatar.

Así, usando los métodos que la clase WC_Customer pone a nuestra disposición y aprovechando la función de WordPress get_current_user_id, que recupera el ID del usuario conectado, es todo coser y cantar.

Por ejemplo, si queremos recuperar el nombre de pila del cliente que está viendo la tienda, sólo tenemos que hacer:

$cliente = new WC_Customer (get_current_user_id());
$nombre = $cliente->get_first_name();

Fácil a más no poder. Igual con cualquiera de los métodos que he mencionado más arriba (get_email, get_username, etcétera). Para mostrarlo donde queramos, podemos simplemente hacernos un shortcode. Por ejemplo, [nombre]:

add_shortcode ('nombre', function () {
	$cliente = new WC_Customer (get_current_user_id());
	return ucwords ($cliente->get_first_name());
});

Y listo. Allá donde pongamos [nombre] nuestros clientes verán su nombre de pila. Los visitantes (usuarios no registrados o no identificados en su cuenta) no verán nada.

En cuanto a dónde poner este código, te remito a otras entradas donde ya lo he explicado:

WordPress: la clase WP_User

Lo cierto es que yo uso habitualmente la clase WC_Customer porque la conozco bien y me pilla muy a la mano, por eso lo he puesto primero. Costumbre, al fin y al cabo el 99% de mi trabajo lo desarrollo con WooCommerce. Además, WooCommerce solicita al cliente datos que WordPress no solicita por defecto, como por ejemplo direcciones.

Pero si tu web no incluye una tienda con WooCommerce no sufras, porque también puedes (¡faltaría más!) recuperar y mostrar donde quieras los datos de usuario. WordPress cuenta para ello con la clase WP_User y la función get_userdata. Esta función devuelve un objeto WP_User al pasarle como parámetro un ID de usuario. Así, con un simple:

$usuario = get_userdata (get_current_user_id());

Tendremos almacenado en $usuario el objeto del usuario conectado, de donde podremos recuperar los datos que queramos (todos, incluyendo roles y capacidades). Pero hay más formas de hacerlo, por ejemplo instanciando directamente la clase:

$usuario = new WP_User (get_current_user_id());

O usando directamente get_user_by, de la que get_userdata es sólo un alias:

$usuario = get_user_by ('id', get_current_user_id());

Pero la forma más sencilla de hacerlo es, seguramente, utilizando wp_get_current_user:

$usuario = wp_get_current_user();

Como ves, formas de obtener los datos no faltan. De cualquiera de las formas, una vez que tenemos el objeto de usuario podemos acceder a cualquiera de sus propiedades y mostrarla donde queramos usando, como antes, un shortcode. Así, podremos mostrar el nombre de usuario usando un shortcode llamado, por ejemplo, [usuario] haciendo:

add_shortcode ('usuario', function () {
        $usuario = get_userdata (get_current_user_id());
        return $usuario->user_nicename;
});

Igualmente podríamos mostrar el email usando la propiedad user_email, el nombre público mediante la propiedad display_name o el nombre de pila con user_firstname.

Mostrar el gravatar del usuario

También podemos mostrar, siguiendo el mismo principio, el gravatar, lo cual es también una forma de personalizar la experiencia del usuario.

Para ello podemos usar la función get_avatar_url, que recibe como parámetro el ID o el correo electrónico del usuario, así que podemos obtener la URL de su avatar con:

$url_avatar = get_avatar_url (get_current_user_id());

Así, podemos hacer un shortcode que muestre el avatar del usuario conectado llamado por ejemplo [avatar] y cuyo código sería, más o menos, así:

add_shortcode ('usuario', function () {
        $url_avatar = get_avatar_url (get_current_user_id());
        return sprintf ('', $url_avatar);
});

Y si queremos hacerlo realmente bien, podemos hacer:

add_shortcode ('avatar', function () {
        $url_avatar = get_avatar_url (get_current_user_id());
        $usuario = get_userdata (get_current_user_id());
        return sprintf ('', $url_avatar, $usuario->display_name);
});

E incluso podemos establecer tu tamaño (en píxels, por defecto son 96) así:

add_shortcode ('avatar', function () {
        $size = 125;
        $url_avatar = get_avatar_url (get_current_user_id(), array('size' => $size));
        $usuario = get_userdata (get_current_user_id());
        return sprintf ('', $url_avatar, $usuario->display_name, $size, $size);
});