7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. WordPress

Cómo usar Mandrill para enviar correos electrónicos en WordPress

Scroll to top
Read Time: 28 mins

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

En la mayoría de los sitios de WordPress, el envío de correo electrónico no es algo en lo que se invierta mucho tiempo pensando. La funcionalidad predeterminada está bien: el correo electrónico se envía directamente desde tu servidor web utilizando la funcionalidad de correo de PHP, y la mayoría de las veces, llega perfectamente al destinatario.

Dicho esto, existen algunos proyectos, por ejemplo, sitios de comercio electrónico o los sitios web basados en las suscripciones, en los que esto no es suficiente: si el correo electrónico es una parte crucial de tu negocio, debes asegurarte de que los mensajes se entregan de la forma más confiable y rápida posible. Si también puedes realizar un seguimiento de las tasas de apertura y de los clics, aún mejor.

En esos casos, debes buscar proveedores de servicios de correo electrónico transaccional como Mandrill o Postmark. En este tutorial, nos centraremos en Mandrill: El servicio de envío de correo electrónico transaccional desarrollado por MailChimp, popular empresa de servicio de listas de correo. Mandrill es rápido y confiable, y lo mejor de todo, es gratuito hasta un límite de 12.000 emails cada mes, lo que significa que los pequeños sitios web y las empresas (casi) nunca tendrán que pagar nada en absoluto por el servicio.

En este tutorial, te mostraré primero cómo conectar Mandrill con WordPress de manera que aquel realice el envío de todo el correo electrónico por nosotros. A continuación, iremos un paso más allá en la integración y reemplazaremos el nuevo mensaje de bienvenida de usuario estándar por un bonito mensaje HTML enviado mediante la API de Mandrill.

Los requisitos para la API de Mandrill son los siguientes:

  • PHP 5.2.x o superior
  • Extensión PHP cURL

Empecemos.

Crear un plugin de WordPress

Al desarrollar nueva funcionalidad en WordPress, la primera pregunta que debes hacerte es si lo que vas a construir debe ser un plugin o formar parte de un tema. En cuanto al código, ambos son tan similares que puedes elegir el método que prefieras. Esta es la razón por la que para responder a la pregunta, tenemos que pensar sobre el uso: dado que el correo electrónico es algo que no depende del tema del blog y el mismo código puede ser utilizado en cualquier sitio y en cualquier tema, parece mejor idea implementar esta funcionalidad en forma de plugin.

Para empezar, vamos a crear un plugin e insertar en él algunas funciones básicas.

Si no tienes ganas de codificar un plugin mientras lees el tutorial, puedes descargar todo el plugin que tienes disponible como archivo adjunto en este tutorial e ir avanzando mientras sigues el código del plugin en el tutorial.

Paso 1: Crear el plugin

Primero, crea un directorio para el plugin y llámalo mandrill_emailer.

En este directorio, crea dos archivos PHP: index.php para la funcionalidad del plugin y mandrill_settings.php para la página de configuración del plugin.

En index.php, añade la declaración básica del plugin y una línea para incluir la página de configuración al plugin. El archivo de origen para la página de configuración, mandrill_settings.php, todavía puede estar vacío.

Paso 2: Descargar e incluir la API de Mandrill

En el primer paso de la integración de Mandrill, todavía no necesitarás la API. Por lo tanto, si todo lo que te interesa es usar Mandrill como servidor de correo electrónico y no te interesa el correo electrónico HTML ni las plantillas, puedes omitir este paso y saltar directamente a la siguiente sección.

Sin embargo, si planeas ir hasta el final y utilizar la API para enviar mensajes de correo electrónico de agradable aspecto, ahora es el mejor momento para instalar la API.

Puedes descargar la API de Mandrill desde la página de descarga, ya sea en forma de archivo zip o utilizando el administrador de dependencias PHP, Composer. Un archivo zip es algo muy simple, así que, a menos que estés familiarizado con Composer, sigue adelante y descarga el paquete, descomprímelo, después copia su contenido (el archivo Mandrill.php y el subdirectorio Mandrill) en el directorio del plugin.

