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.

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
);
}

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.

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:


Escrito por Roel Magdaleno

Desarrollador Backend y Performance Engineer.

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

  1. Avatar de Darío Oliveros
    Darío Oliveros

    Interesante artículo. Gracias.

    Una pregunta ¿Y si quisiera eliminar este script de toda la web?

    Saludos.

    1. Avatar de Roel Magdaleno

      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' );
      }
    2. Avatar de Darío Oliveros
      Darío Oliveros

      Funciona perfecto.

      ¡Gracias!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *