Insertar javascript en WordPress de forma correcta

[ 9 octubre 2016 ] [ Autor: Jhon Marreros Guzmán ] [ Themes - Intermedio] [ ]

js

Hay varias maneras de insertar javascript en WordPress, pero no todas son correctas, en este artículo explicaremos detalladamente algunas buenas prácticas para insertar código javascript en nuestro sitio.

1- Insertar javascript usando la funcionalidad del theme

Si sólo quieres insertar una porción de código, esta es la primera opción que debes considerar. Algunos themes tienen integrado un campo en el cual se puede insertar código javascript adicional, por ejemplo para los themes basados en el framework Genesis aparecerá a nivel global, pero también en cada entrada, una caja de texto como se muestra en la siguiente imagen.

2- Insertar código javascript con plugins

En caso tu theme no tenga funcionalidad para insertar código, esta sería la manera más sencilla, . Usaremos por ejemplo el plugin Script n Styles, este plugin no sólo inserta javascript sino también CSS y variaciones de ambos como Less y Cofee Script.

El plugin permite la inserción de código de manera global, en todas las páginas de nuestro sitio y en distintas posiciones.

Para insertar código en una página o entrada específica puede hacerse a través del tab de Hooks, sin embargo la opción más sencilla es a través de la misma pantalla, cuando ingresamos a una entrada veremos que tenemos una sección para añadir código javascript y CSS.

3- Insertar código javascript en un archivo .js existente

En caso quieras evitar el uso de plugins adicionales, podrías evaluar insertar tu código javascript directamente en un archivo .js que ya esta cargando tu theme. Para saber que archivos .js carga nuestro theme podemos verificar el código HTML generado por nuestro sitio y buscar los archivos .js, usualmente se localizan dentro de la carpeta /wp-content/themes/TUTHEME/js/

Tener en cuenta que el código insertado se cargará de manera global siempre que se llame al archivo .js.

4- Insertar un archivo javascript con código

Esta sería la manera definitiva y la más recomendable en caso necesitemos insertar mucho código javascript ya que estaría en un archivo .js independiente.

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_js");

function dcms_insertar_js(){
    
    wp_register_script('miscript', get_template_directory_uri(). '/js/script.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_js que posteriormente codificaremos.
• La función wp_register_script sirve para registrar el script.
  • El primer parámetro es el manejador o 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 script.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_js");

function dcms_insertar_js(){
    //Cargar sólo en las entradas
    if (is_single()){
    	wp_register_script('miscript', get_template_directory_uri(). '/js/script.js', array('jquery'), '1', true );
    	wp_enqueue_script('miscript');
    }
    
}

5- Recomendaciones

• Si decides hacer modificaciones en el archivo .js del theme, documenta estos cambios, ya que podrías perder las modificaciones hechas en una actualización del theme.
• Si usarás el archivo funcions.php de tu theme para insertar un archivo javascript, ten en cuenta que podrías perder las modificaciones en una actualización del theme, evalúa usar child-themes o un plugin de shortcodes para conservar los cambios.
• Si vas a usar jquery dentro de tu script .js asegúrate de que jquery este cargado antes de la llamada al código.

 
¿Aún con dudas?, en el siguiente artículo se detalla cada uno de los puntos tratado anteriormente.

Valora este artículo : (9 votos, promedio: 4,89 de 5)

Cargando…