Ahora has colocado la biblioteca de API de Mandrill dentro de la base de código del plugin, pero todavía necesitas incluirla en el proyecto. Para ello, añade una nueva línea en index.php, justo encima de la línea que se encarga de la importación de la página de configuración de Mandrill:

La API de Mandrill ahora ya está incluida en el proyecto y disponemos de un plugin básico. Si quieres, continúa y actívalo en la configuración de WordPress (aunque no hace nada todavía).

Paso 3: Crear la página de configuración

Antes de profundizar en la funcionalidad de correo electrónico, vamos a hacer un último paso de configuración y a añadir algo de contenido a mandrill_settings.php.

Aquí tienes la lista de opciones que he identificado como útiles en este punto para el plugin:

Nombre de la opción Descripción
mandrill_emailer_use_mandrill Una casilla de verificación general para habilitar y deshabilitar la funcionalidad de Mandrill.
mandrill_emailer_username
Tu nombre de usuario de Mandrill
mandrill_emailer_api_key
Tu clave de API de Mandrill
mandrill_emailer_from_name
El nombre que se usará como remitente (el encabezado De) en los mensajes de correo electrónico enviados a través de Mandrill
mandrill_emailer_from_email
La dirección de correo electrónico que se usará como remitente (el encabezado De) en los mensajes de correo electrónico enviados a través de Mandrill.

Además de estos ajustes generales, necesitaremos los nombres de las plantillas de Mandrill utilizadas para el envío de los mensajes HTML. Volveremos a estas opciones en más adelante, cuando hablemos de correo electrónico HTML.

Como este tutorial trata sobre el envío de correo electrónico en lugar de la configuración, sólo voy a explicar el código de la página de configuración de forma breve. Puedes echar un vistazo más de cerca a cómo se ha construido la página examinando el archivo mandrill_settings.php disponible en la descarga adjunta. Para un buen tutorial sobre la creación de páginas de configuración, echa un vistazo a la Completa guía sobre la API de configuración de WordPress escrita por Tom McFarlin.

Crea una función para inicializar la página de opciones y regístrala como una acción con el gancho de acción admin_menu:

Vamos a repasar los puntos clave de la función:

En primer lugar, en las líneas 7-12, creamos la página de configuración en forma de submenú de la página de Opciones predeterminada de WordPress. mandrill_emailer_settings_page es el nombre de una función de devolución de llamada que realizará la representación de la página de configuración:

En segundo lugar, todavía en mandrill_emailer_settings_init, en las líneas 18-30, creamos dos secciones de configuración, una para la configuración general de Mandrill, como la clave de API y el nombre de usuario, y otra para los nombres de las plantillas que se utilizarán al enviar correo electrónico HTML. Aquí también, ambas secciones de configuración necesitan una función de devolución de llamada para realizar su representación:

Por último, lo que resta de mandrill_emailer_settings_init consiste en crear y registrar los campos de configuración reales uno por uno.

Por ejemplo, aquí tienes de nuevo la definición la configuración de clave de la API de Mandrill:

Y la función de devolución de llamada que representa el campo de entrada para la configuración:

Comprueba el código del plugin (adjunto) para la configuración restante. Y por último, con todos ellos en su sitio, así es cómo se verá la página de configuración:

Ahora, con el plugin y su página de configuración creados, podemos finalmente ponernos a trabajar en Mandrill y en el envío de correo electrónico.

Empecemos por hacer que todo el correo electrónico saliente pase por Mandrill.

Utilizar SMTP para enrutar todo el correo electrónico saliente a través de Mandrill

Si lo que nos preocupa es la entrega y el seguimiento, podemos solucionarlo con un muy poco código: sólo tenemos que enrutar el correo electrónico saliente para que pase a través del servidor de correo electrónico de Mandrill. De hecho, como mencioné anteriormente, ni siquiera necesitaremos la API (sin embargo, cesitamos dos de los ajustes anteriores: la clave de API y el nombre de usuario. El nombre de "De" y el correo electrónico son opcionales, pero es agradable tenerlas).

