WordPress ha sido parte de nuestras vidas durante más de 16 años, pero el método de agregar scripts a temas y complementos sigue siendo un misterio para muchos desarrolladores. En este artículo, finalmente hemos puesto fin a la confusión.

Dado que es una de las bibliotecas de JavaScript más utilizadas, hoy discutiremos cómo agregar scripts jQuery a sus temas o plugins de WordPress.

Acerca del modo de compatibilidad jQuery

Antes de comenzar a agregar scripts a WordPress, es importante comprender el modo de compatibilidad de jQuery.

Como probablemente sepa, WordPress viene con jQuery ya incluido.

La versión de jQuery en WordPress también tiene un " modo de compatibilidad », Que es un mecanismo para evitar conflictos con otras bibliotecas de JavaScript.

Parte de este mecanismo de defensa significa que usted ne pas Pouvez usa el $Firme directamente como lo haría en otros proyectos.

En cambio, al escribir código jQuery para WordPress, debe usar jQuery.

Aquí hay un ejemplo de ese código:

/ * JQuery régulier * /
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})

/ * Mode de compatibilité * /
jQuery ( '.hideable' ).on( 'click' , function () {
jQuery( this ).hide();
})

El problema es que escribir jQuery un millón de veces lleva más tiempo, hace que sea más difícil de leer y puede sobrecargar el script.

¿La buena noticia?

Con algunas modificaciones, puede usar nuevamente nuestro lindo y pequeño símbolo de dólar.

Por cierto, si eres nuevo en jQuery , el signo $ es solo un alias para jQuery (), luego un alias para una función.

La estructura básica se ve así: $(selector).action(). El signo de dólar define jQuery ... el "(selector)" consulta o encuentra elementos HTML ... y finalmente "jQuery () action" es la acción a realizar sobre los elementos.

Volviendo a cómo podemos solucionar nuestro problema de compatibilidad ... aquí hay algunas opciones viables:

1.Introduzca el modo sigilo jQuery

La primera forma de evitar el modo de compatibilidad es introducir el código a escondidas.

Por ejemplo, si carga su script en el pie de página, puede ajustar su código en una función anónima, que asignará jQuery $.

Como en el siguiente ejemplo:

( fonction ( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
}) (jQuery);

Si desea agregar su script en el encabezado (lo que debe evitar si es posible, más sobre eso a continuación), puede envolver todo en una función lista para documentos, pasando el $en el camino

jQuery( document ).ready( function( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
});

2. Ingrese al modo "Sin conflicto"

Otra forma fácil de evitar la ortografía de jQuery es cambiar al modo "Libre de conflictos" y usa un atajo diferente.

En este caso: $jen lugar del predeterminado $.

Todo lo que tienes que hacer es declararlo en la parte superior de tu script:var $j = jQuery.noConflict();

Bien, ahora que sabe más sobre cómo escribir código jQuery válido para WordPress, agréguelo a nuestro Sitio web.

Cómo agregar scripts jQuery a WordPress

Una de las formas más fáciles de agregar scripts de jQuery a WordPress es a través de un proceso llamado 'configuración cola ".

Para Sitio web HTML clásico, usaríamos el  <link> elemento para agregar scripts. WordPress termina haciendo lo mismo, pero usaremos funciones especiales de WP para lograrlo.

De esta manera, gestiona todas nuestras dependencias por nosotros (¡gracias WP!).

Si está trabajando en un tema, puede usar la función  wp_enqueue_script() en vuestro  functions.php archivo.

Así es como se ve:

