Come caricare i file JavaScript + CSS del Widget solo se utilizzati?

3 ott 2011, 16:54:51
Visualizzazioni: 16.3K
Voti: 15

Vorrei mantenere i file JavaScript e CSS utilizzati dal mio widget nei loro file separati (senza aggiungerli al tema).

Ma non riesco a far sì che WordPress li carichi solo quando il widget è effettivamente utilizzato in una sidebar.

Ho provato questo approccio:

All'interno della dichiarazione della Classe, ho aggiunto 2 funzioni

class EssentielleRubriquesPosts extends WP_Widget {

function addFrontendCss(){
    wp_enqueue_style('erw-frontend-css', ESSENTIELLE_RUBRIQUE_WIDGET_PLUGIN_PATH . 'css/EssentielleRubriqueWidget-frontend.css');
}
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);

}

e all'interno della funzione widget():

function widget($args, $instance) {
        add_action( 'wp_print_scripts', 'addFrontendJavascript' );
        add_action( 'wp_print_styles', 'addFrontendCss' );
}

Ma questo approccio non funziona...

1
Commenti

cosa ne pensi di questa documentazione https://developers.elementor.com/add-custom-functionality/

Juan Solano Juan Solano
13 dic 2018 00:41:23
Tutte le risposte alla domanda 2
0

wp_print_scripts e wp_print_styles sono attivati molto prima della tua funzione widget, ecco perché non funzionano.

Una soluzione a questo problema sarebbe includere gli script nel footer utilizzando l'hook wp_print_footer_scripts, dai un'occhiata alla risposta di Jan a una domanda simile

Oppure, per una soluzione più elegante, consulta la risposta di Sorich a un'altra domanda simile

3 ott 2011 17:27:52
0

La soluzione migliore è registrare prima i tuoi asset e poi accodare il CSS e JS all'interno della funzione widget() del tuo WP_Widget (accodare direttamente, non aggiungendo nuovi hook).

Ho testato questa soluzione e funziona nella versione corrente di WordPress (4.5.3) - sia il JS che il CSS vengono aggiunti nel footer della pagina.

<?php
// Registra i tuoi asset durante l'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', ...);
}
// Usa l'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 ) {
        // Accoda gli asset necessari all'interno della funzione `widget`.
        wp_enqueue_style('erw-frontend-css');
        wp_enqueue_script('jq-hoverintent');
        wp_enqueue_script('jq-tools');

        // Mostra i contenuti del widget.
    }

    public function form( $instance ) {
    }

    public function update( $new_instance, $old_instance ) {
    }
}
4 ago 2016 14:55:46