Encolar scripts y estilos en el frontend

WordPress tiene su propio sistema para añadir CSS y JavaScript al sitio llamado enqueue. Es incorrecto añadir etiquetas <link> o <script> directamente en las plantillas. El sistema de enqueue gestiona dependencias, versionado y evita duplicados cuando varios plugins cargan el mismo recurso.

Casos de uso: cargar el CSS de tu tema o plugin, añadir una librería JS con sus dependencias, pasar la URL de AJAX o un nonce de seguridad al JavaScript.

<?php
add_action( 'wp_enqueue_scripts', 'mi_plugin_assets' );
function mi_plugin_assets() {
    // Estilo CSS
    wp_enqueue_style(
        'mi-plugin-style',
        plugin_dir_url( __FILE__ ) . 'css/style.css',
        array(),
        '1.0.0'
    );

    // Script JS
    wp_enqueue_script(
        'mi-plugin-script',
        plugin_dir_url( __FILE__ ) . 'js/main.js',
        array( 'jquery' ),
        '1.0.0',
        true
    );

    // Pasar datos de PHP a JS
    wp_localize_script( 'mi-plugin-script', 'miPlugin', array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'nonce'   => wp_create_nonce( 'mi_nonce' ),
    ) );
}

¿Qué hace cada parte?

• wp_enqueue_scripts: hook del frontend donde se deben encolar todos los assets. Equivalente a admin_enqueue_scripts para el admin.
• wp_enqueue_style(): registra y encola un CSS. Parámetros: handle único, URL, dependencias (otros handles), versión.
• wp_enqueue_script(): igual para JS. El último parámetro true lo carga en el footer en lugar del head, mejorando el rendimiento.
• array( ‘jquery’ ): declara jQuery como dependencia. WordPress lo cargará automáticamente antes que tu script.
• wp_localize_script(): inyecta un objeto JavaScript con datos de PHP. El objeto miPlugin estará disponible globalmente en tu JS como miPlugin.ajaxurl y miPlugin.nonce.
• plugin_dir_url( __FILE__ ): devuelve la URL del directorio del archivo actual, necesaria para construir las URLs de los assets.