Tutoriales de WordPress de Confianza, cuando más los necesitas.
Guía para Principiantes de WordPress
Copa WPB
25 Millones+
Sitios web que usan nuestros plugins
16+
Años de experiencia en WordPress
3000+
Tutoriales de WordPress de expertos

¿Qué es: wp_enqueue

wp_enqueue es una función de WordPress que permite a los desarrolladores encolar scripts (archivos JavaScript) y estilos (archivos CSS).

Esto significa que los desarrolladores pueden indicar a WordPress qué scripts y estilos desean utilizar en una página en particular, y WordPress los cargará automáticamente.

Esto ayuda a garantizar que tus páginas se carguen de forma rápida y eficiente, y también puede ayudar a prevenir conflictos entre diferentes scripts y estilos.

Al encolar scripts correctamente, los desarrolladores pueden crear plugins, temas y sitios web que sean eficientes, mantenibles y compatibles.

Glosario: wp_enqueue

¿Cuándo debes encolar JavaScript y CSS en WordPress?

Puedes usar código JavaScript y CSS para personalizar tu sitio web de WordPress, y los desarrolladores usan estos lenguajes al crear plugins y temas de WordPress.

  • JavaScript se ejecuta en el navegador del usuario y se utiliza para agregar elementos interactivos a tu sitio web, como sliders, alertas, botones, popups y más.
  • CSS (Hojas de Estilo en Cascada) se utiliza para definir la apariencia visual de tu sitio, como el tamaño y el color de las fuentes, el color de fondo y el ancho de la página.

Si eres propietario de un sitio web y deseas agregar JavaScript y CSS a publicaciones y páginas específicas, entonces no necesitarás usar wp_enqueue. En su lugar, te recomendamos que utilices el plugin de fragmentos de código WPCode porque es la forma más segura de agregar código a un sitio web de WordPress.

Puedes aprender más en nuestras guías sobre cómo agregar fácilmente JavaScript y cómo agregar fácilmente CSS personalizado a tu sitio de WordPress.

Sin embargo, si eres un desarrollador o estás aprendiendo a crear plugins y temas de WordPress, entonces necesitarás encolar correctamente los archivos JavaScript y las hojas de estilo CSS en tus proyectos.

¿Cómo funciona el sistema de encolado de WordPress?

Los nuevos desarrolladores pueden cometer el error de llamar directamente a scripts y hojas de estilo en sus plugins y temas. Esto puede generar conflictos y afectar el rendimiento de WordPress.

Para evitar estos problemas, WordPress proporciona un sistema de encolado. Esto le da a los desarrolladores una forma de cargar scripts y hojas de estilo para que todo funcione correctamente y sin conflictos.

Así es como funciona el sistema de encolado:

  1. Primero, necesitas registrar el script o la hoja de estilo usando la función wp_register para que WordPress sepa que existe y dónde encontrarlo.
  2. Luego, encolas los scripts y las hojas de estilo usando la función wp_enqueue, y esto le permite a WordPress saber que deseas cargarlos.
  3. Luego, una vez que se carga la página, WordPress cargará todos los scripts encolados en el orden correcto para asegurarse de que todo funcione correctamente.

Puedes aprender más en nuestra guía sobre cómo agregar correctamente JavaScript y estilos en WordPress.

Ejemplos de código

Puedes usar las funciones wp_enqueue_script y wp_enqueue_style para indicarle a WordPress cuándo cargar un archivo, dónde encontrarlo y cuáles son sus dependencias.

Quizás te gustaría ver algunos ejemplos de código útiles que demuestran cómo usar el sistema de encolado de WordPress.

Aquí tienes un ejemplo de código que puedes pegar en los archivos de tu plugin o en el archivo functions.php de tu tema para cargar correctamente los scripts en WordPress:

?php
function wpb_adding_scripts() {
  
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
  
wp_enqueue_script('my_amazing_script');
}
   
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );  
?>

Y aquí tienes un ejemplo de cómo encolar tus hojas de estilo:

<?php
function wpb_adding_styles() {
wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_style('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );  
?>

Para explicaciones completas de estos ejemplos de código, por favor consulta nuestra guía sobre cómo agregar correctamente JavaScript y estilos en WordPress.

Esperamos que este artículo te haya ayudado a aprender más sobre wp_enqueue en WordPress. También te recomendamos consultar nuestra lista de Lecturas Adicionales a continuación para ver artículos relacionados con consejos, trucos e ideas útiles de WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.

Lectura adicional

El Kit de herramientas definitivo para WordPress

Obtén acceso GRATUITO a nuestro kit de herramientas: ¡una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!