Código de un plugin para WordPress que mueve todos los archivos JavaScript y CSS al pie de página y los carga de manera asíncrona siempre que sea posible.
Funcionalidades:
✅ Mueve los scripts (.js) al footer y los hace asíncronos cuando es seguro.
✅ Mueve los estilos (.css) al footer y los hace asíncronos cuando es posible.
✅ Excluye automáticamente los scripts y estilos esenciales de WordPress para evitar errores.
Pasos para instalarlo:
- Crea una carpeta en
wp-content/plugins/con el nombreasync-footer-assets. - Dentro de esa carpeta, crea un archivo llamado
async-footer-assets.php. - Copia y pega el siguiente código en ese archivo.
- Activa el plugin desde el panel de administración de WordPress.
Código del Plugin:
<?php
/**
* Plugin Name: Async Footer Assets
* Description: Mueve todos los scripts y estilos al pie de página y los carga de forma asíncrona cuando sea posible.
* Version: 1.0
* Author: Juan Jose Fernandez Duran
* License: GPL2
*/
if (!defined('ABSPATH')) {
exit; // Evitar acceso directo.
}
class AsyncFooterAssets {
public function __construct() {
add_action('wp_enqueue_scripts', [$this, 'modify_assets'], 999);
}
public function modify_assets() {
global $wp_scripts, $wp_styles;
// Lista de scripts y estilos que NO se deben mover al footer
$exclude_scripts = ['jquery', 'jquery-core', 'jquery-migrate'];
$exclude_styles = ['dashicons', 'admin-bar'];
// Mover los scripts al footer y hacerlos async/defer
foreach ($wp_scripts->queue as $handle) {
if (!in_array($handle, $exclude_scripts)) {
$wp_scripts->add_data($handle, 'group', 1);
$wp_scripts->add_data($handle, 'async', true);
}
}
// Mover los estilos al footer
foreach ($wp_styles->queue as $handle) {
if (!in_array($handle, $exclude_styles)) {
$wp_styles->add_data($handle, 'group', 1);
$wp_styles->add_data($handle, 'async', true);
}
}
}
}
new AsyncFooterAssets();
Explicación del Código:
- Evita que se muevan scripts esenciales (
jquery, etc.), para que no haya errores. - Mueve el resto de los scripts al footer y los hace asíncronos (
async). - Mueve los estilos CSS al footer y los hace asíncronos si es seguro.
Consideraciones:
- No todos los scripts pueden ejecutarse correctamente con
async. - Algunos estilos pueden necesitar estar en el
<head>, por lo que puede ser necesario ajustar la lista de exclusión. - Si un script falla, revisa la consola del navegador y agrégalo a
$exclude_scripts.
