¿Quiere aprender a agregar correctamente JavaScripts y hojas de estilo CSS en WordPress? Muchos usuarios de bricolaje a menudo cometen el error de llamar directamente a sus scripts y hojas de estilo en complementos y temas. En este artículo, le mostraremos cómo agregar correctamente JavaScripts y hojas de estilo en WordPress. Esto será especialmente útil para aquellos que recién están comenzando a aprender el desarrollo de complementos y temas de WordPress.
Error común al agregar scripts y hojas de estilo en WordPress
Contents
Muchos desarrolladores de temas y complementos de WordPress nuevos cometen el error de agregar directamente sus scripts o CSS en línea en sus complementos y temas. Algunas personas utilizan por error la función wp_head para cargar sus scripts y hojas de estilo.
Si bien el código anterior puede parecer más simple, esta no es la forma correcta de agregar scripts en WordPress y causa más conflictos en el futuro. Por ejemplo, si carga jQuery manualmente y otro complemento carga jQuery a través del método apropiado, entonces jQuery se carga dos veces. Si se carga en todas las páginas, afectará negativamente la velocidad y el rendimiento de WordPress. También es posible que las dos versiones sean diferentes, lo que también puede causar conflictos. Dicho esto, echemos un vistazo a 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 en todo el mundo están desarrollando temas y complementos para WordPress. Para asegurarse de que todo funcione sin problemas y que nadie pise los pies de otras personas, WordPress tiene un sistema de colas. Este sistema proporciona una forma programable de cargar JavaScripts y hojas de estilo CSS. Usando las funciones wp_enqueue_script y wp_enqueue_style, le dice a WordPress cuándo cargar un archivo, dónde cargarlo y cuáles son sus dependencias. Este sistema también permite a los desarrolladores usar las bibliotecas 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 temas y complementos.
¿Cómo poner correctamente los scripts en cola en WordPress?
Cargar scripts correctamente en WordPress es muy fácil. A continuación se muestra un ejemplo de código que pegaría en su archivo de complementos o en el archivo functions.php de su tema para cargar correctamente los scripts en WordPress. ? función php wpb_adding_scripts () {wp_register_script (‘my_amazing_script’, plugins_url (‘amazing_script.js’, __FILE__), array (‘jquery’), ‘1.1’, true); wp_enqueue_script (‘mi_script_amazing_script’); } add_action (‘wp_enqueue_scripts’, ‘wpb_adding_scripts’); ?>
Explicación:
Comenzamos registrando nuestro script a través de la función wp_register_script (). Esta función acepta 5 parámetros:
- $ manejar – Identificador es el nombre exclusivo de su secuencia de comandos. El nuestro se llama «my_amazing_script»
- $ src – src es la ubicación de su script. Usamos la función plugins_url para obtener la URL correcta de nuestra carpeta de complementos. Una vez que WordPress encuentre esto, buscará nuestro nombre de archivo amazing_script.js en esa carpeta.
- $ deps – Deps es para adicciones. Dado que nuestro script usa jQuery, agregamos jQuery en el área de dependencia. WordPress cargará automáticamente jQuery si aún no está cargado 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 establecemos el valor en verdadero. Si desea cargar el script en el encabezado, lo hará falso.
Después de proporcionar todos los parámetros en wp_register_script, podemos simplemente llamar al script en wp_enqueue_script () que hace que todo suceda. El último paso es usar el gancho de acción wp_enqueue_scripts para cargar realmente el script. Dado que este es un código de muestra, lo hemos agregado justo debajo de todo lo demás. Si lo agregó a su tema o complemento, puede colocar este gancho de acción donde realmente se necesita el script. Esto le permite reducir la huella de memoria de su complemento. Ahora, algunos podrían preguntarse por qué vamos a hacer el paso adicional para guardar el script primero y luego ponerlo en cola. Bueno, esto permite que otros propietarios de sitios cancelen el registro de su script sin modificar el código base de su complemento.
Estilos de cola correctamente en WordPress
Al igual que los scripts, también puede poner en cola sus hojas de estilo. Eche un vistazo al siguiente ejemplo:
En lugar de usar wp_enqueue_script, ahora estamos usando wp_enqueue_style para agregar nuestra hoja de estilo. Tenga en cuenta que usamos el gancho de acción wp_enqueue_scripts para estilos y scripts. A pesar del nombre, esta característica funciona para ambos. En los ejemplos anteriores, usamos la función plugins_url para señalar la ubicación del script o estilo que queríamos poner en cola. Sin embargo, si está utilizando la función de scripts de cola en su tema, simplemente use get_template_directory_uri () en su lugar. Si está trabajando con un tema hijo, use get_stylesheet_directory_uri (). Aquí hay un código de muestra:
Esperamos que este artículo le haya ayudado a aprender cómo agregar correctamente jacvascript y estilos en WordPress. También puede estudiar el código fuente de los mejores complementos de WordPress para obtener ejemplos de código real. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.
