Ayudas y Subvenciones
En este post veremos una función para hacer que los archivos CSS y JS de Contact Form 7 solamente se carguen en las páginas en las que tenemos formularios y así mejorar la velocidad de carga de nuestra web. Algo muy útil si tu sitio web va algo lento o tienes muchos plugins.
El CSS y JS de Contact Form 7
Contact Form 7 es el plugin más utilizado para crear formularios de contacto en una página de WordPress. Cuando lo instalamos y activamos, el CSS y el JS del plugin carga en todas las páginas de nuestro sitio web. De esta forma, si tenemos muchos plugins con archivos CSS o JS, nuestra web puede tardar en cargar, y esto nos puede penalizar a nivel de SEO y de consumo de recursos en nuestro plan de hosting. La solución para evitar esto es cargar estos archivos solamente en las páginas en las que tengamos formularios.
WordPress trae incorporadas dos funciones, wp_deregister_script y wp_deregister_style que utilizadas con los filtros adecuados, permiten evitar la carga de scripts que ya habían sido declarados anteriormente, en este caso con Contact Form 7.
Por ejemplo, si tenemos una página de Contacto con el slug contacto, cargaríamos solamente en esa página los recursos de CF7. Para ello la función que debes añadir a tu archivo functions.php sería esta:
function deregister_cf7_js() {
if ( !is_page('contacto')) {
wp_deregister_script( 'contact-form-7');
}
}
add_action( 'wp_print_scripts', 'deregister_cf7_js' );
function deregister_ct7_styles() {
wp_deregister_style( 'contact-form-7');
}
add_action( 'wp_print_styles', 'deregister_ct7_styles');
Si nuestra página se llama Contáctanos, Contactar, Contactarnos o como quiera que se llame, lo importante es el slug, no el nombre de la página. En nuestro caso, la URL de contacto de nuestra web es woofreelance.com/contactar/ y contactar sería el slug de la página. Entonces la función quedaría así:
function deregister_cf7_js() {
if ( !is_page('contactar')) {
wp_deregister_script( 'contact-form-7');
}
}
add_action( 'wp_print_scripts', 'deregister_cf7_js' );
function deregister_ct7_styles() {
wp_deregister_style( 'contact-form-7');
}
add_action( 'wp_print_styles', 'deregister_ct7_styles');
Y si queremos cargar los archivos CSS y JS en más de una página:
function deregister_cf7_js() {
if ( !is_page('contacto') || !is_page('solicitar-presupuesto') ) {
wp_deregister_script( 'contact-form-7');
}
}
add_action( 'wp_print_scripts', 'deregister_cf7_js' );
function deregister_ct7_styles() {
wp_deregister_style( 'contact-form-7');
}
add_action( 'wp_print_styles', 'deregister_ct7_styles');
Que tu web cargue los recursos CSS y JS solamente cuando se necesitan ayuda a optimizar la entrega de tus páginas de contenido