SMTP (abreviatura de Simple Mail Transfer Protocol) es el protocolo de correo estándar para el envío de correo electrónico, utilizado desde los orígenes de este (¡definido por primera vez en 1982!). Por lo tanto, enviar correo con Mandrill utilizando el protocolo SMTP es en realidad lo mismo que enviar correo a través de un proveedor de servicios de correo electrónico estándar.

Así es como puedes hacer esto en WordPress.

Paso 1: Crear una acción para personalizar la inicialización de PHPMailer

En WordPress, todo el envío de correo electrónico se realiza a través de la función wp_mail (puedes encontrar su definición en pluggable.php). La función hace todo tipo de validaciones de parámetros y formateo del correo electrónico y luego pasa el mensaje a la clase PHPMailer la cual se encarga de enviarlo finalmente. De forma predeterminada, PHPMailer está configurado para enviar el correo electrónico utilizando la función de correo electrónico mail de PHP.

Pero no estamos limitados a usar la configuración predeterminada: WordPress proporciona un gancho de acción, phpmailer_init que podemos usar para configurar PHPMailer de la manera que queramos. En este caso, queremos que utilice el protocolo SMTP y el servidor Mandrill (smtp.mandrillapp.com, puerto 587):

En las líneas 8-13, configuramos PHPMailer para utilizar una versión autenticada del protocolo SMTP y especificamos la URL y el puerto del servidor Mandrill.

En las líneas 16-17, recuperamos el nombre de usuario y la contraseña de los usuarios de las opciones de WordPress y los establecemos para pasarlos a PHPMailer

Por último, establecemos los encabezados From utilizando la configuración que creamos anteriormente. Si no se almacena ningún valor en la configuración, el nombre de "De" y el correo electrónico se generan de la misma manera que en la función de wp_mail predeterminada, utilizando la dirección URL del sitio.

Paso 2: Buscar y almacenar credenciales de API

Ahora hemos creado una acción para configurar PHPMailer para usar Mandrill en lugar de mail de PHP, pero antes de que pueda funcionar, necesitamos darle el nombre de usuario y la contraseña adecuados.

Para ello, inicia sesión en Mandrill (o crea una cuenta si aún no dispones de una). Una vez que hayas iniciado sesión, haz clic en SMTP & API Credentials en el menú desplegable superior derecho:

En la página SMTP & API Credentials, crea una nueva clave de API.

Para ello, comienza haciendo clic en el botón + New API Key. En su lugar aparecerá un menú para crear una nueva clave de API.

En el menú que aparece, escribe una descripción para la clave de API y haz clic en Create API Key. Si usas la API en varios sitios o aplicaciones, es una buena práctica crear una clave de API independiente para cada uno de ellos de manera que, si uno de ellos se ve comprometido, solo tienes que deshabilitar esa clave de API sin afectar a los demás sitios.

La clave de API se añade a la lista de claves de API. Copia la clave de API que acabas de crear y guárdala en las opciones de WordPress usando la página de configuración de Mandrill Emailer que creamos anteriormente. La dirección de correo electrónico que utilizas para iniciar sesión en tu cuenta de Mandrill es tu nombre de usuario.

Con la configuración guardada, estoy seguro de que deseas probar si el correo electrónico realmente es entregado por Mandrill en lugar de tu servidor web. Para ello, visita tu blog de WordPress como usuario sin haber iniciado sesión y deja un comentario. A continuación, comprueba tu bandeja de entrada de correo electrónico para ver de dónde vino el nuevo correo electrónico de notificación de comentarios:

Como se muestra en la captura de pantalla anterior, al menos si estás utilizando Gmail, verás mandrillapp.com mencionado como el remitente real del mensaje, identificado por la palabra "vía" justo después de la información que proporcionaste en la configuración como el nombre para From y el correo electrónico.

La prueba lo confirma: los mensajes de correo electrónico ahora están siendo enviados por Mandrill.

Pero si bien esto garantiza la capacidad de entrega, todavía podemos hacerlo mejor... ¡Es hora de mirar las plantillas!

4. Haz que el correo electrónico sea atractivo usando plantillas HTML

