Esta tontería que ves por aquí lleva literalmente AÑOS quitándome el sueño.
Te lo digo en serio.
Me explico.
Si eres desarrollador WordPress supongo que sabrás identificar las páginas que están diseñadas mediante el framework de DIVI, uno de los grandes themes de pago de WordPress.
PabloYglesias.com, CyberBrainers.com, EliminamosContenido.com y prácticamente todos mis clientes de presencia digital a los que le hemos hecho la página estos últimos años utilizan DIVI (ES) como base.
Me parece hoy en día el mejor framework de plantillas que hay. Está continuamente actualizándose, es SEO-Friendly, y en definitiva, que me facilita mucho el trabajo (y a los clientes entenderlo una vez hemos terminado el desarrollo) y me he acabado especializando en él.
Sin embargo, hay una única cosa que no me gusta una mierda de DIVI, y es que a los formularios nativos de la plantilla no le puedes personalizar el asunto.
¿Que a qué me refiero?
Pues que siempre, siempre, el email que envía el formulario de contacto de DIVI tiene como asunto un escueto:
Nuevo mensaje de %%NOMBREDELAWEB%%
Algo que, de nuevo, no sería un gran problema… sino fuera porque los gestores de correo modernos, como GMail, unifican en un mismo hilo los correos que reciben con el mismo asunto y la misma dirección de correo.
Y claro, un formulario de contacto en la web es un correo que en DIVI siempre tiene el mismo asunto, y cuya dirección de correo es… ¡la de la propia web!
Conclusión: Pues que si te llegan dos o tres correos el mismo día, a ojos de GMail es un hilo, pese a que sean de potenciales clientes distintos.
Índice de contenido
Cómo personalizar el asunto del correo en DIVI
Como decía, un servidor ya estuvo hace años buscando soluciones, y por supuesto la encontré… pero requiere modificar un archivo de la propia plantilla.
En particular, /includes/builder/module/ContactForm.php.
Me lo sé hasta de memoria. Imagínate las veces que lo he modificado…
Pues bien, en este archivo hay que buscar sobre la línea 650 (va cambiando según la versión de DIVI) que dice:
__( 'New Message From %1$s%2$s', 'et_builder' ),Por, por ejemplo, una como esta:
__( 'Mensaje en NOMBREDELAWEB de: '.$processed_fields_values[email][value], 'et_builder' ),Por supuesto, cambiando NOMBREDELAWEB por lo que proceda.
Gracias a esto, en el asunto de cada email vendrá el email de la persona que nos ha escrito. Y, por tanto, cada contacto de diferente persona será, a ojos de los gestores actuales, un hilo distinto.
Justo lo que necesitamos.
Problema resuelto, ¿Verdad?
Pues no.
Porque esto funcionará… mientras no actualicemos la plantilla. Y como DIVI, afortunadamente, se actualiza cada poco, te puedes imaginar el jaleo que es.
Prácticamente cada mes me tocaba dos o tres veces volver a modificar esta mísera línea en cada página.
Que seguramente estás leyendo esto y pensando… ¡Hombre Pablo, para eso están los child themes!
Y tienes razón, el problema es que modificar este archivo en un Child Theme no es tan sencillo como volver a crearlo en el mismo directorio que estaría en la plantilla inicial.
Créeme que lo he probado, y no funciona.
Hay que hacer un trabajo extra.
Uno que no he hecho hasta hace relativamente poco tiempo gracias a descubrir esta entrada (EN) en el blog de la compañía (la de veces que se habrán quejado los clientes de esto…). Y que he tenido que ir modificando porque las versiones iniciales me funcionaban solo a veces.
Cómo modificar un archivo profundo de DIVI mediante un Child Theme
Básicamente, un child theme, como su propio nombre indica, es una plantilla hija que hereda todo el contenido de otra plantilla.
En WordPress se utiliza para poder modificar código de la plantilla principal… y que cuando esta se actualice, no tengamos que volver a cambiarlo.
Pero, como decía, en DIVI modificar automáticamente mediante un child theme este archivo, que no está en el directorio /includes/, sino en /includes/builder/module/ (es decir, bastante más profundo), requiere unos pasos extra.
Por aquí los tienes:
Creamos el child Theme de la forma habitual
No me voy a parar mucho en esto. Básicamente necesitamos:
- Crear otra carpeta dentro de la carpeta Themes de WordPress con el nombre que queramos,
- incluirle un archivo Style.css que en su interior tenga lo siguiente:
/*
Theme Name: Divi-Child
Description: Un tema hijo creado para albergar las modificaciones del tema Divi padre creado por Elegant Themes.
Author: Pablo F. Iglesias www.pabloyglesias.com
Template: Divi
*/- Incluirle un archivo screenshot.png si queremos que cuando busquemos la plantilla dentro del administrador de plantillas, esta tenga una foto.
- Crearle el archivo functions.php, con el siguiente código:
<?php
/*
=== Load parent Styles ===
*/
function dc_enqueue_styles() {
wp_enqueue_style( 'divi-parent', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'divi-parent' ) );
}
add_action( 'wp_enqueue_scripts', 'dc_enqueue_styles' );Con estos pasos, ya tendríamos un child theme normal. Para DIVI o para loq ue nos de la gana.
Creamos el subdirectorio /includes/ en el child theme
Y dentro de él, copiamos (no cortar, copiar, recuerda) el archivo ContactForm.php que teníamos previamente modificado.
Tal y como expliqué al principio de este tutorial.
Modificamos el archivo functions.php del child theme
Al archivo que antes teníamos creado, hay que incluirle el siguiente código:
/*================================================
#Load custom Contact Form Module
================================================*/
function divi_custom_contact_form() {
get_template_part( '/includes/ContactForm' );
$dcfm = new Custom_ET_Builder_Module_Contact_Form();
remove_shortcode( 'et_pb_contact_form' );
add_shortcode( 'et_pb_contact_form', array( $dcfm, '_render' ) );
}
add_action( 'et_builder_ready', 'divi_custom_contact_form' );
function divi_custom_contact_form_class( $classlist ) {
// Contact Form Module 'classname' overwrite.
$classlist['et_pb_contact_form'] = array( 'classname' => 'Custom_ET_Builder_Module_Contact_Form',);
return $classlist;
}
add_filter( 'et_module_classes', 'divi_custom_contact_form_class' );Modificamos el archivo ContactForm.php del child theme
En varios puntos.
A saber:
Cambiamos la primera línea:
class ET_Builder_Module_Contact_Form extends ET_Builder_Module_Type_WithSpamProtectionPor:
class Custom_ET_Builder_Module_Contact_Form extends ET_Builder_Module_Type_WithSpamProtectionAdemás, remplazamos $this->vb_support = ‘on’; por $this->vb_support = ‘off’;
Y, por último, eliminamos en la última línea (o de las últimas) la siguiente línea:
new ET_Builder_Module_Contact_Form ();Lo subimos todo al servidor mediante SSH o FTP, y luego, desde el administrador de WordPress, activamos la plantilla hija.
Así de fácil…
AÑOS llevo arrastrando este problema.
¡AÑOS!
________
¿Quieres conocer cuáles son mis dispositivos de trabajo y juego preferidos?
Revisa mi setup de trabajo, viaje y juego (ES).
Y si te gustaría ver más de estos análisis por aquí. Si el contenido que realizo te sirve en tu día a día, piénsate si merece la pena invitarme a lo que vale un café, aunque sea digitalmente.
