Cómo cargar correctamente los archivos JS y CSS si estás desarrollando un tema o plugin a medida

En éste artículo vamos a tratar sobre cómo cargar correctamente los archivos JavaScript y hojas de estilo CSS si estás desarrollando un tema o plugin a medida en WordPress.

Lo primero que debemos conocer es el proceso a seguir para la correcta carga y uso de éstos archivos:

Registrar => Poner en cola => Cargar los archivos

Es importante conocer el proceso para hacer un uso correcto de los archivos. Vamos a verlo poniendo un caso práctico de ejemplo: supongamos que queremos cargar diferentes JS en función de la sección de la web en la que nos encontramos, para obtener un rendimiento óptimo de la página web sin cargar archivos innecesarios si no vamos a hacer uso de ellos en otras secciones.

WordPress nos provee de varias funciones para realizar el proceso, similares para cargar los JS y CSS, estas son:

Proceso de Registro

wp_register_script() y wp_register_style(). Éstas funciones nos permiten registrar los archivos JS y CSS, asignarles un nombre único y añadirlos al “init” para tenerlos a disposición más adelante. Por ejemplo:

<?php

function my_register_scripts() {
  wp_register_script( 'js1', get_template_directory_uri() . '/js/js1.js' );
  wp_register_script( 'js2', get_template_directory_uri() . '/js/js2.js' );
  wp_register_script( 'js3', get_template_directory_uri() . '/js/js3.js' );
}
add_action( 'init', 'my_register_scripts' );

Proceso de poner en cola

wp_enqueue_script() y wp_enqueue_style(). Estas funciones nos sirven para poner en cola de carga nuestros archivos. Siguiendo la lógica del ejemplo, vamos a ver cómo cargar el js2 si nos encontramos en el front page, el js3 si estamos en una plantilla de página, y el js1 para el resto del sitio:

<?php

function my_enqueue_scripts() {
  if ( is_front_page() ) {
    wp_enqueue_script( 'js2' );
  } elseif ( is_page_template( 'page.php' ) ) {
    wp_enqueue_script( 'js3' );
  } else {
    wp_enqueue_script( 'js1' );
  }
}

Proceso de cargar los archivos

Usamos el hook wp_enqueue_scripts tanto para los scripts como para los estilos.

add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

Con ésto conseguiriamos cargar los JS necesarios para cada sección de nuestro site. Si por el contrario, deseas cargar los JS o CSS siempre, puedes saltarte el primer paso, y poner en cola directamente el archivo correspondiente, y añadirlo al gancho wp_enqueue_scripts.

Veamos ahora en profundidad estas funciones y sus opciones:

wp_register_script() y wp_register_style()

<?php

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_style( $handle, $src, $deps, $ver, $media ); 

Como vemos son muy parecidas. Los parámetros que recibe son:

• $handle => Nombre del script u hoja de estilo (requerido). Debe ser único para identificarlo correctamente
• $src => URL de la ruta donde se encuentra el archivo js ó css
• $deps => Array de “handles” de los que depende, es decir, nuestro JS ó CSS se cargará después de sus dependientes
• $ver => Si deseamos especificar la versión de nuestro script o css
• $in_footer => (sólo aplicable a wp_register_script). Por defecto tiene el valor “false” y carga los scripts en el head de nuestra página. Si lo seteamos a “true”, cargará los scripts en el footer
• $media => (sólo aplicable a wp_register_style). Especifica el “media” para el que se define el css: ‘all’, ‘screen’, ‘handheld’, ‘print’…

Función adicional para cargar estilos en línea

Muchas veces estamos desarrollando un tema o un plugin donde ofrecemos opciones de configuración, por ejemplo un color de fondo para la cabecera. Podemos hacer uso de la función wp_add_inline_style para agregar nuestro estilo en línea:

<?php 

function my_styles_method() {
  $color = get_theme_mod( 'my-custom-color' ); //E.g. #FF0000
  $custom_css = ".mycolor{background: {$color};}";

  wp_add_inline_style( 'custom-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'my_styles_method' );

Consideraciones a tener en cuenta para CSS o JS para navegadores obsoletos como IE8

Es muy común agregar CSS y JS para intentar compatibilizar al máximo navegadores obsoletos como IE8 a las nuevas tendencias y tecnologías. Para ello solemos recurrir a código tipo éste en el head de nuestro documento:

<!--[if lt IE 9]>
  <script src="<?php echo get_template_directory_uri();?>/js/html5shiv.min.js"></script>
  <script src="<?php echo get_template_directory_uri();?>/js/respond.min.js"></script>
<![endif]-->

¿Pero que pasa cuando alguno de estos CSS o JS es dependiente de jQuery? Para no romper el manejo de dependencias y añadir CSS y JS con condicionales IE8, podemos seguir utilizando las funciones wp_enqueue_style() y wp_enqueue_script() y hacer uso del método add_data().

<?php

function my_ie8_scripts() {
  wp_enqueue_style( 'style-ie8', get_stylesheet_directory_uri() . "/css/ie8.css" );
  wp_styles()->add_data( 'style-ie8', 'conditional', 'lt IE 9' );

  wp_enqueue_script( 'js-ie8', get_stylesheet_directory_uri() . "/js/ie8.js" );
  wp_scripts()->add_data( 'js-ie8', 'conditional', 'lt IE 9' );
}
add_action( 'wp_enqueue_scripts', 'my_ie8_scripts' );

• « Cómo integrar los estilos de…
• Cómo reemplazar la hoja de… »