Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Qué es: wp_enqueue

Nota editorial: Ganamos una comisión de los enlaces de socios en WPBeginner. Las comisiones no afectan a las opiniones o evaluaciones de nuestros editores. Más información sobre Proceso editorial.

wp_enqueue es una función de WordPress que permite a los desarrolladores poner en cola 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 determinada, y WordPress los cargará automáticamente.

Esto ayuda a garantizar que las páginas se cargan de forma rápida y eficaz, y también puede evitar conflictos entre diferentes secuencias de comandos y estilos.

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

Glossary: wp_enqueue

¿Cuándo se debe poner en cola JavaScript y CSS en WordPress?

Puede utilizar código JavaScript y CSS para personalizar su sitio web en WordPress, y los desarrolladores utilizan estos idiomas cuando crean plugins y temas para WordPress.

  • JavaScript se ejecuta en el navegador / explorador del usuario y se utiliza para añadir elementos interactivos a su sitio web, como carruseles/ alertas, botones, ventanas emergentes, etc.
  • CSS (Cascading Style Sheets) se utiliza para definir la apariencia visual de su sitio, como el tamaño y el color de las fuentes, el color de fondo y el ancho de la página.

Si usted es propietario de un sitio web y desea añadir JavaScript y CSS a entradas y páginas específicas, entonces no necesitará utilizar wp_enqueue. En su lugar, le recomendamos que utilice el plugin de fragmentos de código WPCode porque es la forma más segura de añadir código a un sitio web WordPress.

Puede obtener más información en nuestras guías sobre cómo añadir fácilmente JavaScript y cómo añadir fácilmente CSS personalizado a su sitio de WordPress.

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

¿Cómo funciona el sistema Enqueue de WordPress?

Los nuevos desarrolladores pueden cometer el error de llamar directamente a scripts y hojas de estilos en sus plugins y temas. Esto puede dar lugar a conflictos y perjudicar el rendimiento de WordPress.

Para evitar estos problemas, WordPress ofrece un sistema de cola de espera. Esto proporciona a los desarrolladores una forma de cargar scripts y hojas de estilos para que todo funcione correctamente y sin conflictos.

Así funciona el sistema de cola de espera:

  1. En primer lugar, debe registrar el script o la hoja de estilos mediante la función wp_register para que WordPress sepa que existe y dónde encontrarlo.
  2. A continuación, ponga en cola los scripts y las hojas de estilos mediante la función wp_enqueue, para que WordPress sepa que desea cargarlos.
  3. Después, una vez cargada la página, WordPress cargará cualquier script en cola en el orden correcto para asegurarse de que todo funciona correctamente.

Puede obtener más información en nuestra guía sobre cómo añadir correctamente JavaScript y estilos en WordPress.

Ejemplos de código

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

Puede que le interese ver algunos ejemplos de código útiles que demuestran cómo utilizar el sistema enqueue de WordPress.

Aquí tienes un código de ejemplo que puedes pegar en los archivos de tus plugins o en el archivofunctions. 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 poner en cola tus hojas de estilos:

<?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 una explicación completa de estos ejemplos de código, consulte nuestra guía sobre cómo añadir correctamente JavaScript y estilos en WordPress.

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

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Lecturas adicionales

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

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