¿Qué es WP Enqueue y cómo se usa?

Cuando aprende HTML por primera vez, la única forma en que sabe cómo insertar cualquier tipo de interactividad es utilizando etiquetas de secuencia de comandos en el encabezado o pie de página de la página para establecer el tipo y la fuente de un archivo JavaScript externo. (O si realmente está aprendiendo, toda la función JS entre las etiquetas de script allí mismo en el cuerpo. Eso está bien para aprender, pero es una práctica bastante mala una vez que pasa al desarrollo avanzado de WordPress. Ingrese a la función de poner en cola .

Una vez que pasa de sitios web simples de una página, esas prácticas para principiantes pueden crear algunas situaciones realmente complicadas. A medida que comienza a agregar más y más JavaScript, su sitio web se vuelve cada vez más lento. Actualizarlo lleva más tiempo. Con el tiempo, ha creado una gran cantidad de JavaScript-getti y no importa cuánto lo intente, esa pila de fideos no se desenredará.

Afortunadamente, puede usar la función de poner en cola en WordPress para agregar estilos y scripts que el CMS se encarga de usted. Todo el desorden se maneja por ti. Si bien no es tan simple como pegar directamente el script o los estilos que desea en el encabezado o pie de página de cada página, es la forma correcta de manejarlo. WordPress no tiene muchas opiniones, definitivamente hay una serie de mejores prácticas que debe conocer

Y wp_enqueue_scripts está a la vanguardia de esas prácticas.

¿Cual es el problema?

La razón principal por la que querrá usar wp_enqueue es para que su sitio funcione sin problemas y rápidamente. La velocidad de la página es importante y usar los mismos scripts y estilos una y otra vez no ayuda. En absoluto.

Afortunadamente, wp_enqueue es un ejemplo de programación funcional. Todo lo que eso significa es que escribe una sola pieza de código para que se ejecute (su fragmento de JavaScript), y usa wp_enqueue para llamarlo en lugar de tener que reescribir / pegar todo cada vez que lo necesite.

Esa es. Impresionante.

Aún más asombroso, usar el método enqueue hace que WordPress inserte las etiquetas _script_ en el encabezado y pie de página donde pertenecen automágicamente, cargándolas sin tener que ingresarlas en cada página por separado.

Sintaxis y parámetros de WP Enqueue

Poner en cola scripts realmente no es tan difícil. Si es lo suficientemente inteligente para trabajar con JavaScript en primer lugar, las funciones PHP que usa para poner en cola serán muy sencillas.

En una etiqueta de secuencia de comandos típica, importará el archivo .js externo directamente o pegará el fragmento de código largo y completo entre las etiquetas. (Esto también es lo que está haciendo si pega algo en el módulo de código Divi o en los widgets de texto o HTML personalizado de WP).

Solo necesita conocer algunos parámetros y sintaxis básicos.

El Codex da esto como el código de puesta en cola base:

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

Considerándolo todo, es bastante simple dividir en bits utilizables por parámetros.

• wp_enqueue_script () es la función que pondrá todo el código en la página donde va.
• $ handle es un nombre único para el script en sí.
• $ src representa la URL del archivo .js real que está poniendo en cola.
• $ deps son los $ manejadores de cualquier dependencia que este requiera.
• $ ver será el número de versión. Si no se especifica ninguno, la versión de instalación de WP se agrega automáticamente.
• $ in_footer o $ in_header le dice a WordPress dónde poner su script.

La documentación completa para poner en cola los scripts se puede ver en el Codex.

Atención, estudiantes: ¡El registro de WP comienza ahora!

Además de _wp_enqueue__, WP también tiene un método práctico llamado _wp_register__. Ambos métodos usan los mismos parámetros y sintaxis, por lo que realmente obtienes un trato de dos por uno con el par de ellos. Básicamente, registrar un script es lo mismo que nombrar una función en JavaScript.

Si bien no es necesario, registrar sus scripts puede hacer su vida mucho más fácil porque no tendrá que declararlos como dependencias más adelante. Ya estarán registrados. Por lo tanto… _wp_register__. Una vez que se registra un script, puede volver a llamarlo por su identificador $ , como verá en el ejemplo siguiente.

Registrarás tu código así:

wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', false, null, $in_footer);

Luego, cuando lo necesite nuevamente, siempre puede llamarlo así:

wp_enqueue_script( 'jquery' ); 

Además, el registro significa que no tiene que cargar un script incluso cuando no es necesario. WPMU tiene un ejemplo impresionante de creación de shortcode: si registra el script en un shortcode que usa _wp_enqueue__, solo se usará cuando el shortcode sea. Sin embargo, si solo lo llama poniéndolo en cola, se cargará incluso cuando no se use el código corto.

Puede leer todo sobre el método en el Codex.

Además, se requiere que los autores de complementos pongan en cola los scripts si quieren que se incluyan en el repositorio de WordPress.org, por lo que si eso está en su plato ... será mejor que se pongan en cola.

Poniendo todo junto

Implementar el código es fácil. Simplemente coloque un fragmento como el que se muestra a continuación en su functions.php . y WordPress se encarga del resto. Quiero decir, este es un fragmento realmente básico para llamar a jQuery, pero puedes ver cómo funcionan las cosas juntas.

Normalmente usaría algo que se parece a esto:

<script type="text/javascript" src="jquery.js"></script>

Una vez que aprenda a usar enqueue_scripts_ , verá algo más parecido a esto:

add_action('wp_enqueue_scripts', 'add_scripts');
function add_scripts(){
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', false, null, true);
    wp_enqueue_script( 'jquery' ); 
}

Ahora, observe en el código anterior cómo usa la función add_scripts () _ que ya es parte de WordPress para delinear el orden de los siguientes pasos. Primero, la función wp_register_ obtiene todos los detalles especificados y coloca el script en el pie de página, y luego usa wp_enqueue para finalmente llamarlo una vez que todo está configurado.

Terminando

Eso es realmente todo lo que hay que hacer. Bueno, eso no es cierto, poner en cola es una parte bastante arraigada de WP. Pero esos son los conceptos básicos que le permiten hacer más con WordPress de lo que podría haber hecho antes.

Los conceptos básicos que todos aprendimos sobre la introducción de scripts cuando comenzamos el desarrollo web todavía funcionan, pero no siempre son la mejor manera de hacer las cosas. Parte de la belleza de WordPress construido en PHP es que puede incorporar este tipo de lógica en su trabajo sin dejar de mantener la misma estructura básica y flujo de trabajo que habría tenido de todos modos.

Imagen en miniatura del artículo por hanss / shutterstock.com