Comment charger les fichiers Widget javascript + css uniquement s'ils sont utilisés?

13

Je voudrais conserver les styles javascript et css utilisés par mon widget dans leurs propres fichiers (et ne pas les ajouter au thème).

Mais je n'arrive pas à obtenir WordPress pour les ajouter lorsque le widget est réellement utilisé sur une barre latérale.

J'ai essayé ça:

à l'intérieur de la déclaration de classe, j'ai ajouté 2 fonctions

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

}

et à l'intérieur de la fonction widget ():

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

Mais cela ne fait rien ...

pixeline
la source
Qu'en est-il de cette documentation developers.elementor.com/add-custom-functionality
Juan Solano

Réponses:

5

La meilleure solution consiste à enregistrer d'abord vos actifs, puis à mettre en file d'attente le CSS et le JS dans la widget()fonction de votre WP_Widget (directement à mettre en file d'attente, pas en ajoutant de nouveaux crochets).

J'ai testé cette solution et elle fonctionne dans la version actuelle de WordPress (4.5.3) - le JS et le CSS sont ajoutés dans le pied de page.

<?php
// Register your assets during `wp_enqueue_scripts` hook.
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', ...);
}
// Use wp_enqueue_scripts hook
add_action('wp_enqueue_scripts', 'custom_register_scripts');


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

    public function widget( $args, $instance ) {
        // Enqueue needed assets inside the `widget` function.
        wp_enqueue_style('erw-frontend-css');
        wp_enqueue_script('jq-hoverintent');
        wp_enqueue_script('jq-tools');

        // Output widget contents.
    }

    public function form( $instance ) {
    }

    public function update( $new_instance, $old_instance ) {
    }
}
Philipp
la source