Ahora que hemos hecho que WordPress envíe todos nuestros correos electrónicos a través del servidor SMTP de Mandrill, es hora de llevar la integración un paso más allá y usar la API de Mandrill para enviar correo electrónico HTML.

Las plantillas son una práctica forma de separar el diseño del correo electrónico del código que se usa para enviarlo. En nuestro caso, esto significa que podemos diseñar una plantilla HTML que se adapte al tema del sitio y la marca y almacenarla en un lugar diferente fuera de la base de código del plugin para facilitar el mantenimiento. En un proyecto más grande, tal vez un diseñador trabajará en el HTML mientras que un programador escribe el código.

Ahora, tomaremos una de las acciones de correo electrónico predeterminadas en el flujo de WordPress, el nuevo mensaje de bienvenida del usuario, y lo reemplazaremos con nuestro propio mensaje de correo electrónico HTML enviado a través de Mandrill.

Paso 1: Crear el correo electrónico HTML

Comencemos diseñando el mensaje HTML. Voy a ir a través de los pasos bastante rápidamente, pero si deseas aprender más sobre el diseño de correo electrónico, aquí en Tuts+ tienes excelentes tutoriales y cursos para aprender.

Aquí tienes un simple boceto que hice para planear cómo se debe presentar el mensaje de bienvenida. El mensaje comenzará con un logotipo seguido de un breve texto de bienvenida y la información de la cuenta. En la parte inferior, habrá un enlace de vuelta al sitio:

Usando el boceto como guía, ahora crearemos una plantilla HTML básica.

Como puedes ver en el código de abajo, al escribir HTML para correos electrónicos, tendrás que renunciar a muchas de las mejores prácticas y escribir HTML como si estuvieses en 1995 de nuevo: sólo tienes que seguir adelante y utilizar tablas, colocar tu CSS en línea y hacer todas esas cosas malas que ya dejaste atrás hace mucho tiempo en la web.

Si no haces esto, algunos destinatarios de correo electrónico no verán el bonito diseño que creaste para ellos...

Esto es mucho HTML, aunque nada elegante, básicamente todo consiste en tablas anidadas y algunas líneas creadas con CSS insertado.

Cuando se abre en un navegador web, nuestra plantilla HTML se ve bastante bien. Pero todavía tenemos trabajo por hacer: toda la información que se muestra en la plantilla está codificada de forma rígida y necesita ser reemplazada por variables.

Paso 2: Coloca las variables en la plantilla

Con la plantilla HTML diseñada, nuestra siguiente tarea es marcar las secciones que cambiarán de un mensaje a otro:

  • Nombre
  • Apellido o apellidos
  • Nombre de usuario
  • Dirección de correo electrónico
  • Enlace de inicio de sesión

En las plantillas de Mandrill, puedes marcar contenido variable de dos maneras (ambas se utilizan también en las plantillas de MailChimp, así que si alguna vez has desarrollado una plantilla de newsletter, ya has visto esto):

Formato ¿Cómo funciona?
*|VARIABLE|* Con esta notación, puedes incrustar variables en cualquier lugar dentro de la plantilla. Es útil para texto incrustado en líneas de texto. Esta es también la única manera de incluir variables en el mensaje de texto sin formato.
mc:edit="VARIABLE"
Esta notación se puede utilizar en elementos HTML para definir que el contenido del elemento se reemplazará por el valor pasado por la VARIABLE.

Resulta útil cuando necesitas cambiar bloques de contenido más amplios, pasando incluso alguno de HTML.

Ahora, vamos a repasar las partes del HTML que queremos cambiar por variables.

Primero, la cabecera. Aquí queremos utilizar el nombre del usuario que acaba de registrarse. Crea una "variable merge" y llámala FIRST_NAME:

El texto de bienvenida es algo que se guarda mejor en la plantilla para facilitar la actualización, por lo tanto el siguiente lugar para las variables está en la tabla que contiene la información de la cuenta.

Pon las variables USER_NAME, PASSWORD, FIRST_NAME, LAST_NAME e EMAIL:

Por último, incluye el enlace LOGIN_URL para iniciar sesión en el sitio:

Y eso es todo. La plantilla está preparada para su uso.

Paso 4: Subir la plantilla a Mandrill

Ahora que hemos creado nuestra plantilla HTML, vamos a subirla a Mandrill para poder empezar a enviarla a nuestros nuevos usuarios.

Para crear una nueva plantilla en Mandrill, comienza eligiendo el elemento Templates en el menú desplegable Outbound:

En la página siguiente, se te pedirá que asignes un nombre a tu plantilla. El ID final de la plantilla se creará con este nombre y no se puede cambiar, así que tómate un tiempo para pensar cómo quieres llamar a la plantilla. Yo estoy llamando a la mía "Tutsplus New User Welcome" ("Bienvenida de nuevo usuario a Tutsplus"), que será tutsplus-new-user-welcome cuando se convierta en un ID.

Haz clic en Start Coding.

Ahora, puedes introducir tu HTML. Copia y pega la plantilla HTML en el amplio campo de texto de la derecha:

Guarda la plantilla con el botón Guardar borrador.

Paso 5: Incluir una versión de solo texto

Aunque la mayoría de los clientes de correo electrónico gestionan bien el correo electrónico HTML, todavía hay algunos luditas por ahí que sólo quieren leer sus correos electrónicos en texto sin formato. Para asegurarnos de que incluso estos usuarios reciben bien nuestros mensajes, necesitamos acordarnos de crear una versión en texto sin formato de la plantilla.

Para ello, utiliza la pestaña Text de la página de edición de la plantilla en el administrador de Mandrill:


Aparte del hecho de que no se puede utilizar HTML en la versión de texto sin formato, las cosas son más o menos iguales a lo de antes. Usando las mismas etiquetas de plantilla que arriba, vamos a crear una plantilla de texto sin formato:


Guarda la plantilla y haz que esté a disposición del plugin haciendo clic en Publish. Copia el ID de la plantilla y guárdalo en la configuración del plugin.

Y ahora, ya estamos preparados para enviar el mensaje. Es hora de escribir algo de código.

Hacer que WordPress envíe el mensaje HTML

Ahora que hemos creado nuestra plantilla HTML y la hemos subido a Mandrill, es hora de usarla. Para ello, primero crearemos una función para realizar la llamada a la API y luego reemplazaremos la nueva funcionalidad de notificación de usuario de WordPress para usar la nueva función.

Paso 1: Crear una función para enviar correo electrónico utilizando la API de Mandrill

Empecemos creando la función que enviará un mensaje de correo electrónico a través de la API de Mandrill mediante una plantilla HTML.

Y ahora, vamos a ver el código anterior con algo más de detalle.

En primer lugar, en la línea 13, inicializamos la API de Mandrill. La clave API se recupera de las opciones de WordPress.

En las líneas 15-30 encontrarás la misma funcionalidad para establecer la información del remitente que ya implementamos en la configuración de correo electrónico SMTP. (Este sería un buen lugar para algunas refactorización moviendo el análisis de from_email y from_name a sus propias funciones...).

A partir de ahí, pasamos a crear una matriz de destinatarios de correo electrónico (línea 33). Si estuvieses enviando a más de un destinatario, podrías añadirlos a la matriz de la siguiente manera:

Después, con los datos ahora formateados correctamente, lo juntamos todo (líneas 35-44) y recopilamos los parámetros en una matriz que denominamos $message. La mayor parte de la matriz es autoexplicativa, pero el último parámetro requiere alguna explicación.

Este es uno de los dos lugares donde pasamos nuestros datos variables a la plantilla. Como recuerdas de la plantilla que creamos anteriormente, una plantilla de Mandrill puede contener dos tipos de campos para colocar los datos variables. Para mantener las cosas sencillas para el diseñador, enviamos el mismo conjunto de variables en ambas opciones, primero aquí como global_merge_vars y luego de nuevo en la línea 46 como el segundo parámetro a la función de envío de correo electrónico sendTemplate.

