Contact Form 7 carga JS y CSS sólo en páginas con formularios

Contact Form 7 es un plugin para crear formularios en WordPress. Con más de un millón de descargas activas se ha convertido en uno de los complementos imprescindibles en el desarrollo de nuestros sitios web. Con cada nueva actualización el plugin ofrece mejoras y mayor funcionalidad. Son múltiples sus bondades pero en este artículo nos centraremos en una pequeña pega: Contact Form 7 carga los archivos js y css en todas las páginas de WordPress. 

Copyright© Takayuki Miyoshi

En la configuración predeterminada de Contact Form 7, carga los archivos JS y CSS en todas las páginas, aunque la página en cuestión no tenga insertado un formulario. Realizar peticiones al servidor con llamadas a archivos que no son necesarios perjudica la velocidad de carga de nuestras páginas. Lo más lógico es cargar estos archivos sólo en las páginas donde tengamos implementado un formulario, es decir en las páginas donde usemos Contact Form 7.

Vamos a realizar algunas modificaciones en los archivos de WordPress para cargar el js y css únicamente en las páginas de nuestra web que manejan formularios. 

Voy a explicar dos métodos diferentes: la decisión de que método emplear para evitar la carga de archivos del plugin Contact Form, depende de tus preferencias a la hora de trabajar con WP y de la configuración de tu sitio. 

 Método 1: Trabajando con archivos de configuración y templates de página

ADVERTENCIA: las prácticas que vamos a ver en el Método 1 sólo se pueden realizar si tu  WordPress trabaja con distintas plantillas o templates para cada página. De lo contrario es imposible habilitar la carga de javascript y css en las páginas con formularios. Si tu WordPress no carga distintas plantillas para cada página, debes emplear el Método 2. Te recomiendo que leas el artículo entero para poder entender las características de cada método.

Si no sabes que template o plantilla carga cada página de tu sitio, puedes insertar un pequeño código en el archivo header.php de tu tema. Este código te devuelve el nombre de la plantilla que está utilizando cada página:

Detectar que archivo se ejecuta en cada página de WordPress.

El método 1 consiste en eliminar primero la carga de archivos de forma general del WP y luego cargar los archivos directamente desde la plantilla de la página, por ejemplo contacto.php… Este método es interesante si tienes pocas páginas en todo tu sitio que usen formularios y cada página llama a una plantilla.

Paso 1: no cargar JavaScript y CSS de Contact Form 7 en ninguna página

Lo primero que vamos a hacer es eliminar la carga de js y css de todas las páginas, de todo el WP. Tienes dos formas de conseguirlo:

Modificar el archivo wp-config.php, independientemente de la versión del plugin Contact Form puedes realizar las modificaciones en wp-config.php

Realizar cambios en el archivo functions.php, si tu versión del plugin Contact Form >= 3.9 puedes realizar las modificaciones en functions.php

Modificar el archivo wp-config.php

El archivo wp-config se encuentra alojado en la raíz de tu sitio. Localiza el archivo wp-config.php, abre el archivo y añade las siguientes líneas:

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

La declaración de estas constantes esta dentro de los archivos del plugin, por lo tanto no las busque en wp_config. Por defecto estas constantes se encuentran en el archivo del plugin iniciadas a «true» e indican Contact Form 7 carga JS y CSS siempre. Si cambiamos el valor de las constantes a false estamos indicando justo lo contrario: «que no se cargue ni js ni css para ninguna página».

Modificar el archivo functions.php

Antes de utilizar este método comprueba la versión de Contact Form 7 que tienes instalada. Si la versión es 3.9 o superior podemos deshabilitar la carga de JavaScript y CSS añadiendo código al archivo functions.php del tema que tengas activo.

Localiza el archivo en la siguiente ruta wp-content/themes/tutema/functions.php y añade lo siguiente:

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

Cualquiera de las dos maneras empleadas evitan la carga de JavaScript y CSS en tu web.

Con esto, hemos evitado que los archivos JS y CSS del plugin Contact Form se carguen por defecto en todas las páginas de nuestra web. Ahora, lo lógico es llamar a estos archivos en las páginas que tengamos formularios. Al emplear este primer método ya avisamos que para llamar de nuevo a los archivos íbamos a modificar cada página una por una. Esto implica que cada página de mi WP con formularios tiene que tener una plantilla diferente: contacto.php, inscripcion.php, matricula.php… si no es tu caso, si en tu blog se carga la misma plantilla para todo, por ejemplo: page.php, recuerda que este método no sirve. En tu caso debes pasar al método 2.

