Cargar el JavaScript y la hoja de estilos solo cuando sea necesario

En sus ajustes por defecto, Contact Form 7 carga su hoja de estilos CSS y JavaScript en todas las páginas. Puedes pensar que esto es redundante o un desperdicio y que quieres cargarlos solo en aquellas páginas que contienen formularios de contacto. Entiendo la preocupación, pero existe una limitación técnica que impide que un plugin sepa si la página contiene formularios de contacto, o no, al inicio de la carga. Sin embargo, puedo mostrarte una forma de solucionarlo.

Paso 1: deten la carga del JavaScript y la hoja de estilos CSS en todas las páginas

Cuando el valor de WPCF7_LOAD_JS está establecido en false (por defecto: true), Contact Form 7 no carga el JavaScript. Puedes establecer el valor de esta constante en tu archivo wp-config.php del siguiente modo:

define( 'WPCF7_LOAD_JS', false );

Asimismo, puedes controlar la carga de la hoja de estilos CSS con WPCF7_LOAD_CSS. Contact Form 7 no carga la hoja de estilos CSS cuando el valor de WPCF7_LOAD_CSS es false (por defecto: true). Puedes establecerlo en wp-config.php de esta manera:

define( 'WPCF7_LOAD_CSS', false );

O también puede desactivar la carga del JavaScript y el CSS añadiendo algunas líneas de código en el archivo functions.php de tu tema del siguiente modo:

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

Ya has logrado detener la carga del JavaScript y de la hoja de estilos CSS, pero, desafortunadamente, también los has detenido en las páginas que contienen formularios de contacto, por lo que necesitamos volver a colocarlos en las páginas correctas. Así que el siguiente paso detalla lo que necesitarás para cargar los archivos en las páginas específicas donde son necesarios.

Paso 2: cargar los archivos en las páginas que contienen formularios de contacto

Por ejemplo, digamos que tienes una página llamada «Contacto» y es la única página que contiene un formulario de contacto. Y suponte que tienes un archivo de plantilla para la página «Contacto» llamado «contacto.php» en la carpeta de tu tema. Ahora deberás cargar la hoja de estilos CSS y el JavaScript de Contact Form 7 específicamente en la página «Contacto».

Para hacer esto, debe editar el archivo de plantilla «contacto.php» e insertar las siguientes líneas en él:

<?php

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

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

?>

Ten en cuenta que wpcf7_enqueue_scripts() y wpcf7_enqueue_styles() deben llamarse antes de que wp_head() se haya llamado.

Just another contact form plugin for WordPress. Simple but flexible.