function my_theme_scripts () {
wp_enqueue_script('mon-grand-script', get_template_directory_uri(). '/js/my-great-script.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

Esta función toma cinco argumentos:

  1. $ handle: un identificador único que puede usar para hacer referencia al script.
  2. $src: la ubicación del archivo de script.
  3. $ deps: especifica una matriz de dependencias.
  4. $ ver: el número de versión de su script.
  5. $ in_footer: permite a WordPress saber dónde colocar el script.

* Una cosa a tener en cuenta  $in_footer significa que, por defecto, los scripts se cargarán en el encabezado.

Esta es una mala práctica y puede ralentizar considerablemente su sitio. Por lo tanto, si desea colocar su secuencia de comandos en el pie de página, asegúrese de que este parámetro esté establecido en verdadero.

Agregar scripts al administrador de WordPress

También puede agregar scripts al administrador. Las funciones utilizadas son exactamente las mismas, solo necesita usar un gancho diferente.

Por ejemplo:

función my_admin_scripts () {
wp_enqueue_script ('mi-gran-script', plugin_dir_url (__ARCHIVO__). '/js/my-great-script.js', array ('jquery'), '1.0.0', verdadero);
}
add_action ('admin_enqueue_scripts', 'my_admin_scripts');

En lugar de iniciar sesión, wp_enqueue_scriptsdebemos usar admin_enqueue_scripts.

Cómo cancelar la suscripción de jQuery de WordPress

Pero, ¿qué sucede si desea usar una versión diferente de jQuery que la precargada por WordPress?

Puede ponerlo en cola ... pero eso significa que habrá dos versiones de jQuery en la página.

Para evitar esto, debemos anular el registro de la versión de WP.

Así es como se ve:

// incluye jQuery personalizado
Función shapeSpace_include_custom_jquery () {

wp_deregister_script ('jquery');
wp_enqueue_script(
   'jquery', 
   'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js', 
   array(), 
   null, 
   true);
}
 add_action ('wp_enqueue_scripts', 'shapeSpace_include_custom_jquery');

Es tan fácil como usar el  wp_deregister_script () para anular el registro jQuery de WP, luego incluye el script jQuery que desea agregar.

En el ejemplo anterior, usamos el Biblioteca jQuery alojada por Google , pero obviamente lo reemplazará con la URL de su propio script.

¿No debería guardar los scripts antes de ponerlos en cola?

Si desea cargar sus scripts según sea necesario en lugar de cargarlos directamente en sus páginas, puede guardar el script antes.

Por ejemplo, en  wp_loaded:

add_action ('wp_loaded', 'register_all_scripts');
fonction register_all_scripts () {
wp_register_script (…);
}

Una vez que haya hecho eso, puede poner en cola los scripts cuando los necesite:

add_action ('wp_enqueue_scripts', 'enqueue_front_scripts');
add_action ('admin_enqueue_scripts', 'enqueue_back_scripts');

Recuerde utilizar los mismos nombres para evitar chocar con otros scripts.

Usar etiquetas condicionales

Utilice etiquetas condicionales para cargar sus scripts solo cuando sea necesario.

Esto se usa con más frecuencia en administración, donde desea usar una secuencia de comandos solo en una página específica (y no en todo el administrador). También ahorra ancho de banda y tiempo de procesamiento, lo que significa tiempos de carga más rápidos para su Sitio web.

Echa un vistazo a la documentación de scripts de cola  en el Codex de WordPress para más información.

Agregue jQuery a WordPress usando complementos

El directorio de complementos de WP también contiene muchos complementos interesantes que puede usar para insertar scripts en sus publicaciones, páginas o Temas de WordPress.

A continuación, se muestran algunos ejemplos de complementos de JavaScript / jQuery conocidos: campos personalizados avanzados , CSS y JS personalizados simples , estilos de guión et limpieza de recursos.

Crea tu propio proyecto jQuery

Una mejor comprensión de jQuery solo hará que su trabajo sea más impactante. Ya sea para su propio sitio web o para proyectos de clientes.

jQuery es bien conocido por su simplicidad, y como (con suerte) aprendió en este artículo, agregar scripts jQuery simples a WordPress es muy fácil una vez que sepa cómo hacerlo.

Sí, hay un poco de sobrecarga en comparación con el uso de HTML vanilla, pero también existe el beneficio adicional de la gestión de la dependencia y la claridad.

No solo eso, al usar pequeños trucos como eludir la compatibilidad predeterminada de jQuery WP, se ahorrará mucho tiempo, esfuerzo y código inflado.