Cada sitio de WordPress necesita un tema para funcionar correctamente. Una de las mejores cosas de WordPress es que tiene miles de temas disponibles que mejorarán la interfaz de su sitio web.
Independientemente del tema de WordPress que tenga, utilizará estilos y scripts para mejorar el aspecto y la funcionalidad de su sitio web.
Si bien ayuda a estilizar su tema y agregar funcionalidad adicional, hay una forma incorrecta y correcta de agregar estilos y scripts a WordPress. La forma incorrecta es agregarlos a su archivo de encabezado de WordPress o wp_head. La forma correcta es usar un método llamado cola.
En esta publicación, explicaremos qué es la cola, cómo funciona y cómo usar correctamente el proceso para agregar los scripts y estilos necesarios a su tema de WordPress.
Hacer cola en WordPress
La cola es el proceso de cargar archivos JavaScript o archivos JS, incluidos scripts y estilos, en WordPress de una manera que le permite usarlos en cualquier momento sin tener que volver a escribir el código.
Al poner en cola sus scripts, le está diciendo a WordPress qué recursos desea agregar. WordPress vinculará automáticamente estos recursos en el encabezado y pie de página.
Cómo funcionan las colas en WordPress
Así es como funciona la cola.
Primero registra su script o estilo: informe a WordPress que su recurso está presente.
Después de decirle a WordPress que su recurso está ahí, el segundo paso es ponerlo en cola. Luego, WordPress genera automáticamente el recurso en la ubicación adecuada: encabezado o pie de página.
¿Por qué es un proceso de dos pasos?
Es posible que solo deba colocar el recurso en ciertas páginas. Por ejemplo, puede crear un código abreviado que muestre una cartera simple de productos populares.
No todos los sitios de WordPress se benefician de esto. Solo necesita una cartera de productos en la página de servicios o en la página de la tienda.
Para lograr el resultado deseado, primero puede registrar un script y luego ponerlo en cola para que contenga el código abreviado solo en las páginas que desea. Gracias a esto, WordPress ahorra recursos y acelera tu sitio web.
Los conceptos básicos de wp_enqueue_script
Ahora sabemos qué es hacer cola y cómo funciona. Vamos a repasar lo básico wp_enqueue_script el gancho que usará para cargar los recursos.
En el gancho de acción, puede usar varias funciones e incrustarlas en functions.php:
- wp_register_script ()
- wp_enqueue_script ()
- wp_register_style ()
- wp_enqueue_style ()
Ejemplo de wp_enqueue_script
aqui tienes uno practico wp_enqueue_script Un ejemplo de cómo se ve esto en el archivo style.css:
add_action( 'wp_enqueue_scripts', 'custom_plugin_assets' );
function custom_plugin_assets() {
wp_register_style( 'my-portfolio', plugins_url( '/css/portfolio.css' , __FILE__ ) );
wp_register_script( 'my-portfolio', plugins_url( '/js/portfolio.js' , __FILE__ ) );wp_enqueue_style( 'my-portfolio' );
wp_enqueue_script( 'my-portfolio' );
}
El ejemplo anterior muestra cómo registrar y poner en cola recursos dentro de la misma función en dos pasos.
También puede usar la función de cola para registrar y poner en cola los scripts simultáneamente. Puedes hacer esto por:
add_action( 'wp_enqueue_scripts', 'custom_plugin_assets' );
function custom_plugin_assets() {
wp_enqueue_style( 'my-portfolio', plugins_url( '/css/portfolio.css' , __FILE__ ) );
wp_enqueue_script( 'my-portfolio', plugins_url( '/js/portfolio.js' , __FILE__ ) );
}WordPress tiene una forma integrada de gestionar las dependencias a través del tercer argumento de las funciones wp_register_style() y wp_register_script().
wp_enqueue_script jquery
El tercer parámetro es una matriz de scripts y estilos registrados que se cargan primero antes de que el recurso solicitado se ponga en cola. En el ejemplo anterior, necesitaríamos cargar wp_enqueue_script jQuery primero.
Podemos hacer esto agregando «array (‘jquery’)» a la función de secuencia de comandos en cola.
add_action( 'wp_enqueue_scripts', 'custom_plugin_assets' );
function custom_plugin_assets() {
wp_enqueue_script( 'my-portfolio', plugins_url( '/js/portfolio.js' , __FILE__ ), array( 'jquery' ) );
}jQuery ya está incluido en WordPress, por lo que no necesitamos cargarlo por separado.
El mismo principio se aplica a cualquier otra dependencia que tenga su recurso. Por ejemplo, si desea abrir todos los elementos de su cartera en una caja de luz, también debe agregar una matriz de caja de luz. De lo contrario, sus recursos no se cargarán.
Cómo usar wp_enqueue_script en el pie de página
Puede poner sus scripts en una cola en el encabezado o pie de página de su sitio web. Es mejor poner en cola los scripts en su sitio wp_footer siempre que pueda, ya que mejora el tiempo de carga de su sitio.
Esta es la razón por.
El navegador carga todos los scripts y estilos en el área del encabezado cuando se carga el sitio. Cuando se cargan estos scripts, los visitantes ven una página en blanco.
Cuantas más secuencias de comandos y estilos haya en el encabezado de su sitio web, más tardará su navegador en revisarlos antes de que pueda continuar cargando la página.
Puede evitar tiempos de carga más largos agregando «CIERTO‘a la función. Así es como se vería este script personalizado en JavaScript:
add_action( 'wp_enqueue_scripts', 'custom_plugin_assets' );
function custom_plugin_assets() {
wp_enqueue_script( 'my-portfolio', plugins_url( '/js/portfolio.js' , __FILE__ ), array( 'jquery' ), true );
wp_enqueue_script( 'my-portfolio-lightbox', plugins_url( '/js/portfolio-lightbox.js' , __FILE__ ), array( 'my-portfolio', 'jquery' ), true );
}dejando de lado»CIERTO‘el parámetro le indicará a WordPress que cargue sus scripts y estilos en el encabezado, lo que afectará negativamente la velocidad de su sitio web.
Usando wp_enqueue_scripts en WordPress
La cola de secuencias de comandos es importante porque puede personalizar cosas como la navegación, los widgets, los complementos, los temas y mucho más, además de los métodos HTML tradicionales.
Gracias a los pasos descritos aquí, puede poner correctamente en cola los scripts sin afectar los tiempos de carga. Puede trabajar de manera eficiente en el desarrollo de WordPress, incluidos temas y complementos.
Esto le facilitará la obtención de temas, subtemas y archivos de complementos de WordPress contenidos en el repositorio oficial y otras tiendas premium que ofrecen productos relacionados con WordPress.
