Cómo evitar el conflicto del alias $ entre librerías JavaScript en WordPress.

Muchos temas y plugins de WordPress utilizan distintas librerías de JavaScript que crean conflicto entre ellas. Esto pasa, por ejemplo, cuando coincide jQuery con Prototype o Scriptaculous (entre otras muchas).

Para solventar este problema basta con añadir un archivo, que llamaremos ‘noconflict.js‘ y lo pondremos dentro de la carpeta ‘js‘ de tu tema (si esta no existe puedes crearla).

Es decir, el archivo estará en ‘…/mitema/js/noconflict.js‘ y tendrá el siguiente contenido:

jQuery.noConflict(true);

Para meterlo en esa ruta pondremos en el ‘functions.php’ de tu tema el siguiente código:

/*
 * Añade JS y CSS al tema
 */
add_action('wp_enqueue_scripts', 'registrar_jscss');
function registrar_jscss(){

  /*
   * Añadimos los archivo para evitar los conflictos con $
   */
  wp_enqueue_script( 'noconflict', get_stylesheet_directory_uri() . '/js/noconflict.js', array ( 'jquery' ), 1.1, true);
  
}

Como has podido ver, para encolar el archivo ‘noconflict.js’ correctamente con WordPress utilizamos el hook ‘wp_enqueue_scripts‘ y lo hacemos dependiente del jQuery que carga por defecto WordPress.

Espero que este post sea de ayuda.