Este es el esqueleto desnudo del uso del método de API sendTemplate y todo lo que necesitamos para la funcionalidad que hemos creado en este tutorial. Para el resto de los parámetros disponibles, consulta la documentación de la API. Uno de los más interesantes es merge_vars (que permite enviar parámetros específicos del destinatario, útil cuando se envía correo electrónico a varios usuarios a la vez).

Paso 2: Reemplazar la función de notificaciones

Una de las características agradables (y no demasiado conocidas) de WordPress desde el punto de vista de los desarrolladores de plugins es que cada función definida en pluggable.php puede ser reemplazada en un plugin. Si una función es definida en un plugin, esa versión de la función será utilizada en lugar de su par del núcleo de WordPress.

Esta es una potente característica y debes tener cuidado con ella (si muchos plugins empezaron a hacer todo esto a la vez, podría conducir a efectos secundarios no deseados) pero también es justo lo que necesitamos para lo que estamos haciendo.

Las notificaciones por correo electrónico cuando se añade un nuevo usuario son enviadas a través de la función wp_new_user_notification. Por lo tanto, esta es la que necesitamos reemplazar con nuestra propia función si queremos enviar nuestro propio mensaje de bienvenida a través de Mandrill.

Para ello, añade la siguiente función en index.php:

La primera parte de la función es exactamente igual que la original de pluggable.php (líneas 12-25). Ese bloque de código envía una notificación sobre el nuevo usuario al administrador.

Después de esto, las cosas se ponen más interesantes.

Ahora, en lugar de enviar un mensaje a través de wp_mail como hacemos al enviar notificaciones de administrador, para enviar el mensaje de bienvenida, usaremos mandrill_send_mail y la plantilla que acabamos de crear.

La pieza más interesante de esta función es la sección de las líneas 28-36 donde inicializamos los parámetros destinados a ser utilizados en la plantilla HTML. Los parámetros se pasan en forma de matriz que contiene otras matrices, representando cada matriz una variable:

Como puedes ver arriba, una definición de variable se almacena como una matriz que consta de dos elementos: el nombre de la variable (name) y el texto que la reemplazará en la plantilla (content).

Paso 3: Comprobaciones

Ahora, la funcionalidad está en su sitio, así que vamos a darle una oportunidad: En el administrador de WordPress, utiliza el menú Usuarios > Añadir nuevo para crear un nuevo usuario. Asegúrate de elegir una dirección de correo electrónico a la que tengas acceso para recibir el correo electrónico de bienvenida y poder inspeccionarlo.

Crea el nuevo usuario y espera la recepción del correo electrónico de bienvenida. Debería aparecer rápidamente y tener este aspecto:

¿Qué sigue?

Ahora hemos creado con éxito un plugin de WordPress que enruta toda la comunicación de correo electrónico saliente a través de Mandrill y también hemos creamos una plantilla de correo electrónico HTML para enviar un mensaje de bienvenida y agradable y fácil de usar a los nuevos miembros que se registren en el sitio.

El siguiente paso natural en la expansión del plugin sería añadir plantillas similares a todas las demás acciones de mensajería de WordPress. Primero para la notificación de administración sobre nuevo usuario que todavía hemos dejado intacta y después las otras tres funciones de mensajería que figuran en pluggable.php: wp_notify_postauthor, wp_notify_moderator y wp_password_change_notification.

Otra idea para ampliar el desarrollo sería mejorar la gestión de errores del plugin: Aunque siempre puedes usar la página de administración de Mandrill para rastrear la entrega y averiguar si algunos de tus mensajes salientes no llegaron al usuario (por ejemplo, si este escribió mal su dirección de correo electrónico), Mandrill también proporciona un conjunto de ganchos web que puedes usar para permitir que Mandrill notifique a tu sitio WordPress sobre esos eventos. La implementación de un gancho web está fuera del ámbito de este tutorial, pero es una buen método para tener más visibilidad sobre lo que sucede con tu correo electrónico una vez ha sido enviado.

Por último, también puedes usar la funcionalidad de programación de correo electrónico en Mandrill (una función de pago) para crear algo como una respuesta automática que le recuerde al usuario sobre de tu sitio, por ejemplo, una semana después del registro.

¡Feliz envío de correos electrónicos!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.