JS y CSS personalizado en WordPress

Introducción

En ocasiones vamos a necesitar agregar archivos JS y/o CSS personalizados, y cuando estamos comenzando con WordPress no queda muy claro dónde y cómo podemos hacer ésto, por lo menos a mí me pasó. Por lo tanto aquí va el detalle de lo que debes tener en cuenta para agregar JS y CSS personalizado en WordPress.

Cómo hacerlo

La recomendación oficial para agregar JavaScript en las página públicas es usar la función wp_enqueue_script(). Esta función se encargará de incluir el archivo si es que no se ha agregado previamente y también manejará sus dependencias de manera segura. De manera similar se debe utilizar la función wp_enqueue_style() para agregar tus hojas de estilo en cascada (css).

Para lo cual lo primero que tendremos que hacer es cargar cada uno de los archivos CSS y JS que queremos cargar en las respectivas carpetas definidas en nuestro tema. Por ejemplo para el tema actualmente por defecto twentyfourteen (demo) puedes usar la carpeta js para tus archivos javaScript y la carpeta css para las hojas de estilo en cascada.

Luego tienes que modificar el archivo functions.php, que se encarga de reunir todas las funciones personalizadas del tema, lo que incluye la inserción de scripts y estilos. En este archivo debes incluir lo siguiente (yo lo hice al final del archivo):

/**
 * Enqueue own scripts and styles for the front end.
 */
function own_scripts() {
  // Load the file own-styles.css
  wp_enqueue_style( 'own-styles', get_template_directory_uri() . '/css/own-styles', array(), null );
  
  // Load the file own-scripts.js
  wp_enqueue_script( 'own-scripts', get_template_directory_uri() . '/js/own-scripts', array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'own_scripts' );

Un punto importante a destacar es que los archivos JavaScript idealmente deben ir cargados al final de la página para agilizar el proceso de carga del contenido de la página, para lo cual definimos true en el último parámetro de la función wp_enqueue_script(), lo cual hace que el script se cargue al final y no en la cabecera que es la opción por defecto.

Conclusiones

Realizando lo anteriormente detallado ya verás tus scripts cargados en las páginas públicas. Hay algunos detalles adicionales que se pueden revisar (orden de carga, dependencias entre archivos, etc.) pero quedarán pendientes para una siguiente entrega.

Agregar un comentario

Su dirección de correo no se hará público. Los campos requeridos están marcados *