Advanced Scripts - Como cargar archivos JS y CSS

El proceso implica colocar y/o cargar los archivos en una carpeta de wordpress y hacer referencia a ellos en el código adecuado, proceso que a menudo necesita de la conexión FTP a nuestro sitio.

Con ayuda de plugins, como Advanced Scripts, este proceso se puede facilitar enormente a la vez que disponemos en la misma herramienta de la facultad de activar o desactivar tales archivos y/o scripts a nuestro gusto y conveniencia.
Además, plugins como este nos ofrecen la capacidad de cargar archivos externos, como por ejemplo de CDN, sin tener que subirlos a nuestro server.

En este post vamos a ver cómo se puede usar Advanced Scripts para cargar los archivos CSS y JS de GLightbox.

Damos por hecho que tenemos el plugin Advanced Scripts instalado y activado en nuestra web.
Debemos disponer de la URL desde donde cargar el archivo o archivos que necesitamos, en nuestro ejemplo está en https://github.com/biati-digital/glightbox ; nos desplazamos hacia abajo y encontramos las URLs que nos interesan (ver imagen siguiente).
localizacion

Es decir, los archivos y sus correspondientes rutas que nos interesan son:

Para el CSS

  • https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css 

Para el JS:

  • https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js

Vamos a empezar con el archivo JS y apoyándonos en imágenes. Copiamos la url del archivo JS, no vamos al Advanced Scripts y lo pegamos en la casilla de texto URL, en Title le ponemos un título que nos venga bien para luego recordar en nuestro caso hemos utilizado JS GlightBox, pero esto es a gusto y discreción de cada uno; en el apartado Type seleccionamos JavaScript: Load from URLLocation: Front-endHooks: wp_footerPriority:10. Ahora clickamos en la flecha que hay a la derecha de la casilla donde pone "1 condition set" y se nos abrirá la ventana para fijar condicionales(ver imagen).

ventana condicionales
Aqui, en la parte de la derecha fijamos las condiciones en Expression - true y is_page(). Se aprecia mas claramente en la imagen siguiente, donde ya está todo configurado y listo. Ahora click en el botón Save and Activate
js advanced
Para el CSS sería lo mismo solo que cambiaría, obviamente la ruta al archivo, y Hooks que pasa a ser wp_head quedando ello tal y como se aprecia en la siguiente imagen.
No olvidarse de hacer click en el botón Save and Activate
css advanced
Con lo que el panel derecho de listado de scripts  nos quedaría como se muestra en la imagen siguiente, siempre y cuando, claro está,  no tengamos mas scripts que los que hemos hablado en este post.
listo y activado
Para los que tengan dudas como se establecen las condiciones estos son los pasos en imágenes.
ventana condicionales
condicion1
condicion2
Para finalizar, un último consejo: 
   Tener en cuenta el orden al cargar varios archivos JS cuando pueda que uno funcione correctamente necesite que otro esté previamente cargado. Si no se ha pasado por alto el anterior punto siempre se pueden ordenar de forma correcta arrastrando los scripts a su posición adecuada.
arrastrando
databasefile-emptyrocketthumbs-uplayers