Podemos insertar el siguiente código en el archivo functions.php de nuestro theme, este código también es válido en la construcción de un plugin que requiere un archivo .js.
add_action("wp_enqueue_scripts", "dcms_insertar_archibo_js");
function dcms_insertar_archibo_js(){
wp_register_script('miscript', get_stylesheet_directory_uri(). '/js/archibojs.js', array('jquery'), '1', true );
wp_enqueue_script('miscript');
}
En el código anterior:
- La función add_action usa el Hook wp_enqueue_scripts el cual ejecutará la función dcms_insertar_archibo_js que posteriormente codificaremos.
- La función wp_register_script sirve para registrar el script.
- El primer parámetro es el ID, lo usamos para poner en cola el script, para desregistralo, o para marcar dependencia.
- El segundo parámetro es la ruta en donde esta el archivo archibojs.js, usaremos una función get_template_directory() de WordPress para encontrar la url completa.
- El tercer parámetro es un array y se usa para definir las dependencias, en nuestro caso es dependiente del manejador o ID jquery, quiere decire que nuestro script se debe cargar luego de la librería jQuery por que posiblemente usaremos algunas funciones de jQuery dentro.
- El cuarto parámetro es la versión, esto se concatenará a la url en el código HTML, es muy útil cuando actualizamos nuestro script para que el navegador no mantenga en cache la versión anterior.
- El parámetro final es un booleano, indica si el script se insertará en la parte superior como parte del header o en la parte final del código luego del body, esto es muy útil para optimización, google recomienda insertar los scripts siempre al final (valor true).
- La función wp_enqueue_script sirve para poner en cola el script, es en esta función en donde realmente el script será mostrado en el front-end del sitio, usa como parámetro el manejador o ID definido en el registro.
El código anterior carga el archivo de manera global.
Podemos agregar funciones de comprobación como is_single para cargar este archivo sólo en determinadas páginas; por ejemplo para cargar el archivo .js sólo en el detalle de las entradas, nuestro código quedaría como:
add_action("wp_enqueue_scripts", "dcms_insertar_archibo_js");
function dcms_insertar_archibo_js(){
//Cargar sólo en las entradas
if (is_single()){
wp_register_script('miscript', get_stylesheet_directory_uri(). '/js/archibojs.js', array('jquery'), '1', true );
wp_enqueue_script('miscript');
}
}