Cómo cargar archivos JavaScript y CSS de Widgets solo cuando se usan

Question

Cómo cargar archivos JavaScript y CSS de Widgets solo cuando se usan

3 oct 2011, 16:54:51

Vistas: 16.3K

Votos: 15

Me gustaría mantener los archivos javascript y css usados por mi widget en sus propios archivos (y no agregarlos al tema).

Pero no logro que WordPress los cargue cuando el widget realmente está siendo usado en una barra lateral.

He intentado esto:

dentro de la declaración de la Clase, he agregado 2 funciones

class EssentielleRubriquesPosts extends WP_Widget {

// Función para agregar CSS frontend
function addFrontendCss(){
    wp_enqueue_style('erw-frontend-css', ESSENTIELLE_RUBRIQUE_WIDGET_PLUGIN_PATH . 'css/EssentielleRubriqueWidget-frontend.css');
}

// Función para agregar JavaScript frontend
function addFrontendJavascript(){
    wp_register_script('jq-hoverintent', PLUGIN_PATH . 'js/jquery.hoverintent.js', array('jquery'), '1.0',true);
    wp_enqueue_script('jq-hoverintent');
    wp_enqueue_script('jq-tools', PLUGIN_PATH . 'js/jquery.tools.js', array('jquery'),'1.0',true);
    wp_enqueue_script('erw-frontend-js', PLUGIN_PATH . 'js/widget-frontend.js', array('jquery', 'jq-hoverintent', 'jq-tools'),'1.0',true);
}

y dentro de la función widget():

function widget($args, $instance) {
        // Agregar acciones para cargar recursos
        add_action( 'wp_print_scripts', 'addFrontendJavascript' );
        add_action( 'wp_print_styles', 'addFrontendCss' );
}

Pero eso no hace nada...

pixeline

2.88K

widgets wp enqueue script wp enqueue style

Comentarios

¿qué hay sobre esta documentación https://developers.elementor.com/add-custom-functionality/

Juan Solano

13 dic 2018 00:41:23

Todas las respuestas a la pregunta

La mejor solución es registrar tus recursos primero y luego encolar el CSS y JS dentro de la función widget() de tu WP_Widget (encolando directamente, no añadiendo nuevos hooks).

He probado esta solución y funciona en la versión actual de WordPress (4.5.3) - tanto el JS como el CSS se añaden en el pie de página.

<?php
// Registrar tus recursos durante el hook `wp_enqueue_scripts`.
function custom_register_scripts() {
    wp_register_style('erw-frontend-css', '...frontend.css');
    wp_register_script('jq-hoverintent', '...hoverintent.js', ...);
    wp_register_script('jq-tools', '...tools.js', ...);
}
// Usar el hook wp_enqueue_scripts
add_action('wp_enqueue_scripts', 'custom_register_scripts');


class YourWidget extends WP_Widget {
    public function __construct() {
    }

    public function widget( $args, $instance ) {
        // Encolar los recursos necesarios dentro de la función `widget`.
        wp_enqueue_style('erw-frontend-css');
        wp_enqueue_script('jq-hoverintent');
        wp_enqueue_script('jq-tools');

        // Mostrar el contenido del widget.
    }

    public function form( $instance ) {
    }

    public function update( $new_instance, $old_instance ) {
    }
}

Philipp

1.24K

4 ago 2016 14:55:46

Bainternet 67.7K · Accepted Answer · 2011-10-03T17:27:52Z

Los hooks wp_print_scripts y wp_print_styles se ejecutan mucho antes que la función de tu widget, por eso no están funcionando.

Una solución sería incluir los scripts en el footer usando el hook wp_print_footer_scripts, revisa la respuesta de Jan a una pregunta similar

O una solución mucho mejor, mira la respuesta de Sorich a otra pregunta similar

Bainternet

67.7K

3 oct 2011 17:27:52