wp_enqueue_scripts: cargar CSS y JavaScript solo donde se usan
Cómo registrar y cargar CSS y JavaScript de WordPress únicamente en las páginas necesarias.
- Revisado
- Compatibilidad
- WordPress 2.8+
- Lectura
- 2 min
- Autor
- Gabriel — infinit8
wp_enqueue_scripts es la acción correcta para cargar estilos y scripts del frontend. Una condición bien colocada reduce bytes, evita conflictos y conserva la gestión de dependencias y versiones de WordPress.
Registrar y encolar no son lo mismo
Registrar declara un asset y sus dependencias; encolar solicita que aparezca en la página. Puedes registrar de forma común y encolar únicamente cuando una plantilla o bloque lo necesite.
Carga condicional en una plantilla
add_action(
'wp_enqueue_scripts',
function (): void {
if (!is_page_template('templates/calculator.php')) {
return;
}
$path = get_theme_file_path('assets/calculator.js');
$url = get_theme_file_uri('assets/calculator.js');
wp_enqueue_script(
'i8-calculator',
$url,
[],
(string) filemtime($path),
['in_footer' => true, 'strategy' => 'defer']
);
}
);Versionar sin romper la caché
filemtime() es útil en desarrollo y despliegues donde el archivo está disponible localmente. En pipelines de producción también puedes inyectar una versión de build estable.
Errores habituales
- Insertar etiquetas script manualmente en el footer.
- Cargar el bundle en todas las páginas.
- Usar una dependencia sin declararla.
- Calcular
filemtime()sobre un archivo inexistente. - Añadir
asynca código que depende del orden.
Preguntas frecuentes
¿El hook sirve también para CSS?
Sí. A pesar del nombre, es el hook recomendado para estilos y scripts del frontend.
¿Debo usar defer en todos los scripts?
No de forma automática. Revisa dependencias, orden de ejecución y si el script debe estar disponible antes de interactuar.
Referencias y revisión
Contenido contrastado con documentación oficial. Comprueba siempre el comportamiento en un entorno de pruebas antes de desplegar cambios.