Encolar estilos y scripts

📌 ¿Qué son `wp_enqueue_style()` y `wp_enqueue_script()`?

wp_enqueue_style() → carga archivos CSS en WordPress.
wp_enqueue_script() → carga archivos JavaScript.

👉 Son “colas de carga” (enqueue) que le dicen a WordPress qué cargar, cuándo y cómo, evitando duplicados y conflictos.

📌 Ejemplo básico con `wp_enqueue_style()`

Supongamos que tienes un archivo de estilos en tu tema:

/wp-content/themes/mi-tema/style.css
/wp-content/themes/mi-tema/assets/css/custom.css

En tu archivo functions.php añadirías:

function mitema_enqueue_styles() {
    // Carga el style.css del tema
    wp_enqueue_style(
        'mi-tema-style', // Identificador único (handle)
        get_stylesheet_uri() // Devuelve la URL de style.css del tema activo
    );

    // Carga otro CSS ubicado en /assets/css/custom.css
    wp_enqueue_style(
        'mi-tema-custom', // Handle único
        get_template_directory_uri() . '/assets/css/custom.css', // URL del archivo
        array('mi-tema-style'), // Dependencias (se carga después de mi-tema-style)
        '1.0.0', // Versión
        'all' // Media: all, screen, print...
    );
}
add_action('wp_enqueue_scripts', 'mitema_enqueue_styles');

🔎 Desglose de parámetros de wp_enqueue_style():

wp_enqueue_style(
    $handle,      // Identificador único obligatorio
    $src,         // URL del archivo CSS
    $deps,        // Array de dependencias (otros estilos que deben cargarse antes)
    $ver,         // Versión (para cache busting, suele usarse filemtime o un número)
    $media        // Medio: 'all', 'screen', 'print', etc.
);

📌 Ejemplo básico con `wp_enqueue_script()`

Supongamos que tienes un archivo:

/wp-content/themes/mi-tema/assets/js/custom.js

En functions.php:

function mitema_enqueue_scripts() {
    // Cargar jQuery (WordPress ya lo incluye pero se debe llamar así)
    wp_enqueue_script('jquery');

    // Cargar custom.js
    wp_enqueue_script(
        'mi-tema-custom-js', // Handle único
        get_template_directory_uri() . '/assets/js/custom.js', // Ruta al JS
        array('jquery'), // Dependencias: se carga después de jQuery
        '1.0.0', // Versión
        true // true = carga en footer, false = header
    );
}
add_action('wp_enqueue_scripts', 'mitema_enqueue_scripts');

🔎 Desglose de parámetros de wp_enqueue_script():

wp_enqueue_script(
    $handle,   // Identificador único
    $src,      // URL del archivo JS
    $deps,     // Dependencias (ej. array('jquery'))
    $ver,      // Versión
    $in_footer // true = antes del </body>, false = en <head>
);

📌 Buenas prácticas

Nunca uses <link> o <script> directo en header.php o footer.php → rompe compatibilidad con plugins y cache.
Usa siempre handles únicos para evitar conflictos.
Aprovecha las dependencias para que WordPress gestione el orden de carga.
Usa filemtime() como versión para evitar problemas de cache:

wp_enqueue_style(
    'mi-tema-custom',
    get_template_directory_uri() . '/assets/css/custom.css',
    array(),
    filemtime(get_template_directory() . '/assets/css/custom.css')
);

📌 Ejemplo completo (CSS + JS)

function mitema_enqueue_assets() {
    // Estilos
    wp_enqueue_style(
        'bootstrap-css',
        'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css',
        array(),
        '5.3.0'
    );

    wp_enqueue_style(
        'mi-tema-style',
        get_stylesheet_uri(),
        array('bootstrap-css'),
        filemtime(get_stylesheet_directory() . '/style.css')
    );

    // Scripts
    wp_enqueue_script(
        'bootstrap-js',
        'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js',
        array('jquery'),
        '5.3.0',
        true
    );

    wp_enqueue_script(
        'mi-tema-custom-js',
        get_template_directory_uri() . '/assets/js/custom.js',
        array('bootstrap-js'),
        filemtime(get_template_directory() . '/assets/js/custom.js'),
        true
    );
}
add_action('wp_enqueue_scripts', 'mitema_enqueue_assets');

📌 Diferencias de Hooks

wp_enqueue_scripts → Para cargar en el front-end.
admin_enqueue_scripts → Para cargar en el dashboard.
login_enqueue_scripts → Para la pantalla de login.

Ejemplo para login:

function mitema_login_styles() {
    wp_enqueue_style(
        'mi-tema-login-css',
        get_template_directory_uri() . '/assets/css/login.css'
    );
}
add_action('login_enqueue_scripts', 'mitema_login_styles');

✅ En resumen:

wp_enqueue_style() → para CSS.
wp_enqueue_script() → para JS.
Se usan en hooks específicos.
Te dan control de dependencias, versiones y ubicación de carga.

WordPress

Copilot

Estadística con Python

Git

Docker

React

WordPress

Currículum

Encolar estilos y scripts

📌 ¿Qué son wp_enqueue_style() y wp_enqueue_script()?

📌 Ejemplo básico con wp_enqueue_style()

📌 Ejemplo básico con wp_enqueue_script()