{"id":35120,"date":"2023-09-11T22:28:57","date_gmt":"2023-09-11T20:28:57","guid":{"rendered":"\/tutoriales\/?p=35120"},"modified":"2023-09-11T22:28:59","modified_gmt":"2023-09-11T20:28:59","slug":"wp_enqueue_scripts","status":"publish","type":"post","link":"\/ar\/tutoriales\/wp_enqueue_scripts","title":{"rendered":"C\u00f3mo poner en cola scripts usando el hook wp_enqueue_scripts en WordPress"},"content":{"rendered":"<p>El action hook <strong>wp_enqueue_scripts<\/strong> es un componente vital del proceso de desarrollo de WordPress.&nbsp;<\/p><p>Junto con las funciones <strong>wp_enqueue_script()<\/strong> y <strong>wp_enqueue_style()<\/strong>, ayuda a WordPress a mostrar contenido en el sitio web.<\/p><p>En este tutorial, cubriremos el action hook <strong>wp_enqueue_scripts<\/strong> junto con sus funciones complementarias y proporcionaremos varios casos de uso para ayudarte a mejorar tus proyectos de WordPress.<\/p><p class=\"has-text-align-center\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Mega-WordPress-Cheat-ES.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">Descarga la hoja de trucos de WordPress definitiva<\/a><\/p><h2 class=\"wp-block-heading\" id=\"h-como-funciona-el-enqueueing-en-wordpress\">C&oacute;mo funciona el Enqueueing en WordPress<\/h2><p>Poner en cola en WordPress se refiere a registrar y a&ntilde;adir scripts y hojas de estilo a tu sitio.<\/p><p>Las funciones <strong>wp_enqueue_script()<\/strong> y <strong>wp_enqueue_style()<\/strong> ordenan al <strong>servidor de WordPress<\/strong> que a&ntilde;ada estos scripts y hojas de estilo a una cola para cargarlos en el front-end de tu sitio web.&nbsp;<\/p><p>El principal aspecto del enqueueing es que puede mejorar el rendimiento del sitio web al reducir los tiempos de carga de la p&aacute;gina y ayudar a evitar conflictos de scripts cuando diferentes plugins o temas de WordPress intentan cargar el mismo script u hoja de estilo.<\/p><h2 class=\"wp-block-heading\" id=\"h-entender-wp-enqueue-script\">Entender wp_enqueue_script<\/h2><p>El proceso de enqueueing consiste en el <a href=\"\/ar\/tutoriales\/que-son-hooks-wordpress\">hook de WordPress<\/a> <strong>wp_enqueue_scripts<\/strong> y dos funciones adicionales para hojas de estilo y scripts.<\/p><p>Para empezar, <strong>wp_enqueue_scripts<\/strong> es un gancho de acci&oacute;n usado para poner en cola hojas de estilo y archivos JavaScript en tu sitio WordPress. Este gancho se utiliza normalmente en los archivos <strong>functions.php<\/strong> o plugin de un tema de WordPress.<\/p><p>Mientras tanto, <strong>wp_register_style()<\/strong> y <strong>wp_enqueue_style() <\/strong>son funciones de WordPress que trabajan con hojas de estilo. La funci&oacute;n register registra una hoja de estilo para usarla en un tema o plugin, mientras que la funci&oacute;n enqueue carga una hoja de estilo registrada en un sitio web WordPress.<\/p><p>Por defecto, estas dos funciones tienen dos par&aacute;metros principales:<\/p><ul class=\"wp-block-list\">\n<li><strong>$handle:<\/strong> un nombre &uacute;nico para una hoja de estilo que la identificar dentro de la base de c&oacute;digo de WordPress. Debe coincidir con el identificador que especificaste al registrar la hoja de estilos.&nbsp;<\/li>\n\n\n\n<li><strong>$src:<\/strong> una URL o una ruta al archivo de la hoja de estilos. Puede ser una ruta relativa a una hoja de estilos en el directorio del tema o plugin de WordPress o una URL absoluta a una hoja de estilos alojada en otro lugar. $src es opcional y s&oacute;lo necesita ser especificado si no lo hiciste en la funci&oacute;n wp_register_style().<\/li>\n<\/ul><p>Como resultado, es posible usar la funci&oacute;n <strong>wp_enqueue_style()<\/strong> sin usar primero <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_register_style\/\" target=\"_blank\" rel=\"noreferrer noopener\">wp_register_style()<\/a>.<\/p><p>Para ilustrar, aqu&iacute; est&aacute; el c&oacute;digo con ambas funciones:<\/p><pre class=\"wp-block-preformatted\">function register_plugin_styles() {\n\twp_register_style( 'plugin-development', plugins_url( '\/css\/plugin.css' ) );\n\twp_enqueue_style( 'plugin-development' );\n}\nadd_action( 'wp_enqueue_scripts', 'register_plugin_styles' );<\/pre><p>Ahora, aqu&iacute; est&aacute; el c&oacute;digo con s&oacute;lo <strong>wp_enqueue_style():<\/strong><\/p><pre class=\"wp-block-preformatted\">function register_plugin_styles() {\nwp_enqueue_style( 'plugin-development', plugins_url( '\/css\/plugin.css' ) );\n}\nadd_action( 'wp_enqueue_scripts', 'register_plugin_styles' );<\/pre><p>Igualmente importantes, <strong>wp_register_script()<\/strong> y <strong>wp_enqueue_script()<\/strong> son funciones de WordPress responsables de la gesti&oacute;n de scripts personalizados. La funci&oacute;n register registra archivos JavaScript personalizados, mientras que la funci&oacute;n <strong>wp_enqueue_script()<\/strong> carga los scripts registrados en el sitio web. Estas funciones toman dos par&aacute;metros principales:<\/p><ul class=\"wp-block-list\">\n<li><strong>$handle<\/strong>: nombre &uacute;nico para el script. Recuerda que el handle debe coincidir entre las funciones <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_register_script\/\" target=\"_blank\" rel=\"noreferrer noopener\">wp_register_script()<\/a> y <strong>wp_enqueue_script()<\/strong>.<\/li>\n\n\n\n<li><strong>$src<\/strong>: URL o ruta al archivo de script jQuery. Esto es opcional para <strong>wp_enqueue_script()<\/strong> si ya lo has especificado en la funci&oacute;n register.<\/li>\n<\/ul><p>Adem&aacute;s, puedes especificar tres par&aacute;metros adicionales:<\/p><ul class=\"wp-block-list\">\n<li><strong>$deps<\/strong>: un array de otros scripts de los que depende el script actual. Por ejemplo, archivos JavaScript jQuery o json2.<\/li>\n\n\n\n<li><strong>$ver<\/strong>: el n&uacute;mero de versi&oacute;n del script. &Uacute;til si tienes muchos scripts diferentes y quieres hacer un seguimiento de sus versiones.<\/li>\n\n\n\n<li><strong>$in_footer<\/strong>: determina si se carga el script en el pie de p&aacute;gina. Por defecto, WordPress carga los scripts en la secci&oacute;n <strong>&lt;head&gt;.<\/strong><\/li>\n<\/ul><p>De forma similar a <strong>wp_enqueue_style()<\/strong>, puedes usar la funci&oacute;n <strong>wp_enqueue_script()<\/strong> sin registrarla primero.<\/p><p>Aqu&iacute; tienes un ejemplo con ambas funciones:<\/p><pre class=\"wp-block-preformatted\">function register_plugin_script() {\n\twp_register_script( 'new-script', plugins_url( '\/script.js' ) );\n\twp_enqueue_script( 'new-script' );\n}\nadd_action( 'wp_enqueue_scripts', 'register_plugin_script' );<\/pre><p>Ahora, veamos un ejemplo con una sola funci&oacute;n <strong>wp_enqueue_script():<\/strong><\/p><pre class=\"wp-block-preformatted\">function register_plugin_script() {\nwp_enqueue_script( 'new-script', plugins_url( '\/script.js' ) );\n}\nadd_action( 'wp_enqueue_scripts', 'register_plugin_script' );<\/pre><h2 class=\"wp-block-heading\" id=\"h-como-utilizar-wp-enqueue-script-en-wordpress\">C&oacute;mo utilizar wp_enqueue_script en WordPress<\/h2><p>Ya que hemos cubierto los aspectos principales de la funci&oacute;n <strong>wp_enqueue_script()<\/strong>, es hora de revisar algunos casos de uso populares para ayudarte a entenderla mejor.<\/p><h3 class=\"wp-block-heading\" id=\"h-como-utilizar-wp-enqueue-script-con-jquery\">C&oacute;mo utilizar wp_enqueue_script con jQuery<\/h3><p>La funci&oacute;n <strong>wp_enqueue_script() <\/strong>tiene un par&aacute;metro <strong>array() <\/strong>adicional que permite a los usuarios especificar las dependencias de script necesarias.<\/p><pre class=\"wp-block-preformatted\">function my_custom_script() {\n    wp_enqueue_script( 'registered-script', get_template_directory_uri() . '\/js\/my-script.js', array('jquery'), '1.0', true );\n}\nadd_action( 'wp_enqueue_scripts', 'my_custom_script' );<\/pre><p>En el c&oacute;digo anterior, hemos utilizado la funci&oacute;n <strong>wp_enqueue_scripts()<\/strong> para poner en cola un script llamado <strong>my-script.js<\/strong>.<\/p><p>Hemos especificado que depende de la librer&iacute;a jQuery y que se cargar&aacute; en el pie de p&aacute;gina. Tambi&eacute;n usamos la funci&oacute;n <strong>get_template_directory_uri()<\/strong> para obtener la URL del directorio actual del tema.<\/p><h3 class=\"wp-block-heading\" id=\"h-como-cargar-scripts-en-el-pie-de-pagina-con-wp-enqueue-script\">C&oacute;mo cargar scripts en el pie de p&aacute;gina con wp_enqueue_script<\/h3><p>Puedes mejorar la velocidad de tu sitio web cargando los scripts en el pie de p&aacute;gina. Por defecto, WordPress carga los scripts en la secci&oacute;n de cabecera de tu sitio, lo que significa que se cargan antes que el resto del contenido.<\/p><p>Esto puede resultar en tiempos de carga de p&aacute;gina m&aacute;s lentos ya que el navegador espera por estos scripts.<\/p><p>Si mueves los scripts a la secci&oacute;n de pie de p&aacute;gina, el navegador puede mostrar primero el contenido y luego cargar los scripts. Para m&aacute;s informaci&oacute;n, consulta el siguiente ejemplo:<\/p><pre class=\"wp-block-preformatted\">function plugin_assets() {\nwp_enqueue_script( 'custom-script', plugins_url( '\/js\/my-script.js' , __FILE__ ), array( 'jquery' ), true );\n}\nadd_action( 'wp_enqueue_scripts', 'plugin_assets' );<\/pre><p>Aqu&iacute;, hemos establecido el par&aacute;metro <strong>$in_footer<\/strong> de la <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_script\/\" target=\"_blank\" rel=\"noreferrer noopener\">funci&oacute;n wp_enqueue_script()<\/a> como <strong>true<\/strong>, lo que pondr&aacute; en cola el script en el pie de p&aacute;gina en lugar de <strong>&lt;head&gt;<\/strong>.<\/p><h3 class=\"wp-block-heading\" id=\"h-como-utilizar-wp-enqueue-scripts-para-especificar-medios-para-estilos\">C&oacute;mo utilizar wp_enqueue_scripts para especificar medios para estilos<\/h3><p>Las funciones <strong>wp_register_style()<\/strong> y <strong>wp_enqueue_style()<\/strong> incluyen un par&aacute;metro media. Especifica el tipo de medio previsto para la hoja de estilos. Por defecto, este par&aacute;metro se establece como <strong>all<\/strong>, lo que significa que la hoja de estilos se aplica a todos los tipos de medios.<\/p><p>Este es el aspecto de una funci&oacute;n modificada:<\/p><pre class=\"wp-block-preformatted\">function my_custom_styles() {\n  \/\/ Register custom stylesheet\n  wp_register_style( 'my-styles', get_template_directory_uri() . '\/css\/my-styles.css', array(), '1.0', 'screen' );\n  \/\/ Enqueue custom stylesheet\n  wp_enqueue_style( 'my-styles' );\n}\n\/\/ Add the hook to the wp_enqueue_scripts action\nadd_action( 'wp_enqueue_scripts', 'my_custom_styles' );<\/pre><p>En este ejemplo, hemos creado una funci&oacute;n llamada <strong>my_custom_styles<\/strong> que registra y pone en cola una hoja de estilo personalizada llamada <strong>my-styles.css<\/strong>.<\/p><p>Tambi&eacute;n hemos establecido el par&aacute;metro media en <strong>screen<\/strong>, lo que significa que la hoja de estilos se aplica a medios de pantalla como pantallas de escritorio, port&aacute;tiles o tabletas.<\/p><p>Tambi&eacute;n puedes utilizar diferentes tipos de medios, como <strong>print<\/strong> para medios impresos o <strong>handheld<\/strong> para dispositivos de mano.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/ar\/hosting-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/blog.hostinger.io\/com-ar-tutoriales\/wp-content\/uploads\/sites\/38\/2024\/06\/ES-New-WP_in-text-banner.png\" alt=\"\" class=\"wp-image-40615\" srcset=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2024\/06\/ES-New-WP_in-text-banner.png 1024w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2024\/06\/ES-New-WP_in-text-banner-300x88.png 300w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2024\/06\/ES-New-WP_in-text-banner-150x44.png 150w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2024\/06\/ES-New-WP_in-text-banner-768x225.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusi&oacute;n<\/h2><p>El hook wp_enqueue_scripts y las funciones complementarias como <strong>wp_enqueue_script()<\/strong> <strong>wp_enqueue_style()<\/strong> son &uacute;tiles para a&ntilde;adir scripts y estilos personalizados a tu sitio WordPress de forma f&aacute;cil y eficiente.<\/p><p>En este tutorial, hemos cubierto el proceso de enqueueing de WordPress y hemos proporcionado varios ejemplos de casos de uso para las funciones <strong>wp_register_script()<\/strong>, <strong>wp_register_style(), wp_enqueue_script(), y wp_enqueue_style().<\/strong><\/p><p>Esperamos que este tutorial te haya resultado &uacute;til y que ahora entiendas mejor el proceso de enqueueing.&nbsp;Si tienes alguna pregunta, consulta nuestra gu&iacute;a de WordPress o deja un comentario a continuaci&oacute;n.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>El action hook wp_enqueue_scripts es un componente vital del proceso de desarrollo de WordPress.&nbsp; Junto con las funciones wp_enqueue_script() y wp_enqueue_style(), ayuda a WordPress a mostrar contenido en el sitio web. En este tutorial, cubriremos el action hook wp_enqueue_scripts junto con sus funciones complementarias y proporcionaremos varios casos de uso para ayudarte a mejorar tus [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/ar\/tutoriales\/wp_enqueue_scripts\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":317,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"Usar wp_enqueue_script para poner en cola activos en WordPress","rank_math_description":"wp_enqueue_scripts es un hook de WordPress que se utiliza cuando se cargan scripts y estilos front-end. Mira este art\u00edculo y aprende a usarlo.","rank_math_focus_keyword":"wp_enqueue_scripts","footnotes":""},"categories":[4747,14348],"tags":[14432],"class_list":["post-35120","post","type-post","status-publish","format-standard","hentry","category-wordpress","category-experto","tag-wp_enqueue_scripts"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-use-wp-enqueue-script-in-wordpress","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp_enqueue_script","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp_enqueue_scripts","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp_enqueue_script","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-enqueue-scripts-using-wp_enqueue_scripts-hook-in-wordpress","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-enqueue-scripts-using-wp_enqueue_scripts-hook-in-wordpress","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp_enqueue_scripts","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp_enqueue_scripts","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp_enqueue_scripts","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp_enqueue_script","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wp_enqueue_script","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-use-wp-enqueue-script-in-wordpress","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-use-wp-enqueue-script-in-wordpress","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-use-wp-enqueue-script-in-wordpress","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/posts\/35120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/users\/317"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/comments?post=35120"}],"version-history":[{"count":15,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/posts\/35120\/revisions"}],"predecessor-version":[{"id":35245,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/posts\/35120\/revisions\/35245"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/media?parent=35120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/categories?post=35120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/tags?post=35120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}