Paso 2: carga de archivos JS y CSS en las páginas con formularios 

En mi sitio tengo formularios en la página de inicio, en la página presupuesto y en la página contacto. Además cada página carga una plantilla diferente: inicio.php, contacto.php… Por lo tanto puedo modificar las plantillas que trabajan con esas páginas.

Abre la template de tu página contacto, por ejemplo, contact.php y copia este código al inicio del archivo. Es muy importante que cuando copies el código lo hagas antes de la llamada al wp-head de la página. 

<?php
    if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
        wpcf7_enqueue_scripts();
    }
 
    if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
        wpcf7_enqueue_styles();
    }
?>

Ya hemos explicado al principio del artículo que estos métodos sólo funcionan cuando cada página tiene plantillas independientes. Si tu página de Contacto utiliza la misma plantilla que una o varias páginas de tu sitio realizar estas acciones no va a ser eficiente. Vamos a ver un segundo método para estos casos.

Método 2: Añadir script en functions.php, solo cargar JS y CSS en páginas con formularios

El segundo método consiste en añadir un script o función a php para indicar a WP que solo cargue los archivos JS y CSS de Contact Form en las páginas que tienen insertado algún formulario.

Vamos a ver dos script diferentes, uno indicando nosotros el nombre de las páginas que tienen formularios, y otro más evolucionado cortesía de jclconsultor.com, que detecta automáticamente que páginas o entradas tienen un formulario Contact Form 7 instalado.

Script 1 – Indicando nombre/slug de cada página

Abrimos el archivo functions.php de nuestro tema y copiamos y pegamos el siguiente script:

function deregister_cf7_js() {
	if ( !is_page(array( 'contacto', 'presupuesto', 'index' ) )) {
		wp_deregister_script( 'contact-form-7');
	}
}
add_action( 'wp_print_scripts', 'deregister_cf7_js' );

function deregister_ct7_styles() {
	if ( !is_page(array( 'contacto', 'presupuesto', 'index' ) )) {
		wp_deregister_style( 'contact-form-7');
	}
}
add_action( 'wp_print_styles', 'deregister_ct7_styles');

Modifica el array de la función por las páginas de tu web. Es decir array(‘contacto’…) Recuerda que la función «is_page» funciona con IDs, slug o nombre de páginas. 

El código trabaja de la siguiente forma: si la página a cargar no  es contacto, presupuesto o inicio entonces no cargar ni el JS ni CSS de Contact Form 7. Lógicamente si la página es contacto o alguna de las que tiene formularios, como las variables iniciales estaban a «true», se cargan los archivos. (explicado en método 1)

Script 2 – Detección automática de páginas con formularios Contact Form 7

Este script detecta que páginas tienen formulario. Si la página tiene formulario entonces carga los archivos correspondientes. En caso contrario no llama al JS ni al  CSS del plugin.

Este código trabaja añadiendo un filtro al contenido (the_content) de la página.

if (!is_admin() && WPCF7_LOAD_JS) {
   if (!function_exists('jclconsultor_wpcf7_scripts')){
      function jclconsultor__wpcf7_scripts($content) {
          $pos=strpos($content,'class="wpcf7"');
          if ($pos===false){
              if (WPCF7_LOAD_JS){
                 wp_deregister_script('contact-form-7');
                 wp_deregister_style('contact-form-7');
              }
          }
          return $content;
       }
   add_filter('the_content','jclconsultor_wpcf7_scripts',99999);
   }
}

Fijaros como trabaja este script. Mediante la función php «strpos» busca la cadena class=»wpcf7″ dentro del contenido de la página. Esta es la clase que añade Contact Form a todos los formularios. Si encuentra la cadena dentro del contenido de la página, quiere decir que en esa página hay un formulario. En este caso la variable $post almacena un valor. Si no encuentra nada $pos será false, en nuestro caso indica que no hay formulario dentro de la página. Si es falso, entonces no cargaremos los archivos JS y CSS.

Los dos métodos y funciones que hemos visto, resultan bastante interesante. Aunque el primer método es más engorroso y necesitas tener plantillas diferentes para cada página, creo que es el que más mejorará la rapidez de la web. En el segundo método en las funciones empleamos filter y action, que según creo se ejecutan de forma lineal, si es así la velocidad se verá afectada. ¿Qué opinas?