Cuando aprende HTML por primera vez, la única forma de insertar cualquier tipo de interactividad es usar etiquetas de script 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 etiquetas de secuencias de comandos allí mismo en el cuerpo mismo. Eso está bien para aprender, pero es una práctica bastante mala una vez que pasa al desarrollo avanzado de WordPress. Ingrese la función de puesta en cola .
Una vez que pasa por sitios web simples de una página, esas prácticas para principiantes pueden crear algunas situaciones realmente difíciles. A medida que agrega más y más JavaScript, su sitio web se vuelve cada vez más lento. Actualizarlo lleva más tiempo. Eventualmente, ha creado una gran pila de JavaScript-getti y no importa cuánto lo intente, esa pila de fideos no se deshará.
Afortunadamente, puede usar la función de poner en cola en WordPress para agregar estilos y scripts que el CMS se ocupa de usted. Todo el desorden se maneja por ti. Si bien no es tan simple como pegar directamente el guión 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 es demasiado obstinado , definitivamente hay una serie de mejores prácticas que debe conocer
Y wp_enqueue_scripts está a la vanguardia de esas prácticas.
La razón principal por la que querrá usar wp_enqueue es para mantener su sitio funcionando 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 significa es que escribe una sola pieza de código para ejecutar (su fragmento de JavaScript), y usa wp_enqueue para llamarlo en lugar de tener que volver a escribir/pegar todo cada vez que lo necesite.
Eso es. Impresionante.
Aún más sorprendente, el uso del método en cola hace que WordPress mismo inserte las etiquetas _script_ en el encabezado y pie de página donde pertenecen automáticamente, cargándolos sin tener que ingresarlos en cada página por separado.
Sintaxis y parámetros de WP Enqueue
Poner en cola los scripts realmente no es tan difícil. Si tiene la experiencia suficiente para trabajar con JavaScript en primer lugar, las funciones de PHP que utiliza para poner en cola serán pan comido.
En una etiqueta de secuencia de comandos típica , importará el archivo .js externo directamente o pegará el fragmento de código completo y largo 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 básicos y sintaxis.
El Codex da esto como el código de puesta en cola base:
|
01
|
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); |
Con todo, es bastante simple desglosar en bits utilizables por parámetros.
- wp_enqueue_script() es la función all que pondrá todo el código en la página a la que va.
- $handle es un nombre único para el propio script.
- $src representa la URL del archivo .js real que está poniendo en cola.
- $deps son los $handle de cualquier dependencia que requiera.
- $ver será el número de versión. Si no se especifica ninguno, se agrega automáticamente la versión de instalación de WP.
- $in_footer o $in_header le dice a WordPress dónde colocar 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 obtiene un trato de dos por uno con los dos. Básicamente, registrar un script es lo mismo que nombrar una función en JavaScript.
Si bien no es necesario, registrar sus scripts puede facilitarle mucho la vida 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 mediante su $handle , como verá en el siguiente ejemplo.
Registrarás tu código así:
|
01
|
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', false, null, $in_footer); |
Luego, cada vez que lo necesite nuevamente, siempre puede devolverlo así:
|
01
|
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 increíble de creación de shortcode: si registra el script en un shortcode que usa _wp_enqueue__, solo se usará cuando el shortcode lo sea. Sin embargo, si solo lo llama poniéndolo en cola, se cargará incluso cuando no se use el código abreviado.
Puedes leer todo sobre el método en el Codex.
Además, los autores de complementos deben poner en cola los scripts si quieren incluirlos en el repositorio de WordPress.org, así que si eso está en su plato… mejor que se pongan en cola.
Poniendo todo junto
Implementar el código es fácil. Simplemente suelte 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 se combinan las cosas.
Normalmente usaría algo que se ve así:
|
01
|
<script type="text/javascript" src="jquery.js"></script> |
Una vez que aprenda a usar enqueue_scripts_ , verá algo más como esto:
|
01
02
03
04
05
|
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 forma parte de WordPress para delinear el orden de los próximos 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 te hacen hurgar en hacer más con WordPress que antes.
Los conceptos básicos que todos aprendimos sobre la implementación de secuencias de comandos cuando comenzamos el desarrollo web aún funcionan, pero no siempre son la mejor manera de hacer las cosas. Parte de la belleza de que WordPress se construya en PHP es que puede incorporar este tipo de lógica a su trabajo y, al mismo tiempo, mantener la misma estructura básica y flujo de trabajo que hubiera tenido de todos modos.
Imagen en miniatura del artículo de hanss / shutterstock.com