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 crear imágenes destacadas con tamaños personalizados en WordPress
Cómo crear imágenes destacadas con tamaños personalizados en WordPress
Con ésta cuestión nos podemos encontrar muy a menudo sobre todo si estamos desarrollando temas a medida. En nuestro diseño vendrán definidas unas imágenes con…
Cómo definir una plantilla diferente por categoría para el detalle de los posts
Cómo definir una plantilla diferente por categoría para el detalle de los posts
En WordPress se usa la plantilla single.php para el detalle de los posts. Podemos crear plantillas para los posts de un custom post type concreto…
Shortcake: User Interface para los shortcodes de WordPress
Shortcake: User Interface para los shortcodes de WordPress
Shortcake es una nueva funcionalidad de WordPress que permitirá establecer una interfaz amigable para los shortcodes. Posibilitará insertar un shortcode como si de un elemento…
Hacer una migración de dominio en WordPress sin perder posicionamiento
Hacer una migración de dominio en WordPress sin perder posicionamiento
En el artículo anterior vimos cómo migrar WordPress de hosting y de dominio. Puede darse el caso de que tu dominioantiguo.com estuviera bien posicionado y…