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

Cómo mostrar los posts más vistos o populares en WordPress
Cómo mostrar los posts más vistos o populares en WordPress
Probablemente en alguna ocasión te hayas encontrado con la necesidad de mostrar un listado de los posts más vistos o más populares de tu sitio.…
Seguridad WordPress: permisos de archivos y carpetas
Seguridad WordPress: permisos de archivos y carpetas
La regla general nos dice que los permisos deben ser 755 para las carpetas y 644 para los archivos. Además recomendable poner el wp-config.php y…
AJAX en WordPress, de un modo más moderno
AJAX en WordPress, de un modo más moderno
En el post anterior veíamos cómo hacer una petición AJAX en WordPress de una manera tradicional. Ahora veremos cómo resolver el mismo ejemplo de la…
WP-CLI Parte 6, search replace, un comando imprescindible
WP-CLI Parte 6, search replace, un comando imprescindible
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…