Todos saben cómo hacer un boletín informativo. Muchas personas saben cómo crear cadenas desencadenantes. Alguien sabe cómo configurar un boletín informativo a partir del feed RSS de un blog. Tuvimos que profundizar más, porque queríamos que nuestro boletín no fuera simple, sino hermoso y detallado. Después de todo, está hecho de un blog interesante, en el que también dedicamos mucho esfuerzo.
Por cada detalle en una carta de aspecto simple, tuve que pelear con este mono lindo. Todo salió bien. Te contamos cómo.
Mailhimp es un servicio de interfaz en inglés y a veces ilógico. Pero él sabe cuánto y es tan popular que se le escribieron instrucciones meticulosas para entregar contenido a los lectores de todas las formas posibles.
También hemos elegido Mailhimp para nuestras publicaciones en el blog de PromoPult. Una de las características de Mailhimp son las campañas automáticas. Puede programar envíos regulares, cartas individuales, configurar cartas de bienvenida y mucho más.
Esta historia trata sobre la configuración de la publicación automática de publicaciones de blog. Un resumen de materiales nuevos al correo del suscriptor una vez por semana.
La opción estándar para el enlace automático y por qué no nos convenía
Mailhimp tiene una excelente documentación sobre cualquier función, y específicamente sobre esto también: comparta sus publicaciones de blog con Mailchimp . También se pueden encontrar traducciones al ruso, de diversos grados de adecuación.
Brevemente, lo que necesita para hacer un enlace automático:
- Cree una fuente RSS separada para MailChimp (o incluso no cree, pero use una fuente estándar).
- Cree una campaña, especifique la fuente, configure las condiciones de envío.
- Crea y selecciona una plantilla.
- Listo Eres increible!
Lo que no nos convenía es que es simplemente imposible agregar cualquiera de nuestras cosas.
Hay datos básicos de la fuente RSS que Mailhimp entiende:
- Información básica sobre el feed (título, enlace, descripción, fecha de formación o actualización del feed) -
*|RSSFEED|* . - Enlace a una etiqueta de publicación separada
*|RSSFEED:URL|* , mira el <link> dentro del <item> (en adelante). - El título de una sola publicación es la etiqueta
*|RSSITEM:TITLE|* , mira <title> . - Fecha de publicación de una sola publicación - etiqueta
*|RSSITEM:DATE|* , mire <pubDate> . - Anuncio de texto de una etiqueta posterior
*|RSSITEM:CONTENT|* , mire <description> , si esta etiqueta no está dentro de <item> - MailChimp mira <content:encoded> . Puede usar etiquetas HTML dentro.
- El contenido completo de una sola publicación es la etiqueta
*|RSSITEM:CONTENT_FULL|* , mira <content:encoded> . - Imagen de una publicación, a menudo una vista previa ( miniatura en términos de WordPress) - etiqueta
*|RSSITEM:IMAGE|* , mira <media:content> y no se olvide de etiquetas y atributos adicionales para archivos adjuntos de medios : marcas de edad, información sobre el archivo en sí Y así sucesivamente.
Y tenemos cosas adicionales en una publicación separada:
- Contador de comentarios
- Ver contador;
- Como contador
- Quiero mostrar la fecha de publicación de la publicación en formato humano : en primer lugar, en ruso, con declinación y si la publicación se publicó este año, no muestre el año de publicación (ahora todo funciona en el blog, en letras quiero la misma atención a los detalles) ;
- Cubierta de publicación personalizada separada, que necesita alcanzar de alguna manera;
- Categoría con un enlace a todas las publicaciones de la categoría.
Y no puede incluir esto en un feed RSS normal: no hay etiquetas correspondientes. Las etiquetas personalizadas de MailChimp no entienden y no se debe culpar por ello. Necesitamos buscar una solución que se adapte a todos y que no se rompa.
Los datos que deben mostrarse en una tarjeta postal separada en la plantilla de resumen están vinculados a la apariencia. El diseñador dibujó, la máquina de escribir sufrió mucho e inventó la carta.
Tarjeta postal del blog PromoPult en el resumen semanal
Cómo resolvimos el problema
Crear canales RSS
Lo primero que debe hacer es crear una fuente RSS separada para MailChimp. Ya hay varias fuentes similares en el blog PromoPult: para Yandex.Zen y para las páginas Turbo .
Puede crear un nuevo feed a través de add_feed () . Aquí está el código en el archivo de función del tema:
functions.php:
add_action( 'init', 'customRSSforMC' ); function customRSSforMC() { add_feed( 'mchimp', 'customRSSforMCFunc' ); } function customRSSforMCFunc() { get_template_part( 'rss', 'mchimp' ); }
En la línea No. 7 get_template_part ( 'rss', 'mchimp' ); - indica que la plantilla para el feed se encuentra en la raíz de la carpeta del tema y se llama rss-zen.php .
Después de crear el archivo y agregar la función, debe ir al panel de administración de WordPress, la configuración del CNC: “Consola → Configuración → Enlaces permanentes” y hacer clic en el botón “Guardar cambios” para que WordPress actualice la configuración de /feed/URL y se abra en el /feed/URL en el primer parámetro de la línea No. 4 Nuevo feed RSS.
Debe hacer esto una vez al crear la cinta.
Vea nuestro ejemplo: https://blog.promopult.ru/feed/mchimp
¿Qué hay dentro de la cinta?
Dentro del feed en sí hay un bucle de publicación regular de WordPress: query_posts () . Esto le permite seleccionar y filtrar publicaciones de manera muy flexible: como si estuviera configurando categorías individuales, páginas con selecciones, archivos y todo lo que necesita para publicaciones de WordPress.
Pero antes de llegar a la solución perfecta al problema, hubo varios intentos de agrupar los datos importantes para escribir dentro de los diseños estándar de los canales RSS y usarlos en MailChimp.
Por ejemplo, había una opción para el contador de comentarios :
<item> [...] <title><?php the_title_rss(); ?></title> <link><?php the_permalink_rss(); ?>?utm_source=newsletter</link> // 1, <?php if (get_comments_number() >= 1) { ?> <commentsCounter><?php comments_number('0', '1', '%'); ?></commentsCounter> <?php } ?> [...] </item>
Esta opción, por supuesto, funciona en términos de datos: todo lo que se necesita se obtiene y se muestra correctamente. Pero MailChimp no entiende la <commentsCounter> , como cualquier otra etiqueta no estándar.
También, por ejemplo, con fechas. MailChimp tiene su propia etiqueta: *|RSSITEM:DATE:d/m/y|* , y puede pasarle las opciones de formato de fecha . Pero, desafortunadamente, en la carta no parece humana en absoluto. Sobre la traducción de la fecha en general, no se puede hablar.
Otro problema son las fotos. Has sufrido e inventado tu hermosa escritura. Necesitas mostrar una imagen. En la plantilla de correo electrónico, haces esto:
<img src="*|RSSITEM:IMAGE|*" alt="*|RSSITEM:TITLE|*" />
Pero el analizador de MailChimp puede venir y romper el diseño, agregando sus propiedades, clases y otro código a la etiqueta de imagen <img ... /> .
Consejo Si utiliza etiquetas y fuentes estándar, no olvide habilitar la casilla de verificación " Cambiar el tamaño de las imágenes de la fuente RSS de acuerdo con la plantilla " en la configuración de la campaña:
Conclusiones intermedias: algo sale mal, las opciones estándar no son suficientes, la carta es terrible y no humana. Los datos no estándar no se pueden mostrar.
Hacer una finta con nuestros oídos: marcar todo nosotros mismos
Si no se puede hacer nada estándar en el feed RSS, de modo que el analizador del servicio MailChimp lo entienda correctamente, entonces puede transferir el código marcado y doblado terminado para la tarjeta postal simplemente en la
<description> <item> separado en el feed.
Solo hay un signo menos: todos los estilos de escritura deben estar en línea, es decir, todo lo que se describe a través de .class convierte en estilos en el atributo style=”...” .
<!-- : --> <style> .post-meta { Margin: 8px 0; } .post-category { border-radius: 3px; border: #adb2b2 1px solid; color: #adb2b2 !important; border-bottom: #adb2b2 1px solid !important; padding: 2px 6px; font-size: 13px; line-height: 13px; Margin: 0 8px 0 0; } </style> <div class="post-meta"> <a href="https://blog.promopult.ru/category/seo" target="_blank" class="post-category">SEO: </a> </div> <!-- : --> <div style="Margin: 8px 0;"> <a href="https://blog.promopult.ru/category/seo?utm_source=newsletter" target="_blank" style="Margin: 0 8px 0 0; border: #adb2b2 1px solid; border-bottom: #adb2b2 1px solid !important; border-radius: 3px; color: #adb2b2 !important; font-size: 13px; line-height: 13px; padding: 2px 6px; text-decoration: none;">SEO: </a> </div>
Para el diseño de las letras del blog, se usó "Pechkin", un colector de plantillas de letras que recolecta una letra de bloques y estilos de líneas en sí. También puede usar la línea de estilo en línea, por ejemplo, Premailer.io .
Hay un ciclo de alimentación disponible en la plantilla de alimentación RSS. Por lo tanto, puede tirar y dar forma a todo lo que desee y necesite.
El primer enfoque para la solución fue parcial: dejar el título, la url, las etiquetas de descripción breve como estándar, pero la metainformación de la publicación: vistas, me gusta, comentarios, categoría y fecha de publicación deben formarse como una pieza separada de código HTML e insertarse en la ubicación de marcado deseada.
Esta opción también tuvo que ser abandonada debido a un diseño roto y la falta de control sobre el diseño y los estilos de imagen. Y luego transfiera todo el marcado del bloque de la tarjeta postal a la <description> .
<?php while (have_posts()): the_post(); ?> <item> <description><![CDATA[ <div class="post-card"> <?php if ( get_post_meta($post->ID, 'imga', true) ) { ?> <div class="post-card__img"> <a href="<?php the_permalink(); ?>?utm_source=newsletter" target="_blank"> <img src="<?php echo $postImg[0]; ?>" alt="<?php the_title(); ?>"> </a> </div> <?php } ?> <div class="post-card__info"> <h2> <a href="<?php the_permalink(); ?>?utm_source=newsletter"><?php the_title(); ?></a> </h2> <p> <a href="<?php the_permalink(); ?>?utm_source=newsletter"> <?php if ( !empty( get_post_meta($post->ID, 'intro', true) ) ) { echo get_post_meta($post->ID, 'intro', true); } else { $content = get_the_content(); $trimmed_content = wp_trim_words( $content, 12, '...' ); echo $trimmed_content; } ?> </a> </p> <div> <p> <?php if (get_the_date('Y') == date('Y')) { the_time('j F'); } else { the_time('j F Y'); } ?>, <?php $categories = get_the_category(); if( $categories[0] ) { echo '<a href="' . get_category_link($categories[0]->term_id ) . '?utm_source=newsletter">'. $categories[0]->name . '</a>'; } ?> <?php if(function_exists('the_views')) { ?> <span> <span> <img src="icon-views.png" alt=" "> </span> <span class="item__text"><?php the_views(); ?></span> </span> <?php } ?> <?php if (function_exists('get_simple_likes_counter')) { if (get_simple_likes_counter( get_the_ID() ) >= 1) { ?> <span> <span class="item__icon"> <img src="icon-like.png" alt=" "> </span> <span><?php echo get_simple_likes_counter( get_the_ID() ); ?></span> </span> <?php } } ?> <?php if (get_comments_number() >= 1) { ?> <span> <span> <img src="icon-comments.png" alt=" "> </span> <span><?php comments_number('0', '1', '%'); ?></span> </span> <?php } ?> </p> </div> </div> </div> ]]></description> </item> <?php endwhile; wp_reset_query(); ?>
No hay estilos en línea en el código de muestra para que todo se vea ordenado. La versión de combate de la cinta se entrega con marcado completo y estilos.
Todas las direcciones para gráficos en el ejemplo también están simplificadas. En la versión de combate, todas las imágenes, iconos, fotografías y todo lo que es importante para escribir se cargan en el panel de administración de MailChimp a través de Content Studio , y las plantillas ya usan la dirección completa para los atributos src- de las <img /> .
En las líneas No. 20-24, seleccionamos la versión del anuncio de texto (introducción) del artículo. Si la costumbre se completa con las propiedades de publicación en campos arbitrarios del registro - get_post_meta () , muéstrela, si no está allí, muestre lo que hay en get_the_content () .
También seleccione una imagen de portada. Tenemos dos imágenes asociadas con el artículo: una pequeña vista previa (que se muestra en la tarjeta postal en la página principal) y una portada desde el encabezado de la publicación. Toma una gran tapadera.
Un ejemplo de un encabezado con un fondo en una publicación de blog de PromoPult
Como todo esto sucede en el ciclo estándar de WordPress, todos los métodos de clasificación están disponibles. Por ejemplo, muestre los más vistos y favoritos en los últimos 12 días, clasificando de más a menos me gusta.
Salida de contenido del feed en la plantilla de correo electrónico
Dado que todos los datos de una sola tarjeta postal se encuentran dentro de la etiqueta <description> incrustada en un <item> separado, solo tiene que mostrarlo en la plantilla de mensaje:
<h1> PromoPult</h1> <p>*|RSSFEED:DESCRIPTION|*</p> *|RSSITEMS:|* *|RSSITEM:CONTENT|* *|END:RSSITEMS|*
Los datos se muestran correctamente, el código HTML se inserta en un bucle y la campaña automática funciona.
Línea separada sobre RSSFEED y FEEDBLOCK
¿Cuál es la diferencia entre *|RSSFEED|* y *|FEEDBLOCK|*?
Es fácil descubrir las diferencias:
*|FEEDBLOCK|* se puede usar dentro de cualquier correo electrónico y plantillas de campaña. Por ejemplo, si desea hablar sobre las últimas publicaciones en un boletín periódico, úselo. Puede especificar un enlace a cualquier fuente RSS.*|RSSFEED|* solo funciona en campañas automáticas y, como fuente, ve lo que se especifica en la configuración de la campaña.
TOTAL: si todo es estándar y fácil para usted, use las herramientas estándar de MailChimp y no se preocupe
Pero si el diseño de su blog y las listas de correo están especialmente diseñadas y coordinadas tres veces con una pelea, si desea agregar los datos disponibles a los correos electrónicos automáticos o al menos declarar la fecha en ruso, tendrá que equivocarse un poco y enviar datos empaquetados ya preparados a MailChimp.
Cómo, le dijimos.
Enlaces sobre el tema de los canales RSS en MailChimp: