¿Quiere aprender cómo agregar correctamente JavaScript 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 plugins y temas. En este artículo, le mostraremos cómo agregar correctamente JavaScript y hojas de estilo en WordPress. Esto será especialmente útil para aquellos que recién están comenzando a aprender a desarrollar temas y plugins de WordPress.
Error común al agregar scripts y hojas de estilo en WordPress
Muchos desarrolladores de temas y plugins de WordPress nuevos cometen el error de agregar directamente sus scripts o CSS en línea en sus plugins y temas.
Algunos usan el archivo por error wp_head función para cargar sus propios 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 simple, 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 plugin carga jQuery a través del método correcto, jQuery se carga dos veces. Si se carga en todas las páginas, 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, 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 de todo el mundo desarrollan temas y plugins de WordPress.
Para asegurarse de que todo funcione correctamente y de que nadie pise los pies de otro, WordPress tiene un sistema de cola. Este sistema proporciona una forma programable de cargar hojas de estilo JavaScript y 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 de JavaScript integradas 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 plugins.
¿Cómo poner correctamente los scripts en cola en WordPress?
Cargar scripts correctamente en WordPress es muy sencillo. A continuación se muestra un código de muestra para pegar en el archivo de plugin de su tema o en el archivo functions.php para cargar correctamente los scripts 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 grabando nuestro guión a través del wp_register_script() función. 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. 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 adicciones. Dado que nuestro script usa jQuery, hemos agregado 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, debe hacerlo falso.
Después de proporcionar todos los parámetros en wp_register_script, podemos simplemente llamar al script en wp_enqueue_script() eso hace que todo suceda.
El último paso es usar el gancho de acción wp_enqueue_scripts para cargar realmente el script. Como este es un código de muestra, lo hemos agregado justo debajo de todo lo demás.
Si lo estaba agregando a su tema o plugin, puede colocar este gancho de acción donde realmente se requiere el script. Esto le permite reducir la huella de memoria de su plugin.
Ahora, algunos pueden preguntarse por qué estamos pasando por el paso adicional de grabar el guión primero y luego ponerlo en cola. Bueno, esto permite que otros propietarios de sitios cancelen el registro de su script sin cambiar el código principal de su plugin.
Agregue estilos correctamente en WordPress
Al igual que los scripts, también puede agregar sus propias hojas de estilo. Mira el ejemplo de abajo:
<?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.
Tenga en cuenta que usamos wp_enqueue_scripts gancho de acción para estilos y scripts. A pesar del nombre, esta característica funciona para ambos.
En los ejemplos anteriores, usamos plugins_url para señalar la posición del guión o estilo que queríamos agregar.
Sin embargo, si está utilizando la función de cola de scripts en su tema, simplemente use get_template_directory_uri() en vez de. Si está trabajando con un tema hijo, use get_stylesheet_directory_uri().
Aquí hay un código de muestra:
<?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 le haya ayudado a aprender cómo agregar correctamente jacvascript y estilos en WordPress. Es posible que también desee estudiar el código fuente de los mejores plugins de WordPress para obtener algunos ejemplos de código de la vida real.
¿Te ha resultado útil??
0 / 0