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:

JavaScript cargado por un plugin usando wp_enqueue_script().
JavaScript cargado por un plugin usando wp_enqueue_script().

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:

JavaScript desactivado usando wp_dequeue_script().
JavaScript desactivado usando wp_dequeue_script().

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:

Roel Magdaleno
Escrito por Roel Magdaleno

Roel Magdaleno es un ingeniero informático especializado en desarrollo web desde hace más de 5 años. Desarrolla sitios web, aplicaciones web, plugins para WordPress y scripts con PHP y JavaScript. Además, comparte su conocimiento en su blog personal.

3 comentarios en “Desactiva código JavaScript y CSS en tu WordPress”

    • Hola Darío.

      Para eliminar un script de toda la web (y si aún sigues usando el plugin) sería de la siguiente forma. No tendrás que agregar ninguna condición, eliminas el script directamente. Saludos.

      add_action( 'wp_enqueue_scripts', 'rmr_unload_assets' );
      
      function rmr_unload_assets() {
         wp_dequeue_script( 'wp-countup-js-plugin' );
      }

Deja un comentario