WordPress: cargar JavaScript y CSS de Contact Form 7 solo cuando sea necesario

Tutorial WordPress

Contact Form 7 es un plugin muy popular entre los usuarios de WordPress que sirve para añadir formularios de contacto en sitios creados con WordPress. Es muy fácil de configurar y permite crear y personalizar formularios diferentes. Sin embargo, la mayoría de blogs y sitios corporativos lo usan en una sola página creada para contactar. Y si lo tenemos activo, el plugin añade su propio JavaScript y sus estilos CSS en el <head> de todas las páginas, sin discriminar cuales son las que realmente lo necesitan.

Esto crea una innecesaria carga de código y peso en todas las páginas del sitio. Así que vamos a aprender cómo desactivarlo en aquellas páginas donde no se necesita.

Tenemos dos opciones: la primera mediante uso de condicionales en el archivo functions.php de nuestro tema activo, la segunda mediante desactivación en wp-config.php y posterior activación solamente en las plantillas de páginas donde haya formularios:

Mediante uso de condicionales en functions.php

add_action( 'wp_print_scripts', 'deregister_cf7_javascript', 100 );
//eliminar Java Script de contact form 7
function deregister_cf7_javascript() {
    if ( !is_page('contacto') ) {
        wp_deregister_script( 'contact-form-7' );
    }
}
//eliminar CSS de contact form 7
add_action( 'wp_print_styles', 'deregister_cf7_styles', 100 );
function deregister_cf7_styles() {
    if ( !is_page('contacto') ) {
        wp_deregister_style( 'contact-form-7' );
    }
}

De esta forma la condición que estamos poniendo es la siguiente:

si la página no es la página llamada “contacto” eliminar script y estilos css del plugin Contact Form 7

Obviamente donde pone ‘contacto’ debes poner el nombre de la página que contiene el formulario. O bien usar el ID de esta forma:

    if ( !is_page(13) ) {

donde 13 sería el ID de la página que contiene el formulario.

Mediante desactivación en wp-config.php e inclusión en plantilla de página

La segunda, y mucho más limpia y completa, es la que propone la página oficial del plugin:

1. Primero controlamos en wp-config.php que no cargue ni el script ni el CSS añadiendo estas líneas de código:

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

2. Después los llamamos desde contact.php o cualquier otra plantilla de página del tema activo para que los cargue solo cuando existe un formulario:

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

Necesario advertir que esta llamada debe hacerse antes de  wp_head().

Más info: Contact Form 7

3 comentarios en “WordPress: cargar JavaScript y CSS de Contact Form 7 solo cuando sea necesario

  1. Hola, gracias por el post, muy bueno. Tengo una duda, si son varias páginas en las que se quiere añadir la excepción en el primer caso, como se hace? Con los id separados por comas? Saludos!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *