Blog sobre desarrollo WordPress en Español Desarrollo WordPress en Español
js css

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:

 

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:

 

Proceso de cargar los archivos

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

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 ); ?>

<?php 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:

 

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:

¿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().

Puede que también te interese

Forzar el uso de contraseñas seguras en WordPress
Forzar el uso de contraseñas seguras en WordPress
Cuando se habla de seguridad en WordPress (o en internet en general) se suele comentar que uno de los mayores bugs de seguridad se encuentra…
La famosa instalación de WordPress en 30 minutos
La famosa instalación de WordPress en 30 minutos
Con este título tuve el honor de participar como ponente en la pasada WordCamp Sevilla 2016, celebrada en la Escuela de Organización Industrial (EOI). Antes…
WP-CLI Parte 3, trabajando con posts
WP-CLI Parte 3, trabajando con posts
1. Instalación y primeros pasos 2. Instalando WordPress y primeros pasos y configuraciones 3. Trabajando con posts 4. Trabajando con usuarios 5. Trabajando con la…
Creando un plugin para WordPress parte 3: Escribiendo el plugin
Creando un plugin para WordPress parte 3: Escribiendo el plugin
1. Creando un plugin para WordPress: Planificación y planteamiento 2. Creando un plugin para WordPress: Estilo del Código 3. Creando un plugin para WordPress: Escribiendo…