Cómo agregar scripts jQuery a WordPress fácilmente
Publicado: 2021-09-21WordPress ha estado entre nosotros durante más de una década. Aunque la plataforma es ampliamente famosa por su facilidad de acceso, agregar jQuery en los temas y complementos de WordPress es una preocupación para muchos desarrolladores.
Anteriormente escribimos guías sobre cómo solucionar problemas como la pantalla blanca de la muerte de WordPress y poner su sitio de WordPress en modo de mantenimiento. Y en este artículo, explicaremos cómo agregar jQuery a WordPress, pero antes de sumergirnos en eso, aquí hay una breve descripción general del modo de compatibilidad de jQuery.
Modo de compatibilidad de jQuery
Es igualmente importante comprender cuál es el modo de compatibilidad de jQuery antes de comenzar a usar jQuery en WordPress.
jQuery en WordPress viene precargado y puede usarlo en su código. Sin embargo, el punto aquí es que también viene con el modo de compatibilidad de jQuery, lo que evita conflictos con otras bibliotecas de diferentes lenguajes de programación.
Aunque esto puede parecer bastante normal, hay un pequeño problema con este mecanismo de defensa. Cuando use jQuery en WordPress, tendrá que usar el término " jQuery " en lugar de nuestro antiguo signo $ .
Echa un vistazo a este ejemplo.
/* jQuery regular */
$('.ocultable').on('clic', function() {
$(esto).hide();
})
/* Modo de compatibilidad */
jQuery('.ocultable').on('clic', function() {
jQuery(esto).hide();
})
Ahora bien, el problema aquí no es tan grande, sino que no es muy agradable. En primer lugar, debe escribir " jQuery " cada vez, lo que lleva bastante tiempo y, en segundo lugar, hace que su secuencia de comandos parezca desordenada y más difícil de leer.
Pero no se preocupe, con algunas modificaciones, puede solucionar el problema de compatibilidad y poder usar el antiguo signo $.
Como referencia, $ es un alias de jQuery() y un identificador de una función.
Así es como se ve una estructura básica.
$(selector).acción()
Aquí, el signo $ se refiere a jQuery, $(selector) encuentra elementos HTML y action() define la acción que se realizará en estos elementos.
Aquí hay algunas técnicas que puede aprovechar para solucionar el problema de compatibilidad de jQuery.
¿Cómo superar el problema de compatibilidad de jQuery?
- Ingrese al modo "jQuery Stealth"
- Ingrese al modo "Sin conflicto"
Ingrese al modo sigiloso de jQuery
Fuente de la imagen: Podfeet
La primera y más común forma de evitar el problema de compatibilidad es ingresar al modo sigiloso (volverse sigiloso con su código).
Digamos que está intentando cargar el script en el pie de página. Envuelva el código en una función anónima, que en última instancia asignará jQuery a $.
Consulte este ejemplo
(función ($) {
$('.ocultable').on('clic', function() {
$(esto).hide();
})
})(jQuery);
Ahora, si desea agregar el script en el encabezado, envuelva todo en una función lista para documentos y pase $ en el camino.
Aquí hay un ejemplo.
jQuery(documento).ready(función( $ ) {
$('.ocultable').on('clic', function() {
$(esto).hide();
})
});
Entrar en modo sin conflicto
Ahora bien, esta es una forma bastante sencilla de solucionar los problemas de compatibilidad. Todo lo que tiene que hacer es declarar esta línea de código encima de su secuencia de comandos y puede usar $j en lugar del signo $ predeterminado.
var $j = jQuery.noConflict();
Ahora que sabe cómo usar jQuery en WordPress, pasemos a nuestro tema principal: cómo agregar scripts jQuery a su sitio de WordPress.
Cómo agregar jQuery a los sitios de WordPress
Fuente de la imagen: fl1digital.com
Agregar jQuery a WordPress se puede hacer fácilmente mediante un proceso llamado Encolado .
Usamos el elemento <link> para agregar scripts en sitios web HTML regulares. También podemos hacer lo mismo en WordPress. Sin embargo, necesitamos jugar algunas de las funciones especiales de WordPress para entrar en eso. Tenga en cuenta que hacer esto manejaría todas las dependencias por usted.
Digamos que estás trabajando en un tema de WordPress. Utilice esta función en su archivo functions.php .
wp_enqueue_script()
Así es como se ve.
función my_theme_scripts() {
wp_enqueue_script( 'my-great-script', get_template_directory_uri() . '/js/my-great-script.js', array( 'jquery' ), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');
Aquí hay cinco argumentos que tomaría esta función.
- $handle: un identificador único que podría usarse para referirse a un script
- $src: ubicación de su archivo de script
- $deps: se usa para especificar una matriz de dependencias
- $ver: el número de versión del script
- $in_footer: para instruir a WordPress sobre dónde colocar el script
De manera predeterminada, la secuencia de comandos se cargaría en el encabezado de su sitio web, lo cual no se recomienda porque afecta significativamente la velocidad de su sitio.
Relacionado: Su guía definitiva sobre cómo editar WordPress: HTML, CSS, PHP, JavaScript
Cómo agregar scripts jQuery al administrador de WordPress
Puede agregar jQuery al administrador de WordPress usando las mismas funciones. Todo lo que tienes que hacer aquí es usar un gancho diferente.
aquí hay un ejemplo
función my_admin_scripts() {
wp_enqueue_script( 'my-great-script', plugin_dir_url( __FILE__ ) . '/js/my-great-script.js', array( 'jquery' ), '1.0.0', true );
}
add_action('admin_enqueue_scripts', 'my_admin_scripts');
Ahora simplemente intercambie wp_enqueue_scripts con admin_enqueue_scripts y estará listo para comenzar.
Cómo cancelar el registro de jQuery en WordPress
Necesitará cancelar el registro de jQuery de WordPress si está dispuesto a usar una versión diferente de jQuery de las precargas.
Aquí hay un ejemplo de cómo puede cancelar el registro de jQuery en WordPress.
// incluir 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 simple. Todo lo que necesita hacer es cancelar el registro de jQuery de WordPress usando wp_deregister_script() e incluir el script que desee.
Una cosa para recordar aquí es que hemos agregado la biblioteca jQuery alojada en Google en este ejemplo. Debe cambiarlo con la URL de su propio script.
¿Debe registrar los scripts antes de ponerlos en cola?
Puede registrar el script antes en el proceso si desea que se carguen solo cuando sea necesario en sus páginas.
aquí hay un ejemplo
add_action('wp_loaded', 'register_all_scripts');
función register_all_scripts()
{
wp_register_script(…);
}
Una vez que haya terminado con esto, ponga en cola los scripts cuando los necesite. Así es cómo.
add_action('wp_enqueue_scripts', 'enqueue_front_scripts');
add_action('admin_enqueue_scripts', 'enqueue_back_scripts');
Uso de etiquetas condicionales
También puede usar etiquetas condicionales para cargar su jQuery en WordPress solo cuando sea necesario.
Aunque este método generalmente se usa en Admin donde lo desea solo en páginas específicas, ahorra mucho ancho de banda y tiempo de procesamiento, lo que en última instancia mejora las velocidades de carga de su sitio.
Consulte la documentación de scripts de encolado de administrador de WordPress para obtener más información sobre el uso de etiquetas adicionales.
Cómo agregar jQuery a WordPress usando complementos
WordPress se jacta de su directorio de complementos de más de 45000 complementos. Puede encontrar un complemento para cualquier funcionalidad que desee en su sitio de WordPress.
Lo mismo es para agregar jQuery en las páginas, temas y publicaciones del sitio de WordPress, etc.
Estos son algunos de los complementos más populares para agregar jQuery a WordPress.
- Campos personalizados avanzados
- CSS y JS personalizados simples
- Guiones N Estilos
- Limpieza de activos
Conclusión
Ahí vas. Ahora ya sabe cómo agregar y usar WordPress jQuery.
Aplicar este conocimiento a tus proyectos te ayudaría a crear grandes proyectos. También puede leer nuestras guías definitivas sobre temas como JPG vs. JPEG y WordPress White Label para aumentar su conocimiento.