Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)
Si quieres aprender a crear una plantilla de boletín de noticias por correo electrónico usando WordPress, has llegado al lugar correcto. Antes de empezar, vamos a asegurarnos de que entiendas completamente lo que estoy tratando de enseñar. Los resultados finales le darán una plantilla de página de WordPress que está diseñada para ser utilizada como una plantilla de boletín de correo electrónico mediante la importación de su URL con software de boletín de noticias por correo electrónico como GroupMail que responde a clientes de correo electrónico como Gmail o Outlook en cualquier dispositivo como móvil o tableta por lo que se mostrará muy bien. Pero espera que aún hay más: esta plantilla muestra las entradas más recientes de cualquier fuente RSS por lo que la newsletter de correo electrónico ya está terminada, a la espera de ser enviada. Esa explicación es muy amplia como para entrar en ella, así que podría ser mejor si nos fijamos en el ejemplo en vivo.
Si estás leyendo esta frase, eso significa que estás listo para crear una plantilla analizadora de RSS de newsletter responsiva, así que sin más preámbulo, comencemos.
Creación de la plantilla de página
- Abre un nuevo archivo en el editor de texto de tu elección. Antes de empezar a guardar el archivo como pagina-newsletter-rss-responsiva.php. Lo más importante es iniciar el nombre del archivo con 'page' para que se organice bien en tu cuenta de alojamiento y no se rompa porque los servidores odian eso.
- En la parte superior del nuevo archivo comienzas indicándole a WordPress el nombre de nuestra plantilla de página, el cual se mostrará en el menú desplegable plantilla de página de WordPress.
1
<?php2
/* Template Name: Responsive RSS Newsletter */3
?> - A continuación, añade el elemento meta de la ventana gráfica dentro de
<head>para que el explorador represente la página a una escala más legible. Al navegar por la web desde un smartphone notarás cómo se escalan los sitios web para que se ajusten a los parámetros del dispositivo, lo que hace que exista mucha ampliación y disminución. Esto es por comodidad para el usuario, ya que la mayoría de los sitios web no disponen de un sitio móvil. Por lo tanto, yo utilicé<meta name="viewport" content="width=device-width, initial-scale=1,">para que el ancho del dispositivo se utilice como ancho de la ventana gráfica y deshabilite la escala inicial. Dado que el zoom automático realmente puede estropear los elementos de diseño, usémaximum-scale=1, user-scalable=0, lo cual eliminará la funcionalidad de zoom por completo para que el usuario no pueda redimensionar el diseño. Esto bloqueará el diseño a los parámetros del dispositivo. Cuando combinas la etiqueta meta de escala más legible y la etiqueta de aumento automático bloqueada obtienes los siguientes resultados:1
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
- Vamos a hacer que
<body>no tenga ningún espaciado/relleno alrededor de los bordes, para ello añade la propiedadmargin:0. Además, WebKit (el navegador que representa tus correos electrónicos HTML en el iPhone, Android y otros dispositivos) tiene una excelente característica que ajustará automáticamente el tamaño del texto a medida que cambie la ventana gráfica para ofrecerte la mejor experiencia de lectura, yo recomiendo desactivar el cambio de tamaño de fuente; para ello, añade la propiedad-webkit-text-size-adjust:none.1
<body style="margin:0; -webkit-text-size-adjust:none;">
- Crea un gráfico de cabecera de hasta 900px de ancho, de esa manera el gráfico no se verá pixelado en un monitor de pantalla ancha y se verá limpio en un dispositivo móvil. Pero recuerda comprimir el gráfico tanto como sea posible, de manera que no ralentice demasiado la carga de imágenes dentro del cliente de correo electrónico para el usuario. Además, no añadas ninguna propiedad alt o título dentro de la etiqueta
<img>o se mostrará como teaser dentro de la bandeja de entrada del suscriptor. Para asegurarte de que el gráfico de cabecera se muestre perfectamente bien en cualquier dispositivo añade un ancho del 100%, como se puede ver en el ejemplo.1
<img border="0" src="images/header.jpg" width="100%"><br>
- Ahora vamos a recuperar una fuente externa y a analizarla mediante el uso de la función de WordPress
fetch_feedpegando el siguiente código en tu<body>. Esto hace que la plantilla valga la pena. El analizador RSS mostrará las entradas más recientes de cualquier fuente RSS, por lo que cuando estés listo para enviar tu newsletter, esta ya estará poblada con las historias más recientes, por lo que no necesitas realizar trabajo adicional para llenarla con contenido. Este truco se logra importando tu URL utilizando software de newsletters como GroupMail, pero llegaré a esto más adelante. Lo que ofrece esta plantilla es similar a Feedburner, que construye tu newsletter por ti, con tu contenido más reciente. Pero, en lugar de que Feedburner la envíe automáticamente con posibles errores o contenido que no desees que aparezca, esta plantilla te ayuda a enviar rápidamente tu newsletter con la opción de editarla antes de su envío.1
<!-- RSS Parser -->2
<?php3
if(function_exists('fetch_feed')) {
4
include_once(ABSPATH . WPINC . '/feed.php'); // the file to rss feed generator
5
$feed = fetch_feed('http://rss1.smashingmagazine.com/feed/'); // specify the rss feed
6
$limit = $feed->get_item_quantity(3); // specify number of items
7
$items = $feed->get_items(0, $limit); // create an array of items
8
}9
if ($limit == 0) {
10
echo '<div>The feed is either empty or unavailable.</div>';
11
}12
else {
13
foreach ($items as $item) : ?>
14
<!-- How the RSS posts display -->15
<table width="100%" cellpadding="0" cellspacing="0" border="0">
16
<tr>17
<td style="border-bottom:#2591c7 solid 1px; border-top: #54b9ec solid 1px; background:#3ca7dd" width="1%"> </td>
18
<td width="90%" align="left" style="padding:12px; border-right: #e1e1e1 solid 1px; border-bottom:#CDCDCD solid 1px; border-top: #FCFCFC solid 1px; background: #f5f5f5;">
19
<!-- Title and hyperlink -->20
<div style="margin-top:0; margin-bottom:0px; padding-top:0; padding-bottom:0;"><a target="_blank" href="<?php echo $item->get_permalink(); ?>" alt="<?php echo $item->get_title(); ?>" style="color:#4E4946; text-decoration:none; font-size:100%; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:normal; font-weight:bold;"><?php echo $item->get_title(); ?></a></div>
21
</td>22
<td width="9%" align="center" style="background: #eeeeee; display: table-cell; vertical-align: middle; border-bottom:#CDCDCD solid 1px; border-top: #FCFCFC solid 1px;"><a target="_blank" href="<?php echo $item->get_permalink(); ?>" alt="<?php echo $item->get_title(); ?>"><img src="images/mobile-open-button.gif" border="0" /></a>
23
</td>24
</tr>25
</table> <!-- End of post display -->
26
<?php27
endforeach;
28
}29
?> <!-- End of RSS Parser -->
Para que el código anterior funcione asegúrate de que el archivo de feed.php se encuentre en la ubicación correcta:
include_once(ABSPATH . WPINC . "/feed.php").En segundo lugar, añade tu fuente RSS
$feed = fetch_feed("http://rss1.smashingmagazine.com/feed/").En tercer lugar, introduce la cantidad de entradas que quieras mostrar
$limit = $feed->get_item_quantity(3).A continuación, cambia tu mensaje de error
if ($limit == 0) echo '<div>El feed está vacío o no está disponible.</div>'.Ahora la parte divertida, diseñar cómo aparecen las entradas. Dado que esta plantilla está diseñada para todos los dispositivos, incluido el móvil, es importante que nos quedemos con un formato de una columna para obtener los mejores resultados. Dos columnas son aceptables, pero debes saber que serían más difíciles de leer en un dispositivo pequeño como un iPhone.
Para crear el diseño responsivo, comienza con una tabla (
<table>) con 3 columnas que suman un ancho del 100%.1
<table width="100%" cellpadding="0" cellspacing="0" border="0">
2
<tr>3
<td width="1%"></td>
4
<td width="90%" align="left"></td>
5
<td width="9%" align="center"></td>
6
</tr>7
</table>Es simple lo sé, pero funciona. Un usuario puede redimensionar su navegador y obtener un diseño responsivo de aspecto agradable basado en el 100% de la anchura. Demasiados clientes de correo electrónico (Gmail) no admiten consultas de medios CSS3, que es cómo podrías aplicar hojas de estilo diferentes para una pantalla responsiva, por lo que es más seguro tener hojas de estilo en línea en lugar de externas. Ten en cuenta el HTML y CSS compatible que funciona en los clientes de correo electrónico más populares. De esta manera, el diseño será responsivo en todos los dispositivos y clientes de correo electrónico.
La primera columna con un 1% de ancho es únicamente para fines de diseño. Añadir un color de fondo y color de borde te ayuda a darle un aspecto agradable al diseño.
1
<td style="border-bottom:#2591c7 solid 1px; border-top: #54b9ec solid 1px; background:#3ca7dd" width="1%"> </td>
La segunda columna es donde está el título, ocupando el 90% de la anchura. El título es un hipervínculo sobre el que se puede hacer clic para dirigirse a la publicación original. Para mostrar el título de la fuente RSS, utiliza el código PHP
<?php echo $item->get_title(); ?>. Para obtener el permalink utiliza el código PHP<?php echo $item->get_permalink(); ?>.Puedes mostrar una descripción procedente del feed
<?php ($item->get_description(), 0, 100); ?>, pero ten en cuenta que el diseño puede romperse dependiendo de la fuente RSS que estés utilizando. Y desafortunadamente no puedes mostrar ninguna imagen de tu feed, incluso aunque tu feed la ofrezca. Una solución podría consistir en la instalación de un plugin de WordPress.1
<td width="90%" align="left" style="padding:12px; border-right: #e1e1e1 solid 1px; border-bottom:#CDCDCD solid 1px; border-top: #FCFCFC solid 1px; background: #f5f5f5;"><div style="margin-top:0; margin-bottom:0px; padding-top:0; padding-bottom:0;"><a target="_blank" href="<?php echo $item->get_permalink(); ?>" alt="<?php echo $item->get_title(); ?>" style="color:#4E4946; text-decoration:none; font-size:100%; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:normal; font-weight:bold;"><?php echo $item->get_title(); ?></a></div></td>
La tercera columna con un 9% de ancho muestra un botón de 44x44 píxeles que contiene un hipervínculo a la publicación original (Apple dice que el toque medio del dedo es de 44x44). Esto le proporciona al usuario un diseño real de aplicación con otra opción sobre la que se puede hacer clic para leer la historia. Una vez más, recuerda comprimir tus gráficos tanto como sea posible.
1
<td width="9%" align="center" style="background: #eeeeee; display: table-cell; vertical-align: middle; border-bottom:#CDCDCD solid 1px; border-top: #FCFCFC solid 1px;"><a target="_blank" href="<?php echo $item->get_permalink(); ?>" alt="<?php echo $item->get_title(); ?>"><img src="images/mobile-open-button.gif" border="0" /></a></td>
Eso es todo, hemos terminado con la plantilla. Pero, no tengas miedo de llevarla más lejos añadiendo una sección de pie de página con redes sociales, información genérica de contacto y un enlace de cancelación de la suscripción. Simplemente recuerda mantener la anchura al 100%.
Cargar tu archivo
Dado que hemos finalizado la plantilla de página, carga el archivo en el servidor FTP, dentro de la carpeta del tema que tengas instalada. Por ejemplo: wp-content/themes/theme-folder.
Crear la página de WordPress
Inicia sesión en WordPress y crea una página. Al crear la página recuerda cambiar la plantilla a la opción "Newsletter responsiva RSS" desde el menú desplegable. Para el título, no es importante que sea amigable con el SEO, porque la plantilla está diseñada específicamente para una newsletter, pero como la plantilla es responsiva seguirá viéndose correctamente online. Pulsa publicar para que la URL esté activa públicamente, y para que puedas copiar y pegar la URL en tu software de newsletters.
Importar tu URL a tu software de newsletters
Abre tu software de newsletters. Yo utilizo GroupMail para hacer este trabajo, pero casi cualquier otro software de newsletters servirá para este fin. Crea un nuevo mensaje y busca la opción importar URL web. Dependiendo del software, puede denominarlo de otra forma, pero la idea es tomar un sitio web y convertirlo en una newsletter importando simplemente una URL.
Los resultados te proporcionarán una newsletter preparada para mostrar contenido responsivo que funcione en la mayoría de los clientes de correo electrónico y que constituye una excelente alternativa a Feedburner. Sin necesitar añadir contenido a la newsletter, si tener que liarse con su diseño, ya está preparada para su envío. Pero lo que es mejor, antes de enviar newsletter tendrás la opción de editar su contenido, por lo que no habrá errores o contenido que no quieras mostrar en la misma.
Ahora que has terminado, prueba cómo se muestra el diseño responsivo minimizando tu navegador o visualizándolo en The Responsinator.
