Cuando empezamos a trabajar con WordPress, añadir JavaScript y CSS parecía bastante sencillo. Simplemente insertabas el código directamente en tu tema o plugin y seguías adelante.
Pero con el paso de los años, nosotros (y muchos de nuestros lectores) aprendimos por las malas que este atajo puede crear serios problemas. Desde conflictos entre scripts hasta sitios enteros que se rompen después de una actualización, lo hemos visto todo.
La buena noticia es que WordPress tiene una forma adecuada de cargar tus scripts y estilos, y una vez que la conozcas, te ahorrarás muchos dolores de cabeza en el futuro.
En esta guía, te mostraremos cómo añadir correctamente JavaScript y CSS en WordPress. Ya sea que estés creando un tema personalizado o tu primer plugin, estos pasos te ayudarán a hacerlo de manera segura y confiable.
Error común al añadir scripts y hojas de estilo en WordPress
Muchos desarrolladores nuevos de plugins de WordPress y temas cometen el error de añadir directamente sus scripts o CSS en línea en sus plugins y temas.
Algunos usan erróneamente la función wp_head para cargar sus scripts y hojas de estilo.
<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
?>
Si bien el código anterior puede parecer más fácil, es la forma incorrecta de añadir scripts en WordPress y conduce a más conflictos en el futuro.
Por ejemplo, si cargas jQuery manualmente y otro plugin carga jQuery a través del método adecuado, entonces tendrás jQuery cargado dos veces. Si se carga en cada página, esto afectará negativamente la velocidad y el rendimiento de WordPress.
También es posible que las dos sean versiones diferentes, lo que también puede causar conflictos.
Dicho esto, veamos la forma correcta de agregar scripts y hojas de estilo.
¿Por qué poner en cola scripts y estilos en WordPress?
WordPress tiene una sólida comunidad de desarrolladores. Miles de personas de todo el mundo desarrollan temas y plugins para WordPress.
Para asegurarse de que todo funcione correctamente y que nadie interfiera con el trabajo de otro, WordPress tiene un sistema de puesta en cola. Este sistema proporciona una forma programable de cargar JavaScript y hojas de estilo CSS.
Al usar las funciones wp_enqueue_script y wp_enqueue_style, le indicas a WordPress cuándo cargar un archivo, dónde cargarlo y cuáles son sus dependencias.
Este sistema también permite a los desarrolladores utilizar las bibliotecas de JavaScript integradas que vienen con WordPress, en lugar de cargar el mismo script de terceros varias veces. Esto reduce el tiempo de carga de la página y ayuda a evitar conflictos con otros plugins y temas.
¿Cómo poner en cola scripts correctamente en WordPress?
Cargar scripts correctamente en WordPress es muy fácil. A continuación, se muestra un ejemplo de código que pegarías en el archivo de tus plugins, en el archivo functions.php de tu tema, o en un plugin de fragmentos de código para cargar scripts correctamente 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' );
?>
Explicación:
Empezamos registrando nuestro script a través de la función wp_register_script(). Esta función acepta 5 parámetros:
- $handle – El handle es el nombre único de tu script. El nuestro se llama “my_amazing_script”
- $src – src es la ubicación de tu script. Estamos usando la función plugins_url para obtener la URL correcta de nuestra carpeta de plugins. Una vez que WordPress lo encuentre, buscará nuestro nombre de archivo amazing_script.js en esa carpeta.
- $deps – deps es para dependencias. Dado que nuestro script utiliza jQuery, hemos agregado jQuery en el área de dependencias. WordPress cargará jQuery automáticamente si aún no se está cargando en el sitio.
- $ver – Este es el número de versión de nuestro script. Este parámetro no es obligatorio.
- $in_footer – Queremos cargar nuestro script en el pie de página, por lo que hemos establecido el valor en true. Si deseas cargar el script en la cabecera, entonces lo harías false.
Después de proporcionar todos los parámetros en wp_register_script, podemos simplemente llamar al script en wp_enqueue_script(), lo que hace que todo suceda.
El último paso es usar el action hook wp_enqueue_scripts para cargar realmente el script. Dado que este es un código de ejemplo, lo hemos agregado justo debajo de todo lo demás.
Si estuvieras agregando esto a tu tema o plugin, entonces puedes colocar este action hook donde el script es realmente requerido. Esto te permite reducir la huella de memoria de tu plugin.
Ahora algunos se preguntarán por qué damos el paso extra de registrar el script primero y luego ponerlo en cola. Bueno, esto permite que otros propietarios de sitios desregistren tu script sin modificar el código principal de tu plugin.
Poner en cola estilos correctamente en WordPress
Al igual que los scripts, también puedes poner en cola tus hojas de estilo. Mira el siguiente ejemplo:
<?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' );
?>
En lugar de usar wp_enqueue_script, ahora estamos usando wp_enqueue_style para agregar nuestra hoja de estilo.
Notarás que hemos usado el action hook wp_enqueue_scripts tanto para estilos como para scripts. A pesar del nombre, esta función funciona para ambos.
En los ejemplos anteriores, hemos utilizado la función plugins_url para apuntar a la ubicación del script o estilo que queríamos poner en cola.
Sin embargo, si estás usando la función enqueue scripts en tu tema, simplemente usa get_template_directory_uri() en su lugar. Si estás trabajando con un tema hijo, usa get_stylesheet_directory_uri().
A continuación se muestra un código de ejemplo:
<?php
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>
Esperamos que este artículo te haya ayudado a aprender cómo agregar correctamente JavaScript y estilos en WordPress. También puedes estudiar el código fuente de los mejores plugins de WordPress para ver ejemplos de código reales, o consultar nuestra guía sobre cómo agregar fácilmente JavaScript en publicaciones o páginas 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.
Mrteesurez
Esta publicación es un poco técnica, pero me encanta ya que me dedico al desarrollo de WordPress. Me hizo aprender más para usar PHP y agregar hojas de estilo y scripts de manera adecuada. Las mejores prácticas se presentan en este artículo para que no haya conflictos entre códigos en el futuro.
Schroedingers Katze
¡Salud, gracias por compartir! Gran explicación.
Soporte de WPBeginner
You’re welcome
Administrador
Jean-Michel
Hola,
Seguí lo que se dice aquí pero ahora me aparece una página blanca vacía en mi sitio web. ¿Alguien podría darme una pista?
Gracias
Soporte de WPBeginner
Parece que copiaste el código incorrectamente o tuvo un problema con algo en tu sitio. Puedes eliminar el código usando: https://www.wpbeginner.com/beginners-guide/how-to-use-ftp-to-upload-files-to-wordpress-for-beginners/
Si lo agregaste manualmente, de lo contrario podrías usar:
https://www.wpbeginner.com/wp-tutorials/how-to-fix-the-wordpress-white-screen-of-death/
Administrador
Orhan
Este artículo me fue muy útil. Gracias.
Mark
Típico artículo que te deja más confundido después que antes...
Zaved Hossain
Esto está bien, aunque mi práctica habitual es agregar wp_enqueue_script/style en una sola línea sin registrar. Los programadores deben tener cuidado con los parámetros, quizás una pequeña explicación de eso sería útil. Por ejemplo, las diferentes versiones de jquery (tu script de jquery puede requerir una versión diferente a la de wordpress) y dónde agregarlo (encabezado o pie de página, lo cual está determinado por el parámetro true/false). El script de jquery debe agregarse en el encabezado (de ahí que se deba pasar un 'false' como valor del parámetro), de lo contrario, puede que no funcione.
Hansjörg Leichsenring
A menudo hay muchos style.css.
¿Cómo puedo asegurar el orden de carga correcto con enque y asegurarme de que el CSS hijo se cargue al final?
Saludos desde Alemania
Hansjörg
Carlos Araya
¿Cómo paso un parámetro vacío a register_script? Quiero asegurarme de que el script se cargue en la parte inferior de la página, pero no encuentro información sobre si este es el comportamiento predeterminado o no.
Kerry Beeher
Bonjour,
Gracias por tu excelente recurso. ¡¡¡Merci!!!
Soy un poco novato y recién comienzo mi viaje para aprender PHP y cómo WordPress usa wp_enqueue_script y wp_register_script para agregar JavaScript y CSS.
Uso este plugin gratuito llamado Easy Code Manager para ayudar a ejecutar tus ejemplos:
sin embargo, no estoy seguro de si este es el plugin correcto para usar.
Leí antes que no es la mejor idea modificar el código en functions.php, así que me pregunto si esto está bien hacerlo.
¿No cambiará con una actualización del tema?
Perdón por la pregunta, todavía estoy aprendiendo WordPress.
Gracias,
Kerry
Vaibhav Bansal
Quiero agregar un anuncio de Amazon
Intenté agregarlo en el widget de texto, pero aparece en blanco.
Abajo está el código-
Este es mi sitio-
Ayúdame. ¿Cómo agrego js a mi sitio?
Soporte de WPBeginner
Hola Vaibhav,
Por favor, consulta nuestra lista de plugins de gestión de anuncios para WordPress. Puedes usar estos plugins para mostrar anuncios en tu sitio de WordPress sin editar los archivos de tu tema.
Administrador
pradyumna
He insertado un javascript usando este plugin, pero ahora tengo que eliminarlo. He intentado desinstalar y desactivar el plugin, pero el javascript todavía se ejecuta.
Vijay.Rajpal
Hola Señor,
Estoy usando el tema esteem y quería agregar algunas funcionalidades de javascript a mi sitio web como lightbox. He creado un tema hijo y el código es el siguiente. en el functions.php.
y estoy recibiendo un error:-Parse error: syntax error, unexpected '{' in E:\InstantWP_4.5\iwpserver\htdocs\wordpress\wp-content\themes\esteem-child\functions.php on line 18
¡¡¡Por favor Ayuda!!! Estoy usando sublime como mi editor de texto.
¡¡¡Por favor Ayuda!!!!!
Soporte de WPBeginner
Hay un { inesperado en el código. Ve a la línea 18 de tu archivo de funciones y luego estudia el código cuidadosamente. Es posible que hayas olvidado algún código pequeño como un ; faltante
Administrador
Pramod
hola…..
Estoy agregando un archivo .js en el directorio js de wordpress y le doy su referencia en funcation.php
pero no funciona
wp_enqueue_script( ‘any-navigation’, get_template_directory_uri() . ‘/js/menu.js’);
Bobbie
¡Muchas gracias! He estado tratando de agregar un archivo .js personalizado, pero esta es la primera explicación de que se necesitaba register_script.
colkav
Hola, gran tutorial. Tengo un problema al agregar un javascript relacionado con Google Analytics, como se describe aquí:
He puesto el script en la carpeta 'js' de mi tema hijo (después de haber eliminado el html del código).
Cuando cargo la página, sigo recibiendo el error:
ReferenceError: No se puede encontrar la variable: ga
(función anónima)myscript.js:6
...¡y se me acaba de ocurrir que tal vez necesite agregar 'analytics.js' como una dependencia!
Does that sounds right? And if so, how would I add analytics as a dependency for my script? I’ve tried experimenting here to no avail
Shoaib
¿Hay algún plugin para lo mismo... Soy nuevo y no puedo jugar con códigos... Por favor, ayúdame, señor.
xavi
Hola.
¡Gracias por este increíble post tutorial! Pero cuando dices "dónde subir el script" ¿solo puedes definir encabezado o pie de página (¡en todas las páginas web enteras!)? ¿Podrías definir una página específica para cargarlo? Solo lo necesito en una. ¡Gracias de antemano y sigue trabajando! ¡Saludos!
technofranchise
Quiero usar JavaScript o JQuery en mi sitio de WordPress. ¿Alguna idea?
Skye Barcus
Soy un completo novato en js pero sé html. Quiero poner esto en una página de wordpress:
Básicamente, es un widget para unirse a una GoToMeeting. Esto funciona si simplemente lo pones en el cuerpo de una página html, pero en Wordpress, se suprime.
¿Puedes darme una versión "para principiantes" de cómo hacer que esto funcione?
Tyler Longren
En cuanto a la carga de estilos, en la línea 6, wp_register_script, creo que debería ser wp_register_style.
Soporte de WPBeginner
Tyler, no this will work too.
Administrador
Pedro de Carvalho
¿por qué elegiste usar _script en su lugar?
Pali Madra
También me gustaría saber por qué usar _script y no _style. ¿Hay algún beneficio o ambos funcionarán, por lo que se puede usar cualquiera?
Dejan
Me gusta mucho tu sitio, está lleno de consejos útiles, sin embargo, parece que no lo estás haciendo "correctamente" para la cola de CSS, aunque tu título diga eso :=) La forma correcta sería:
wp_register_style( ‘my-css-style’, get_template_directory_uri() . ‘/css/style.css’, array(), ‘1.0’, ‘all’ );
wp_enqueue_style( ‘my-css-style’ );
Sigue con el buen trabajo… ¡Saludos!
Adrian Zumbrunnen
Gracias por el esfuerzo que pones en esto. Simplemente se siente mal tener wp_enque_script para cargar hojas de estilo. WordPress eventualmente podría generar script en lugar de la sintaxis de hoja de estilo para ello.
¿Realmente incrustas de esa manera?
Soporte de WPBeginner
Este tutorial muestra cómo cargar archivos JavaScript y hojas de estilo para tus temas o plugins en WordPress. Si por incrustar te referías a cómo mostramos código en los artículos, entonces usamos el plugin Syntax Highlighter para eso.
Administrador
oiveros
hola, soy algo nuevo en la creación de temas de WordPress, y leyendo sobre este tema, quería preguntarte algo relacionado con esto. Si quiero actualizar el enlace de la biblioteca jquery, ¿cómo lo hago o dónde encuentro el enlace? He estado intentando hacerlo pero no lo encuentro. Gracias de antemano por tu ayuda
Soporte de WPBeginner
Si por actualizar el enlace de la biblioteca jquery, te refieres a agregar jquery desde la biblioteca de Google. WordPress viene con jquery y para cargarlo en tu tema usa esta línea en tu tema:
<?php wp_enqueue_script('jquery'); ?>Administrador
oiveros
okey, entonces si quiero tener el último jquery, ¿simplemente uso esa línea?, porque alguien me dijo que usara un plugin solo para eso, pero quería aprender a hacerlo sin un plugin
oliveros
Gracias por tu respuesta, encontré la publicación relacionada con ese problema aquí en tu sitio.
Mark
Muchas gracias por este tutorial.
Elliott Richmond
Útil Syed, gracias.
Recientemente tuve un problema al cargar un archivo css usando _underscore como framework, aunque la hoja de estilos se llamaba mycustomstyles.css el tema estaba llamando a mycustomstyles.css?ver=xx y el tema no estaba cargando el archivo debido al nombre del archivo al agregar ?ver=xx al final del nombre.
¿Tiene eso que ver con $ver por defecto?