¿Necesita encontrar formas de agregar correctamente JavaScripts y hojas de estilo CSS en WordPress? Muchos clientes de bricolaje suelen cometer el error de consultar sus scripts y hojas de estilo inmediatamente en complementos y temas. En este artículo, le presentaremos la forma correcta de agregar correctamente JavaScripts y hojas de estilo en WordPress. Esto podría ser especialmente útil para muchos que recién están comenzando a enseñar el tema de WordPress y el crecimiento de complementos.

Agregue JavaScripts y estilos correctamente en WordPress

Error generalizado al incrustar scripts y hojas de estilo en WordPress

Muchos nuevos complementos y creadores de temas de WordPress cometen el error de agregar sus scripts o CSS en línea a sus complementos y temas de inmediato.

Algunos usan erróneamente el wp_head ejecutar para cargar sus scripts y hojas de estilo.

<?php
add_action('wp_head', 'wpb_bad_script');
operate wpb_bad_script() {
echo 'jQuery goes right here';
}
?>

Si bien el código anterior puede parecer más simple, es la forma incorrecta de incrustar scripts en WordPress y conduce a conflictos adicionales tarde o temprano.

Por ejemplo, para aquellos que cargan jQuery manualmente y otro complemento carga cientos de jQuery con la metodología correcta, entonces jQuery se cargará dos veces. Independientemente de si se carga en todos los sitios web, puede tener un impacto negativo en la velocidad y el rendimiento de WordPress.

Suele ser factible que las 2 sean variantes completamente diferentes que también pueden desencadenar conflictos.

Ahora verifiquemos la forma correcta de incluir scripts y hojas de estilo.

¿Por qué poner en cola scripts y estilos en WordPress?

WordPress tiene un entorno de desarrollo robusto. Miles de personas de todo el mundo desarrollan temas y complementos para WordPress.

WordPress tiene un sistema de colas para que todo funcione correctamente y nadie se ponga de pie. Este método 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 método también permite a los constructores aprovechar al máximo las bibliotecas de JavaScript integradas que vienen con WordPress, en lugar de volver a cargar el mismo script de terceros varias veces. Esto reduce el tiempo de carga de los sitios web y ayuda a evitar conflictos con diferentes temas y complementos.

¿La mejor forma de poner scripts correctamente en WordPress?

Cargar scripts correctamente en WordPress podría ser muy fácil. A continuación se muestra un código de instancia que debe insertar en su archivo de complemento o en el archivo functions.php de su tema para cargar scripts en WordPress correctamente.

?php
operate 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' ); 
?>

Aclaración:

Empezamos registrando nuestro script con el wp_register_script() trabaja. Este proceso acepta 5 parámetros:

  • $ comercia con – Tratar con es la identidad distintiva de su guión. El nuestro se llama «my_amazing_script»
  • $ src – src es la situación de su script. Usamos la operación plugins_url para obtener la URL correcta de nuestra carpeta de complementos. Tan pronto como WordPress encuentre esto, buscará en esta carpeta nuestro nombre de archivo amazing_script.js.
  • $ deps – deps significa adicción. Dado que nuestro script usa jQuery, ahora hemos agregado jQuery dentro del área de dependencia. WordPress carga jQuery de forma rutinaria si aún no está cargado durante el posicionamiento.
  • $ ver – Esa es la variedad de modelos en nuestro guión. Este parámetro simplemente no es necesario.
  • $ in_footer – Necesitamos cargar nuestro script en el pie de página, por lo que ahora hemos establecido el valor en verdadero. Si quisiera cargar el script dentro del encabezado, definitivamente lo haría mal.

Después de haber ingresado todos los parámetros en los parámetros wp_register_script, podemos nombrar el script en wp_enqueue_script() por el cual todas las cosas suceden.

El paso final es usar el gancho de acción wp_enqueue_scripts para cargar realmente el script. Dado que este es un código de instancia, ahora lo hemos agregado correctamente entre todas las otras cosas.

Una vez que haya incluido esto en su tema o complemento, puede colocar ese gancho de movimiento donde definitivamente se necesita el script. De esta manera, puede reducir la huella de memoria de su complemento.

Ahora, algunos pueden preguntarse por qué damos el paso adicional de registrar el script primero y luego ponerlo en la cola. Efectivamente, esto permite a varios propietarios de sitios web cerrar sesión en su script sin cambiar el código central de su complemento.

Cola de especies correctamente en WordPress

De forma similar a los scripts, también puede poner en cola sus hojas de estilo. Ver la instancia en:

<?php
operate 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' ); 
?>

Como sustituto del uso wp_enqueue_script, de hecho usamos wp_enqueue_style para agregar nuestra hoja de estilo.

Descubre que hemos usado ahora wp_enqueue_scripts Gancho de movimiento para todo tipo y guiones. Independientemente de la identidad, este proceso funciona para todos.

En los ejemplos anteriores, ahora hemos utilizado plugins_url Trabajamos para adaptarnos a la situación del guión o modelo que teníamos que poner en cola.

Sin embargo, si está utilizando los scripts de puesta en cola en su tema, simplemente use get_template_directory_uri() como un reemplazo. Si está trabajando con un tema de bebé, use get_stylesheet_directory_uri().

A continuación se muestra un código de instancia:

<?php
 
operate 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 texto le haya ayudado a descubrir formas de agregar correctamente javascript y tipos en WordPress. También es posible que deba investigar el código de entrega de los principales complementos de WordPress para obtener algunos ejemplos reales de códigos de vida.