Desactiva código JavaScript y CSS en tu WordPress

Nuestros sitios web hechos en WordPress contienen plugins desarrollados por terceros que cargan código JavaScript y CSS desde archivos.

Hay veces que necesitamos desactivar esos archivos para mejorar el performance de nuestro sitio web.

Existen dos formas de usar el código JavaScript y CSS:

1. Usando archivos .js y .css. Recomendado.
2. Incrustándolos directo en el template de nuestro tema. No recomendado.

Inline Scripts/Styles. No recomendado

El código JavaScript y CSS puede incrustarse dentro de un template, por ejemplo, dentro de tu archivo header.php, footer.php, etc.

Lo puedes hacer, sí, pero no es recomendable ya que no será escalable y se te hará muy difícil identificar el código dentro de tus templates.

<?php if ( is_page_template( 'page-templates/template-easy-feature.php' ) ) { ?>
   <script>
      jQuery( document ).ready( function() {
          jQuery('.browse-categories-btn a').click(function() {
              jQuery('.browse-categories-btn a').parent().removeClass('active-categories');
              jQuery(this).parent().addClass('active-categories');
          });
      });
   </script>
<?php } ?>

El código anterior demuestra un código inline script, es decir, está incrustado directamente en un archivo template de tu tema.

Los JavaScript (inline script) y CSS (inline style) que están incrustados en el template de tu tema, no serán posibles de desactivarlos.

Carga correctamente tu código JS y CSS

Cargar el código JavaScript y CSS usando archivos es lo contrario a usar inline scripts y styles. Es más fácil de identificar dónde existe tu código y mucho más fácil desactivarlos.

Ya que tengas los archivos, ahora debes registrarlos en WordPress. Cuando estamos desarrollando nuestros plugins, podemos usar dos funciones para cargar nuestro código JavaScript y CSS de forma correcta.

Para los archivos JavaScript debemos usar la función wp_enqueue_script() y para los CSS usamos la función wp_enqueue_style().

Las funciones anteriores deben ejecutarse dentro del hook wp_enqueue_scripts:

<?php

add_action( 'wp_enqueue_scripts', 'rmr_load_assets' );

function rmr_load_assets() {
  wp_enqueue_script(
     'wp-countup-js-plugin',
     WP_COUNTUP_JS_URL . 'assets/js/wp-countup-show-counter.min.js',
     array( 'jquery' ),
     WP_COUNTUP_JS_VERSION,
     $in_footer
  );
}

Los archivos JS y CSS no son cargados si las funciones anteriores no se ejecutan dentro del hook wp_enqueue_scripts.

Ahora, verifica que el archivo ha sido cargado correctamente usando la pestaña Network en las herramientas de desarrollos de tu navegador:

Las funciones anteriores usan como primer parámetro el nombre ($handle) del JavaScript o CSS.

Es muy importante que especifiques el parámetro $handle. Es usado para identificar el archivo dentro de todo el sistema de WordPress.

Cuando cargas un archivo JS y CSS usando wp_enqueue_script() y wp_enqueue_style(), estos serán guardados dentro de una variable global llamada $wp_scripts y $wp_styles, respectivamente.

Puedes usar esas variables globales o las funciones wp_scripts() y wp_styles() para editar o debuggear los JavaScript y CSS registrados.

Desactiva el código JavaScript y CSS

Si los archivos JS y CSS han sido cargados correctamente usando las funciones wp_enqueue_script() y wp_enqueue_style() entonces podrás desactivar esos códigos fácilmente.

Existe la función wp_dequeue_script() y wp_dequeue_style() para desactivar los archivos cargados por WordPress.

Aquí puedes jugar con tu lógica y requerimientos del sistema, por ejemplo, puedes usar las condiciones de WordPress y condiciones de guardia para desactivar un archivo JavaScript:

<?php

 add_action( 'wp_enqueue_scripts', 'rmr_unload_assets' );

 function rmr_unload_assets() {
   if ( is_page( 'contact' ) ) {
     wp_dequeue_script( 'wp-countup-js-plugin' );
   }
 }

El código nos demuestra que si la página actual es /contact, entonces desactivará el JavaScript con el nombre ($handle) wp-countup-js-plugin especificado dentro de la función wp_dequeue_script() y wp_dequeue_style().

Ahora no deberías ver el archivo JavaScript cargado en tu sitio web:

Para los estilos es lo mismo pero usando la función wp_dequeue_style().

Beneficios

Cuando desactivas el código JavaScript y CSS, tu servidor ya no pedirá ese archivo desactivado y por lo tanto tu página:

• Se volverá más rápida.
• Será menos pesada.
• Mejorará el puntaje de tu sitio web en Google PageSpeed Insights.
• Reducirá el tiempo de bloqueo por scripts o estilos.

Tu sitio web agradecerá estos beneficios.

Espero hayas aprendido y apliques los conocimientos que aquí he plasmado, si tienes alguna duda y/o comentario puedes dejarlo en los comentarios.

Referencias

La mejor forma de aprender a usar las funciones de WordPress aquí mencionadas, es visitar y leer la documentación oficial:

• https://developer.wordpress.org/reference/functions/wp_enqueue_script/
• https://developer.wordpress.org/reference/functions/wp_enqueue_style/
• https://developer.wordpress.org/reference/hooks/wp_enqueue_scripts/
• https://developer.wordpress.org/reference/functions/wp_dequeue_script/
• https://developer.wordpress.org/reference/functions/wp_dequeue_style/