Cargar scripts y estilos de Contact Forms 7 condicionalmente

[ 8 octubre 2019 ] [ Autor: Jhon Marreros Guzmán ][ Plugins - Intermedio] [ ]

¿Te has dado cuenta que cuando usas Contact Forms 7 te carga sus archivos de estilos y javascript en todas las páginas, incluso en aquellas que no tienen formularios?, en este artículo veremos cómo cargar los scripts y estilos de contact forms 7 sólo en las páginas en donde hay formularios.

Generalidades

Puedes identificar los archivos que carga Contact Forms 7 (CF7) revisando el código HTML de tu sitio y buscando alguna de estas dos rutas:

/wp-content/plugins/contact-form-7/includes/css/styles.css
/wp-content/plugins/contact-form-7/includes/js/scripts.js

Si sólo cargamos estos archivos cuando se muestra un formulario de CF7 optimizaríamos la carga de nuestro sitio.

Cargar scripts y estilos de Contact Forms 7 por código

La forma mas simple de optimizar la carga de archivos css y javascript de CF7 es evitar la carga de estos archivos y luego, condicionalmente, cargarlos sólo en las páginas en las que tengamos un formularios.

Tienes que identificar el slug o el ID de la página en donde tienes un formulario ya que en el siguiente código se usa is_page() para realizar la condicional de carga.


add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );

function dcms_enqueue_scripts_cf7(){
	if ( is_page('contacto') ){
	    if ( function_exists( 'wpcf7_enqueue_scripts' ) ) wpcf7_enqueue_scripts();
	    if ( function_exists( 'wpcf7_enqueue_styles' ) ) wpcf7_enqueue_styles();
	}
}

add_action( 'wp_enqueue_scripts', 'dcms_enqueue_scripts_cf7' );

No olvides cambiar el texto “contacto” en caso tengas una página que tenga un nombre diferente.

Puedes agregar este código al final de tu archivo functions.php de tu child-theme o a través e un plugin de Snippets.

En el código anterior:

Primero quitamos la carga de archivos tanto .js y .css usando los Hooks de filtro y retornando falso
Luego usamos el Hook wp_enqueue_scripts que hace referencia a la función dcms_enqueue_scripts_cf7()
Dentro de la función usamos la lógica condicional a través de is_page() en nuestro ejemplo tenemos una página con slug ‘contacto’
Finalmente validamos y usamos las funciones de CF7 para encolar los archivos de estilos y javascript

Conclusión

Parte de las optimizaciones que debemos tener en cuenta cuando construimos un sitio Web es sólo cargar los archivos necesarios para mostrar una determinada página. Hemos visto que CF7 en las versiones actuales carga sus archivos en todas las páginas, sin embargo podemos corregir esto a través de código.

¿Aún con dudas?, en el siguiente video se detalla los puntos anteriores.