Cómo enviar emails con HTML en WordPress

El correo electrónico es, sin duda, una de las mejores herramientas que tenemos para mantener informados a nuestros usuarios. Por ejemplo, tanto Nelio A/B Testing como Nelio Content tienen implementadas notificaciones por correo electrónico para avisar a nuestros usuarios de cambios en su WordPress que requieren su atención:

• En Nelio A/B Testing, podemos, por ejemplo, recibir un correo electrónico informándonos de que ha finalizado uno de nuestros tests de forma automática porque se ha llegado a la conclusión de que existe una alternativa ganadora.
• Nelio Content, por su parte, es capaz de avisar a los usuarios del blog cuando cambian los estados de las entradas, cuando aparecen comentarios editoriales o cuando hay tareas pendientes.

En la entrada de hoy te explicaré cómo puedes enviar correos electrónicos desde WordPress y cómo formatearlos usando HTML.

Cómo enviar un correo electrónico desde WordPress

Para poder enviar correos electrónicos desde WordPress necesitas dos cosas: por un lado, debes configurar el envío de correos en WordPress siguiendo las instrucciones de tu hosting y, por otro lado, debes aprender a usar la función wp_mail de WordPress.

Tal y como puedes leer en la documentación de WordPress, la función wp_mail espera (como mínimo) tres parámetros: el o los destinatarios del correo, el asunto del mensaje y el cuerpo del email. Basante lógico, ¿no?

Por ejemplo, para enviar un correo como el anterior, solo necesitaríamos implementar una función parecida a la siguiente:

function send_email_on_status_change( $post, $old_status ) {
  $email = 'user@domain.com';
  $title = sprintf(
    __( 'Post status changed for "%s"', 'nelio' ),
    $post->post_title
  );
  $body = sprintf(
    __( 'Status was changed for post #%1$d "%2$s" by %3$s.', 'nelio' ),
    $post->ID,
    $post->post_title,
    wp_get_current_user()->display_name
  );
  // ...
  $body .= sprintf(
    __( "%1$s => %2$s", 'nelio' ),
    $old_status,
    $post->post_status
  );
  // ...
  wp_mail( $email, $title, $body );
}

Lo importante aquí es darte cuenta de que todo correo electrónico que se envía desde WordPress es, por defecto, texto plano, sin HTML. La ventaja de enviar correos con el formato text/plain es que se ven bien en todos los clientes de correo existentes, aunque el resultado sea un poco más pobre que el que conseguirías maquetando y usando una plantilla de correo con HTML.

En el caso de Nelio Content, por ejemplo, nosotros optamos por usar correos en texto plano. Pero, ¿y si queremos hacer algo más bonito?

Nelio A/B Testing

Me sorprendió mucho la calidad del plugin, lo fácil que fue configurarlo y el increíble soporte que me dio Nelio. Recomiendo encarecidamente usar Nelio A/B Testing.

Josette Millar

WordPress.org

Ver planes

Cómo usar HTML en un correo electrónico generado desde WordPress

Pues eso es precisamente lo que decidimos hacer para las notificaciones que se envían desde Nelio A/B Testing. Decidimos que queríamos crear unas notificaciones que resultaran visualmente más atractivas y optamos por algo tal que así:

El formato en el que se envía un correo electrónico se especifica en una cabecera llamada Content-Type. Por defecto, su valor en WordPress es text/plain, pero podemos cambiarlo a text/html usando el filtro wp_mail_content_type:

function send_email_on_test_finish( $test ) {
  $email = 'user@domain.com';
  $title = sprintf(
    __( 'Test "%s" finished', 'nelio' ),
    $test->post_title
  );
  $body = '...';
  $content_type = function() { return 'text/html'; };
  add_filter( 'wp_mail_content_type', $content_type );
  wp_mail( $email, $title, $body );
  remove_filter( 'wp_mail_content_type', $content_type );
}

Una vez tienes esto, ya casi estás listo para mandar tu primer correo formateado usando HTML. Por desgracia, WordPress no ofrece ningún mecanismo estándar para crear y usar plantillas HTML, así que depende totalmente de ti crear tu propia plantilla.

Suponiendo que tienes la plantilla en un fichero templates/email-template.php con algo parecido a esto:

<!DOCTYPE html PUBLIC "...">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title><?php echo esc_html( $title ); ?></title>
  <style>...</style>
</head>
<body>
  <p><?php echo $html; ?></p>
  ...
</body>
</html>

puedes usarla así:

function send_email_on_test_finish( $test ) {
  // ...
  $email = 'user@domain.com';
  $title = 'This is the title';
  $html  = 'This is the <strong>content!</strong>';
  ob_start();
  include './templates/template.php';
  $content = ob_get_clean();
  // ...
  wp_mail( $email, $title, $content );
}

Plugins para crear plantillas HTML

Como ya viene siendo habitual en el ecosistema de WordPress, existen numerosos plugins que te ayudan a crear plantillas HTML para que todos los correos que se envían desde tu WordPress salgan maquetados siguiendo el estilo que quieras. Un par de ejemplos son:

• WordPress Email Template Designer. Permite crear plantillas responsive totalmente personalizables sin tener que tocar nada de código. Dispone de muchas funcionalidades interesantes (como, por ejemplo, previsualización en tiempo real) y tiene un desarrollo muy activo.
• Email Templates. Te permite escoger el tipo de plantilla que quieras, personalizarla añadiendo un logo, cambiando colores, etc y, una vez configurado, se encarga de que todos los correos salientes usen dicha plantilla.

Aunque estos plugins pueden no ser lo que necesitas para mandar correos desde tu plugin, son muy útiles para ayudarte a generar una nueva plantilla que luego puedes extraer y empaquetar en tu plugin.

Espero que te haya gustado la entrada de hoy y, si así ha sido, no olvides compartirla con tus amigos. Y si tienes cualquier duda, comentario o sugerencia, dínoslo en la sección de comentarios y hablamos.

Imagen destacada de Erica Steeves en Unsplash.