Contact Form 7: Carga CSS y JS en las páginas que lo precisen.

En un post anterior ya estuvimos hablando de este maravilloso plugin de Wordpres que nos facilita la creación de un formulario de contacto responsivo para nuestra web o blog. Un plugin de los fundamentales diría.

Bien, pues este plugin como otros realiza la carga de archivos CSS y JS propios que no siempre son necesarios en todas nuestras páginas ya que en realidad sólo es necesario que realice su carga en las páginas en las que tengamos dispuestos formularios.

Como es lógico desearemos que realice la carga allá donde sea necesario. Entonces, ¿qué podemos hacer al respecto?, tranquilos, el objetivo de este post trata de eso mismo.

Como idea apuntamos que al no realizar la carga del CSS y JS que trae el Contact form 7 estaremos optimizando la velocidad de carga de las otras páginas de nuestro sitio ya que reduciendo el número de peticiones al servidor tendrá la consiguiente mejora en la carga de la página.

Tenemos dos opciones para omitir la carga de esos ficheros en las páginas que no necesitemos que se carguen los ficheros.

1- Mediante el fichero functions.php.

2- Mediante la desactivación en wp-config.php y la posterior activación en las páginas o plantillas que dispongan de formularios.

Vamos a ver el primer método, del que soy mas partidario, ya que si actualizamos nuestro wordpress deberemos volver a incluir la funciones sobre el wp-config sobre el segundo método, cada vez.

MÉTODO MEDIANTE EL FICHERO FUNCTIONS.PHP

Para la consecución de nuestro objetivo bastará con incluir las siguientes funciones sobre el fichero functions.php. Consideramos que disponemos de una página que dispone de un formulario de Contact Form 7 llamada ‘hablamos’ y que es sobre la única que deseamos que se carguen los ficheros CSS y JS que trae el plugin.

 
add_action( 'wp_print_scripts', 'deregister_cf7_javascript', 100 );
//Indicamos que no deseamos cargar el Javasript de ContactForm7
function deregister_cf7_javascript() {
if ( !is_page('hablamos') ) {
wp_deregister_script( 'contact-form-7' );
}
}
 
add_action( 'wp_print_styles', 'deregister_cf7_styles', 100 );
//Indicamos que no deseamos cargar el CSS de ContactForm7
function deregister_cf7_styles() {
if ( !is_page('hablamos') ) {
wp_deregister_style( 'contact-form-7' );
}
}

Si por ejemplo son dos las páginas en las que disponemos de formularios podemos emplear el operador de php como vemos en las siguientes funciones. Nuestra segunda página se llama ‘formulario-de-datos’.

 
add_action( 'wp_print_scripts', 'deregister_cf7_javascript', 100 );
//Indicamos que no deseamos cargar el Javasript de ContactForm7
function deregister_cf7_javascript() {
    if ( !(is_page('hablamos')||is_page('formulario-de-datos' )) ) {
        wp_deregister_script( 'contact-form-7' );
    }
}
add_action( 'wp_print_styles', 'deregister_cf7_styles', 100 );
//Indicamos que no deseamos cargar el CSS de ContactForm7
function deregister_cf7_styles() {
    if ( !(is_page('hablamos')||is_page('formulario-de-datos' )) ) {
        wp_deregister_style( 'contact-form-7' );
    }
}

La funciones anteriores comprueban si las páginas son las indicadas, si no lo son, no realiza la carga, de otra forma carga del JS y el CSS del Contact Form 7. Por defecto, como vemos si no indicamos nada, siempre carga los ficheros.

Finalmente otra forma de realizar lo mismo es empleando la ID de la página en concreto, escribiendo !(is_page(IDdelapágina)) y reemplazando en las funciones previas.

MÉTODO MEDIANTE FICHERO WP-CONFIG.PHP

El segundo método como comentamos es la desactivación desde el wp-config.php con las siguientes funciones, que deberemos introducir en dicho fichero (podemos ver una mejor definición en la web del autor del Contact Form 7):

define('WPCF7_LOAD_JS', false);
define('WPCF7_LOAD_CSS', false);

Por defecto, el valor está siempre en true en la función define, de ahí que realice siempre la carga. Como vemos cambiamos su valor a false para que no cargue la constante. Tras esto en las plantillas que tengamos nuestro formulario y antes de la función wp_head() deberemos teclear la siguiente función que habilita la carga del fichero CSS y JS.

 
if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
wpcf7_enqueue_scripts();
wpcf7_enqueue_styles();
}

Y con esto ya lo tendremos listo.

Como vemos con unas sencillas lineas de código podemos optimizar la velocidad de carga de nuestra web si estamos empleando el plugin de Contact Form 7 para la disposición de formularios, y realizar una criba de las páginas en las que debe y no debe cargar ficheros propios del plugin.

Espero que os haya sido útil el post y si os ha gustado estais invitados a compartirlo. Un saludo y gracias por vuestro tiempo.