• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Plugins / Cargar scripts y estilos de Contact Forms 7 condicionalmente

Cargar scripts y estilos de Contact Forms 7 condicionalmente

Cargar scripts y estilos de Contact Forms 7 condicionalmente

[ 8 octubre 2019 ] [ Autor: Jhon Marreros Guzmán ][ Plugins - Intermedio] [ ]

optimización

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

¿Te has dado cuenta que cuando usas Contact Forms 7 te carga sus archivos de estilos y javascript en todas las páginas, incluso en aquellas que no tienen formularios?, en este artículo veremos cómo cargar los scripts y estilos de contact forms 7 sólo en las páginas en donde hay formularios.

 

Generalidades

Puedes identificar los archivos que carga Contact Forms 7 (CF7) revisando el código HTML de tu sitio y buscando alguna de estas dos rutas:

/wp-content/plugins/contact-form-7/includes/css/styles.css
/wp-content/plugins/contact-form-7/includes/js/scripts.js
Si sólo cargamos estos archivos cuando se muestra un formulario de CF7 optimizaríamos la carga de nuestro sitio.

 

Cargar scripts y estilos de Contact Forms 7 por código

La forma mas simple de optimizar la carga de archivos css y javascript de CF7 es evitar la carga de estos archivos y luego, condicionalmente, cargarlos sólo en las páginas en las que tengamos un formularios.

Tienes que identificar el slug o el ID de la página en donde tienes un formulario ya que en el siguiente código se usa is_page() para realizar la condicional de carga.


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

function dcms_enqueue_scripts_cf7(){
	if ( is_page('contacto') ){
	    if ( function_exists( 'wpcf7_enqueue_scripts' ) ) wpcf7_enqueue_scripts();
	    if ( function_exists( 'wpcf7_enqueue_styles' ) ) wpcf7_enqueue_styles();
	}
}

add_action( 'wp_enqueue_scripts', 'dcms_enqueue_scripts_cf7' );

No olvides cambiar el texto “contacto” en caso tengas una página que tenga un nombre diferente.
Puedes agregar este código al final de tu archivo functions.php de tu child-theme o a través e un plugin de Snippets.

 
En el código anterior:

  • Primero quitamos la carga de archivos tanto .js y .css usando los Hooks de filtro y retornando falso
  • Luego usamos el Hook wp_enqueue_scripts que hace referencia a la función dcms_enqueue_scripts_cf7()
  • Dentro de la función usamos la lógica condicional a través de is_page() en nuestro ejemplo tenemos una página con slug ‘contacto’
  • Finalmente validamos y usamos las funciones de CF7 para encolar los archivos de estilos y javascript

 

Conclusión

Parte de las optimizaciones que debemos tener en cuenta cuando construimos un sitio Web es sólo cargar los archivos necesarios para mostrar una determinada página. Hemos visto que CF7 en las versiones actuales carga sus archivos en todas las páginas, sin embargo podemos corregir esto a través de código.

 

¿Aún con dudas?, en el siguiente video se detalla los puntos anteriores.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Cómo eliminar todos los productos de WooCommerceCómo eliminar todos los productos de WooCommerce
  • Agrupar los resultados de búsqueda en WordPressAgrupar los resultados de búsqueda en WordPress
  • tipos de complementos de WordPress5 tipos de complementos de WordPress
  • Sincronizar WooCommerce y Google SheetsSincronizar WooCommerce y Google Sheets
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (4 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Personalizar la página de error 404 en WordPress

Agregar el slug blog en las urls de las entradas de WordPress

Formulario de contacto sin plugins en WordPress

Página de inicio y Página de entradas en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados