Cum să încarci fișierele JavaScript și CSS ale unui Widget doar dacă sunt folosite?

Question

Cum să încarci fișierele JavaScript și CSS ale unui Widget doar dacă sunt folosite?

3 oct. 2011, 16:54:51

Vizualizări: 16.3K

Voturi: 15

Doresc să păstrez fișierele JavaScript și CSS folosite de widget-ul meu în fișiere separate (și nu să le adaug în tema).

Dar nu reușesc să fac WordPress să le încarce doar atunci când widget-ul este folosit într-un sidebar.

Am încercat următoarea abordare:

În interiorul declarației de clasă, am adăugat 2 funcții:

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);

}

Și în interiorul funcției widget():

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

Dar acest cod nu funcționează...

pixeline

2.88K

widgeturi wp enqueue script wp enqueue style

Comentarii

ce zici de aceste documentații https://developers.elementor.com/add-custom-functionality/

Juan Solano

13 dec. 2018 00:41:23

Toate răspunsurile la întrebare

Cea mai bună soluție este să înregistrați mai întâi resursele și apoi să adăugați CSS-ul și JS-ul în funcția widget() a WP_Widget (adăugare directă, nu prin adăugarea de noi hook-uri).

Am testat această soluție și funcționează în versiunea curentă de WordPress (4.5.3) - atât JS cât și CSS sunt adăugate în subsolul paginii.

<?php
// Înregistrați resursele în timpul hook-ului `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', ...);
}
// Folosiți hook-ul wp_enqueue_scripts
add_action('wp_enqueue_scripts', 'custom_register_scripts');


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

    public function widget( $args, $instance ) {
        // Adăugați resursele necesare în interiorul funcției `widget`.
        wp_enqueue_style('erw-frontend-css');
        wp_enqueue_script('jq-hoverintent');
        wp_enqueue_script('jq-tools');

        // Afișați conținutul widget-ului.
    }

    public function form( $instance ) {
    }

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

Philipp

1.24K

4 aug. 2016 14:55:46

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

wp_print_scripts și wp_print_styles sunt declanșate mult înainte de funcția widget-ului tău, de aceea nu funcționează.

O soluție pentru aceasta ar fi să incluzi scripturile în subsolul paginii folosind hook-ul wp_print_footer_scripts, verifică răspunsul lui Jan la o întrebare similară

Sau o soluție mult mai elegantă, verifică răspunsul lui Sorich la o altă întrebare similară

Bainternet

67.7K

3 oct. 2011 17:27:52