Breaking

Post Top Ad

Your Ad Spot

miércoles, 25 de marzo de 2020

Cómo agregar correctamente JavaScripts y estilos en WordPress

¿Desea 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á particularmente útil para aquellos que recién comienzan a aprender el tema de WordPress y el desarrollo de complementos.
Agregar correctamente JavaScripts y estilos en WordPress

Error común al agregar scripts y hojas de estilo en WordPress

Muchos nuevos complementos de WordPress y desarrolladores de temas cometen el error de agregar directamente sus scripts o CSS en línea en sus complementos y temas.
Algunos usan la wp_headfunción por error para cargar sus scripts y hojas de estilo.
1
2
3
4 4
5 5
6 6
<?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 agregar scripts en WordPress y genera más conflictos en el futuro.
Por ejemplo, si carga jQuery manualmente y otro complemento carga jQuery a través del método adecuado, entonces jQuery se carga 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 que también pueden causar conflictos.
Dicho esto, echemos un vistazo a la forma correcta de agregar scripts y hojas de estilo.

¿Por qué colocar secuencias de comandos y estilos en WordPress?

WordPress tiene una fuerte comunidad de desarrolladores. Miles de personas de todo el mundo desarrollan temas y complementos para WordPress.
Para asegurarse de que todo funcione correctamente y que nadie pise los dedos de los demás, WordPress tiene un sistema en cola. Este sistema proporciona una forma programable de cargar JavaScripts y hojas de estilo CSS.
Al usar 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 utilizar las bibliotecas JavaScript incorporadas que vienen incluidas 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 colocar correctamente los scripts en WordPress?

Cargar scripts correctamente en WordPress es muy fácil. A continuación se muestra un código de ejemplo que pegaría en su archivo de complementos o en el archivo functions.php de su tema para cargar correctamente los scripts en WordPress.
1
2
3
4 4
5 5
6 6
7 7
8
9 9
10
?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:
Comenzamos registrando nuestro script a través de la wp_register_script()función. Esta función acepta 5 parámetros:
  • $ handle - Handle es el nombre único de su script. El nuestro se llama "my_amazing_script"
  • $ src - src es la ubicación de tu script. Estamos utilizando la función plugins_url para obtener la URL correcta de nuestra carpeta de complementos. Una vez que WordPress encuentre eso, buscará nuestro nombre de archivo amazing_script.js en esa carpeta.
  • $ deps - deps es por dependencia. Como nuestro script usa jQuery, hemos agregado jQuery en el área de dependencia. WordPress cargará automáticamente jQuery 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 como verdadero. Si desea cargar el script en el encabezado, lo haría falso.
Después de proporcionar todos los parámetros wp_register_script, podemos llamar al script en el wp_enqueue_script()que hace que todo suceda.
El último paso es utilizar el gancho de acción wp_enqueue_scripts para cargar realmente el script. Como este es un código de ejemplo, lo hemos agregado justo debajo de todo lo demás.
Si estaba agregando esto a su tema o complemento, entonces puede colocar este gancho de acción donde realmente se requiere el script. Esto le permite reducir la huella de memoria de su complemento.
Ahora, algunos podrían preguntarse ¿por qué vamos a dar un paso adicional para registrar primero el script y luego volver a ponerlo en cola? Bueno, esto permite que otros propietarios de sitios eliminen el registro de su script sin modificar el código central de su complemento.

Poner en cola los estilos correctamente en WordPress

Al igual que los scripts, también puede poner en cola sus hojas de estilo. Mira el ejemplo de abajo:
1
2
3
4 4
5 5
6 6
7 7
<?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_stylepara agregar nuestra hoja de estilo.
Tenga en cuenta que hemos utilizado el wp_enqueue_scriptsgancho de acción para estilos y scripts. A pesar del nombre, esta función funciona para ambos.
En los ejemplos anteriores, hemos utilizado la plugins_urlfunción para señalar la ubicación del guión o el estilo que queríamos poner en cola.
Sin embargo, si está utilizando la función de secuencias de comandos en cola en su tema, simplemente use get_template_directory_uri()en su lugar. Si está trabajando con un tema secundario, úselo get_stylesheet_directory_uri().
A continuación se muestra un código de ejemplo:
1
2
3
4 4
5 5
6 6
7 7
8
9 9
<?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 jacvascript y estilos en WordPress. También puede estudiar el código fuente de los principales complementos de WordPress para algunos ejemplos de código de la vida real.
Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver videos tutoriales de WordPress. También nos puede encontrar en Twitter y Facebook .

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas